/* Блок 1 «Первый экран»: фото во весь экран, затемнение снизу, шапка поверх.
   Высота — экран устройства (кадры 390 — 844, 768 — 1024, 1920 — 1080; решение Александра 09.10.2026), с пределами. */
.hero { position: relative; isolation: isolate; color: var(--c-text-light); background: var(--c-bg-spruce); }
.hero__photo, .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__photo { z-index: -2; }
.hero__photo img { object-fit: cover; object-position: 50% 50%; }
/* «Затемнение»: сверху вниз, 0 → 22 % на четверти высоты → 88 % у низа */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .22) 26%, rgba(0, 0, 0, .88) 100%);
}
/* «Затемнение верх» (только 390): полоса 202–656 под надзаголовком и H1 — небо и листва светлые.
   Привязана к низу (188 = 844 − 656), как и содержимое: на низких экранах идёт вместе с текстом */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 188px; height: 454px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%);
}

.hero__in { display: flex; flex-direction: column; min-height: clamp(700px, 100svh, 1000px); }
.hero__content {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: 20px; padding-bottom: 32px;
}

.hero__eyebrow { font: 600 13px/16px var(--f-sans); letter-spacing: 2px; text-transform: uppercase; }
/* H1 = название + подзаголовок (для поиска); сам h1 не участвует в раскладке — вид как в макете */
.hero__h1 { display: contents; }
.hero__title, .hero__lead { display: block; margin: 0; }
.hero__title { font: 400 54px/58px var(--f-serif); }
.hero__lead { font: 400 19px/27px var(--f-sans); }

/* Фокус на фото: шалфей не виден на листве — белое кольцо с тёмной подложкой (у кнопки сохраняется и обводка) */
.hero :focus-visible { outline: 2px solid var(--c-text-light); box-shadow: 0 0 0 5px rgba(0, 0, 0, .55); }
.hero .btn:focus-visible { box-shadow: inset 0 0 0 1.5px var(--c-text-light), 0 0 0 5px rgba(0, 0, 0, .55); }

/* «Факты · стекло»: плашка на стекле. 390 — столбец (3 строки по 48, между ними линия 1), 768 и 1920 — ряд.
   Значение — Prata 18/24 (24/32 с 768), подпись — Manrope 13/18 (14/20) вполсилы белого, значок золотой 20, штрих 2 px. */
.facts { display: flex; flex-direction: column; align-self: stretch; padding: 4px 20px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--c-line-dark); }
.facts__sep { height: 1px; background: var(--c-line-dark); }
/* строка — не ниже 48 (как в кадре 390) и не выше, если подпись ушла под значение */
.fact { display: flex; align-items: center; gap: 12px; min-height: 48px; padding-block: 3px; }
.fact .icon { width: 20px; height: 20px; color: var(--c-gold); stroke-width: 2.4; }
.fact__text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; }
.fact__value { font: 400 18px/24px var(--f-digits); }
.fact__note { font: 400 13px/18px var(--f-sans); color: var(--c-text-dim); }

.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; align-self: stretch; }
.hero__actions .btn { align-self: stretch; }

/* «Видео-кнопка»: круг 56 с обводкой + подпись 18/24 */
.video-btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none;
  color: var(--c-text-light); font: 600 18px/24px var(--f-sans); text-decoration: none;
}
a.video-btn { cursor: pointer; }
.video-btn__circle { display: grid; place-items: center; width: 56px; height: 56px; border: 1.5px solid var(--c-text-light); border-radius: 50%; }
.video-btn__circle .icon { width: 18px; height: 18px; }

