/* air-home.css — AIR 06.10.2026: воздух и ритм первого экрана главной.
   Подключается ПОСЛЕ home-fix.css одной строкой: <link rel="stylesheet" href="/media/home/air-home.css?v=1" />
   Текст не меняется. Кегли не меньше исходного дизайна (H1 32/46/50, абзац 16–17 / 1.55).
   Место на низких экранах берём перестановкой: кнопки сразу под H1, абзац ниже (как на телефонах). */
/* ---------- Общие токены воздуха (одинаковые в air-schengen.css, air-japan.css, air-home.css) ----------
   Шкала 8/12/16/24/32/48/64/96. Внутри группы — 8–12, между группами — 24–32 (в 2–3 раза больше),
   крупнее 32 в первом экране не используем, чтобы не было «аэродромов». */
:root {
  --air-8: 8px; --air-12: 12px; --air-16: 16px; --air-24: 24px;
  --air-32: 32px; --air-48: 48px; --air-64: 64px; --air-96: 96px;
  --air-label: var(--air-16);  /* надзаголовок → H1: подпись принадлежит заголовку */
  --air-title: var(--air-24);  /* H1 → следующий блок */
  --air-group: var(--air-32);  /* смена смысла: текст → кнопки, кнопки → мета */
  --air-btn: var(--air-12);    /* между кнопками одной группы */
}
@media (orientation: landscape) and (max-height: 500px) {
  :root { --air-group: var(--air-24); --air-btn: var(--air-8); }
}

/* ---------- Ритм героя, все ширины: H1 → абзац 24, абзац → кнопки 32 (было 56), кнопки → строка-подпись 32 ---------- */
.hero h1 { margin-bottom: var(--air-title); }
.hero .sub { margin-bottom: 0; }
.hero__cta { margin-top: var(--air-group); gap: var(--air-btn); }
.hero .fine { padding-top: var(--air-group); }

/* ---------- <768: порядок H1 → кнопки → абзац → подпись (из home-fix), кегли исходные ---------- */
@media (max-width: 767px) {
  .hero h1 { font-size: var(--h1-size); margin-bottom: var(--air-title); }
  .hero__cta { margin-top: 0; }
  .hero .sub { margin: var(--air-group) 0 0; }
  .hero .fine { padding-top: var(--air-title); }
}

/* ---------- ≥768, окна ниже 800: кегли и ширина абзаца исходные, блок не центрируется (растёт вниз) ---------- */
@media (min-width: 768px) and (max-height: 800px) {
  .hero h1 { font-size: var(--h1-size); margin-bottom: var(--air-title); }
  .hero .sub { max-width: 34rem; margin-bottom: 0; font-size: var(--lead-lg); line-height: var(--lead-lg-lh); }
  .hero__cta { margin-top: var(--air-group); }
  .hero { align-content: start; }
}
@media (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) {
  .hero h1 { font-size: min(var(--h1-size), 4.5vw - 5px); }
}
/* верхний отступ низких окон ≥1024 (две колонки): кегли теперь исходные, поэтому блок поднимаем,
   а не уменьшаем текст; при высоте 800 — те же 157px, что и раньше, скачка на 800/801 нет */
@media (min-width: 1280px) and (max-height: 800px),
       (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) and (max-height: 800px) {
  .hero { padding-top: clamp(16px, 96.25vh - 613px, calc(var(--bar-h) + var(--section-py))); }
}
@supports (height: 1svh) {
  @media (min-width: 1280px) and (max-height: 800px),
         (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) and (max-height: 800px) {
    .hero { padding-top: clamp(16px, 96.25svh - 613px, calc(var(--bar-h) + var(--section-py))); }
  }
}

/* ---------- Низкие окна ≥768 (высота ≤700): кнопки сразу под H1, абзац и подпись ниже ---------- */
@media (min-width: 768px) and (max-height: 700px) {
  .hero__cta { order: 1; margin-top: 0; }
  .hero .sub { order: 2; margin-top: var(--air-group); }
  .hero .fine { order: 3; padding-top: var(--air-title); }
}

/* ---------- Короткий ландшафт 768+: H1 не меньше 32px (было до 24px) ---------- */
@media (min-width: 768px) and (orientation: landscape) and (max-height: 500px) {
  .hero h1 { font-size: min(var(--h1-size), max(32px, 14vh - 14px)); }
}
@supports (height: 1svh) {
  @media (min-width: 768px) and (orientation: landscape) and (max-height: 500px) {
    .hero h1 { font-size: min(var(--h1-size), max(32px, 14svh - 14px)); }
  }
}
@media (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) and (max-height: 500px) {
  .hero h1 { font-size: min(var(--h1-size), max(32px, 14vh - 14px), 4.5vw - 5px); }
}
@supports (height: 1svh) {
  @media (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) and (max-height: 500px) {
    .hero h1 { font-size: min(var(--h1-size), max(32px, 14svh - 14px), 4.5vw - 5px); }
  }
}

/* ---------- Телефон в ландшафте: кнопки 44px (как на страницах Шенгена и Японии), верхний отступ 16 ----------
   H1 остаётся 32px. */
@media (max-width: 767px) and (orientation: landscape) {
  /* FIX склейки: в home-fix.css перенос <br> скрывался, а пробелов в разметке нет —
     выходило «сопровождение:Шенген», «США,Великобритания». Возвращаем переносы (3 строки, 32px) */
  .hero h1 br { display: inline; }
  .hero { padding-top: var(--air-16); }
  .hero__btn { min-height: 44px; height: 44px; padding-top: 0; padding-bottom: 0; }
}

/* ---------- Самый низкий ландшафт (568×320, высота ≤340): кегли те же, чуть плотнее только отступы ---------- */
@media (orientation: landscape) and (max-height: 340px) {
  .hero { padding-top: var(--air-12); }
  .hero h1 { margin-bottom: var(--air-16); }
}

/* ---------- Большие экраны (высота от ~960): герой не выше 860px — пустота над H1 не больше 25% экрана
   (на 1920×1080 было 25%, на 2560×1440 — 31%). До 1440×900 включительно ничего не меняется. ---------- */
@media (min-width: 1280px) {
  .hero { min-height: min(calc(100vh - 100px), 860px); }
}