/* ==========================================================================
   4 Сезона — базовые стили + шапка
   ========================================================================== */

/* ---------- Reset / base ---------- */

:root {
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: var(--fw-light);
  font-size: 16px;
  line-height: 1.4;
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  cursor: pointer;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Блокировка скролла при открытом меню */
body.is-locked {
  overflow: hidden;
}

/* ---------- Контейнер ---------- */
.container {
  width: 100%;
  max-width: calc(
    var(--container-max) + var(--gutter) * 2
  ); /* 1360 + 2×40 = 1440 (ширина фрейма из макета) */
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (max-width: 767.98px) {
  .container {
    padding-inline: var(--gutter-sm);
  }
}

/* ---------- Хлебные крошки ---------- */
.breadcrumbs {
  padding-block: 24px 16px;
}
.breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-gray, #8A8A8A);
}
.breadcrumbs__item a {
  color: var(--c-gray, #8A8A8A);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.breadcrumbs__item a:hover {
  color: var(--c-ink);
}
.breadcrumbs__item--active {
  color: var(--c-ink);
}
.breadcrumbs__sep {
  color: var(--c-border, #E3E3E3);
  user-select: none;
}

/* ---------- Типографика (шкала из Figma: desktop / mobile) ---------- */
.h-lg {
  font-weight: 300;
  font-size: 80px;
  line-height: 0.8;
}
.h-md {
  font-weight: 300;
  font-size: 36px;
  line-height: 1;
}
.h-sm {
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
}
.t-lg {
  font-weight: 300;
  font-size: 28px;
  line-height: 1;
}
.t-md {
  font-weight: 300;
  font-size: 20px;
  line-height: 1.2;
}
.t-sm {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
}
.body-md {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
}
.body-sm {
  font-weight: 300;
  font-size: 10px;
  line-height: 1.4;
}
.accent-lg {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
}
.accent-md {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
}
.section-mt {
  margin-top: 80px;
}
.l-md {
  font-size: 16px;
  line-height: 1.4;
}
.l-sm {
  font-size: 12px;
  line-height: 1.4;
}

@media (min-width: 992px) {
  .h-lg {
    font-size: 160px;
    line-height: 0.8;
  }
  .h-md {
    font-size: 60px;
    line-height: 1;
  }
  .h-sm {
    font-size: 48px;
    line-height: 1;
  }
  .t-lg {
    font-size: 32px;
  }
  .t-md {
    font-size: 24px;
    line-height: 1.2;
  }
  .t-sm {
    font-size: 20px;
    line-height: 1.4;
  }
  .body-md {
    font-size: 16px;
    line-height: 1.4;
  }
  .body-sm {
    font-size: 12px;
    line-height: 1.4;
  }
  .accent-lg {
    font-size: 40px;
    line-height: 1.1;
  }
  .accent-md {
    font-size: 32px;
  }
}

/* ==========================================================================
   Шапка
   Поведение: сверху прозрачная (поверх hero), при скролле — заливка navy.
   Для внутренних страниц без hero добавьте классу .header модификатор
   .header--solid (заливка сразу).
   ========================================================================== */
/* Цвета градиента шапки зарегистрированы как <color> — браузер анимирует
   их плавно (затемнение сверху -> сплошной navy при скролле). */
@property --hdr-from {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(0, 0, 0, 0.4);
}
@property --hdr-to {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(0, 0, 0, 0);
}
.header {
  position: sticky;
  top: var(--admin-offset, 0px); /* сдвиг под админ-панель Битрикса */
  z-index: 100;
  color: var(--c-white);
  --hdr-from: rgba(0, 0, 0, 0.4);
  --hdr-to: rgba(0, 0, 0, 0);
  background: linear-gradient(180deg, var(--hdr-from) 0%, var(--hdr-to) 100%);
  transition:
    --hdr-from var(--dur) var(--ease),
    --hdr-to var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  padding-block: 16px;
  transition: height var(--dur) var(--ease);
}
@media (max-width: 991.98px) {
  .header__inner {
    height: var(--header-h-sm);
  }
}

/* Залитое состояние: скролл, внутренние страницы, открытое меню */
.header.is-scrolled,
.header.is-open,
.header--solid {
  --hdr-from: var(--c-navy-deep);
  --hdr-to: var(--c-navy-deep);
}
.header.is-scrolled {
  box-shadow: 0 6px 24px rgba(22, 31, 59, 0.35);
}

/* ---------- Логотип ---------- */
.header__logo {
  flex: none;
}
.header__logo svg {
  width: 179px;
  height: 68px;
}
.header__logo svg path {
  fill: var(--c-white);
} /* лого всегда белое */
@media (max-width: 991.98px) {
  .header__logo svg {
    width: 147px;
    height: 56px;
  }
}

/* ---------- Десктоп-меню ---------- */
.nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 991.98px) {
  .nav {
    display: none;
  }
}

.nav__item {
  position: relative;
}
.nav__link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--c-white);
  white-space: nowrap;
  transition: opacity 0.2s var(--ease);
}
.nav__link:hover {
  opacity: 0.75;
}
.nav__chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease);
}
.nav__item:hover .nav__chevron {
  transform: rotate(180deg);
}

/* Выпадающее подменю. Полупрозрачная «стеклянная» плашка (Figma #161F3B66),
   которая заходит и под сам родительский пункт — он визуально ложится на фон. */
