/* [nexora] «Наши работы» на /development: кейс с цифрами (широкая карточка) и стеклянные чипы цифр.
   Карточка становится широкой, только если в описании есть строка цифр [[… | …]] — остальные кейсы не меняются. */
.nx-dev-root .nx-dev-case--feature { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.nx-dev-root .nx-dev-case--feature .nx-dev-case__media { position: relative; flex: 0 0 56%; align-self: stretch; aspect-ratio: auto; min-height: 320px; background: #0f1220; }
/* медиа заполняет всю левую часть карточки, без полос */
.nx-dev-root .nx-dev-case--feature .nx-dev-case__media img,
.nx-dev-root .nx-dev-case--feature .nx-dev-case__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.nx-dev-root .nx-dev-case--feature .nx-dev-case__body { flex: 1 1 auto; padding: 26px 30px; display: flex; flex-direction: column; justify-content: center; }
.nx-dev-root .nx-dev-case--feature .nx-dev-h3 { font-size: 24px; }
.nx-dev-root .nx-dev-case--feature .nx-dev-text { font-size: 14.5px; line-height: 1.6; }
.nx-dev-root .nx-dev-case__stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.nx-dev-root .nx-dev-case__stats li {
    margin: 0; padding: 7px 13px; border-radius: 999px;
    font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; white-space: nowrap;
    color: var(--nx-dev-text, #e9ebf3);
    background: linear-gradient(145deg, rgba(139, 147, 255, .14), rgba(255, 255, 255, .03));
    border: 1px solid rgba(139, 147, 255, .26);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@media (max-width: 991px) {
    .nx-dev-root .nx-dev-case--feature { flex-direction: column; }
    .nx-dev-root .nx-dev-case--feature .nx-dev-case__media { flex: none; width: 100%; min-height: 0; aspect-ratio: 16 / 9; }
    .nx-dev-root .nx-dev-case--feature .nx-dev-case__body { padding: 22px 24px 26px; }
}
/* видео кейса: стеклянная кнопка Play по центру; после клика — нативные контролы */
.nx-dev-root .nx-dev-case__media--video { position: relative; overflow: hidden; }
.nx-dev-root .nx-dev-case__video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0b0d14; }
.nx-dev-root .nx-dev-case__media--video.is-playing .nx-dev-case__video { object-fit: cover; object-position: center; } /* без полос и во время просмотра; полный кадр — кнопка «во весь экран» */
/* нативный полноэкранный режим — кадр целиком */
.nx-dev-root .nx-dev-case__video:fullscreen,
.nx-dev-root .nx-dev-case__media--video.is-playing .nx-dev-case__video:fullscreen { object-fit: contain; background: #000; }
.nx-dev-root .nx-dev-case__video:-webkit-full-screen { object-fit: contain; background: #000; }
.nx-dev-root .nx-dev-case__play {
    position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
    width: 84px; height: 84px; padding: 0; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 34px; line-height: 1;
    background: linear-gradient(145deg, rgba(139, 147, 255, .38), rgba(16, 19, 32, .55));
    border: 1px solid rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7), 0 0 0 7px rgba(139, 147, 255, .12);
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.nx-dev-root .nx-dev-case__play i { margin-left: 4px; }
.nx-dev-root .nx-dev-case__play:hover { transform: translate(-50%, -50%) scale(1.06); background: linear-gradient(145deg, rgba(139, 147, 255, .55), rgba(197, 139, 255, .35)); box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .7), 0 0 0 9px rgba(139, 147, 255, .16); }
.nx-dev-root .nx-dev-case__play:focus-visible { outline: 2px solid #c58bff; outline-offset: 4px; }
.nx-dev-root .nx-dev-case__play[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .nx-dev-root .nx-dev-case__play { transition: none; } }
@media (max-width: 640px) {
    .nx-dev-root .nx-dev-case__play { width: 64px; height: 64px; font-size: 26px; }
    .nx-dev-root .nx-dev-case--feature .nx-dev-h3 { font-size: 20px; }
    .nx-dev-root .nx-dev-case__stats li { font-size: 12px; padding: 6px 11px; }
}
/* появление: тот же reveal секции (nx-dev-studio.js ставит .nx-dev-reveal/.is-in и задержку по общему индексу).
   Широкий кейс идёт первым (0 мс), ряд под ним — слева направо 0/80/160 мс, как было до добавления кейса. */
#nx-dev-portfolio .nx-dev-grid > .nx-dev-case--feature.nx-dev-reveal { transition-delay: 0ms !important; }
#nx-dev-portfolio .nx-dev-case--feature ~ .nx-dev-case.nx-dev-reveal:nth-child(3n+2) { transition-delay: 0ms !important; }
#nx-dev-portfolio .nx-dev-case--feature ~ .nx-dev-case.nx-dev-reveal:nth-child(3n+3) { transition-delay: 80ms !important; }
#nx-dev-portfolio .nx-dev-case--feature ~ .nx-dev-case.nx-dev-reveal:nth-child(3n+4) { transition-delay: 160ms !important; }
/* бейджи кейса с иконками (OpenCart / AUR Build / ключ): лёгкий подъём, иконка в цвет бренда, мягкое кольцо */
#nx-dev-portfolio .nx-dev-tag--ico {
    --nx-tag-c: #8b93ff;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px 4px 8px; line-height: 1.2; cursor: default;
    transition: transform .28s cubic-bezier(.2,.7,.2,1), color .28s ease, border-color .28s ease, background-color .28s ease, box-shadow .28s ease;
}
#nx-dev-portfolio .nx-dev-tag--ico svg { width: 14px; height: 14px; flex: 0 0 14px; display: block; fill: currentColor; color: rgba(205, 210, 255, .78); transition: color .28s ease, transform .28s ease, filter .28s ease; }
#nx-dev-portfolio .nx-dev-tag--ico .ph { font-size: 14px; line-height: 1; width: 14px; color: rgba(205, 210, 255, .78); transition: color .28s ease, transform .28s ease, filter .28s ease; }
#nx-dev-portfolio .nx-dev-tag--shop { --nx-tag-c: #23a1d1; }
#nx-dev-portfolio .nx-dev-tag--ai { --nx-tag-c: #8e8cff; }
#nx-dev-portfolio .nx-dev-tag--rent { --nx-tag-c: #f3c97a; }
#nx-dev-portfolio .nx-dev-tag--ai svg { color: #8e8cff; } /* лого AUR Build всегда в цвете */
#nx-dev-portfolio .nx-dev-tag--ico:hover {
    transform: translateY(-2px);
    color: #eef0ff;
    border-color: color-mix(in srgb, var(--nx-tag-c) 55%, transparent);
    background-color: color-mix(in srgb, var(--nx-tag-c) 14%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-tag-c) 14%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--nx-tag-c) 55%, transparent);
}
#nx-dev-portfolio .nx-dev-tag--ico:hover svg,
#nx-dev-portfolio .nx-dev-tag--ico:hover .ph { color: var(--nx-tag-c); transform: scale(1.08); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--nx-tag-c) 50%, transparent)); }
@media (hover: none) {
    #nx-dev-portfolio .nx-dev-tag--ico:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    #nx-dev-portfolio .nx-dev-tag--ico, #nx-dev-portfolio .nx-dev-tag--ico svg, #nx-dev-portfolio .nx-dev-tag--ico .ph { transition: none; }
    #nx-dev-portfolio .nx-dev-tag--ico:hover, #nx-dev-portfolio .nx-dev-tag--ico:hover svg, #nx-dev-portfolio .nx-dev-tag--ico:hover .ph { transform: none; }
}