/* Раздел «Фильмы». Порт <style> из dc-source/Фильмы.dc.html.
   Общее с страницей фильма (.card__strip, Credits, модальное окно)
   лежит в layout.css и здесь не дублируется. */
main{display:block}
.page{padding-top:var(--header-height,72px)}
.head{padding-top:var(--space-8,64px);display:grid;gap:12px}
.films{display:grid;gap:var(--space-8,64px) var(--gutter,24px);padding-top:var(--block-gap,48px)}
/* Ряд фильма (16.09, второй круг замечаний): карточка и постер этого же фильма
   в сетке 8+4 той же формулой, что .film-body на странице фильма: восемь
   колонок calc(100% * 2 / 3 - 24 / 3) = 866,67 при контейнере 1312, остаток
   minmax(0,1fr) = 421,33, то есть 4 колонки по 87,33 плюс 3 межколонника.
   На 1024 это 589,33 и 282,67, на 768 карточка 418,67. Ряд у нечётных фильмов:
   карточка слева, постер справа; у чётных (.films--stagger) треки зеркальные,
   постер слева, карточка справа. Прежнее justify-self:end у чётной карточки
   давало то же положение, теперь его задаёт трек. Обёртка .films__row нужна,
   чтобы пара стояла в одном ряду, а ряды шли столбцом: без обёртки постер
   чётного фильма (колонка 1 после карточки в колонке 2) уехал бы автоматической
   расстановкой на строку ниже; по той же причине у обоих детей ряда grid-row:1.
   align-items:start: верх постера на линии верха кадра, высота ряда равна
   карточке (678 на 1440), постер ниже (610,94), поэтому высота страницы
   от постера не меняется. Постер не внутри <article>: наведение и фокус
   на карточке (подсветка кадра, петля трейлера в motion-layer.js) читаются
   с .films__item, и постер не должен их вызывать. Он ссылка на страницу
   фильма, тот же адрес, что у кнопки «О фильме», но tabindex="-1" и
   aria-hidden="true": для клавиатуры и читалки кнопки достаточно, второй
   раз тот же переход не объявляется. Целей Метрики на нём нет. */
.films__row{display:grid;grid-template-columns:calc(100% * 2 / 3 - var(--gutter,24px) / 3) minmax(0,1fr);gap:var(--gutter,24px);align-items:start}
.films__row>*{grid-row:1}
.films__item{display:block;position:relative;min-width:0}
.films--stagger .films__row:nth-child(even){grid-template-columns:minmax(0,1fr) calc(100% * 2 / 3 - var(--gutter,24px) / 3)}
.films--stagger .films__row:nth-child(even) .films__item{grid-column:2}
.films--stagger .films__row:nth-child(even) .films__poster{grid-column:1}
/* Рамка и подложка постера общие с главной и страницей фильма
   (.tf-frame--poster в layout.css): пропорция 1:1,45, contain, без обработки.
   Ширину и высоту задаёт трек и aspect-ratio рамки, скрипт ничего не мерит. */
.films__poster{display:block;min-width:0}
/* 768-1023: свободные 4 колонки дают 197-283 px, текст на обложке нечитаем
   (замер 16.09), постер скрыт. Скрывает медиазапрос, а не скрипт; у картинки
   loading="lazy", без бокса раскладки браузер её не запрашивает. Телефон
   ниже: один столбец, постер тоже скрыт. */
@media (max-width:1023px){
  .films__poster{display:none}
}
/* Растянутая ссылка (15.09): ссылка в заголовке накрывает карточку целиком
   псевдоэлементом, поэтому нажатие по кадру ведёт на фильм. Обернуть карточку
   в <a> нельзя: внутри кнопка «Смотреть трейлер», вложенный интерактив в ссылке
   недопустим. Рамка фокуса остаётся на тексте заголовка. Кнопка и «О фильме»
   подняты над псевдоэлементом z-index'ом. Постер ряда (16.09) стоит вне
   карточки, псевдоэлемент его не накрывает, это своя ссылка. */
.card__title a{color:var(--fg,#F2F2F2)}
.card__title a::after{content:"";position:absolute;inset:0}
/* Курсор над кадром теперь на ссылке, а не на .tf-frame, поэтому кадр
   подсвечивается по наведению и по фокусу на карточке, а не на рамке */
.films__item:hover .tf-frame--hover .tf-frame__img,.films__item:focus-within .tf-frame--hover .tf-frame__img{filter:var(--img-filter-lit,brightness(1) contrast(1.02) saturate(0.9))}
.card__actions{display:flex;gap:var(--space-4,16px);flex-wrap:wrap;padding-top:var(--space-4,16px);position:relative;z-index:1}
.tf-footer{margin-top:var(--section-gap,128px)}
.tf-footer .tf-footer__legal{flex-wrap:nowrap}
@media (max-width:767px){
  .head{padding-top:var(--space-6,32px)}
  .films{gap:var(--space-7,48px);padding-top:var(--space-6,32px)}
  /* Один столбец на всю ширину контейнера, чётные ряды без зеркала */
  .films__row,.films--stagger .films__row:nth-child(even){grid-template-columns:1fr}
  .films--stagger .films__row:nth-child(even) .films__item{grid-column:1}
  .card__actions{flex-direction:column;gap:var(--space-3,12px)}
  .card__actions .tf-btn{width:100%}
}