/* /media/home/home-fix.css — FINAL 06.10.2026. Подключается одной строкой в <head> index.html
   ПОСЛЕ встроенного <style>. Тот же подход и токены, что /visa/schengen/schengen.css v8 и japan.css:
   первый экран по высоте (clamp от vh/svh), одно правило короткого ландшафта, компактный баннер,
   баннер не над меню/формой, подвал не под баннером. ≥1280 при высоте >800 не меняется. */
:root { --cookie-h: 118px; }

/* ---------- <768 (телефоны, обе ориентации): кнопки сразу под H1, абзац под кнопками ----------
   Текст не меняется, меняется только порядок блоков в колонке героя. */
@media (max-width: 767px) {
  .hero { padding-top: clamp(16px, 15vh - 30px, calc(var(--bar-h) + 36px)); }
  .hero h1 {
    font-size: clamp(26px, 10vh - 4px, var(--h1-size));
    margin-bottom: clamp(14px, 3vh, 28px);
    text-wrap: balance;
  }
  .hero__cta { order: 1; margin-top: 0; }
  .hero .sub { order: 2; margin: clamp(16px, 3vh, 28px) 0 0; }
  .hero .fine { order: 3; }
}
@supports (height: 1svh) {
  @media (max-width: 767px) {
    .hero { padding-top: clamp(16px, 15svh - 30px, calc(var(--bar-h) + 36px)); }
    .hero h1 { font-size: clamp(26px, 10svh - 4px, var(--h1-size)); margin-bottom: clamp(14px, 3svh, 28px); }
    .hero .sub { margin-top: clamp(16px, 3svh, 28px); }
  }
}
/* телефон в ландшафте: H1 без принудительных переносов, кнопки в ряд */
@media (max-width: 767px) and (orientation: landscape) {
  .hero h1 br { display: none; }
  .hero__cta { flex-wrap: nowrap; }
}

/* ---------- ≥768, низкие окна (900×600, 950×500, 1024×500, 1024×768, 1280×720, 1366×768, 812–932 ландшафт):
   отступ, H1 и абзац плавно по высоте; при высоте 800 значения равны обычным — на 800/801 скачка нет ---------- */
@media (min-width: 768px) and (max-height: 800px) {
  .hero { padding-top: clamp(16px, 21vh - 71px, calc(var(--bar-h) + 36px)); }
  .hero h1 {
    font-size: clamp(24px, 10vh - 24px, var(--h1-size));
    margin-bottom: clamp(10px, 4vh - 4px, var(--h1-to-lead));
  }
  .hero .sub {
    /* чем ниже окно, тем шире абзац (меньше строк); при высоте 800 — прежние 34rem */
    max-width: min(48rem, calc(34rem + max(0px, 800px - 100vh) * 1.6));
    margin-bottom: clamp(6px, 5.5vh - 16px, 28px);
    font-size: clamp(13px, 2vh + 1px, var(--lead-lg));
    line-height: clamp(18px, 3vh + 3px, calc(var(--lead-lg) * var(--lead-lg-lh)));
  }
  .hero__cta { margin-top: clamp(6px, 5.5vh - 16px, 28px); }
}
@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, 40vh - 163px, calc(var(--bar-h) + var(--section-py))); }
}
/* 1024–1279 ландшафт (две колонки): H1 не шире колонки. Instrument Serif без кириллицы — у посетителей
   кириллица идёт шрифтом-заменителем (Georgia / Noto Serif, ~12.3×кегль на «Великобритания, Япония»),
   и при 46px на 1024–1130 H1 рвётся на 5 строк, кнопки уходят под баннер. С 1134px снова 46px. */
@media (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) {
  .hero h1 { font-size: min(var(--h1-size), 4.5vw - 5px); }
}
@media (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) and (max-height: 800px) {
  .hero h1 { font-size: min(clamp(24px, 10vh - 24px, var(--h1-size)), 4.5vw - 5px); }
}
@supports (height: 1svh) {
  @media (min-width: 768px) and (max-height: 800px) {
    .hero { padding-top: clamp(16px, 21svh - 71px, calc(var(--bar-h) + 36px)); }
    .hero h1 { font-size: clamp(24px, 10svh - 24px, var(--h1-size)); margin-bottom: clamp(10px, 4svh - 4px, var(--h1-to-lead)); }
    .hero .sub {
      max-width: min(48rem, calc(34rem + max(0px, 800px - 100svh) * 1.6));
      margin-bottom: clamp(6px, 5.5svh - 16px, 28px);
      font-size: clamp(13px, 2svh + 1px, var(--lead-lg));
      line-height: clamp(18px, 3svh + 3px, calc(var(--lead-lg) * var(--lead-lg-lh)));
    }
    .hero__cta { margin-top: clamp(6px, 5.5svh - 16px, 28px); }
  }
  @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, 40svh - 163px, calc(var(--bar-h) + var(--section-py))); }
  }
  @media (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) and (max-height: 800px) {
    .hero h1 { font-size: min(clamp(24px, 10svh - 24px, var(--h1-size)), 4.5vw - 5px); }
  }
}

/* ---------- Короткий ландшафт: компактный cookie-баннер (одна строка 58px) — как schengen v8 ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .vcp-cookie {
    left: 12px;
    right: 12px;
    bottom: 8px;
    width: auto;
    max-width: none;
    max-height: none;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 6px 16px;
    border-radius: 14px;
    overflow: visible;
    transform: none;
  }
  .vcp-cookie__ico, .vcp-cookie__text { display: none; }
  .vcp-cookie__copy { flex: 1 1 auto; min-width: 0; }
  .vcp-cookie__title { margin: 0; font-size: 13px; }
  .vcp-cookie__actions { flex: 0 0 auto; flex-direction: row; }
  .vcp-cookie__btn { width: auto; min-height: 44px; height: 44px; padding: 0 20px; }
}

/* ---------- Баннер cookie не закрывает низ подвала ---------- */
@media (min-width: 768px) and (max-width: 1023px) { :root { --cookie-h: 150px; } }
@media (max-width: 767px) { :root { --cookie-h: 196px; } }
@media (max-width: 480px) { :root { --cookie-h: 104px; } }
@media (orientation: landscape) and (max-height: 500px) { :root { --cookie-h: 76px; } }
/* баннер не перекрывает открытое меню и форму заявки (вернётся после закрытия) */
body.is-nav-open .vcp-cookie,
body:has(.visa-overlay.is-open) .vcp-cookie { visibility: hidden; }