/* Страница фильма. Порт <style> из dc-source/Фильм - Хищники.dc.html.
   Не переносится .hero--export: это режим артборда, а не сайта.
   Общее с разделом (.card__strip, .sec__title, Credits, окно) - в layout.css. */
main{display:block}
.sec{padding-top:var(--section-gap,128px)}

/* ---- Первый экран. Высота одной переменной на главную и пять страниц фильмов ---- */
.hero{height:var(--hero-height,100vh);min-height:480px;position:relative}
/* Нижняя кромка первого экрана: чёткая, как на главной (замечание Алексея
   17.09). Кадр непрозрачен до своей нижней кромки, под ней сразу фон страницы
   (base.css, неподвижный слой). Ни маски, ни затемнения: маска 16.09 меняла
   цвета нижней трети кадра и открывала сквозь него розовый фон; затемнение
   .hero__fade в --bg до неё давало чёрный провал. У «Дороги домой» (.hero--wide)
   то же на широком кадре. Элемент .hero__fade в разметке остаётся (aria-hidden),
   бокса не создаёт. */
.hero__frame{position:relative;height:100%;overflow:hidden;background:var(--surface,#141414)}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:var(--img-filter-lit,brightness(1) contrast(1.02) saturate(0.9))}
.hero__fade{display:none}
/* Плашка под шапкой: та же, что на главной (home.css .hero__top): сплошной bg
   ровно в высоту шапки, стык с кадром резкий, под линией шапки сразу кадр.
   Плашка нужна: шапка на первом экране прозрачная (плотной становится после
   48 px прокрутки), и без плашки сквозь неё и её отлив был бы виден кадр.
   До 17.09 здесь был сход 24 px к прозрачному ниже шапки: на 1440 по центру
   от y=72 до 96 цвет шёл от (12,12,12) к кадру, читалось тёмной полосой
   (замечание Алексея); на главной такого схода не было с 12.09. */
.hero__top{position:absolute;top:0;left:0;right:0;height:var(--header-height,72px);pointer-events:none;background:var(--bg,#0A0A0A)}

/* ---- «Дорога домой»: широкий кадр 2.39:1. Он идёт в своих пропорциях
   под шапкой, а не кропом на всю высоту окна: кроп в 16:9 теряет треть
   ширины и запрещён системой. Плашки .hero__top у неё нет, шапка плотная
   с самого начала (data-solid на <header>). ---- */
.hero--wide{height:auto;min-height:0;padding-top:var(--header-height,72px)}
.hero--wide .hero__frame{height:auto;aspect-ratio:2.39/1;background:var(--bg,#0A0A0A)}

/* ---- Название и данные ---- */
.title{padding-top:var(--space-8,64px);display:grid;grid-template-columns:calc(100% * 2 / 3 - var(--gutter,24px) / 3) minmax(0,1fr);gap:var(--gutter,24px);align-items:end}
.title__text{display:grid;gap:16px}
.title__lead{max-width:640px}
.title__actions{display:flex;justify-content:flex-end}

/* ---- Синопсис и титры в одной сетке 8+4: левая колонка 867 при контейнере
   1312 (calc(100% * 2 / 3 - 24 / 3) = 866,67), правая 421 (4 колонки по 87,33
   плюс 3 межколонника). Заголовок «О фильме» стоит над сеткой, поэтому правая
   колонка начинается на первой строке синопсиса, и постер (align-self:start)
   встаёт верхом ровно на неё, без margin-top по замеру и без JS. До 16.09
   синопсис и титры были двумя секциями, постер лежал напротив титров и на 1440
   уходил ниже списка ролей на 115-389 px. Отступы прежние, из токенов:
   «О фильме» -> текст 48 (.sec__title, layout.css), текст -> «Съёмочная группа»
   128 (margin-top ниже), «Съёмочная группа» -> список 48 (.sec__title).
   Постер 421 x 1,45 = 610 на 1440, 368 x 534 на 1280, 283 x 410 на 1024. ---- */
.film-body{display:grid;grid-template-columns:calc(100% * 2 / 3 - var(--gutter,24px) / 3) minmax(0,1fr);gap:var(--gutter,24px);align-items:start}
.film-body__main{min-width:0}
.synopsis__text{display:grid;gap:var(--space-5,24px)}
/* Заголовок титров внутри левой колонки: 128 от последней строки синопсиса,
   столько же давал padding-top отдельной секции (--section-gap, 64 на телефоне). */
.film-body__title{margin-top:var(--section-gap,128px)}
/* Постер: правая колонка, 4 из 12, верх на первой строке синопсиса; на 1440
   он ниже списка ролей только у «Людей как люди» (4 роли), у остальных четырёх
   выше. На телефоне сетка в один столбец, постер после списка ролей, перед
   «Кадрами». */
.credits__poster{min-width:0;align-self:start}

/* ---- Лента кадров. Скроллер и кнопки общие с лентой постеров главной (layout.css),
   здесь размер кадра и сброс кнопки. Карточка кадра на всех пяти страницах
   одной пропорции 16:9, изображение вписано в неё целиком (contain) на
   подложке surface: у четырёх фильмов кадр 16:9 заполняет рамку, у «Дороги
   домой» (2,39:1, авторский широкий формат) сверху и снизу узкие поля, как
   в кинотеатре. Кадр не обрезается: кроп в 16:9 отнял бы четверть ширины.
   До 15.09 карточки «Дороги домой» шли в 2,39:1 и в ленте были на треть
   шире соседних - заказчик читал это как растянутость.
   С 16.09 подложки surface у рамки нет: фон страницы стал градиентом, и поля
   «Дороги домой» (53 px сверху и снизу на 1440) читались бы тёмной рамкой,
   а на чёрном фоне они были неотличимы от страницы. Теперь в этих полях фон
   страницы, кадр 2,39:1 стоит в ленте так же, как стоял. Шторка слоя движения
   (.tf-frame::after) остаётся чёрной: это переход, а не фон. ---- */
.gallery__item{height:420px;aspect-ratio:16/9;outline-offset:4px;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.gallery__item:focus-visible{outline:var(--focus-width,2px) solid var(--action,#FFFFFF)}
.gallery__item .tf-frame{height:100%;background:transparent}
.gallery__item .tf-frame__img{object-fit:contain}

/* ---- Другие фильмы: четыре равных трека, слот 310 при контейнере 1312 ---- */
.films{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter,24px);padding-top:var(--block-gap,48px)}
.films__item{display:block;color:var(--fg,#F2F2F2);text-decoration:none;min-width:0}
.films__item:hover{text-decoration:none}
.films__item:focus-visible{outline:var(--focus-width,2px) solid var(--action,#FFFFFF);outline-offset:4px}
.card__title{font-size:var(--type-subhead-size,20px);font-weight:var(--type-subhead-weight,500);line-height:var(--type-subhead-lh,1.35);letter-spacing:0;margin:0}
.films__item:hover .card__title{color:var(--action,#FFFFFF)}

.tf-footer{margin-top:var(--section-gap,128px)}
.tf-footer .tf-footer__legal{flex-wrap:nowrap}

/* Планшет, ноутбук и окно в полэкрана, 768-1071: четыре трека дают колонку
   (W - 128 - 72) / 4, то есть 142 px на 768, 166 на 864, 200 на 1000, 215 на 1060,
   218 на 1072, а подписи не ужимаются. Три движка дают разные метрики одного
   и того же загруженного Golos Text: мета «2026 · документальная драма» 14/400:
   216,59 px в Chromium, 210,78 px в WebKit и Firefox; название «Я вернулся домой»
   20/500: 178,00 px в Chromium, 179,31 px в WebKit и Firefox; расчёт вести
   по Chromium, ему нужно больше места. На 768 два названия в две строки, три
   меты в две строки, и мета первой карточки шириной 166 px при колонке 142
   вплотную примыкает к тексту второй: читается «документальная драмасоциальный
   ролик». С 1072 колонка 218 и всё чисто.
   Два трека дают (W - 128 - 24) / 2: 308 px на 768, 460 на 1071, раскладка 2+2
   без дыр, все подписи в одну строку на всём диапазоне.
   На 1314 («О нас», пять треков) и на 1072 (страницы фильмов, четыре трека)
   колонка равна 218 при требуемых 216,59, запас 1,4 px; если появится жанр
   длиннее «документальная драма», обе границы надо пересчитать.
   Зазор между строками как у телефонной сетки ниже. Поля 64 и межколонник 24
   прежние, ряд по контейнеру. */
@media (min-width:768px) and (max-width:1071px){
  .films{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6,32px) var(--gutter,24px)}
}

/* Планшет 768-1023: синопсис и титры в один столбец. Сетка 8+4 даёт правую
   колонку (W - 128) / 3 - 16, то есть 197 px на 768 и 283 на 1023: текст
   на обложке нечитаем, а справа от списка ролей пустует полколонки. Один
   столбец без ограничения растянул бы постер на весь контейнер: 640 x 928
   на 768, 872 x 1264 на 1000, обложка в пол-экрана. Поэтому ширина постера
   421, как на десктопе (4 колонки по 87,33 плюс 3 межколонника при контейнере
   1312): 66 % контейнера 640 на 768, 47 % от 895 на 1023, высота 421 x 1,45 = 610.
   Текст и список ролей на всю ширину контейнера. Порядок прежний: текст,
   «Съёмочная группа», роли, постер, «Кадры». Зазор 32 как в телефонном блоке.
   С 1024 сетка 8+4 (постер 283 x 410, верх на первой строке синопсиса), до 767
   телефонный блок ниже (столбец 350). Подсказка sizes у постера с 768
   и так называет 421px. */
@media (min-width:768px) and (max-width:1023px){
  .film-body{grid-template-columns:1fr;gap:var(--space-6,32px)}
  .credits__poster{width:421px;justify-self:start}
}

/* Широкие окна, с 1520: постер сдвинут на 40 px вправо. Поле страницы равно
   (W - 1440) / 2 + 64, и справа от постера пустеет: до 1519 зазор текст-постер
   24 (межколонник), справа 64 на 1440 и 104 на 1519; с 1520 зазор 64, справа
   64 на 1520, 84 на 1560, 134 на 1660, 264 на 1920. Текст 867 и постер 421 x 611
   не меняются нигде. Порог 1520: там поле 104, и после сдвига справа остаётся
   ровно 64, штатное поле макета; на 1440 поле 64, после сдвига осталось бы 24,
   постер почти прилипал бы к краю экрана. Именно transform, а не margin или
   position: место в потоке, ширина колонки и высота блока прежние, прокрутки
   нет. С 1520 постер осознанно выступает за правый край контента на 40 px
   и перестаёт стоять в одной вертикали с меню шапки, кнопкой «Смотреть трейлер»
   и колонкой «Адрес» в подвале: это решение Алексея от 16.09, не ошибка
   вёрстки. Постер не ссылка, transform ничего не перекрывает. Ниже 1519
   без изменений: телефон 350, планшет 768-1023 один столбец с постером 421,
   1024-1519 сетка 8+4. */
@media (min-width:1520px){
  .credits__poster{transform:translateX(40px)}
}

@media (max-width:767px){
  /* Полоса высотой шапки над кадром остаётся сплошным --bg (см. home.css,
     то же правило): зона шапки везде чёрная, ниже полосы фон прозрачный. */
  .hero{height:auto;min-height:0;padding-top:var(--header-height,56px);background:linear-gradient(to bottom,var(--bg,#0A0A0A) var(--header-height,56px),transparent 0)}
  .hero__frame{aspect-ratio:16/9;height:auto}
  .hero__top{display:none}
  /* Один столбец: текст, «Съёмочная группа», роли, постер; зазор 32 как у .title */
  .title,.film-body{grid-template-columns:1fr;gap:var(--space-6,32px)}
  .title{padding-top:var(--space-6,32px)}
  .title__actions{justify-content:stretch}
  .title__actions .tf-btn{width:100%}
  .gallery__item{height:auto;width:calc(100vw - 2 * var(--page-margin,20px))}
  /* «Другие фильмы» на телефоне (четвёртый круг замечаний Степана, 17.09): одна
     строка, листается пальцем вбок, кнопок нет. Раскладка та же, что у «Наших
     работ» на «О нас» (o-nas.css): flex, overflow-x auto, привязка proximity к левому
     полю страницы, лента на всю ширину окна отрицательными полями, скроллбар
     скрыт, карточка 260. Отличие одно: нижний отступ 6 px вместо 4, чтобы рамка
     фокуса карточки (2 px на 4 px от бокса) не резалась overflow ленты.
     До 17.09 здесь была сетка 2x2. С 768 сетка как была (2 колонки до 1071,
     4 выше). Подсказка sizes у картинок на телефоне считает половину окна
     (167 px на 390): при карточке 260 на DPR 2 браузер берёт файл 440 и
     показывает его на 520 точках; это в разметке, здесь не правится. */
  .films{display:flex;gap:var(--gutter,16px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-left:var(--page-margin,20px);padding:var(--space-6,32px) var(--page-margin,20px) 6px;margin:0 calc(-1 * var(--page-margin,20px));scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .films::-webkit-scrollbar{display:none}
  .films__item{flex:none;width:260px;scroll-snap-align:start}
  .card__title{font-size:var(--type-body-size,16px);line-height:1.3}
}