/* ========================================================
   КЕЙСЫ — сетка на /cases и страница кейса /case?id=...
   Подключается после seo-pages.css и использует его токены
   (--line, --panel, --accent, --radius-*, --ease ...).
   ======================================================== */

/* --- Шапка на страницах кейсов: справа «Оставить заявку», затем EN --------- */
.header__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* --- Страница /cases: только заголовок и сетка --------------------------- */
.cases-page { padding-top: clamp(20px, 2.4vw, 32px); }

.cases-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px 24px;
    margin-bottom: 20px;
}

/* Заголовок «Кейсы» убран из вёрстки: страница и так называет себя —
   хлебными крошками, тайтлом и самой сеткой. Но h1 нужен поиску и
   скринридерам, поэтому не удаляем узел, а прячем его визуально. */
.cases-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Заголовок и поиск — одна строка; категории занимают следующую целиком.
   Нейтральная обёртка остаётся в HTML для существующего рендера. */
.cases-tools {
    display: contents;
}

.case-search {
    justify-self: end;
    width: min(100%, 300px);
    min-width: 0;
}

/* Строка поиска повторяет геометрию кнопки-фильтра: та же высота,
   та же пилюля, тот же контур — в ряду они читаются одним элементом управления. */
.case-search__field {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.case-search__field:hover { border-color: var(--accent-line); color: var(--muted-strong); }
.case-search__field:focus-within {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--muted-strong);
}

.case-search__field > svg { flex: 0 0 auto; }

.case-search input {
    appearance: none;
    flex: 1;
    width: 100%;
    min-width: 0;
    border: 0;
    padding: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    line-height: 38px;
}

.case-search input:focus { outline: none; }
.case-search input::placeholder { color: var(--muted); }
/* У type="search" есть свой крестик — прячем его, у нас своя кнопка. */
.case-search input::-webkit-search-cancel-button { display: none; }