/* телефон (до 767): строка «Забронировать баню» (растягивается) + круг 64 без видимой подписи (имя «Смотреть видео» остаётся у кнопки), промежуток 12 */
@media (max-width: 767px) {
  .hero__actions { flex-direction: row; align-items: center; gap: 12px; }
  .hero__actions .btn { flex: 1 1 auto; min-width: 0; --btn-x: 24px; }
  .video-btn__circle { width: 64px; height: 64px; }
  .video-btn__circle .icon { width: 20px; height: 20px; }
  .video-btn__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (max-width: 389px) { .hero__actions .btn .icon { display: none; } }
@media (max-width: 359px) { .hero__actions .btn { font-size: 16px; --btn-x: 16px; } }
/* 320–359: пол высоты 700 держал кнопку брони и круг ниже сгиба на экранах 568–640 (содержимое 460 + шапка 76 = 536). Пол 540, промежутки между блоками 14 (было 20), низ 24 (было 32) —
   первый экран = высота окна, пока содержимое влезает; от 360 — прежние числа */
@media (max-width: 359px) {
  .hero__in { min-height: clamp(540px, 100svh, 1000px); }
  .hero__content { gap: 14px; padding-bottom: 24px; }
}

@media (min-width: 768px) {
  .hero::after { display: none; }
  .hero__in { min-height: clamp(760px, 100svh, 1200px); }
  .hero__content { gap: 24px; padding-bottom: 48px; }
  /* «Затемнение слева» под надзаголовком и H1: листва светлая; справа фото остаётся чистым */
  .hero::before {
    background:
      linear-gradient(to right, rgba(31, 45, 34, .6) 0%, rgba(31, 45, 34, .35) 35%, rgba(31, 45, 34, 0) 60%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .22) 26%, rgba(0, 0, 0, .88) 100%);
  }
  .hero__title { font-size: 82px; line-height: 86px; }
  .hero__lead { font-size: 22px; line-height: 30px; }
  /* «Факты · стекло» рядом: плашка по содержимому, ячейка — строка «значок + значение» и подпись под ней, разделители 1×48 */
  .facts { flex-direction: row; align-items: center; align-self: flex-start; gap: 24px; padding: 16px 24px; border-radius: var(--r-l); }
  .facts__sep { width: 1px; height: 48px; }
  .fact { display: grid; grid-template-columns: 20px auto; align-items: center; column-gap: 8px; row-gap: 4px; padding-block: 0; }
  .fact__text { display: contents; }
  .fact__value { grid-column: 2; grid-row: 1; justify-self: start; font-size: 24px; line-height: 32px; }
  .fact__note { grid-column: 1 / -1; grid-row: 2; font-size: 14px; line-height: 20px; white-space: nowrap; }
  .hero__actions { flex-direction: row; align-items: center; gap: 32px; align-self: auto; }
  .hero__actions .btn { align-self: auto; }
}
@media (min-width: 1200px) {
  .hero__content { padding-bottom: 64px; } /* в кадре 1920 низ кнопки брони 1016, до низа hero 1080 — поле 64 */
  .hero__title { font-size: 120px; line-height: 122px; }
  .hero__lead { font-size: 26px; line-height: 34px; }
  .facts { gap: 32px; padding: 20px 32px; }
}

/* Плавающая кнопка брони (только телефон; решение Александра 12.10.2026): появляется, когда первый экран (.hero) целиком ушёл вверх;
   у формы брони и в подвале прячется. По умолчанию скрыта (is-away в разметке) — без JS её нет. Только transform и visibility, без прозрачности. */
.float-book {
  position: fixed; left: var(--pad); right: var(--pad); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  box-shadow: inset 0 0 0 1.5px var(--c-text-light), 0 8px 24px rgba(0, 0, 0, .25);
  transform: none; visibility: visible;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
/* едет по любому фону — двойное кольцо: белое на тёмной подложке */
.float-book:focus-visible { outline-color: var(--c-text-light); box-shadow: inset 0 0 0 1.5px var(--c-text-light), 0 8px 24px rgba(0, 0, 0, .25), 0 0 0 5px rgba(0, 0, 0, .55); }
.float-book.is-away {
  transform: translateY(calc(100% + 20px + env(safe-area-inset-bottom, 0px))); visibility: hidden;
  transition: transform .12s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .12s;
}
@media (prefers-reduced-motion: reduce) { .float-book, .float-book.is-away { transition: none; } }
@media (min-width: 768px) { .float-book { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 96px; } } /* кнопка 56 + отступы 20 */

/* «Смотреть видео»: кнопка выглядит как прежняя видео-кнопка; ролик — во всплывающем окне */
/* F4: шрифт не наследуем (font: inherit давал 16/400 вместо 18/600 кадра) — берётся из .video-btn */
button.video-btn { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.video-dlg { width: min(1100px, calc(100vw - 32px), calc((100dvh - 136px) * 16 / 9)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--r-l); background: #000; overflow: visible; }
.video-dlg::backdrop { background: rgba(10, 14, 11, .82); }
.video-dlg__v { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-l); background: #000; }
.video-dlg__close { position: absolute; top: -52px; right: 0; }