/* ═══════════════════════════════════════════════════════
   Раздел Video & Generative — сетки кадров и блоки видео.
   Скелет и механика — из ../shared.
   ═══════════════════════════════════════════════════════ */

/* ─── Акцент ──────────────────────────────────────── */
/* Раздел не принадлежит клиенту, поэтому акцент нейтральный —
   холодный синий портфолио, только чуть заметнее. */
:root[data-case="ai"] { --glow-a: .26; }
@media (prefers-color-scheme: dark) {
  :root[data-case="ai"]:not([data-theme="light"]) { --glow-a: .20; }
}
:root[data-case="ai"][data-theme="dark"] { --glow-a: .20; }

/* Заголовок героя: строки этого раздела длиннее, чем «Minto» или «МИФ»,
   и при 6rem слово «СГЕНЕРИРОВАНО» не помещалось в колонку, а `.ln` с
   overflow: hidden (он нужен для появления по букве) резал его по краю.
   Уменьшаем кегль только здесь — колонку двигать нельзя, там 3D-знак. */
@media (min-width: 64rem) {
  [data-case="ai"] .hero__desc .dspl { font-size: 4rem; letter-spacing: -.04rem; }
  [data-case="ai"] .hero__desc .dspl--sub { font-size: 1.9rem; letter-spacing: -.02rem; }
}

/* знак студии в герое: `.obj` в общих стилях возвращает position: relative,
   поэтому абсолют прописываем явно */
@media (min-width: 48rem) {
  [data-case="ai"] .hero__object {
    position: absolute;
    left: 26%; top: 72%; width: 26vw; max-width: 17rem;
  }
}

/* ─── Скругление ──────────────────────────────────── */
/* 8 px на всех кадрах и роликах раздела. Скругление — самая дешёвая
   операция для композитора, на прокрутку не влияет; overflow: hidden
   нужен только контейнерам, чтобы угол резал и трансформацию. */
[data-case="ai"] .grid__i img,
[data-case="ai"] .compo__i img,
[data-case="ai"] .vid video,
[data-case="ai"] .vid img { border-radius: 8px; }

/* ⚠️ Никакого overflow: hidden на .grid__i / .compo__i. Внутренний параллакс
   двигает <picture> внутри контейнера: обрезка превращает движение картинки
   в «сползание» с полосой фона по краю. Скругляем само медиа — этого хватает. */

/* ─── Видео ───────────────────────────────────────── */
.vid--main { margin-bottom: 2.4rem; }
.vid--tall video { max-height: 78vh; width: auto; max-width: 100%; margin-inline: auto; }

/* ─── Сетки кадров ────────────────────────────────── */
.grid { display: grid; gap: 1.2rem; }
.grid__i { position: relative; margin: 0; }
.grid__i img, .grid__i video { display: block; width: 100%; height: auto; }

.grid--frames { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .grid--frames { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }

.grid--three { grid-template-columns: 1fr; margin-top: 1.6rem; }
@media (min-width: 48rem) { .grid--three { grid-template-columns: repeat(3, 1fr); } }

.grid--sets { grid-template-columns: repeat(2, 1fr); }
/* шесть плиток — по три в ряд, чтобы не оставалось пустых ячеек */
@media (min-width: 48rem) { .grid--sets { grid-template-columns: repeat(3, 1fr); } }

/* подзаголовок внутри раздела партнёрских работ */
.sec-sub { display: block; margin: 3.4rem 0 1.2rem; color: var(--ink-2); }

/* ─── Композиции ──────────────────────────────────── */

/* fashion: вертикальный ролик и текст рядом */
.compo--fashion { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 48rem) {
  .compo--fashion { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .compo--fashion .vid--tall { justify-self: end; width: 78%; }
  .compo__txt { max-width: 26rem; }
}
.compo__txt p { margin-top: .9rem; color: var(--ink-2); line-height: 1.45; }

/* автобренд: три вертикальных кадра и мелкая петля —
   петля нарочно меньше всех, чтобы артефакты ранней генерации не лезли в глаза */
.compo--car { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) {
  .compo--car { grid-template-columns: repeat(4, 1fr); align-items: start; gap: 1.4rem; }
  .compo__i--car1 { margin-top: 0; }
  .compo__i--car2 { margin-top: 12%; }
  .compo__i--ice  { margin-top: 4%; }
  .compo__i--carloop { margin-top: 8%; }     /* ширина как у трёх кадров рядом */
}