.case-search__clear {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.case-search__clear[hidden] { display: none; }

.case-search__clear:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.case-search__clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Фильтры категорий (опционально, если на странице есть [data-case-filters]) --- */
.case-filter[data-filter="video"],
.case-card[data-category="video"] { --category-color: #f2bd55; }

.case-filter[data-filter="service"],
.case-card[data-category="service"] { --category-color: #63d7ee; }

.case-filter[data-filter="ai"],
.case-card[data-category="ai"] { --category-color: #b997ff; }

.case-filter[data-filter="motion"],
.case-card[data-category="motion"] { --category-color: #ff83c8; }

.case-filter[data-filter="photo"],
.case-card[data-category="photo"] { --category-color: #83dda0; }

.case-filter[data-filter="design"],
.case-card[data-category="design"] { --category-color: #ff9978; }

.case-filter[data-filter="event"],
.case-card[data-category="event"] { --category-color: #71aaff; }

.case-filters {
    grid-column: 1 / -1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.case-filter {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted-strong);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}

.case-filter:hover { transform: translateY(-2px); border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }
.case-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.case-filter .count {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.case-filter.active {
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    border-color: transparent;
    color: #141008;
    box-shadow: 0 10px 30px rgba(229, 179, 70, 0.22);
}

.case-filter.active .count { color: rgba(20, 16, 8, 0.6); }

.case-filter[data-filter]:not([data-filter="all"]).active {
    background: var(--category-color);
    border-color: transparent;
    color: #11100d;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--category-color) 22%, transparent);
}

.case-filter[data-filter]:not([data-filter="all"]).active .count {
    color: rgba(17, 16, 13, 0.58);
}

/* --- Сетка карточек ----------------------------------------------------- */
.case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.case-card {
    margin: 0;
}

.case-card[hidden] { display: none; }

.case-card__link {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md);
    border: 0; /* рамку рисует ::after точно по внешнему краю — свой бордер дал бы второй контур */
    background: var(--panel);
    overflow: hidden;
    transition:
        background-color 0.7s var(--ease),
        box-shadow 0.7s var(--ease);
}

/* Рамка карточки — отдельный слой поверх содержимого. Если рисовать её бордером
   самого блока, обрезанное скруглением превью «наезжает» на линию и она рвётся. */
/* Штрих — кольцо box-shadow, а не border: бордер на дробном DPR (125–150 %) прилипает
   к пиксельной сетке и на прямых участках выходит толще, чем на скруглениях. */
.case-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--line);
    pointer-events: none;
    transition: box-shadow 0.7s var(--ease);
}

.case-card__link:hover::after,
.case-card__link:focus-visible::after { box-shadow: inset 0 0 0 1px rgba(229, 179, 70, 0.75); }

/* Внимание: внутри карточки ничего не трансформируем и не фильтруем —
   transform/filter/mix-blend-mode у детей скруглённого overflow:hidden
   создают отдельные слои, и Chrome рисует по их краю светлые швы. */

.case-card__link:hover,
.case-card__link:focus-visible {
    background: var(--panel-strong);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.5),
        0 0 56px rgba(229, 179, 70, 0.20);
    outline: none;
}

.case-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Картинка чуть больше своего окна и заходит за его края на 2px со всех сторон —
   субпиксельный зазор между штрихом и верхом превью больше не просвечивает.
   Сделано отступами, а не transform, чтобы не плодить слоёв внутри скругления. */
.case-thumb img {
    display: block;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    max-width: none;
    margin: -2px;
    object-fit: cover;
}

/* Ролик при наведении лежит поверх постера и проявляется по классу is-on —
   его вешает скрипт, когда пошёл первый кадр. Затемнение (::after) рисуется
   после содержимого, поэтому остаётся над видео и подпись по-прежнему читается. */
.case-thumb__clip {
    position: absolute;
    inset: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s var(--ease);
}

.case-thumb__clip.is-on { opacity: 1; }

/* Золотая дымка по краям карточки: обычный радиальный градиент без blend-режима.
   Проявляется при наведении и, пока курсор на карточке, медленно «дышит». */
.case-card__link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(115% 90% at 50% 50%, rgba(229, 179, 70, 0) 40%, rgba(229, 179, 70, 0.22) 78%, rgba(244, 210, 122, 0.36) 100%),
        radial-gradient(60% 45% at 50% 100%, rgba(229, 179, 70, 0.18), rgba(229, 179, 70, 0) 100%);
    transition: opacity 0.9s var(--ease);
}

.case-card__link:hover::before,
.case-card__link:focus-visible::before {
    opacity: 1;
    animation: caseHaze 3.4s ease-in-out 0.9s infinite;
}

/* Цикл стартует с opacity: 1 — ровно там, где закончилось проявление, без рывка */
@keyframes caseHaze {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.78; }
}

/* Затемнение снизу превью: в покое чуть плотнее, при наведении слабеет */
.case-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.46) 100%);
    transition: opacity 0.9s var(--ease);
    pointer-events: none;
}

.case-card__link:hover .case-thumb::after { opacity: 0.45; }

.case-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    padding: 16px 18px 18px;
    position: relative;
}

.case-body h3 {
    margin: 0;
    font-size: clamp(17px, 1.4vw, 20px);
    transition: color 0.6s var(--ease);
}

.case-card__link:hover .case-body h3 { color: var(--accent-2); }

.case-line {
    /* Направление и клиент слева, год прижат вправо — сетка карточек читается
       как указатель работ, год выстраивается в колонку. */
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    transition: color 0.6s var(--ease);
}

.case-line .accent {
    color: var(--category-color, var(--accent));
    font-weight: 700;
}
.case-year { flex: none; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; opacity: 0.75; }
.case-card__link:hover .case-line { color: var(--muted-strong); }

@media (prefers-reduced-motion: reduce) {
    .case-card__link, .case-body h3 { transition: none; }
    /* Ролик по-прежнему играет — пользователь сам навёл курсор на карточку,
       но меняет постер сразу, без плавного проявления. */
    .case-thumb__clip { transition: none; }
}

.case-empty {
    grid-column: 1 / -1;
    padding: 48px 20px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
}

/* --- Страница кейса ----------------------------------------------------- */
.case-hero { padding-top: 0; padding-bottom: 0; }

/* Отступ секции под hero задаём сами, а не через .section (там он 72–128px и складывался бы с hero) */
.case-section { padding-top: clamp(40px, 6vw, 72px); }

.case-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: end;
    margin-top: clamp(28px, 4vw, 48px);
}

.case-hero h1 { max-width: 14ch; }

