/* Кино-секции: широкий кадр рядом с текстом.

   Выделено из блока стилей внутри home.html: там сто восемьдесят
   строк лежали вперемешку, и ни переиспользовать, ни прочитать
   это было нельзя. Файлы подключаются в том же порядке, в каком
   правила шли в блоке, чтобы каскад не изменился. */

.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:var(--gap-5);align-items:center}
.split .media{border-radius:0;min-height:360px;border:1px solid var(--line)}
.home-block.cinema-section{padding:0;display:grid;grid-template-columns:minmax(0,58vw) minmax(340px,1fr);
  min-height:clamp(560px,52vw,760px)}
.cinema-section.is-reverse{grid-template-columns:minmax(340px,1fr) minmax(0,58vw)}
/* Правка клиента 03.09: блок про кедровую бочку занимал целый экран
   ради трёх строк текста. Убавлено примерно на треть по высоте и доле
   кадра - адресно этой секции, а не общим правилом: у сертификата своё
   соотношение, и одна общая цифра снова свела бы их к одному виду.

   Селектор по атрибуту, а не по решётке, намеренно: имя секции
   начинается с четырёх шестнадцатеричных букв, и запись через решётку
   проверялка оформления читает как цвет вне палитры. Заодно вес правила
   падает до веса класса, и медиазапросы ниже перебивают его сами,
   без отдельных строк-заплат. */
[id="cedar"].cinema-section{grid-template-columns:minmax(0,48vw) minmax(340px,1fr);
  min-height:clamp(420px,38vw,560px)}

/* Асимметричная раскладка: кадру отдаётся больше места, чем тексту.

   Нужна там, где смотреть важнее, чем читать - у сертификата подпись
   в три строки, а снимок несёт всё впечатление. Обычные 58vw делили
   секцию почти поровну, и снимок оказывался тесным.

   Текстовая колонка при этом не сжимается ниже 300px: под ней заголовок
   в две строки и кнопка, и в более узкой они начинают переноситься
   по одному слову. */
/* Широкая раскладка: кадру больше места, но НЕ за счёт читаемости.

   Первая версия отдавала кадру 70vw и оставляла тексту minmax(300px,1fr).
   На экране 1440 это 432 пикселя, из которых внешний отступ съедал 130,
   а внутренний ещё 64 - тексту оставалось 238, и заголовок с кнопкой
   переставали помещаться, наползая на кадр.

   Теперь кадру 62vw, тексту не меньше 400, и у широкой раскладки свой
   отступ вместо выравнивания по центральной колонке страницы: у обычной
   секции текст должен вставать в общую сетку, а здесь он и так прижат
   к краю, и лишние 130 пикселей просто отнимают ширину. */
.cinema-section.is-wide-media{grid-template-columns:minmax(0,62vw) minmax(400px,1fr)}
.cinema-section.is-wide-media.is-reverse{grid-template-columns:minmax(400px,1fr) minmax(0,62vw)}
.cinema-section.is-wide-media .cinema-copy{padding-left:var(--gap-4);padding-right:var(--gap-4)}
.cinema-section.is-wide-media.is-reverse .cinema-copy{
  padding-left:max(var(--gap-4),calc((100vw - var(--page)) / 2));
  padding-right:var(--gap-4)}
/* У сертификата текст и кадр всегда остаются двумя самостоятельными
   плоскостями. Непрозрачный фон текстовой колонки страхует композицию
   при любом кадрировании и не даёт увеличенному изображению визуально
   или геометрически заходить под подпись. */
#certificates .cinema-copy{position:relative;z-index:2;min-width:0;background:var(--bg)}
/* Правка клиента 03.09: сертификату тоже поменьше. Кадру 50vw вместо 62,
   высоте - на четверть меньше. Селектор с id перебивает медиазапросы
   ниже, поэтому узкая полоса 761-900 получает свою строку там же. */
#certificates.is-wide-media.is-reverse{grid-template-columns:minmax(400px,1fr) minmax(0,50vw)}
#certificates{min-height:clamp(400px,36vw,540px)}
/* На экранах уже 1120 широкая раскладка перестаёт складываться: 62vw
   плюс минимальные 400 пикселей текста дают больше ста процентов ширины,
   и страница уезжает вбок. Там она возвращается к обычному делению -
   кадру и так остаётся больше половины. Проверено счётом: при 1024
   выходило 1035 пикселей на 1024 доступных. */
@media (max-width:1120px){
  .cinema-section.is-wide-media{grid-template-columns:minmax(0,58vw) minmax(340px,1fr)}
  .cinema-section.is-wide-media.is-reverse{grid-template-columns:minmax(340px,1fr) minmax(0,58vw)}
}
/* Ниже 900 минимум текста снижается до 300 у ВСЕХ кино-секций, не только
   у широкой. Счёт показал, что и обычное деление 58vw плюс 340 не влезает
   в 800 пикселей - выходит 804, и страница уезжает вбок. До перехода
   в одну колонку (760) остаётся полоса, где это было заметно. */
@media (max-width:900px) and (min-width:761px){
  .home-block.cinema-section,.cinema-section.is-wide-media{
    grid-template-columns:minmax(0,56vw) minmax(300px,1fr)}
  .cinema-section.is-reverse,.cinema-section.is-wide-media.is-reverse{
    grid-template-columns:minmax(300px,1fr) minmax(0,56vw)}
  /* Счётом: при 761 пикселе 50vw плюс минимальные 400 текста дают 780 -
     страница уехала бы вбок. Минимум текста здесь тот же 300, что и у
     остальных кино-секций в этой полосе. */
  #certificates.is-wide-media.is-reverse{grid-template-columns:minmax(300px,1fr) minmax(0,50vw)}
}

