/* air-japan.css — AIR 06.10.2026: воздух и ритм первого экрана.
   Подключается ПОСЛЕ japan.css (FINAL) одной строкой:
   <link rel="stylesheet" href="/visa/japan/air-japan.css?v=1" />
   Текст не меняется. Кегли не меньше исходного дизайна (H1 40/56–80, абзац 17/1.5).
   Место на низких экранах берём перестановкой: кнопки сразу под 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); }
}

/* ---------- Ритм героя, все ширины ---------- */
.jp-kicker { margin-bottom: var(--air-label); }
.jp-hero h1 { line-height: 1.04; }
.jp-lead { margin-top: var(--air-title); font-size: 17px; line-height: 1.5; }
.jp-hero__actions { margin-top: var(--air-group); gap: var(--air-btn); }
.jp-trust { margin-top: var(--air-group); }

/* ---------- Кегли: обратно к исходному дизайну (сжатие по высоте отменяется) ---------- */
@media (min-width: 768px) {
  .jp-hero h1 { font-size: clamp(56px, 5.15vw, 80px); }
  .jp-hero { padding-top: clamp(16px, 15.6vh - 48px, 52px); }
}
@supports (height: 1svh) {
  @media (min-width: 768px) { .jp-hero { padding-top: clamp(16px, 15.6svh - 48px, 52px); } }
}
@media (max-width: 767px) {
  .jp-hero h1 { font-size: 40px; }
  .jp-hero { padding-top: clamp(16px, 5vh - 14px, 28px); }
}
@supports (height: 1svh) {
  @media (max-width: 767px) { .jp-hero { padding-top: clamp(16px, 5svh - 14px, 28px); } }
}

/* ---------- Низкий экран (высота ≤640, любая ширина): кнопки сразу под H1,
   абзац и мета уходят ниже и продолжаются под первым экраном ---------- */
@media (max-height: 640px) {
  .jp-hero__copy { display: flex; flex-direction: column; }
  .jp-kicker { order: 0; }
  .jp-hero h1 { order: 1; }
  .jp-hero__actions { order: 2; margin-top: var(--air-title); }
  .jp-lead { order: 3; margin-top: var(--air-group); }
  .jp-trust { order: 4; margin-top: var(--air-title); }
}

/* ---------- Короткий ландшафт 768+: H1 не меньше телефонного 40px (было до 33px) ---------- */
@media (min-width: 768px) and (orientation: landscape) and (max-height: 500px) {
  .jp-hero h1 { font-size: clamp(40px, 14vh - 14px, 56px); }
}
@supports (height: 1svh) {
  @media (min-width: 768px) and (orientation: landscape) and (max-height: 500px) {
    .jp-hero h1 { font-size: clamp(40px, 14svh - 14px, 56px); }
  }
}
@media (max-width: 767px) and (orientation: landscape) {
  /* FIX склейки: в japan.css FINAL перенос <br> скрывался, а пробела в разметке нет —
     выходило «Япониюпод ключ». Возвращаем перенос: H1 в две строки, 40px */
  .jp-hero h1 br { display: inline; }
  .jp-hero h1 { white-space: normal; line-height: 1.04; }
  .jp-lead { line-height: 1.5; }
  .jp-hero__actions { gap: var(--air-btn); }
}

/* ---------- Телефоны 421–767: пресс-блок не толще 64px сверху и снизу (было 72/84) ---------- */
@media (min-width: 421px) and (max-width: 767px) {
  .jp-press { padding: var(--air-64) 0; }
}

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

/* 26.10: низ рамки новостей → верх рамки СМИ: 64 / 80 / 96. Фон секций один, шва по рамке нет. */
html .jp-press { padding-top: 96px; }
@media (max-width: 1279px) {
  html .jp-press { padding-top: 80px; }
}
@media (max-width: 767px) {
  html .jp-press { padding-top: 64px; }
}
/* 26.10: верх кейса и карты 96 с 1024, новости 64 / 80 / 96, рамки по полям страницы. */
@media (min-width: 1024px) {
  html .jp-case { padding-top: 96px; }
  html .jp-case__map--full { top: 96px; }
}
html .nl.nl--visa { --nl-pt: 96px; }
@media (max-width: 1023px) {
  html .nl.nl--visa { --nl-pt: 80px; }
}
@media (max-width: 767px) {
  html .nl.nl--visa { --nl-pt: 64px; }
}
html .nl--visa .nl__in,
html .jp-press .jp-press__in {
  width: auto;
  max-width: none;
  margin-left: 32px;
  margin-right: 32px;
}
@media (max-width: 767px) {
  html .nl--visa .nl__in,
  html .jp-press .jp-press__in {
    margin-left: 24px;
    margin-right: 24px;
  }
}
@media (min-width: 1440px) {
  html .nl--visa .nl__in,
  html .jp-press .jp-press__in {
    margin-left: calc((100% - 1216px) / 2);
    margin-right: calc((100% - 1216px) / 2);
  }
}
/* 27.10: ниже 1024 блок «Что входит» не залипает и не наезжает. */
@media (max-width: 1023px) {
  html #steps {
    position: static;
    top: auto;
    min-height: 0;
    padding-bottom: 0;
  }
  html .jp-case { min-height: 0; }
}