.case-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.case-meta div {
    padding: 16px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--panel);
}

.case-meta dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.case-meta dd { margin: 0; font-size: 15.5px; color: var(--text); line-height: 1.4; }
.case-meta dd a { color: var(--accent); text-decoration: none; }
.case-meta dd a:hover { text-decoration: underline; }

.case-media {
    position: relative;
    aspect-ratio: var(--media-ratio, 16 / 9);
    margin-top: clamp(28px, 4vw, 48px);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    background: #000;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(229, 179, 70, 0.08);
}

/* Вертикальный ролик. По ширине колонки 9:16 даёт под две тысячи пикселей
   высоты — экран такое не вмещает. Ограничиваем ширину той, при которой кадр
   укладывается в 78vh: высоту дальше считает aspect-ratio, поэтому пропорции
   держатся и когда в ширину упирается уже колонка, а не экран. */
.case-media.is-tall {
    width: min(100%, calc(min(78vh, 900px) * (var(--media-ratio))));
    margin-inline: auto;
}

.case-media img,
.case-media video,
.case-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    object-fit: cover;
}

/* Полноэкранный режим. Правила выше (position:absolute + object-fit:cover)
   специфичнее браузерных для :fullscreen и в полный экран уводили видео
   в старый контейнер — кнопка «во весь экран» визуально не срабатывала.
   Селекторы разнесены: неизвестный псевдокласс убил бы весь список. */
.case-media video:fullscreen,
.backstage-item video:fullscreen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    background: #000;
}

.case-media video:-webkit-full-screen,
.backstage-item video:-webkit-full-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    background: #000;
}

.case-media img { transition: transform 1.2s var(--ease); }
.case-media:hover img { transform: scale(1.03); }

.media-play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.72) 100%);
    color: var(--text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    display: block;
}

/* Тонкое стеклянное кольцо вместо жёлтого диска: не перекрывает кадр,
   заливается акцентом только при наведении. */
.media-play .ring,
.backstage-play .ring {
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.12);
    color: #fff;
    transition: transform 0.55s var(--ease), background-color 0.45s var(--ease),
                border-color 0.45s var(--ease), color 0.45s var(--ease);
}

/* Треугольник оптически тяжелее слева — сдвигаем на пиксель вправо. */
.media-play .ring svg,
.backstage-play .ring svg { width: 12px; height: 12px; transform: translateX(1px); }

.media-play:hover .ring,
.media-play:focus-visible .ring,
.backstage-play:hover .ring,
.backstage-play:focus-visible .ring {
    transform: translate(-50%, -50%) scale(1.06);
    background: var(--accent);
    border-color: var(--accent);
    color: #141008;
}

.media-play:focus-visible { outline: none; }

/* Маркировка кадра: номер проекта в левом верхнем углу — та же типографика,
   что у тега «ВИДЕО» в правом нижнем, чтобы углы кадра перекликались. */
/* Перелистывание роликов кейса прямо в верхнем плеере. Кнопки прижаты к краям
   кадра по вертикали посередине — там они не спорят ни с кнопкой запуска в
   центре, ни с системными контролами видео внизу. */
.media-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: grid;
    place-items: center;
    width: clamp(30px, 2.6vw, 36px);
    height: clamp(30px, 2.6vw, 36px);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: rgba(12, 12, 14, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0.75;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.media-nav.is-prev { left: clamp(10px, 1.4vw, 18px); }
.media-nav.is-next { right: clamp(10px, 1.4vw, 18px); }
.media-nav.is-prev svg { transform: rotate(180deg); }
.media-nav svg { width: 16px; height: 16px; }

/* Правило браузера для [hidden] слабее, чем display: grid выше, — гасим явно. */
.media-nav[hidden] { display: none; }

/* Ролик идёт — кадр остаётся чистым. Стрелки вернутся на паузе и в конце. */
.case-media.is-playing .media-nav {
    opacity: 0;
    pointer-events: none;
}

.media-nav:hover,
.media-nav:focus-visible {
    opacity: 1;
    background: rgba(12, 12, 14, 0.78);
    border-color: rgba(255, 255, 255, 0.45);
}

.media-reel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 14px 2px 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted);
}