/* Видео в кино-секции ведёт себя как картинка: те же правила заполнения
   и та же точка кадрирования. Один набор правил на оба случая - иначе
   при правке кадрирования пришлось бы помнить про два места. */
.cinema-media video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--focus,50% 50%)}
.cinema-section.is-reverse .cinema-media{grid-column:2}
.cinema-section.is-reverse .cinema-copy{grid-row:1;grid-column:1}
.cinema-media{position:relative;min-height:100%;overflow:hidden;background:var(--surface)}
.cinema-media::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.32))}
.cinema-section.is-reverse .cinema-media::after{background:linear-gradient(270deg,rgba(0,0,0,.04),rgba(0,0,0,.32))}
/* Точка кадрирования управляемая.

   Блок узкий и высокий, снимок широкий - object-fit:cover обрезает его
   по бокам и по умолчанию оставляет центр. Для сертификата это неверно:
   сама карта лежит в правой части кадра, а по центру оказывались только
   розы. Класс сдвигает видимое окно к нужной части снимка.

   Значение вынесено в токен, а не прописано в правиле: у каждого снимка
   своя интересная часть, и добавить ещё один фокус должно быть можно,
   не трогая базовое правило. */
.cinema-media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--focus,50% 50%)}
.cinema-media picture{display:contents}
.cinema-media.focus-right{--focus:82% 50%}
.cinema-media.focus-left{--focus:28% 50%}
.cinema-media.focus-top{--focus:50% 22%}
.cinema-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gap-3);
  padding:var(--gap-5) max(var(--gap-3),calc((100vw - var(--page))/2)) var(--gap-5) var(--gap-5)}
.is-reverse .cinema-copy{padding-left:max(var(--gap-3),calc((100vw - var(--page))/2));padding-right:var(--gap-5)}
.video-slot{position:absolute;z-index:2;left:var(--gap-3);bottom:var(--gap-3);display:flex;align-items:center;gap:10px;
  color:var(--cream);font:600 var(--step--1)/1.2 var(--ui);letter-spacing:.1em;text-transform:uppercase}
.video-slot::before{content:'';width:8px;height:8px;background:var(--gold);box-shadow:0 0 0 6px rgba(210,176,106,.16)}
.video-slot small{font-weight:400;letter-spacing:.02em;text-transform:none;color:rgba(241,233,217,.72)}

/* Блок записи. До правки клиента 03.09 здесь стояли заголовок и одна
   кнопка - о самой записи не сообщалось ничего. Три факта под текстом
   взяты из живого сайта: поля формы (филиал, желаемая дата и время)
   и телефоны филиалов из шапки. Ничего сверх этого не обещаем. */
.booking-facts{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap-2);max-width:48ch}
.booking-facts li{display:grid;gap:3px;padding-top:var(--gap-2);border-top:1px solid var(--line)}
.booking-facts strong{font:400 var(--step-1)/1.2 var(--disp);color:var(--text)}
.booking-facts span{font-size:var(--step-0);line-height:1.6;color:var(--text-soft)}
.booking-actions{display:flex;flex-wrap:wrap;gap:var(--gap-2)}
/* Три мессенджера равноправно, MAX первым: в 2026 году часть гостей
   пишет только туда, а WhatsApp перестал быть единственным (правка
   клиента 07.09). Все три ссылки те же, что в виджете связи. */
.booking-messengers{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-1);margin:var(--gap-2) 0 0;color:var(--text-soft);font-size:var(--step--1)}
.booking-messengers .btn{padding:10px 14px;font-size:10px}
@media(max-width:760px){
  .home-block.cinema-section,.cinema-section.is-reverse,.cinema-section.is-wide-media,.cinema-section.is-wide-media.is-reverse{display:flex;flex-direction:column;min-height:0}
  /* Отдельной строкой, потому что селектор с id сильнее правила выше:
     без неё гарантированная высота с большого экрана осталась бы
     висеть под столбиком и растягивала бы секцию пустотой. */
  #certificates{min-height:0}
  .cinema-section .cinema-media,.cinema-section.is-reverse .cinema-media{order:0;grid-column:auto;width:100%;min-height:min(106vw,460px)}
  .cinema-section .cinema-copy,.cinema-section.is-reverse .cinema-copy{order:1;grid-column:auto;grid-row:auto;width:100%;padding:44px 24px 52px;gap:18px;border-top:1px solid var(--line)}
  .cinema-copy h2{font-size:clamp(43px,13.5vw,64px);line-height:.94;max-width:11ch}
  .cinema-copy .prose{font-size:15px;line-height:1.7;color:var(--text-soft)}
  .cinema-copy>a:not(.btn){display:inline-flex;align-items:center;min-height:48px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none}
  .cinema-copy .btn{width:100%;text-align:center;padding:17px 20px}
  .cinema-media.focus-right{--focus:50% 54%}
  .booking-intro .cinema-copy{background:color-mix(in srgb,var(--surface) 58%,var(--bg))}
  .booking-facts{max-width:none;width:100%}
  .booking-actions{display:grid;grid-template-columns:1fr;width:100%;gap:12px}
  .booking-messengers{width:100%}.booking-messengers span{width:100%}.booking-messengers .btn{flex:1 1 0}
}