/* ================================================================
   Goose Tours — мобильная версия (экраны до 600 px).
   Источник: Figma «goose-trips (Copy)», кадр «design phone» (430 px, контент 390 px, поля 20 px),
   кадры «menu», «POP UP» и компоненты UI KIT - PHONE.

   --m — «1 px макета»: на экране 430 px и шире равен 1 px, на узких телефонах уменьшается
   пропорционально, поэтому переносы строк в заголовках и положение рисунков совпадают с макетом.
   Рисунки: .mdec (картинки) и .mband (песочные плашки) — координаты в px макета от левого
   верхнего угла блока: --x / --r (отступ справа), --y, --w, --h.
   ================================================================ */

/* Элементы только для телефона: на компьютере скрыты (картинки с loading="lazy" там даже не скачиваются) */
.eb-n, .m-only, .mdec, .mband, .car-switch, .fdec { display: none; }
br.m-br { display: none; }

@media (max-width: 600px) {
  :root {
    --gutter: 20px;
    --u: calc((100vw - 40px) / 1488);
    --m: min(1px, calc((100vw - 40px) / 390));
    --gap-section: 64px;
    --radius: 24px;
    --btn-h: 56px;
  }
  .d-only, br.d-br { display: none; }
  .m-only { display: inline; }
  br.m-br { display: inline; }

  /* ---------- Типографика (UI KIT - PHONE) ---------- */
  /* высоты строк — точно как в макете: 36/45, 26/32, 20/25, 18/22, 16/19, 14/17 */
  .h1 { font-size: calc(36 * var(--m)); line-height: round(calc(45 * var(--m)), 1px); }
  .h2 { font-size: calc(26 * var(--m)); line-height: round(calc(32 * var(--m)), 1px); }
  .h3, .h4 { font-size: calc(20 * var(--m)); line-height: round(calc(25 * var(--m)), 1px); }
  .h1 + .h2 { margin-top: 0; }
  .body, .body p { font-size: 16px; line-height: 19px; }
  .body p + p { margin-top: 4px; }

  /* Надзаголовок: линия 24 px и номер блока «01»…«07» */
  .eyebrow { gap: 8px; margin-bottom: 16px; font-size: 14px; line-height: 17px; }
  .eyebrow::before { width: 24px; }
  .program > .eyebrow { margin-bottom: 15px; } /* в мобильном макете у блока 04 надзаголовок на 1 px ближе */
  .eb-t { display: none; }
  .eb-n { display: inline; }
  /* Телефон: сезон — в той же строке, что номер блока: «— 01 — СЕЗОН: ДЕКАБРЬ — МАРТ» */
  /* Полоса «Сезон экспедиций»: 32 px от шапки и от блока 1 */
  .season { margin-top: 32px; padding: 12px 0; }
  .season-t { font-size: calc(20 * var(--m)); line-height: round(calc(25 * var(--m)), 1px); }
  .season-s { margin-top: 4px; font-size: calc(18 * var(--m)); line-height: round(calc(22 * var(--m)), 1px); } /* h5-mob: Exo 2 Medium 18/22 */
  main > .season + section { margin-top: 32px; }
  /* Подвал: подпись дизайнера по центру под иконками */
  .credit { position: static; width: auto; text-align: center; font-size: 14px; line-height: 17px; order: 3; margin-top: 8px; }

  /* Кнопки: красные, скругление 24, высота 56, Unbounded Medium 20 */
  .btn {
    height: 56px; border-radius: 24px; border-color: var(--red); background: var(--red); color: var(--bg);
    font-size: calc(20 * var(--m)); padding: 0 16px;
  }
  .btn:hover, .btn:focus-visible { background: var(--red); color: var(--bg); }
  .btn:active { background: #8c3419; border-color: #8c3419; }

  /* ---------- Рисунки и плашки ---------- */
  .mband {
    display: block; position: absolute; z-index: 0; background: var(--sand);
    top: calc(var(--y) * var(--m)); height: calc(40 * var(--m));
  }
  .mband-l { left: -20px; width: 100%; }  /* от левого края экрана, не доходя 40 px до правого */
  .mband-r { left: 20px; width: 100%; }   /* от 40 px слева до правого края экрана */
  .mdec {
    display: block; position: absolute; z-index: 0; pointer-events: none; object-fit: contain; max-width: none;
    left: calc(var(--x, 0) * var(--m)); top: calc(var(--y) * var(--m));
    width: calc(var(--w) * var(--m)); height: calc(var(--h) * var(--m));
  }
  .mdec.mr { left: auto; right: calc(var(--r) * var(--m)); }
  .mdec.m-bleed-r { right: -20px; } /* «нашивка» обрезана краем экрана */

  /* ---------- Шапка и меню ---------- */
  .site-header { padding-top: 16px; }
  .header-row { padding-bottom: 15px; } /* линия хедера на 72 px, как в макете */
  .logo img { width: 100px; height: 40px; }
  .burger { width: 56px; height: 40px; padding: 0 9px; gap: 10px; }
  .burger span { height: 2px; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }
  .menu { padding: 40px 20px; gap: 32px; align-items: center; }
  .menu-links { width: 100%; gap: 0; }
  .menu-links a {
    display: block; padding: 7px 0; border-bottom: 1px solid var(--txt); text-align: center;
    font-family: var(--f-head); font-weight: 500; font-size: calc(20 * var(--m)); line-height: round(calc(25 * var(--m)), 1px);
  }
  .menu-links a:first-child { border-top: 1px solid var(--txt); }
  .socials { gap: 8px; }

  /* ---------- 1. Главный экран ---------- */
  .hero { display: flex; flex-direction: column; gap: 0; }
  .hero-text { display: contents; }
  .hero .eyebrow { order: 1; }
  .hero .h1 { order: 2; padding-left: calc(37 * var(--m)); }
  .hero-sub { order: 3; position: relative; text-align: left; }
  .hs-a { position: absolute; right: 0; top: calc(-35 * var(--m)); }
  .hero-photo { order: 4; margin-top: 32px; min-height: 0; aspect-ratio: auto; height: round(calc((100vw - 40px) * 370 / 390), 1px); }
  .hero-desc { order: 5; margin-top: 24px; }
  .hero-text .btn { order: 6; margin-top: 48px; }

  /* ---------- 2. Цифры: сетка 2×2 ---------- */
  .stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 16px; border: 0; padding: 0; position: relative; } /* ячейки 187 + 16 + 187, линия посередине */
  .stats::after { content: ""; position: absolute; left: 0; right: 0; top: 137px; height: 1px; background: var(--txt); }
  .stat {
    position: relative; flex-direction: column; justify-content: flex-start; gap: 16px;
    min-height: 129px; padding: 8px 0; margin: 0; border: 0;
    font-size: calc(20 * var(--m)); line-height: round(calc(25 * var(--m)), 1px); text-align: center; white-space: normal;
  }
  .stat + .stat { border-left: 0; margin-left: 0; padding-left: 0; }
  .stat:nth-child(even) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 0; }
  .stat:nth-child(even)::before { content: ""; position: absolute; left: -8px; top: 0; bottom: 0; width: 1px; background: var(--txt); }
  .stat img { width: 72px; height: 72px; min-width: 0; min-height: 0; }

  /* ---------- 3. Карнатака ---------- */
  .karnataka > .h1 { white-space: nowrap; }
  .karnataka > .h2 { max-width: calc(314 * var(--m)); }
  .k-row { display: flex; flex-direction: column; margin-top: 32px; gap: 0; }
  .k-photo img { aspect-ratio: auto; height: round(calc((100vw - 40px) * 160 / 390), 1px); }
  .k-side { gap: 0; }
  .k-side .body { margin-top: 24px; }
  .k-side .btn { margin-top: 48px; }

  /* ---------- 4. Маршрут ---------- */
  .route-sub { padding-left: 0; text-align: right; }
  .regions { display: flex; flex-direction: column; margin-top: 32px; }
  .regions article,
  .regions article:nth-child(odd),
  .regions article:nth-child(even) { min-height: 0; padding: 16px 0; gap: 8px; border: 0; }
  .regions article:first-child { padding-top: 0; }
  .regions article:last-child { padding-bottom: 0; }
  .regions article + article:nth-child(n) { border-top: 1px solid var(--txt); padding-top: 15px; } /* 16 − 1 px линии */

  /* ---------- 5. Программа по дням ---------- */
  .days { display: block; margin-top: 32px; }
  .day-head { align-items: center; gap: 0; padding: 8px 0 7px; font-size: calc(20 * var(--m)); line-height: round(calc(25 * var(--m)), 1px); } /* строка 66: 8 + 50 + 8, линия — 1 px из нижних 8 */
  .days-col .day:first-child .day-head { padding-top: 7px; } /* 8 − 1 px верхней линии списка */
  .days-col + .days-col .day:first-child .day-head { padding-top: 8px; }
  .day-head img { width: 40px; height: 40px; }
  .day-title { flex-direction: column; padding-top: 0; }
  .day-t { overflow-wrap: anywhere; }
  .day.is-open .day-head { padding-bottom: 4px; }
  .day-body .body { padding: 0 0 7px; }
  .day-body .body p + p { margin-top: 4px; }

  /* Карусель: фото, полоса с названием раздела (по нажатию — следующий раздел), текст */
  .carousel { display: flex; flex-direction: column; gap: 0; margin-top: 32px; }
  .car-stage { order: 1; aspect-ratio: auto; height: round(calc((100vw - 40px) * 270 / 390), 1px); }
  .carousel .car-side { order: 2; }
  .car-arrow { display: none; }
  .car-dots { right: 4px; bottom: 4px; gap: 4px; }
  .car-dots span, .car-dots span.on { width: 8px; height: 8px; border-radius: 50%; }
  .car-tabs { display: none; }
  .car-switch {
    display: flex; align-items: center; justify-content: flex-start; padding-left: 20px; position: relative;
    width: calc(100% + 40px); height: 40px; margin: 24px -20px 0; background: var(--sand);
    font-family: var(--f-head); font-weight: 500; font-size: calc(20 * var(--m)); line-height: round(calc(25 * var(--m)), 1px); text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }
  .car-switch img { position: absolute; right: 20px; top: 0; width: 40px; height: 40px; transform: rotate(-90deg); }
  .car-switch:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
  .car-text { margin-top: 16px; }
  .car-text p + p { margin-top: 4px; }

  /* ---------- 6. О гиде ---------- */
  .guide { display: flex; flex-direction: column; gap: 0; }
  .guide-row, .guide-text { display: contents; }
  .guide .eyebrow { order: 1; }
  .guide > .h1 { order: 2; }
  .guide-sub { order: 3; text-align: right; }
  .guide-text .facts { order: 4; margin-top: 32px; }
  .guide-photo { order: 5; margin-top: 24px; }
  .guide-photo img { aspect-ratio: auto; height: round(calc((100vw - 40px) * 370 / 390), 1px); object-position: center; }
  .guide-text > .body { order: 6; margin-top: 24px; }
  .guide-text .btn { order: 7; margin-top: 48px; width: 100%; min-width: 0; }
  .facts li { gap: 8px; font-size: calc(18 * var(--m)); line-height: round(calc(22 * var(--m)), 1px); }
  .facts li + li { margin-top: 8px; }
  .facts li::before { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

  /* ---------- 7. Стоимость ---------- */
  .price > .h2 { text-align: right; }
  .price-row { display: block; margin-top: 32px; }
  .incl li { gap: 8px; min-height: 24px; font-family: var(--f-body); font-weight: 500; font-size: calc(18 * var(--m)); line-height: round(calc(22 * var(--m)), 1px); }
  .incl li + li { margin-top: 8px; }
  .incl li::before { width: 24px; height: 24px; }
  .price-photo { display: none; } /* на телефоне цена — «нашивка» у заголовка */
  .price-side { margin-top: 24px; align-items: stretch; }
  .price-notes { margin-top: 0; }
  .price { padding-bottom: 0; }
  .price-side .btn { margin-top: 48px; }

  /* ---------- 8–9. FAQ и советы: свёрнутые ответы ---------- */
  .faq > .h1 { max-width: none; }
  .faq .qa-list { width: auto; margin-top: 32px; }
  main > .tips { margin-top: 32px; }
  .tips { display: block; }
  .tips-gfx { display: none; }
  .tips-head { text-align: right; }
  .tips .qa-list { margin-top: 32px; }
  .qa, .qa:first-child { padding: 0; }
  .qa:first-child .h3 { padding-top: 7px; } /* 8 − 1 px верхней линии списка */
  .qa .h3 {
    display: flex; align-items: center; gap: 0; margin: 0; padding: 8px 0 7px;
    color: var(--txt); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .qa-arrow { display: block; width: 40px; height: 40px; flex: none; }
  .qa-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
  .qa-body > div { overflow: hidden; }
  .qa-body .body { padding: 4px 0 7px; }
  .qa.is-open .qa-body { grid-template-rows: 1fr; }

  /* ---------- 10. Форма ---------- */
  .cta-title { text-align: left; }
  .cta-sub { text-align: right; }
  .lead-form { display: flex; flex-direction: column; width: auto; min-width: 0; margin-top: 32px; }
  .lead-form .field { order: 1; margin: 0 20px; padding: 0; }
  .lead-form .field + .field { margin-top: -1px; }
  .field input, .field textarea { min-height: 39px; padding: 9px 8px 8px; font-size: calc(18 * var(--m)); line-height: round(calc(22 * var(--m)), 1px); } /* шаг полей 40 / 40 / 84 */
  .field textarea { min-height: 83px; height: 83px; }
  .contact-toggle { padding-right: 0; height: 39px; } /* строка 40, как у поля «Имя» */
  .contact-toggle img { width: 40px; height: 40px; margin: -1px 0 0; }
  .contact-list { min-width: 180px; }
  .form-cta { order: 2; flex-direction: column-reverse; align-items: center; gap: 4px; margin-top: 24px; text-align: center; }
  .form-cta img { width: 38px; height: 34px; }
  /* галочка встаёт в промежуток 48 px между «Хотите увидеть…» и кнопкой, как в макете */
  .consent { order: 3; margin-top: 16px; padding: 0; min-height: 0; font-size: 14px; line-height: 16px; } /* 16 px сверху, 48 до кнопки */
  .consent-text { padding-top: 0; }
  .lead-form .btn { order: 4; margin-top: 48px; }
  .form-error { order: 5; }

  /* ---------- Подвал ---------- */
  .site-footer { margin-top: 64px; }
  .footer-up { position: relative; padding: 16px 0; }
  .footer-grid { flex-direction: column; align-items: center; gap: 8px; }
  .footer-left { flex-direction: column; align-items: center; gap: 0; }
  .footer-logo { width: auto; height: auto; }
  .footer-logo img { width: 128px; height: 128px; }
  .footer-menu { display: none; }
  .footer-side { align-items: center; width: auto; gap: 0; }
  .footer-gr { display: none; }
  .socials-xl { gap: 8px; }
  .socials-xl img { width: 40px; height: 40px; }
  .fdec { display: block; position: absolute; pointer-events: none; }
  .fdec-l { left: 10px; top: 50%; transform: translateY(-50%); width: calc(73 * var(--m)); height: auto; }
  .fdec-r { right: 10px; top: 50%; transform: translateY(-50%); width: calc(101 * var(--m)); height: auto; }
  .footer-down { flex-direction: column; align-items: center; gap: 0; padding: 0; font-size: 14px; }
  .footer-down > span:first-child, .footer-legal a { display: flex; align-items: center; justify-content: center; min-height: 40px; text-align: center; }
  .footer-legal { flex-direction: column; align-items: center; gap: 0; }
  .footer-legal a:last-child { order: -1; } /* как в макете: сначала политика, потом согласие */

  /* ---------- Окно «Заявка отправлена» ---------- */
  .modal { padding: 0; }
  .modal-box { width: 100%; max-width: 430px; padding: 64px 20px; border: 0; }
  .modal-gfx { width: 100%; margin-bottom: -10px; }
  .modal-gfx picture:first-child img { width: 118px; height: 56px; }
  .modal-gfx picture:last-child img { width: 102px; height: 105px; }
  .modal-ok { width: 100%; }

  /* ---------- Кнопка «Забронировать!» внизу экрана при прокрутке ---------- */
  .m-cta {
    display: flex; position: fixed; left: 20px; right: 20px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 40; margin: 0; box-shadow: 0 6px 20px rgba(58, 58, 58, .25);
    transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none;
    transition: transform .3s ease, opacity .3s ease, background .2s;
  }
  .m-cta.is-shown { transform: none; opacity: 1; pointer-events: auto; }
  body:has(.modal:not([hidden])) .m-cta { display: none; } /* открыто окно «Заявка отправлена» */
}


/* Переносы строк как в мобильном макете Figma (кадр 430 px): <br class="mf">.
   На более узких телефонах текст переносится сам, чтобы не было коротких «хвостов». */
@media (min-width: 420px) and (max-width: 600px) {
  .mf { display: inline; }
}