.media-reel__count {
    flex: none;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.media-slug {
    position: absolute;
    top: clamp(16px, 2vw, 24px);
    left: clamp(18px, 2vw, 26px);
    z-index: 2;
    color: var(--accent);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.media-play .caption {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    text-align: left;
    font-size: 11.5px;
}

.media-play .caption strong { display: block; font-size: 13px; margin-bottom: 3px; }
.media-play .caption span { color: var(--muted-strong); }
.media-play .caption .tag { color: var(--accent); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; white-space: nowrap; }

.case-additional-videos {
    margin: clamp(64px, 8vw, 112px) 0;
}

.case-additional-videos .backstage-head {
    margin-bottom: clamp(20px, 3vw, 32px);
}

.case-additional-videos .case-media {
    margin-top: 0;
}

.case-additional-videos .case-media + .case-media {
    margin-top: clamp(20px, 3vw, 32px);
}

.case-content {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: stretch;
}

.case-about { padding: clamp(24px, 3vw, 36px); }
.case-about .eyebrow { margin-bottom: 16px; }
.case-about h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 18px; }
.case-about p { color: var(--muted-strong); font-size: 16.5px; line-height: 1.7; }
.case-about p + p { margin-top: 14px; }
.case-about .card__tags { margin-top: 22px; }
.case-about__more { margin-top: 22px; font-size: 15px; color: var(--muted); }
.case-about__more a { color: var(--accent); text-decoration: none; }
.case-about__more a:hover { text-decoration: underline; }

/* ---------- Витрина отснятого материала ---------- */
/* Для кейсов с большим объёмом финальных кадров: витрина сразу под хиро,
   ещё до вводки, а бэкстейдж — своей обычной секцией ниже, как везде.
   Разметка заголовка та же, что у бэкстейджа (.backstage-head), лента — своя:
   на 20+ кадрах сетка растянула бы страницу на несколько экранов, а горизонтальная
   прокрутка держит секцию компактной и превращает лукбук в настоящую ленту. */
.case-gallery { margin-top: clamp(28px, 4vw, 48px); margin-bottom: clamp(28px, 4vw, 48px); }
.case-gallery:first-child { margin-top: 0; }
.case-gallery .eyebrow { margin-bottom: 12px; }
.case-gallery h2 { font-size: clamp(24px, 2.8vw, 34px); margin-bottom: clamp(18px, 2.4vw, 28px); }

/* Лента шире контейнера: gutter компенсируем отрицательным полем, чтобы первый
   и последний кадр не упирались в край текстовой колонки, а прокрутка читалась
   как открытая, не обрезанная витрина. */
.gallery-scroll {
    display: flex;
    gap: clamp(10px, 1.4vw, 16px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: none;
    padding-bottom: 6px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.gallery-scroll::-webkit-scrollbar { height: 6px; }
.gallery-scroll::-webkit-scrollbar-track { background: transparent; }
.gallery-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

.gallery-item {
    position: relative;
    display: block;
    flex: 0 0 auto;
    height: clamp(340px, 42vw, 560px);
    width: auto;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    background: #000;
    cursor: zoom-in;
    scroll-snap-align: start;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

/* Ширина плитки следует за её собственным aspect-ratio (задан инлайном из
   cases.js), а не растягивается родителем — так вертикали 3:4 и 4:5 в одной
   ленте не искажаются и не выравниваются по чужой ширине. Постер чуть шире
   окна по той же причине, что и у бэкстейджа: на дробном DPR иначе
   просвечивает фон по скруглённому краю. */
.gallery-item img {
    display: block;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    max-width: none;
    margin: -2px;
    object-fit: cover;
}

.gallery-item:hover,
.gallery-item:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}
.gallery-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 640px) {
    .gallery-item { height: clamp(260px, 78vw, 380px); }
}

/* ---------- Титры проекта ---------- */
/* Роль слева, имена справа: длинный список читается как титры в конце ролика,
   но остаётся сканируемым — глаз идёт по колонке ролей. */
/* ---------- Бэкстейдж ---------- */
/* Вертикальные ролики 9:16 — как их снимали для соцсетей, так и показываем. */
.case-backstage { margin-top: clamp(28px, 4vw, 48px); }
.case-backstage .eyebrow { margin-bottom: 12px; }
.case-backstage h2 { font-size: clamp(24px, 2.8vw, 34px); margin-bottom: clamp(18px, 2.4vw, 28px); }
.backstage-description {
    max-width: 72ch;
    margin: calc(clamp(18px, 2.4vw, 28px) * -0.45) 0 clamp(18px, 2.4vw, 28px);
    color: var(--muted-strong);
    font-size: 15px;
    line-height: 1.7;
}

/* Число колонок подбирает cases.js под количество плиток, чтобы ряды выходили
   полными. Ширину сетки ограничиваем: на двух вертикалках плитки иначе
   раздуваются на весь экран. */
.backstage-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 22px);
    max-width: calc(var(--cols, 4) * 380px);
}