.nav__sub {
  position: absolute;
  top: -10px;
  left: 0;
  z-index: 1;
  margin: 0;
  list-style: none;
  /* Ширина плашки по Figma — 154px, длинные пункты переносятся на две строки,
     чтобы плашка не наезжала на соседние пункты верхнего меню */
  width: 154px;
  max-width: 154px;
  /* верхний паддинг резервирует место под родительский пункт (высота ссылки
     38px + 10px выступа сверху + 4px зазор) */
  padding: 52px 8px 8px;
  border-radius: 20px;
  background: rgba(22, 31, 59, 0.4);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility var(--dur);
}
.nav__item:hover .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__sub li {
  list-style: none;
}
.nav__sub a {
  display: block;
  padding: 8px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  color: var(--c-white);
  white-space: normal;
  transition: background 0.2s var(--ease);
}
.nav__sub a:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- Кнопка «Забронировать» ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 32px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  white-space: nowrap;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover { box-shadow: var(--shadow-soft); }
  .btn:hover .btn__arrow { transform: translateX(4px); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn:focus-visible .btn__arrow { transform: translateX(4px); }
}
.btn--light {
  background: var(--c-white);
  color: var(--c-ink);
}
.btn--border {
  border: 1px solid var(--c-navy-deep);
}
.btn__arrow {
  width: 18px;
  height: 18px;
  transition: transform 280ms var(--ease);
}
.header__book {
  flex: none;
}
@media (max-width: 991.98px) {
  .header__book {
    display: none;
  }
}

/* ---------- Бургер ---------- */
.burger {
  display: none;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-white);
  align-items: center;
  justify-content: center;
}
@media (max-width: 991.98px) {
  .burger {
    display: inline-flex;
  }
}
.burger__box {
  position: relative;
  width: 22px;
  height: 14px;
}
.burger__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--c-ink);
  transition:
    transform var(--dur) var(--ease),
    opacity 0.2s var(--ease);
}
.burger__box span:nth-child(1) {
  top: 0;
}
.burger__box span:nth-child(2) {
  top: 6px;
}
.burger__box span:nth-child(3) {
  top: 12px;
}
/* крест при открытом меню */
.is-open .burger__box span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.is-open .burger__box span:nth-child(2) {
  opacity: 0;
}
.is-open .burger__box span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   Мобильное выезжающее меню (drawer)
   ========================================================================== */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 110;
  /* Планшет: панель, не на всю ширину. Мобилка — переопределяется ниже на 100%. */
  width: min(400px, 86vw);
  height: 100dvh;
  padding: calc(var(--header-h-sm) + 8px) 24px 32px;
  background: var(--c-navy-deep);
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open {
  transform: translateX(0);
}
/* Мобилка: бургер-меню на всю ширину экрана (Figma) */
@media (max-width: 767.98px) {
  .drawer {
    width: 100%;
    max-width: 100%;
  }
}

/* Затемнение + размытие оставшегося контента. Плавно появляется:
   Black opacity 40% (#11111166) + backdrop-filter blur(8px). */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: rgba(17, 17, 17, 0.4);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease),
    -webkit-backdrop-filter var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease),
    visibility var(--dur);
}
.drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.drawer__menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drawer__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.drawer__link {
  flex: 1 1 auto;
  display: block;
  padding: 16px 4px;
  font-size: 20px;
  font-weight: 300;
  color: var(--c-white);
}
.drawer__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -8px -8px -8px 0;
  border: 0;
  background: transparent;
  color: var(--c-white);
}
.drawer__toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease);
}
.drawer__item.is-expanded .drawer__toggle svg {
  transform: rotate(180deg);
}

/* аккордеон подменю */
.drawer__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.drawer__item.is-expanded .drawer__sub {
  grid-template-rows: 1fr;
}
.drawer__sub-inner {
  overflow: hidden;
}
.drawer__sub a {
  display: block;
  padding: 10px 4px 10px 16px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
}
.drawer__sub a:hover {
  color: var(--c-white);
}

.drawer__book {
  margin-top: auto;
  padding-top: 24px;
}
.drawer__book .btn {
  width: 100%;
}

/* ==========================================================================
   Наезд шапки на контент
   Шапка sticky и занимает свою высоту в потоке. Обёртка .page (открывается
   в header.php) по умолчанию имеет ОТРИЦАТЕЛЬНЫЙ margin, поэтому контент
   заезжает под прозрачную шапку — как в дизайне почти на всех страницах.
   Где наезд не нужен — добавьте <main class="page page--flow"> (margin: 0).
   ========================================================================== */
.page {
  margin-top: calc(-1 * var(--header-h));
}
@media (max-width: 991.98px) {
  .page {
    margin-top: calc(-1 * var(--header-h-sm));
  }
}
.page--flow {
  margin-top: 0;
}

/* ==========================================================================
   Секции — вертикальный ритм (переиспользуемая утилита)
   ========================================================================== */
.section {
  padding-block: 80px;
}
@media (max-width: 767.98px) {
  .section {
    padding-block: 48px;
  }
}

/* ==========================================================================
   Карта территории (компонент news.list / шаблон map)
   Фон — статичный SVG без домиков; домики — оверлей-SVG в той же системе
   координат viewBox 1119×700, поэтому масштабируются соразмерно.
   ========================================================================== */
.tmap {
  background: #0d0d0d;
  color: var(--c-white);
}
.tmap__accent {
  margin: 0;
  text-align: center;
  color: var(--c-white);
}
.tmap__title {
  margin: 4px 0 0;
  text-align: center;
  color: var(--c-white);
}

/* Обёртка карты: держит пропорцию 1119×700, фон и оверлей строго совпадают */
.tmap__wrap {
  position: relative;
  max-width: 1119px;
  margin: 40px auto 0;
  aspect-ratio: 1119 / 700;
}
@media (max-width: 767.98px) {
  .tmap__wrap {
    margin-top: 24px;
  }
}

