/* ==========================================================
   CLS-фикс главной страницы (блок «Предзаказы игр» + hero).
   ==========================================================
   Зачем: HTML отдаётся и парсится прогрессивно. Пока до конца документа
   не дошло, в .ps-pz-grid успевает попасть 1-2 плитки, а затем
   догружаются остальные 11 — сетка вырастает и сдвигает вниз всю
   страницу. Это давало основной вклад в CLS.

   Решение: заранее резервируем финальную высоту сетки через min-height.
   Формулы выведены из замеров фактической высоты на живом сайте
   (11 ширин от 320 до 1920px) и повторяют её с точностью ±10px.

   Чтобы формулы были применимы, высота плитки сделана предсказуемой:
   под название зарезервировано 3 строки — это максимум, встречающийся
   на всех проверенных ширинах, поэтому текст не обрезается, а все
   плитки получают одинаковую высоту.

   Правило включается только для раскладки из 12 плиток (класс
   .ps-pz-grid--n12 ставит шаблон по фактическому числу предзаказов):
   если предзаказов станет меньше, резерв не сработает и пустого места
   не появится.
   ========================================================== */

/* ---------- 1. Hero: резерв высоты до инициализации Owl-карусели ----------
   На мобильных stylesheet.css (@media max-width:768px) ставит
   .ps-hero-main-slot { min-height: 0 !important }, слот схлопывается в 0,
   а через ~1 c после owl.carousel() вырастает до финальной высоты.
   Замеры фактической высоты hero: 320px -> 96, 390 -> 121, 480 -> 154,
   640 -> 212, 768 -> 258 — линейная зависимость 36vw - 20px.

   Важно: именно height, а не min-height. Замеры показали, что слот
   сначала отрисовывается ВЫШЕ финального размера (153px при 412px ширины),
   а затем сжимается до 128px — и тянет за собой вверх всю страницу на 25px
   (это и давало CLS ≈ 0.15). min-height такому сжатию не мешает, а
   фиксированная высота убирает его полностью. Формула совпадает с
   фактической высотой во всём диапазоне 320-768px (расхождение <= 2px),
   поэтому обрезки содержимого нет; слот и так имеет overflow: hidden. */
@media (max-width: 768px) {
  body.theme-prostore-like .ps-hero-main-slot {
    height: calc(36vw - 20px) !important;
    min-height: calc(36vw - 20px) !important;
  }
}

/* ---------- 2. Выравнивание высоты плиток ----------
   Название занимает от 1 до 3 строк, из-за чего плитки в одной сетке
   имели разную высоту (215 и 232px при 390px ширины) и высота сетки была
   непредсказуемой. Резервируем 3 строки — обрезки текста нет
   (проверено: scrollHeight <= clientHeight на всех ширинах). */
body.theme-prostore-like .ps-pz-tile__name {
  min-height: calc(1.3em * 3);
}

/* ---------- 4. <picture> не должен ломать раскладку ----------
   Баннеры обёрнуты в <picture> ради выбора размера (мобильные получают
   800w вместо оригинала 1202px). display:contents делает обёртку
   «прозрачной» для раскладки, поэтому <img> остаётся ровно тем же
   флекс-элементом, что и раньше, — визуально ничего не меняется. */
body.theme-prostore-like .ps-hero-main__img picture,
body.theme-prostore-like .ps-hero-main__img-link picture {
  display: contents;
}

/* ---------- 2b. Подзаголовок блока: резерв под подмену веб-шрифта ----------
   Единственное место, где оставался сдвиг, — подзаголовок «Оставьте заявку…»
   на ширине ~412px. Текст сначала рисуется запасным шрифтом (он шире) и
   занимает 3 строки, а после загрузки Manrope укладывается в 2 — блок
   становится ниже на 25px и тянет вверх всю страницу (CLS ≈ 0.15).
   Замеры: до 479px подзаголовок занимает до 3 строк (74px), от 480px — 2.
   Резервируем 3 строки только на узких экранах; там, где текст и так
   3 строки, правило ничего не меняет. line-height подзаголовка — 1.55. */
@media (max-width: 479px) {
  body.theme-prostore-like .ps-pz-sub {
    min-height: calc(1.55em * 3);
  }
}

/* ---------- 3. Резерв высоты сетки предзаказов (12 плиток) ----------
   2 колонки, 6 рядов, зазор 10px. Замеры: 320 -> 1343, 390 -> 1444,
   412 -> 1481. */
@media (max-width: 479px) {
  body.theme-prostore-like .ps-pz-grid--n12 {
    min-height: calc(168.75vw + 795px);
  }
}

/* 2 колонки, 6 рядов, зазор 12px. Замеры: 480 -> 1683, 640 -> 1953. */
@media (min-width: 480px) and (max-width: 767px) {
  body.theme-prostore-like .ps-pz-grid--n12 {
    min-height: calc(168.75vw + 873px);
  }
}

/* 3 колонки, 4 ряда, зазор 14px. Замеры: 768 -> 1162, 1024 -> 1342. */
@media (min-width: 768px) and (max-width: 1199px) {
  body.theme-prostore-like .ps-pz-grid--n12 {
    min-height: calc(70.3vw + 622px);
  }
}

/* 6 колонок, 2 ряда. На широких экранах контейнер перестаёт расти
   (max-width 1200px), поэтому высота постоянна: 525px. */
@media (min-width: 1200px) {
  body.theme-prostore-like .ps-pz-grid--n12 {
    min-height: 525px;
  }
}