/* Одна-две плитки не заполняют ряд, и справа остаётся дыра. В таком случае
   раскладываем секцию разворотом: заголовок слева, плитки — правой колонкой. */
.case-backstage.is-spread {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
}

.case-backstage.is-spread .backstage-head h2 { margin-bottom: 0; }
.case-backstage.is-spread .backstage-description { margin: 14px 0 0; }
.case-backstage.is-spread .backstage-grid {
    max-width: none;
    grid-template-columns: repeat(var(--cols, 2), clamp(180px, 22vw, 300px));
}

/* Единственная плитка в развороте: колонка под вертикальные сторис оставляла бы
   горизонтальный ролик крошечным рядом с крупным заголовком. */
.case-backstage.is-spread[data-tiles="1"] .backstage-grid {
    grid-template-columns: minmax(0, clamp(320px, 40vw, 600px));
}

.backstage-item { margin: 0; }

/* Полнометражный бэк открывает секцию на всю ширину; короткие вертикальные
   главы продолжают её компактной сеткой ниже. */
.backstage-item.is-featured { grid-column: 1 / -1; }
.backstage-item.is-featured .backstage-play { aspect-ratio: 16 / 9; }

/* Фото процесса отделены от видео и текут по колонкам как Pinterest-лента:
   разная высота кадров заполняет следующий свободный участок без дыр. */
.case-backstage-photos { margin-top: clamp(32px, 5vw, 64px); }
.case-backstage-photos .eyebrow { margin-bottom: 12px; }
.case-backstage-photos h2 { font-size: clamp(24px, 2.8vw, 34px); margin-bottom: clamp(18px, 2.4vw, 28px); }
.backstage-masonry { columns: 4; column-gap: clamp(12px, 1.5vw, 18px); }
.backstage-photo {
    display: inline-block;
    width: 100%;
    margin: 0 0 clamp(16px, 2vw, 24px);
    break-inside: avoid;
    vertical-align: top;
}
.backstage-photo .backstage-play { aspect-ratio: var(--photo-ratio, 3 / 4); }
.backstage-photo figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; }

@media (max-width: 900px) { .backstage-masonry { columns: 3; } }
@media (max-width: 640px) { .backstage-masonry { columns: 2; } }

.backstage-play,
.backstage-item video {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    padding: 0;
    cursor: pointer;
}

.backstage-item video { cursor: default; object-fit: cover; }
.backstage-play.is-still { cursor: zoom-in; }

/* Постер чуть шире окна: иначе на дробном DPR по краю просвечивает фон. */
.backstage-play img {
    position: absolute;
    inset: 0;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    max-width: none;
    margin: -2px;
    object-fit: cover;
}

/* Скрим под кольцом, а не поверх: оба псевдо/элемента позиционированы,
   без z-index градиент рисовался бы последним и глушил кнопку. */
.backstage-play:not(.is-still)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 30%);
}

/* Под плиткой только название: описания дублировали то, что и так видно в кадре. */
.backstage-item figcaption { margin-top: 12px; font-size: 14px; line-height: 1.45; }