.tmap__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.tmap__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---- Домик ---- */
.tmap__house {
  cursor: pointer;
  outline: none;
}
.tmap__glyph {
  fill: var(--c-white);
  stroke: var(--c-white);
  stroke-width: 1.35;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform var(--dur) var(--ease),
    fill var(--dur) var(--ease),
    stroke var(--dur) var(--ease),
    filter var(--dur) var(--ease);
}

/* Раскраска по статусу (как в дизайне). При SHOW_STATUS=N — класс --plain
   перекрывает всё в белый (реальность Travelline: статусы недоступны). */
.tmap__house[data-status="free"] .tmap__glyph {
  fill: var(--c-green-deep);
  stroke: var(--c-green);
}
.tmap__house[data-status="busy"] .tmap__glyph {
  fill: #560f0f;
  stroke: var(--c-red);
}
.tmap__layer--plain .tmap__glyph {
  fill: var(--c-white) !important;
  stroke: var(--c-white) !important;
}

/* Наведение / фокус — приподнимаем, подсвечиваем */
.tmap__house:hover .tmap__glyph,
.tmap__house:focus-visible .tmap__glyph {
  transform: scale(1.18) translateY(-2px);
  filter: drop-shadow(0 3px 8px rgba(255, 255, 255, 0.55));
}
.tmap__house[data-status="free"]:hover .tmap__glyph,
.tmap__house[data-status="free"]:focus-visible .tmap__glyph {
  fill: var(--c-green);
  filter: drop-shadow(0 3px 10px rgba(117, 202, 38, 0.75));
}
.tmap__house[data-status="busy"]:hover .tmap__glyph,
.tmap__house[data-status="busy"]:focus-visible .tmap__glyph {
  fill: var(--c-red);
  filter: drop-shadow(0 3px 10px rgba(221, 33, 23, 0.75));
}
.tmap__house:focus-visible .tmap__hit {
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1;
}

/* Отель — прозрачная область поверх зелёного блока на фоне карты (шаблон news.list/map) */
.tmap__hotel {
  transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease);
}
.tmap__house--hotel:hover .tmap__hotel,
.tmap__house--hotel:focus-visible .tmap__hotel {
  fill: rgba(117, 202, 38, 0.35);
  stroke: var(--c-green);
}
.tmap__house--hotel[data-status="busy"]:hover .tmap__hotel,
.tmap__house--hotel[data-status="busy"]:focus-visible .tmap__hotel {
  fill: rgba(221, 33, 23, 0.35);
  stroke: var(--c-red);
}

/* ---- Тултип с названием домика: следует за курсором (позицию задаёт main.js
   через transform; плавность — lerp в rAF + transition на opacity) ---- */
.tmap__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(17, 17, 17, 0.92);
  color: var(--c-white);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.18s var(--ease);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.tmap__tip.is-visible {
  opacity: 1;
}
/* На тач-устройствах курсора нет — тултип не нужен (тап сразу открывает модалку) */
@media (hover: none) {
  .tmap__tip {
    display: none;
  }
}

