/* ============================================================
   quest-fix.css — мелкие исправления вёрстки страниц квестов.

   ЭТОТ ФАЙЛ МОЖНО НЕ ТРОГАТЬ при обновлении дизайна.
   Он подключается ПОСЛЕ quest.css и поэтому переопределяет его.
   Смысл: правки ниже не пропадают, когда quest.css присылают заново.

   Что здесь и зачем:
   1) Длинные названия квестов ("Phasmophobia", "Американская история
      ужасов") не помещались в экран телефона: появлялась горизонтальная
      прокрутка и заголовок обрезался. Размер подобран замером —
      на экране 360px влезает максимум ~33px.
   ============================================================ */

@media (max-width: 560px) {
  /* Заголовок квеста: помещается даже при длинном названии */
  .hero h1 {
    font-size: clamp(26px, 9vw, 50px) !important;
    overflow-wrap: break-word;   /* страховка для очень узких экранов */
  }
}

/* Общая страховка: ни один блок не должен растягивать страницу вбок */
@media (max-width: 560px) {
  html, body { overflow-x: hidden; }
}

/* 2) Факты в hero — одна строка с подписями, как на референсе.
   Хитрость: на телефоне длинные слова заменяются короткими
   ("Длительность"→"Время", "минут"→"мин", "человек"→"чел").
   Именно поэтому три пилюли помещаются в строку и остаются читаемыми.
   Текст в HTML не меняется — подмена только визуальная, через CSS. */
@media (max-width: 560px) {
  .facts .wrap { gap: 6px !important; }
  .fact { padding: 7px 9px !important; gap: 6px !important; }
  .fact .k { font-size: 8px !important; letter-spacing: .06em !important; }
  .fact .v { font-size: 12.5px !important; }

  /* "Длительность" -> "Время" */
  .facts .wrap .fact:nth-child(1) .k { font-size: 0 !important; }
  .facts .wrap .fact:nth-child(1) .k::after {
    content: "Время"; font-size: 8px; letter-spacing: .06em;
  }
  /* "минут" -> "мин", "человек" -> "чел" */
  .fact .v small { font-size: 0 !important; }
  .facts .wrap .fact:nth-child(1) .v small::after { content: "мин"; font-size: 8.5px; letter-spacing: .06em; }
  .facts .wrap .fact:nth-child(2) .v small::after { content: "чел"; font-size: 8.5px; letter-spacing: .06em; }

  /* 3) Разделительные линии вокруг полосы фактов — мягче, как на референсе */
  .facts { border-bottom-color: rgba(255,255,255,.045) !important; }
  .fact { border-color: rgba(255,255,255,.05) !important; }
}

/* 4) Блок бронирования на телефоне — как на референсе.
   Было: три дня подряд со всеми слотами -> страница уезжала далеко вниз.
   Стало: один день (остальные по кнопке «Показать больше дней»),
   дата по центру, слоты компактные, цена красная. */
@media (max-width: 560px) {
  .sp-sch-day { text-align: center; margin: 0 0 14px; }
  .sp-sch-date {
    text-align: center; font-size: 11px !important;
    letter-spacing: .16em !important; color: #9a9aa0 !important;
    margin: 0 0 10px !important;
  }
  .sp-slot {
    font-size: 14px !important;
    padding: 7px 10px !important;
    margin: 0 3px 6px !important;
    min-width: 62px;
  }
  .sp-slot small {
    font-size: 9px !important;
    color: #e10600 !important;   /* цена красная, как в макете */
    margin-top: 1px !important;
  }
  .sp-sch-note { text-align: center; font-size: 11px; }
  .sp-sch-more { display: block; margin: 2px auto 0; }
}

/* 5) Фото в «Легенде квеста» на телефоне — как на референсе.
   Было: фото уезжало в самый низ (после списка «Вас ждёт» и примечания)
   и было уже текста на 80px — из-за стандартного отступа тега <figure>.
   Стало: фото сразу после вступительных абзацев и во всю ширину текста. */