@media (max-width: 640px) {
    .backstage-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Финальная подпись — как титр в конце ролика: набор уходит в строку,
   имя агентства ставим логотипом. */
.case-outro {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .7em;
    margin-top: clamp(40px, 6vw, 72px);
    font-size: clamp(15px, 1.6vw, 18px);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Логотип отрисован фиксированным белым (#F4FAFF), currentColor к нему
   не применить — гасим до яркости строки прозрачностью.
   Ровняем по базовой линии: низ картинки совпадает с низом букв в логотипе,
   так что он садится на ту же линию, что и набор. Высота подобрана так, чтобы
   капитель логотипа совпала с капителью текста — над буквами в макете есть
   запас под макрон у «Ā», и он в эту высоту входит. */
.case-outro__logo {
    display: block;
    height: .92em;
    width: auto;
    opacity: .85;
}

.case-credits {
    /* На всю ширину под «О проекте» и фактами: длинный список титров во второй
       колонке оставлял справа огромную дыру. */
    grid-column: 1 / -1;
    margin-top: clamp(28px, 4vw, 48px);
    padding: clamp(22px, 2.6vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
}


/* CSS-колонки, а не грид: группы свободно перетекают из колонки в колонку,
   поэтому «Команда» из 18 строк не оставляет справа пустоту. Неразрывны только
   сами строки роль-имя и связка «заголовок группы + первая строка». */
.credits-cols { columns: 2; column-gap: clamp(28px, 4vw, 56px); }

.credits-group { margin-bottom: 26px; }
.credits-group:last-child { margin-bottom: 0; }

.credits-group h3 {
    break-after: avoid;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

.credits-group dl { display: grid; gap: 9px; }

.credits-group dl > div {
    break-inside: avoid;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 14px;
    align-items: baseline;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
}

.credits-group dl > div:last-child { border-bottom: 0; padding-bottom: 0; }

.credits-group dt { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.credits-group dd { color: var(--text); font-size: 14.5px; line-height: 1.55; margin: 0; }
.credits-group dd a {
    color: inherit;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px;
    transition: color .2s ease, text-decoration-color .2s ease;
}
.credits-group dd a:hover {
    color: var(--accent);
    text-decoration-color: currentColor;
}

.credits-note {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.6;
}

/* Колонка фактов добирает высоту соседнего текста: карточки растягиваются,
   цифра уходит наверх, подпись прижимается к низу. */
.case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 10px; }
.case-facts[data-count="3"] { grid-template-columns: 1fr; }

.fact {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 22px 22px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--panel);
    transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}

.fact:hover { border-color: var(--accent-line); background: var(--panel-strong); }

.fact .value {
    display: block;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--accent);
}

.fact .label { color: var(--muted); font-size: 14.5px; line-height: 1.5; }

.fact.text-only { grid-column: 1 / -1; display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; padding-block: 18px; }
.fact.text-only::before { content: ''; width: 22px; height: 1px; background: var(--accent); margin-top: 11px; }
.fact.text-only .label { color: var(--muted-strong); font-size: 15.5px; }

/* Логотип клиента над карточкой «клиент / направление»: ведёт на сайт клиента. */
.case-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.case-aside .case-meta { width: 100%; }

.case-client {
    display: block;
    width: clamp(56px, 6vw, 76px);
    border-radius: 50%;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.case-client img { display: block; width: 100%; height: auto; border-radius: 50%; }

/* Логотип-надпись: в круглую плашку он не влезает — даём ему ширину по строке
   и снимаем скругление, иначе у букв срезаются края. */
.case-client.is-wordmark { width: clamp(112px, 13vw, 168px); border-radius: 0; }
.case-client.is-wordmark img { border-radius: 0; }
.case-client:hover, .case-client:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.case-client:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* --- Просмотр кадров ------------------------------------------------------
   Раньше кадр открывался файлом в соседней вкладке, и вернуться было некуда.
   Теперь он разворачивается поверх страницы: крестик, фон, Escape и стрелки. */
.case-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 56px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}

.case-lightbox.is-open { opacity: 1; visibility: visible; }

.case-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 3, 3, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: zoom-out;
}

.case-lightbox__body {
    position: relative;
    z-index: 1;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: min(760px, 100%);
    transform: scale(0.96);
    transition: transform 0.35s var(--ease);
}

.case-lightbox.is-open .case-lightbox__body { transform: scale(1); }

.case-lightbox__body img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - clamp(112px, 18vw, 190px));
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid var(--line-strong);
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.6);
}

.case-lightbox__body figcaption { color: var(--muted-strong); font-size: 14px; text-align: center; }

