/* ============================================================================
   Мобильный слой лэндинга.
   Грузится ПОСЛЕ styles.css, поэтому переопределяет без !important.

   Оригинальная вёрстка не переписана: в styles.css уже есть большой мобильный
   блок (@media 767px / 380px). Здесь только то, чего там не хватало.
   Почти всё завёрнуто в мобильные media-queries, чтобы десктоп остался
   ровно таким же, как на londontour.top.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. Общие защиты (работают на всех ширинах, но срабатывают только когда
      контент реально не помещается — десктоп визуально не меняется)
   ------------------------------------------------------------------------- */

html {
  /* iOS сам увеличивает шрифты при повороте в альбом — отключаем */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Длинные русские слова («предложение», «апартаменты») в заголовках
   распирали grid-колонку и вылезали за контейнер на узких экранах */
main :where(h1, h2, h3, h4) {
  overflow-wrap: break-word;
}

/* Grid-элементы по умолчанию имеют min-width:auto и не дают колонке сжаться
   меньше самого длинного слова. Это и был источник выноса за экран. */
:where(
  .fit__grid,
  .london__inner,
  .living__grid,
  .visa__inner,
  .safety__layout,
  .application__grid,
  .income__intro,
  .metric-grid,
  .benefit-grid,
  .freedom__cards,
  .visa__metrics,
  .numbered-list li
) > * {
  min-width: 0;
}

/* ----------------------------------------------------------------------------
   2. Телефоны (≤ 767px)
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* --- Радио «Есть опыт: Да / Нет» ---
     Были кликабельны 50×21px — меньше рекомендованных 44px, промахнуться легко.
     Делаем две полноразмерные плашки на всю ширину. */
  .lf-radio {
    display: flex;
    gap: 10px;
    margin-top: 10px;
  }

  .lf-radio label {
    min-height: 48px;
    flex: 1 1 0;
    justify-content: center;
    padding-inline: 14px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    transition:
      border-color 180ms var(--ease),
      background 180ms var(--ease);
  }

  .lf-radio label:has(input:checked) {
    border-color: var(--color-pink);
    background: var(--color-bg-soft);
  }

  .lf-radio input {
    width: 20px;
    height: 20px;
  }

  /* --- Горизонтальные карусели ---
     Свайп по галерее на iOS утягивал страницу «назад» по истории */
  .apart-gallery,
  .stories__viewport {
    overscroll-behavior-x: contain;
  }

  /* Палец не должен ронять вертикальный скролл при свайпе галереи */
  .apart-gallery {
    touch-action: pan-x pan-y;
  }

  /* --- Мелкий текст в интерактиве --- */
  .button--mobile {
    font-size: 13px;
  }

  /* --- Кнопка «Наверх» в подвале: 12px и маленькая зона нажатия --- */
  .footer__top-link,
  .footer a[href="#top"] {
    min-height: 44px;
    align-items: center;
    font-size: 13px;
  }
}

/* ----------------------------------------------------------------------------
   3. Узкие телефоны (≤ 360px): iPhone SE, старые Android
      Нижняя граница шрифта заголовков (35px) была больше, чем помещается,
      поэтому заголовки вылезали за контейнер.
   ------------------------------------------------------------------------- */

@media (max-width: 360px) {
  .section-heading h2,
  .safety__head h2,
  .living__copy h2,
  .visa__copy h2,
  .guests__copy h2,
  .freedom__head h2,
  .application__copy h2 {
    font-size: clamp(28px, 8.8vw, 35px);
    line-height: 1.03;
  }

  .london__title {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Плашки-преимущества в hero переносились по одному слову */
  .hero__benefits li {
    padding-inline: 10px;
    font-size: 11.5px;
  }

  /* Липкая CTA: на узком экране текст слева уже скрыт (см. styles.css),
     кнопке отдаём всю ширину, но не даём ей стать выше нужного */
  .mobile-cta {
    right: 8px;
    left: 8px;
    padding-inline: 8px;
  }
}

/* ----------------------------------------------------------------------------
   4. Телефон в альбомной ориентации (низкий экран)
      Иначе первый экран занимает hero целиком и контент не виден.
   ------------------------------------------------------------------------- */

@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: 72px;
    padding-bottom: 44px;
  }

  .hero__scroll {
    display: none;
  }

  .mobile-cta {
    min-height: 54px;
  }
}

/* ----------------------------------------------------------------------------
   5. Планшеты (768–900px): промежуток между мобильным и десктопным блоками.
      Секции уже одноколоночные, но текст растягивался на всю ширину строкой
      по 110+ символов — читать тяжело.
   ------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 900px) {
  .section-heading p,
  .living__copy p,
  .visa__copy p,
  .safety__head p,
  .freedom__head p,
  .application__copy p {
    max-width: 62ch;
  }
}