/* ---- Модалка домика на карте (Figma «Modal» 316:3217 desktop / 324:6578 mobile) ---- */
.tmap-fancybox .fancybox__backdrop { background: rgba(17, 17, 17, 0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Сам .tmap-modal становится .fancybox__content — фон задаём здесь, иначе перебивается прозрачным */
.tmap-fancybox .fancybox__content { padding: 0; background: #111111; }
.tmap-modal {
  display: flex; flex-direction: column; gap: 32px;
  width: 480px; max-width: calc(100vw - 32px);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; overflow: hidden;
  background: var(--c-ink); color: var(--c-white);
}
.tmap-modal__img { position: relative; height: 270px; }
.tmap-modal__img > img { width: 100%; height: 100%; object-fit: cover; }
.tmap-modal__badge {
  position: absolute; left: 16px; display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: var(--radius-pill); background: rgba(17, 17, 17, 0.4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 16px; line-height: 22px; color: var(--c-white);
}
.tmap-modal__status { top: 16px; gap: 12px; }
.tmap-modal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); }
.tmap-modal__status--busy .tmap-modal__dot { background: var(--c-red); }
.tmap-modal__cap { bottom: 16px; }
.tmap-modal__cap img { width: 18px; height: 18px; filter: invert(1); }
.tmap-modal__close {
  position: absolute; top: 16px; right: 16px; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(17, 17, 17, 0.4); color: var(--c-white); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tmap-modal__close svg { width: 22px; height: 22px; }
.tmap-modal__body { display: flex; flex-direction: column; gap: 8px; margin-top: -16px; padding: 0 16px; }
.tmap-modal__name { margin: 0; color: var(--c-white); }
a.tmap-modal__name:hover { color: var(--c-sand); }
.tmap-modal__note { margin: 0; color: rgba(255, 255, 255, 0.7); }
.tmap-modal__price { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 0 16px; }
.tmap-modal__action { padding: 0 16px 16px; }
.tmap-modal__action .btn { width: 100%; }
/* Занят / нет мест — кнопка неактивна (дизайн: серая) */
.tmap-modal__action .btn.is-disabled {
  background: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.85);
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}
/* Гостиница (несколько категорий TL): строки по этажам — цена, свободные номера, своя бронь */
.tmap-modal__units { list-style: none; margin: 0; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.tmap-modal__unit {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px;
}
.tmap-modal__unit-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tmap-modal__unit-name { color: var(--c-white); }
.tmap-modal__unit-free { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.7); }
.tmap-modal__unit.is-busy .tmap-modal__unit-free { color: var(--c-red); }
.tmap-modal__unit-price { white-space: nowrap; }
.tmap-modal__unit-btn { padding: 10px 16px; font-size: 14px; }
.tmap-modal__unit-btn.is-disabled {
  background: rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.85);
  cursor: default; pointer-events: none; box-shadow: none;
}
@media (max-width: 479.98px) {
  .tmap-modal__unit { grid-template-columns: minmax(0, 1fr) auto; }
  .tmap-modal__unit-btn { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 767.98px) {
  .tmap-modal { gap: 24px; }
  .tmap-modal__img { height: 200px; }
  .tmap-modal__badge { font-size: 14px; line-height: 20px; }
  .tmap-modal__body { margin-top: -8px; }
}

/* Плашка Битрикса «Срок работы пробной версии продукта истек» (печатается ядром
   до <!DOCTYPE>) — скрыта визуально. Убрать правило после активации лицензии. */
body > font.tablebodytext { display: none !important; }

/* Главная — Figma 39:243 */
h1, h2, h3, p, figure, blockquote { margin: 0; }
html { scroll-behavior: smooth; }
section[id], footer[id], #booking { scroll-margin-top: calc(var(--header-h) + var(--admin-offset) + 24px); }
:focus-visible { outline: 2px solid var(--c-green); outline-offset: 5px; }
button, input, textarea { font: inherit; }
.btn--border { background: transparent; }
.btn--dark { background: var(--c-navy-deep); color: var(--c-white); }
.btn:disabled { cursor: wait; opacity: .6; }
.header__logo img { width: 179px; height: 68px; }
.nav__item:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.drawer { visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border: 1px solid #ffffff50; border-radius: 50%; background: transparent; color: white; font-size: 28px; }
.hero-section {
  color: var(--c-white);
  background: linear-gradient(#0000004d, #0000004d), url("../img/home/hero.webp") center / cover no-repeat;
}
.hero-content {
  min-height: 700px;
  padding: calc(var(--header-h) + 40px) 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 907px;
  margin-inline: auto;
}
.hero-subtitle { max-width: 673px; margin-top: 12px; }
/* Большая кнопка «Забронировать» в hero главной: белая пилюля + navy-кружок со стрелкой,
   при наведении заливка «перетекает» из кружка на всю кнопку; мягкая пульсация-ореол. */
.hero-book {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
  padding: 8px 8px 8px 40px;
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: 20px;
  line-height: 1.2;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  transition: color .45s var(--ease), transform .3s var(--ease);
}
.hero-book::before {
  content: ""; position: absolute; z-index: -1; top: 8px; right: 8px;
  width: 56px; height: 56px; border-radius: var(--radius-pill);
  background: var(--c-navy-deep);
  transition: width .6s cubic-bezier(.76, 0, .24, 1), top .6s cubic-bezier(.76, 0, .24, 1), right .6s cubic-bezier(.76, 0, .24, 1), height .6s cubic-bezier(.76, 0, .24, 1);
}
.hero-book::after {
  content: ""; position: absolute; z-index: -2; inset: 0; border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .7);
  animation: hero-book-pulse 2.8s var(--ease) infinite;
}
@keyframes hero-book-pulse {
  0% { transform: scale(1); opacity: .9; }
  70%, 100% { transform: scale(1.12, 1.35); opacity: 0; }
}
.hero-book__icon {
  display: grid; place-items: center; width: 56px; height: 56px; color: var(--c-white);
}
.hero-book__icon svg { width: 22px; height: 22px; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.hero-book:hover { color: var(--c-white); }
.hero-book:hover::before { top: 0; right: 0; width: 100%; height: 100%; }
.hero-book:hover .hero-book__icon svg { transform: translateX(4px); }
.hero-book:active { transform: scale(.98); }
/* Скрыта по просьбе заказчика (08.10.2026) — бронирование остаётся в шапке и в полосе .book-band.
   Вернуть — удалить это правило. */
.hero-book { display: none; }
/* Полоса «Забронировать» во всю ширину после hero главной (по мотивам pineriver.ru).
   Navy-фон, при наведении слева «перетекает» зелёная заливка, мягкое пятно света
   следует за курсором (--mx/--my ставит main.js), стрелка уезжает вправо. */
.book-band {
  --mx: 50%; --my: 50%;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 32px var(--gutter);
  overflow: hidden;
  background: var(--c-navy-deep);
  color: var(--c-white);
  text-align: center;
}
.book-band::before { /* заливка при наведении */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--green-600);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s cubic-bezier(.76, 0, .24, 1);
}
.book-band::after { /* пятно света за курсором */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .12), transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.book-band__inner { display: inline-flex; align-items: center; gap: 24px; }
.book-band__title { font-size: 48px; font-weight: 300; line-height: 1.1; letter-spacing: -.01em; transition: letter-spacing .6s cubic-bezier(.16, 1, .3, 1); }
.book-band__arrow {
  display: grid; place-items: center; flex: none;
  width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .6s cubic-bezier(.16, 1, .3, 1);
}
.book-band__arrow svg { width: 26px; height: 26px; }
@media (hover: hover) {
  .book-band:hover::before { transform: scaleX(1); }
  .book-band:hover::after { opacity: 1; }
  .book-band:hover .book-band__title { letter-spacing: .01em; }
  .book-band:hover .book-band__arrow { background: var(--c-white); border-color: var(--c-white); color: var(--green-600); transform: translateX(12px); }
}
.book-band:focus-visible { outline-offset: -6px; outline-color: var(--c-white); }
@media (max-width: 991.98px) {
  .book-band { min-height: 128px; }
  .book-band__title { font-size: 36px; }
  .book-band__arrow { width: 56px; height: 56px; }
}
@media (max-width: 767.98px) {
  .book-band { min-height: 112px; padding: 24px var(--gutter-sm); }
  .book-band__inner { gap: 16px; }
  .book-band__title { font-size: 30px; }
  .book-band__arrow { width: 52px; height: 52px; }
  .book-band__arrow svg { width: 22px; height: 22px; }
}
@media (max-width: 767.98px) {
  .hero-book { margin-top: 28px; gap: 16px; padding: 6px 6px 6px 28px; font-size: 17px; }
  .hero-book::before { top: 6px; right: 6px; width: 48px; height: 48px; }
  .hero-book__icon { width: 48px; height: 48px; }
}
.section-header-all { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 40px; }
.section-heading { text-align: center; margin-bottom: 40px; }
.section-heading h2 { margin-top: 4px; }
.carousel { position: relative; min-width: 0; }
.carousel__viewport { border-radius: 20px; }
.carousel .swiper-wrapper { align-items: stretch; }
.carousel .swiper-slide { height: auto; }
.carousel__viewport:not(.swiper-initialized) .swiper-wrapper { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; }
.carousel__viewport:not(.swiper-initialized) .swiper-slide { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
.carousel-controls { pointer-events: none; position: absolute; z-index: 2; top: 50%; left: -20px; right: -20px; display: flex; justify-content: space-between; transform: translateY(-50%); }
.carousel-control { pointer-events: auto; display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; border: 0; border-radius: 50%; background: white; box-shadow: 0 2px 10px #0000001a; }
.carousel-control--prev img { transform: rotate(180deg); }
.carousel-control:disabled { visibility: hidden; }
.carousel-control.swiper-button-lock { display: none; }
.carousel-pagination { display: flex; justify-content: center; margin-top: 40px; gap: 8px; }
.carousel-pagination .swiper-pagination-bullet { width: 80px; height: 2px; margin: 0 !important; border-radius: 0; background: white; opacity: .25; }
.carousel-pagination .swiper-pagination-bullet-active { opacity: 1; }
.house-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--grey-300); }
.house-card__imgs { position: relative; display: block; height: 260px; overflow: hidden; flex: none; }
.house-card__imgs > img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.house-card__labels { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.house-card__label { padding: 8px 12px; background: var(--green-600); border-radius: var(--radius-pill); color: white; font-size: 16px; line-height: 1.4; }
.house-card__bottom { padding: 24px 16px; }
.house-card__guests { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 12px; background: white; border-radius: var(--radius-pill); }
.house-card__guests img { width: 18px; height: 18px; }
.house-card__price { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; }
.house-card__price span { white-space: nowrap; }
/* Гостиница: цена по этажам */
.house-card__prices { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.house-card__prices .house-card__price { margin-top: 0; }
.house-card__price-unit { min-width: 64px; opacity: 0.7; }
.house-card__action { margin-top: auto; padding: 0 16px 16px; position: relative; z-index: 2; }
.house-card__action .btn { width: 100%; }

/* Клик по всей карточке ведёт на детальную (растянутая ссылка) */
.house-card { position: relative; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.house-card__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.house-card__link:focus-visible { outline: 2px solid var(--c-navy-deep); outline-offset: 2px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .house-card:hover { box-shadow: var(--shadow-soft, 0 10px 30px rgba(17, 17, 17, 0.08)); }
  .house-card:hover .house-card__imgs > img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: no-preference) {
  .house-card:focus-within .house-card__imgs > img { transform: scale(1.03); }
}

/* ==========================================================================
   Краевая карусель (.edge-carousel)
   Левый край выровнен по контейнеру, справа уходит за край экрана.
   При прокрутке до конца последний слайд встаёт по правой границе контейнера.
   Переиспользуемый блок: разметка + [data-edge-carousel], логика в main.js.
   Ширина слайда и отступы (--edge-slide-w, --edge-gap, --edge-inset)
   вычисляются в JS от текущей ширины контейнера.
   ========================================================================== */
.edge-carousel { position: relative; }
.edge-carousel__viewport { overflow: hidden; }
.edge-carousel .swiper-wrapper { align-items: stretch; }
.edge-carousel .swiper-slide { width: var(--edge-slide-w, 300px); height: auto; }
/* До инициализации Swiper — нативный горизонтальный скролл со снапом
   (без видимого скроллбара), с отступами по контейнеру */
.edge-carousel__viewport:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: var(--edge-gap, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-left: var(--edge-pad-left, var(--edge-inset, 40px));
  padding-right: var(--edge-pad-right, var(--edge-inset, 40px));
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.edge-carousel__viewport:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar { display: none; }
.edge-carousel__viewport:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 var(--edge-slide-w, 300px);
  scroll-snap-align: start;
}

/* Стрелки навигации карусели (в шапке секции) */
.section-header-all__actions { display: inline-flex; align-items: center; gap: 16px; }
.carousel-nav { display: inline-flex; gap: 8px; }
.carousel-nav__btn {
  display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--c-border, #E3E3E3);
  border-radius: 50%; background: white; color: var(--c-ink);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.carousel-nav__btn img { width: 18px; height: 18px; }
.carousel-nav__btn:hover { background: var(--grey-300, #F9F9F9); border-color: var(--c-navy-deep, #161F3B); }
.carousel-nav__btn--prev img { transform: rotate(180deg); }
.carousel-nav__btn.swiper-button-disabled { opacity: .35; pointer-events: none; }
.carousel-nav.swiper-navigation-lock,
.carousel-nav__btn.swiper-button-lock { display: none; }
.tmap { background: var(--c-ink); padding-block: 56px; }
.resort-video { padding-block: 80px; }
.resort-video__poster { position: relative; aspect-ratio: 16 / 9; }
.resort-video__poster > img { width: 100%; height: 100%; object-fit: cover; }
.resort-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 64px; height: 64px; border: 0; border-radius: 50%; background: white; box-shadow: var(--shadow-soft); }
.resort-video__play img { width: 32px; height: 32px; }
.activities-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 300px); gap: 12px; }
.activity-card { position: relative; display: flex; align-items: end; overflow: hidden; border-radius: 20px; color: white; }
.activity-card--pool { grid-row: span 2; }
.activity-card > img { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .activity-card:hover > img { transform: scale(1.03); }
  .activity-card:hover .activity-card__title img { transform: translateX(4px); }
}
@media (prefers-reduced-motion: no-preference) {
  .activity-card:focus-visible > img { transform: scale(1.03); }
  .activity-card:focus-visible .activity-card__title img { transform: translateX(4px); }
}
.activity-card__title { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 32px 16px 16px; background: linear-gradient(transparent, #0009); }
.activity-card__title img { width: 24px; height: 24px; flex: none; transition: transform 280ms var(--ease); }
.split-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.055fr); gap: 24px; }
.split-section__intro { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; }
.split-section__intro p { margin-top: 16px; }
.split-section__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.news-card time { display: block; color: var(--c-gray); margin-bottom: 16px; }
.news-card h3 + p { margin-top: 8px; }
.news-card .house-card__imgs { height: 204px; }
/* «Новости и акции»: интро-блок слева в контейнере, карусель — во второй колонке
   .split-section, справа она уходит за правый край экрана (как «Отзывы»/«Дома»).
   В пределах контейнера видно 2 карточки, третья выглядывает за краем. */
.news { overflow: hidden; }
.news .edge-carousel { min-width: 0; margin-right: calc(-1 * var(--edge-inset, 40px)); }
.reviews { position: relative; overflow: hidden; background: var(--c-navy-deep); color: white; }
.reviews::before, .reviews::after { content: ""; position: absolute; width: 436px; height: 436px; top: 0; background: url("../img/home/pattern.svg") center / contain no-repeat; opacity: .12; pointer-events: none; }
.reviews::before { left: 0; transform: rotate(180deg); }
.reviews::after { right: 0; }
.reviews .container { position: relative; z-index: 1; }
.review-card { position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 300px; padding: 16px; border-radius: 20px; overflow: hidden; background: white; color: var(--c-ink); }
.review-card__stars { display: flex; gap: 4px; }
.review-card__stars img { width: 20px; height: 20px; }
.review-card blockquote { position: relative; z-index: 1; }
.review-card figcaption { margin-top: auto; z-index: 1; }
.review-card__quote { position: absolute; width: 193px; height: 193px; right: 0; bottom: -68px; transform: rotate(180deg); }
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary img { width: 20px; height: 20px; flex: none; }
.faq-item p { padding-bottom: 16px; }
.faq-item[open] summary { padding-bottom: 8px; }
/* Одинаковая высота summary в обоих состояниях исключает скачок при закрытии. */
.faq-item.motion-faq summary { padding-bottom: 16px; }
.faq-item__minus, .faq-item[open] .faq-item__plus { display: none; }
.faq-item[open] .faq-item__minus { display: block; }
.footer { padding: 48px 0; background: var(--c-navy-deep); color: white; }
.footer__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer__brand > p { margin-top: 16px; max-width: 410px; opacity: .4; }
.footer__socials { display: flex; gap: 8px; margin-top: 16px; }
.footer__socials img { width: 32px; height: 32px; }
.footer__nav-title { padding-bottom: 4px; border-bottom: 1px solid #fff3; font-size: 20px; font-weight: 300; }
.footer__menus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 12px; }
.footer__menus li + li { margin-top: 12px; }
.footer__menus ul ul { border-left: 1px solid #fff3; margin-top: 8px; padding-left: 12px; color: #ffffff80; }
.footer__menus ul ul li { padding: 4px 0; margin: 0; }
.footer__menus a:hover { color: var(--c-sand); }
.booking-form { background: white; color: var(--c-ink); padding: 16px; border-radius: 20px; display: flex; flex-direction: column; gap: 24px; }
.booking-form__fields { display: flex; flex-direction: column; gap: 16px; }
.booking-form input, .booking-form textarea { width: 100%; min-width: 0; padding: 16px; border: 1px solid var(--c-navy-deep); border-radius: 12px; font-size: 16px; font-weight: 300; background: white; color: var(--c-ink); }
.booking-form textarea { height: 150px; resize: vertical; }
.booking-form input::placeholder, .booking-form textarea::placeholder { color: #1116; }
.booking-form__status { font-size: 14px; color: var(--c-red); }
.booking-form__status:empty { display: none; }
.booking-form .is-invalid { border-color: var(--c-red); }
.booking-form .form-consent input.is-invalid { outline: 2px solid var(--c-red); outline-offset: 1px; }
/* honeypot — вне экрана, но не display:none (боты проверяют) */
.booking-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Атрибут hidden должен побеждать display:flex у блоков формы */
.booking-form [hidden] { display: none !important; }
/* Сообщение об успешной отправке (вместо полей формы) */
.booking-form__success { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 8px 8px; text-align: center; }
.booking-form__success-icon { width: 48px; height: 48px; color: var(--c-green-deep); }
.booking-form__success-title { margin: 4px 0 0; }
.booking-form__success-text { max-width: 360px; color: var(--c-gray); }
.booking-form__success .btn { margin-top: 8px; }
/* Чекбокс согласия на обработку ПДн */
.form-consent { display: flex; align-items: flex-start; gap: 10px; margin: -8px 0 0; cursor: pointer; }
.booking-form .form-consent input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; min-width: 18px; margin: 2px 0 0; padding: 0; border-radius: 4px; accent-color: var(--c-navy-deep); cursor: pointer; }
.form-consent__text { font-size: 13px; font-weight: 300; line-height: 1.4; color: var(--c-ink); }
.form-consent__text a { color: var(--c-navy); text-decoration: underline; text-underline-offset: 2px; }
.form-consent__text a:hover { color: var(--c-green-deep); }
/* Cookie-уведомление */
/* Cookie-плашка (Figma): не на всю ширину — карточка с отступами и скруглением. */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; padding: 0 var(--gutter) 32px; pointer-events: none; }
.cookie-banner__inner { pointer-events: auto; max-width: var(--container-max); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 24px; border-radius: 20px; background: var(--c-navy-deep); color: #fff; box-shadow: var(--shadow-soft); }
.cookie-banner__body { display: flex; flex-direction: column; gap: 8px; }
.cookie-banner__title { margin: 0; font-size: 20px; font-weight: 300; line-height: 1.4; }
.cookie-banner__text { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.4; }
.cookie-banner__text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__accept { flex: 0 0 auto; }
@media (max-width: 767.98px) {
  .cookie-banner { padding: 0 var(--gutter-sm) 16px; }
  .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 16px; padding: 12px 12px 12px 24px; }
  .cookie-banner__body { gap: 4px; }
  .cookie-banner__title { font-size: 16px; }
  .cookie-banner__text { font-size: 14px; line-height: 1.45; }
  .cookie-banner__accept { align-self: stretch; }
}
.footer__bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid #fff3; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; color: #ffffff66; }
.footer__legal { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.content-dialog { width: min(580px, calc(100% - 32px)); padding: 32px; border: 0; border-radius: 20px; color: var(--c-ink); max-height: 85dvh; overflow: auto; }
.content-dialog::backdrop { background: #0009; }
.content-dialog h2, .content-dialog p { margin-bottom: 16px; }
.content-dialog__image { width: 100%; height: 240px; object-fit: cover; border-radius: 12px; margin-bottom: 24px; }
.dialog-close { display: grid; place-items: center; position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: white; color: var(--c-ink); font-size: 28px; }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .nav__link { padding-inline: 8px; font-size: 14px; }
  .header__inner { gap: 16px; }
  .header__book { padding-inline: 20px; }
}
@media (max-width: 991.98px) {
  .header__logo img { width: 147px; height: 56px; }
  .hero-content { min-height: 620px; padding-top: 128px; padding-bottom: 40px; }
  .hero-title { max-width: 660px; }
  .house-card__label { padding: 6px 10px; font-size: 12px; }
  .house-card__imgs { height: 230px; }
  .activities-grid { grid-template-rows: repeat(2, 230px); }
  .activity-card__title { font-size: 24px; }
  .split-section { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .footer__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .carousel__viewport:not(.swiper-initialized) .swiper-slide { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 767.98px) {
  .hero-content { min-height: 600px; }
  .hero-title { margin-top: 4px; }
  .hero-subtitle { max-width: 440px; }
  .section-header-all { flex-wrap: wrap; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
  .section-header-all h2 { width: 100%; }
  .section-header-all__actions { width: 100%; justify-content: space-between; gap: 12px; }
  .carousel-nav__btn { width: 44px; height: 44px; }
  .section-heading { margin-bottom: 24px; }
  .section-heading h2 { max-width: 390px; margin-inline: auto; }
  .carousel-controls { left: -8px; right: -8px; }
  .carousel__viewport:not(.swiper-initialized) .swiper-slide { flex-basis: 88%; }
  .house-card__imgs { height: 260px; }
  .house-card__labels { top: 12px; left: 12px; }
  .house-card__bottom { padding-top: 20px; padding-bottom: 20px; }
  .house-card__price { gap: 8px; }
  .house-card__price .t-lg { font-size: 26px; }
  .tmap { padding-block: 40px; }
  .resort-video { padding-block: 48px; }
  .resort-video__poster { aspect-ratio: 4 / 3; }
  .resort-video__play { width: 56px; height: 56px; }
  .activities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .activity-card { min-height: 210px; }
  .activity-card--pool { grid-column: 1 / -1; grid-row: auto; min-height: 330px; }
  .activity-card__title { font-size: 20px; padding: 32px 12px 12px; }
  .activity-card__title img { width: 18px; height: 18px; }
  .split-section { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .carousel-pagination { margin-top: 24px; }
  .review-card { min-height: 300px; }
  .footer__row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer__brand { grid-column: auto; }
  .footer__bottom { align-items: flex-start; }
}
@media (max-width: 359.98px) {
  .hero-title { font-size: 32px; }
  .activity-card__title { font-size: 16px; line-height: 1.2; gap: 6px; padding-inline: 10px; }
}
/* ==========================================================================
   Мобильная доводка по Figma (фреймы «… [Mobile]», 390px)
   Правила ниже применяются ТОЛЬКО на телефонах (< 768px) и приводят
   главную, карусели, подвал и меню к макету. Десктоп не затрагивают.
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Кнопки в мобильном UI-ките ниже: 14px текст, высота 44px */
  .btn { padding: 12px 24px; font-size: 14px; line-height: 20px; }

  /* Первый экран: 500px вместе с шапкой (Figma 01_Hero) */
  .hero-content { min-height: 500px; padding: calc(var(--header-h-sm) + 24px) 0 24px; }
  .hero-title { margin-top: 4px; }
  .hero-subtitle { margin-top: 20px; }

  /* Ритм секций: 60px после hero/тёмных блоков, 80px между белыми секциями */
  .section { padding-block: 60px; }
  .section + .section:not(.reviews):not(.tmap) { padding-top: 20px; }
  .section-header-all { margin-bottom: 32px; }
  .section-heading { margin-bottom: 32px; }
  .section-heading h2 { margin-top: 8px; }

  /* Карусели: одна карточка во всю ширину контейнера, следующая выглядывает
     за краем; стрелки и «все …» в шапке скрыты — ссылка идёт под каруселью */
  .section-header-all__actions,
  .split-section__actions { display: none; }
  .section-more { display: flex; justify-content: center; margin-top: 32px; }

  /* Карточка дома / новости (Figma .Master Card, mobile) */
  .house-card__imgs { height: 218px; }
  .house-card__labels { top: 16px; left: 16px; right: 16px; }
  .house-card__label { padding: 8px 12px; font-size: 14px; line-height: 20px; }
  .house-card__bottom { padding: 24px 16px 16px; }
  .house-card__guests { margin-top: 8px; font-size: 14px; }
  .house-card__price { margin-top: 8px; gap: 12px; font-size: 14px; }
  .house-card__price .t-lg { font-size: 28px; }
  .news-card .house-card__imgs { height: 182px; }
  .news-card h3 { margin-top: 16px; }
  .news-card time { margin-bottom: 0; font-size: 14px; }
  /* Интро «Новости и акции» по центру (Figma 06_News) */
  .news .split-section__intro { align-items: center; text-align: center; }
  .news .split-section__intro .body-md { margin-top: 12px; }

  /* Видео: постер 16:9 во всю ширину, отступы 60 (Figma 04_Video) */
  .resort-video { padding-block: 60px; }
  .resort-video__poster { aspect-ratio: 16 / 9; }
  .resort-video__play { width: 48px; height: 48px; }
  .resort-video__play img { width: 24px; height: 24px; }

  /* «Чем заняться»: горизонтальная лента карточек 358×300 (Figma 05_Fun) */
  .activities-grid {
    display: flex; grid-template-columns: none; grid-template-rows: none;
    gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter-sm)); padding-inline: var(--gutter-sm);
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .activities-grid::-webkit-scrollbar { display: none; }
  .activity-card,
  .activity-card--pool { flex: 0 0 calc(100vw - var(--gutter-sm) * 2); min-height: 300px; grid-column: auto; scroll-snap-align: start; }
  .activity-card__title { font-size: 28px; line-height: 1; padding: 40px 16px 16px; }
  .activity-card__title img { width: 24px; height: 24px; }

  /* Отзывы: карточка 250px, вместо стрелок — полоски-пагинация */
  .review-card { min-height: 250px; }
  .reviews .carousel-pagination { margin-top: 32px; gap: 16px; }
  .reviews .carousel-pagination .swiper-pagination-bullet { width: 40px; opacity: .3; transition: width var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .reviews .carousel-pagination .swiper-pagination-bullet-active { width: 100px; opacity: 1; }

  /* FAQ */
  .faq-item summary { padding: 16px 0; }

  /* Подвал (Figma Footer/Mobile): бренд по центру → форма → навигация в одну колонку */
  .footer { padding: 32px 0; }
  .footer__row { gap: 24px; }
  .footer__brand { text-align: center; }
  .footer__brand > a { display: inline-block; }
  .footer__brand > p { margin-inline: auto; }
  .footer__socials { justify-content: center; }
  .footer .booking-form { order: 2; padding: 12px; gap: 16px; }
  .footer .booking-form__fields { gap: 12px; }
  .footer__nav { order: 3; }
  .footer__nav-title { font-size: 16px; }
  .footer__menus { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
  .footer__menus a { font-size: 14px; }
  /* Порядок пунктов как в Figma: Главная, Проживание, Чем заняться, Новости, Контакты */
  .footer__menus > ul { display: contents; }
  .footer__menus > ul > li { margin: 0; }
  .footer__menus > ul:first-child > li:nth-child(n + 3) { order: 2; }
  .footer__bottom { margin-top: 24px; padding-top: 24px; align-items: center; }
  .footer__bottom > p { font-size: 14px; }
  .footer__legal { font-size: 10px; text-align: right; }

  /* Cookie: кнопка не растягивается, прижата вправо (Figma Cookie [Mobile]) */
  .cookie-banner__inner { padding: 12px 12px 12px 16px; }
  .cookie-banner__accept { align-self: flex-end; }

  /* Плавающая кнопка TravelLine «Узнать цены»: на телефоне уводим вниз,
     чтобы не перекрывала заголовок первого экрана */
  .x-tl-booking-widget-container { top: auto !important; bottom: 20px !important; }
}

/* ---------- Мобильное меню (Figma «Открытое меню») ----------
   Панель во всю ширину по высоте контента, поверх — размытая страница.
   Логотип и белая круглая кнопка-крестик как в шапке; подменю раскрыты
   всегда (без аккордеона), кнопка «Забронировать» сразу под списком. */
@media (max-width: 767.98px) {
  .drawer { height: auto; max-height: 100dvh; padding: 0 var(--gutter-sm) 16px; }
  .drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h-sm); padding-block: 16px; margin-bottom: 16px; }
  .drawer__head img { width: 147px; height: 56px; }
  .drawer-close { position: static; width: 48px; height: 48px; border: 0; background: var(--c-white); color: var(--c-ink); font-size: 26px; line-height: 1; }
  .drawer__menu { gap: 24px; }
  .drawer__item { border-bottom: 0; }
  .drawer__link { padding: 0; font-size: 20px; line-height: 24px; }
  .drawer__toggle { display: none; }
  .drawer__sub { grid-template-rows: 1fr; margin-top: 12px; }
  .drawer__sub-inner > ul { border-left: 1px solid rgba(255, 255, 255, 0.4); }
  .drawer__sub a { padding: 4px 0 4px 12px; font-size: 16px; line-height: 22px; color: rgba(255, 255, 255, 0.6); }
  .drawer__book { margin-top: 32px; padding-top: 0; }
}
@media (min-width: 768px) {
  .drawer__head { display: none; }
  .section-more { display: none; }
  .reviews__pagination { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}