@media (max-width: 560px) {
  .lede { display: flex !important; flex-direction: column; gap: 0 !important;
          align-items: stretch !important; }   /* иначе короткие абзацы сжимаются по тексту */
  .lede__text { display: contents; }

  /* вступление */
  .lede__text .eyebrow,
  .lede__text h2,
  .lede__text p:not(.lede-note) { order: 1; }

  /* затем фото */
  .aside-img {
    order: 2;
    margin: 4px 0 26px !important;   /* убираем боковой отступ <figure> */
    width: 100%;
  }
  .aside-img img { display: block; width: 100%; height: auto; }

  /* затем «Вас ждёт» и примечание */
  .lede__text .feat-h,
  .lede__text .checklist,
  .lede__text .lede-note { order: 3; }
}

/* 6) Hero и пилюли — «свободнее», как на референсе.
   Было: hero 64vh, отношение высота/ширина 1.38. При background-size:cover
   на узком экране фото сильно увеличивалось и обрезалось — выглядело сжатым.
   На референсе отношение ≈1.10, поэтому видно больше кадра.
   Пилюли фактов тоже сделаны просторнее — запас по ширине это позволял. */
@media (max-width: 560px) {
  .hero { min-height: 52vh !important; }
  .hero__bg { background-position: center 42% !important; }
}

/* Экраны от 380px (iPhone 12/13/14 и шире): пилюли просторнее */
@media (min-width: 380px) and (max-width: 560px) {
  .facts .wrap { gap: 6px !important; }
  .fact { padding: 9px 11px !important; }
  .fact .k { font-size: 8.5px !important; }
  .fact .v { font-size: 13.5px !important; }
  .facts .wrap .fact:nth-child(1) .k::after { font-size: 8.5px; }
  .facts .wrap .fact:nth-child(1) .v small::after,
  .facts .wrap .fact:nth-child(2) .v small::after { font-size: 9px; }
}

/* 7) Футер на телефоне — короткий, как на референсе.
   Было: логотип + список «Ещё квесты» (5 ссылок) + «Контакты» (2 телефона)
   -> футер занимал почти целый экран.
   Стало: логотип, подпись, линия и копирайт.
   Ничего не теряется: телефоны есть в блоке брони («или по телефону …»),
   а все квесты — в меню-бургере. */
@media (max-width: 560px) {
  .site-foot { padding: 34px 0 26px !important; }
  .site-foot .foot-col { display: none !important; }
  .foot-grid { gap: 0 !important; }
  .site-foot .copy span + span { display: none; }   /* лишняя ссылка в копирайте */
  .site-foot .copy {
    border-top: 1px solid rgba(255,255,255,.07);
    padding-top: 18px; margin-top: 22px;
  }
}

/* 8) Первый экран квеста растянут на всю высоту телефона:
   фото + заголовок + кнопки + полоса фактов занимают ровно один экран,
   как на главной. 69px — высота шапки, 75px — полоса фактов. */
@media (max-width: 560px) {
  .hero {
    box-sizing: border-box;
    min-height: calc(100svh - 69px - 75px) !important;
  }
}

/* 9) Согласие на обработку данных — ниже телефона и адреса,
   мелким шрифтом в самом низу блока бронирования. */
@media (max-width: 560px) {
  /* На разных страницах эти блоки лежат то внутри .wrap, то прямо в .book —
     поэтому делаем колонкой оба контейнера. */
  .book, .book > .wrap { display: flex; flex-direction: column; align-items: stretch; }
  .book .meta { order: 90; }
  .book .pdn-mini { order: 91; margin-top: 20px !important; }
}

/* 10) Блоки «Кому можно играть» и «Стоимость» — единое ЛЕВОЕ
   выравнивание, как во всех остальных секциях (тема «досье» —
   по левому краю — как и остальные секции страницы (тема
   «досье»). eyebrow, заголовок и карточки делят один левый край
   и одинаковую ширину. Перебивает инлайновые стили на страницах. */
section.section.wrap:has(.ages) > .eyebrow,
section.section.wrap:has(.pricing-card) > .eyebrow {
  display: inline-flex !important;
  justify-content: flex-start !important;
}
section.section.wrap:has(.ages) > h2,
section.section.wrap:has(.pricing-card) > h2 {
  text-align: left !important;
}
.ages,
.pricing-card {
  max-width: 760px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
.pricing-note {
  text-align: left !important;
  max-width: 760px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* 11) Красная черта под заголовком hero (.red-rule) была только тут
   и отличалась по толщине от «усика» eyebrow — единственный такой
   акцент на странице. Убираем, чтобы заголовки были единообразны:
   фирменный красный «усик» остаётся только у eyebrow. */
.hero .red-rule { display: none !important; }