/* ============================================================
   Блок 3 — герой, вариант A (редизайн: кинематографичный).
   Текст и кнопки прямо на видео, тёплый скрим слева-снизу,
   видео доминирует. Композиция — из прототипа (контент,
   бронибар), значения — из бренд-ДС.
   ============================================================ */

:root {
  /* Высота «шапки» = утилити-плашка (~38px) + хедер (~78px).
     Первый экран = шапка сверху + герой + бронибар в пределах 100svh.
     Значение подстраиваемое; в сборке равно реальной высоте шапки. */
  --chrome-h: 118px;
}

/* ---------- ПЕРВЫЙ ЭКРАН (герой + бронибар под шапкой) ---------- */
.hero-screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--chrome-h));
  min-height: calc(100svh - var(--chrome-h));
}

/* ---------- ГЕРОЙ ---------- */
.hero {
  position: relative;
  flex: 1 1 auto;                    /* тянется, заполняя экран над бронибаром */
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-900);        /* фон-заглушка, пока грузится видео */
  display: flex;
  align-items: stretch;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Тёплый скрим: база + сильнее снизу и слева, где стоит текст.
   Гарантирует контраст белого текста на любом кадре видео. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ink-900) 51%, transparent) 0%,
      color-mix(in srgb, var(--ink-900) 27%, transparent) 40%,
      color-mix(in srgb, var(--ink-900) 10%, transparent) 70%,
      transparent 100%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--ink-900) 47%, transparent) 0%,
      transparent 58%),
    color-mix(in srgb, var(--ink-900) 8%, transparent);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: flex-end;             /* контент к низу — кинематографично */
  padding-block: var(--space-12) var(--space-16);
}

.hero__content { max-width: 640px; }

/* Заголовок — крупный, белый, с лёгкой тенью для читаемости */
.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 1.1rem + 4.4vw, 4rem);  /* до 64px */
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--white);
  text-wrap: balance;
  text-shadow: 0 2px 24px color-mix(in srgb, var(--ink-900) 45%, transparent);
  margin-bottom: var(--space-5);
}

.hero__subtitle {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: color-mix(in srgb, var(--white) 90%, transparent);
  max-width: 32rem;
  text-wrap: pretty;
  margin-bottom: var(--space-8);
}

/* Фичи — горизонтальная лента с тонкими разделителями (не сетка иконок) */
/* Разделитель над фичами — заканчивается на правом крае кнопок (~552px) */
.hero__rule {
  width: min(552px, 100%);
  height: 1px;
  border: 0;
  margin: 0 0 var(--space-5);
  background: color-mix(in srgb, var(--white) 22%, transparent);
}

.hero__features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);   /* строка / колонка; без вертикальных разделителей */
  margin-bottom: var(--space-6);
}
.hero__feature {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: color-mix(in srgb, var(--white) 92%, transparent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.hero__feature svg { width: 22px; height: 22px; color: var(--gold-400); flex-shrink: 0; }

/* Кнопки */
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--grad-red);
  color: var(--text-onred);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-red);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.hero__btn-primary:hover {
  background: var(--grad-red-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-red), var(--shadow-md);
}
.hero__btn-primary:active { transform: translateY(0); }
.hero__btn-primary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hero__btn-primary svg { width: 16px; height: 16px; }

/* Вторичная — светлая обводка на видео */
.hero__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: color-mix(in srgb, var(--white) 8%, transparent);
  color: var(--white);
  border: 1px solid color-mix(in srgb, var(--white) 42%, transparent);
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.hero__btn-ghost:hover {
  background: color-mix(in srgb, var(--white) 16%, transparent);
  border-color: var(--white);
}
.hero__btn-ghost:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.hero__btn-ghost svg { width: 16px; height: 16px; }

/* ---------- БРОНИБАР ---------- */
.booking {
  flex: 0 0 auto;                    /* фиксированной высоты, прижат к низу первого экрана */
  background: var(--surface-card);
  border-bottom: 1px solid var(--border);
}

.booking__bar {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--space-6));
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6) var(--space-5);
  box-shadow: var(--shadow-card);
}

.booking__fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: center;
}

.booking__field {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  padding: 0 var(--space-6);
  cursor: pointer;
  font-family: inherit;
}
.booking__field:first-child { padding-left: 0; }

.booking__label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.booking__value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}
.booking__value svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.booking__chevron { margin-left: auto; width: 14px; height: 14px; color: var(--text-muted); }
.booking__field:hover .booking__value { color: var(--accent); }
.booking__field:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }

.booking__submit { padding-left: var(--space-5); }
.booking__btn {
  width: 100%;
  background: var(--gold-500);
  color: var(--ink-900);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}
.booking__btn:hover { background: var(--gold-600); }
.booking__btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Строка «официальный сайт» — верхняя часть карточки бронирования */
.booking__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.booking__note svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* ---------- АДАПТИВ ---------- */
/* На планшете/мобайле бронибар раскладывается в столбик и высокий —
   не втискиваем всё в 100svh, даём естественный поток. */
@media (max-width: 768px) {
  .hero-screen { display: block; min-height: 0; }
  .hero { min-height: 76svh; }
}

@media (max-width: 640px) {
  .hero__inner { padding-block: var(--space-12) var(--space-16); }
  .hero__features { gap: var(--space-3) var(--space-4); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__btn-primary,
  .hero__btn-ghost { width: 100%; justify-content: center; }

  .booking__fields { grid-template-columns: 1fr; }
  .booking__field {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: var(--space-3) 0;
  }
  .booking__submit { padding-left: 0; padding-top: var(--space-4); }
}