.case-lightbox__close,
.case-lightbox__nav {
    position: absolute;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: rgba(7, 7, 7, 0.72);
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.case-lightbox__close { top: clamp(12px, 2vw, 22px); right: clamp(12px, 2vw, 22px); }
.case-lightbox__nav.prev { top: 50%; left: clamp(10px, 2vw, 26px); transform: translateY(-50%); }
.case-lightbox__nav.next { top: 50%; right: clamp(10px, 2vw, 26px); transform: translateY(-50%); }

.case-lightbox__close:hover,
.case-lightbox__nav:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.case-lightbox__close:hover { transform: scale(1.05); }
.case-lightbox__nav.prev:hover { transform: translateY(-50%) scale(1.05); }
.case-lightbox__nav.next:hover { transform: translateY(-50%) scale(1.05); }
.case-lightbox__close:focus-visible,
.case-lightbox__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 640px) {
    /* Стрелки под кадром: по бокам они перекрывают саму картинку */
    .case-lightbox__nav.prev { top: auto; bottom: 16px; left: 24%; transform: none; }
    .case-lightbox__nav.next { top: auto; bottom: 16px; right: 24%; transform: none; }
    .case-lightbox__body img { max-height: calc(100vh - 200px); }
}

/* prev / next */
.case-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: clamp(40px, 6vw, 72px);
}

.case-nav a {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--panel);
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background-color 0.45s var(--ease);
}

.case-nav a:hover { transform: translateY(-3px); border-color: var(--accent-line); background: var(--panel-strong); }
.case-nav a.next { grid-template-columns: minmax(0, 1fr) 128px; text-align: right; }
.case-nav a.next img { order: 2; }

.case-nav img {
    width: 100%;
    height: auto; /* иначе атрибут height="675" у <img> задаёт высоту */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.case-nav .dir { display: block; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.case-nav .name { font-size: 18px; font-weight: 700; line-height: 1.25; }

.case-missing { padding-top: clamp(40px, 7vw, 88px); }

/* --- Адаптив ------------------------------------------------------------ */
@media (max-width: 1080px) {
    .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .case-hero__grid, .case-content { grid-template-columns: 1fr; }
    .case-backstage:not(.is-spread) .backstage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .case-aside { align-items: flex-start; }
    /* Разворот «заголовок слева, плитки справа» на узком экране складывается в стопку */
    .case-backstage.is-spread { display: block; }
    .case-backstage.is-spread .backstage-head h2 { margin-bottom: clamp(18px, 2.4vw, 28px); }
    .case-backstage.is-spread .backstage-grid { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
    .case-hero h1 { max-width: none; }
    .cases-head { column-gap: 16px; }
    .case-filters { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-block: 2px 4px; scrollbar-width: none; }
    .case-filters::-webkit-scrollbar { display: none; }
    .case-filter { white-space: nowrap; flex: 0 0 auto; }
    .header__right > .nav__link--lang {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 999px;
        font-size: 11px;
        line-height: 1;
        letter-spacing: 0.04em;
    }
}

@media (max-width: 640px) {
    .cases-head { column-gap: 12px; row-gap: 10px; margin-bottom: 16px; }
    .case-search__field { gap: 6px; padding-inline: 10px; }
    .case-search input { font-size: 13px; }
    .case-filter { min-height: 40px; }
    .case-grid { grid-template-columns: 1fr; }
    .case-backstage:not(.is-spread) .backstage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .case-meta { grid-template-columns: 1fr; }
    .case-media { border-radius: 12px; }
    .media-play .ring { width: 42px; height: 42px; }
    .media-play .caption { flex-direction: column; align-items: flex-start; left: 16px; right: 16px; bottom: 16px; }
    .case-facts { grid-template-columns: 1fr; }
    .credits-cols { columns: 1; }
    .credits-group dl > div { grid-template-columns: 1fr; gap: 3px; }
    .fact.text-only { grid-column: auto; }
    .case-nav { grid-template-columns: 1fr; }
    .case-nav a, .case-nav a.next { grid-template-columns: 96px minmax(0, 1fr); text-align: left; }
    .case-nav a.next img { order: 0; }
}

/* Пока кейсов всего два, «предыдущий» и «следующий» — один и тот же проект,
   поэтому рендерим только «следующий» и держим его в правой колонке. */
.case-nav .next:only-child { grid-column: 2; }
@media (max-width: 640px) { .case-nav .next:only-child { grid-column: auto; } }