/* ============================================================
   Славяновский исток — стили лендинга (собрано в один файл)
   Порядок каскада: ds -> global -> блоки 01..16 (16-rich перекрывает).
   ============================================================ */


/* ===== ds.css ===== */
/* ============================================================
   Токены бренд-ДС «Славяновский исток» — локальная копия.

   Почему копия: оригинал лежит в
   design-system/Славяновский исток — Design System/ и грузится
   вложенным @import (styles.css → tokens/*.css) по пути с
   кириллицей и пробелами. По file:// это нестабильно —
   вложенные правила периодически не применяются и все токены
   становятся пустыми. Здесь тот же набор значений плоским файлом,
   чтобы загрузка была надёжной, а сайт — самодостаточным.

   ИСТОЧНИК ИСТИНЫ — та же ДС. Если токены в ДС меняются,
   пересобрать этот файл из tokens/{colors,typography,spacing,
   radius,shadows}.css + base.css. Шрифт (fonts.css) НЕ копируем —
   он переопределён на Manrope в global.css.
   ============================================================ */

/* ---------- COLORS ---------- */
:root {
    /* Brand red (primary) */
    --red-900: #7d0000;
    --red-800: #8f0000;
    --red-700: #a80000;
    --red-600: #cb0000;
    /* ★ signature brand red */
    --red-500: #de1414;
    --red-100: #f7dede;
    --red-50: #fcf0f0;

    /* Mineral gold (secondary accent) */
    --gold-600: #e7b13a;
    --gold-500: #f2c94c;
    --gold-400: #fada71;
    /* ★ search / highlight accent */
    --gold-100: #fbeec4;

    /* Warm neutrals */
    --sand-500: #c8bd9f;
    --sand-400: #d1c8b1;
    /* ★ tan feature-card surface */
    --sand-300: #e4ddcb;
    --sand-200: #efe9db;

    --paper: #f8f8f0;
    /* ★ page background */
    --white: #ffffff;

    /* Ink / text */
    --ink-900: #201e1b;
    --ink-800: #2b2926;
    --ink-600: #4a463f;
    --ink-400: #857f72;
    --ink-200: #b7b1a4;

    /* Lines / borders */
    --border: #ece9df;
    --border-strong: #ddd8c9;
    --border-onsand: #c2b795;

    /* Semantic surfaces */
    --surface-page: var(--paper);
    --surface-card: var(--white);
    --surface-feature: var(--sand-400);
    --surface-muted: var(--sand-200);

    /* Semantic text */
    --text-heading: var(--ink-800);
    --text-body: var(--ink-600);
    --text-muted: var(--ink-400);
    --text-onred: var(--white);
    --text-link: var(--red-600);

    /* Interactive */
    --accent: var(--red-600);
    --accent-hover: var(--red-700);
    --accent-active: var(--red-800);
    --accent-contrast: var(--white);
    --focus-ring: color-mix(in srgb, var(--red-600) 45%, transparent);

    /* Feedback */
    --success: #2e7d4f;
    --warning: #e7b13a;
    --danger: #cb0000;
}

/* ---------- TYPOGRAPHY (scale/weights; семейства — в global.css) ---------- */
:root {
    --fs-display: 56px;
    --fs-h1: 42px;
    --fs-h2: 32px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-lg: 18px;
    --fs-body: 16px;
    --fs-sm: 14px;
    --fs-xs: 12px;
    --fs-eyebrow: 13px;

    --lh-tight: 1.12;
    --lh-heading: 1.2;
    --lh-snug: 1.4;
    --lh-body: 1.6;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --ls-tight: -0.01em;
    --ls-normal: 0;
    --ls-eyebrow: 0.14em;
    --ls-button: 0.06em;
}

/* ---------- SPACING (4px grid) ---------- */
:root {
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    --gap-inline: 12px;
    --gap-card: 24px;
    --pad-card: 24px;
    --pad-card-lg: 32px;
    --section-y: 80px;
    --container: 1200px;
    --container-narrow: 820px;
}

/* ---------- RADIUS ---------- */
:root {
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --radius-round: 50%;
}

/* ---------- SHADOWS & EFFECTS ---------- */
:root {
    --shadow-xs: 0 1px 2px rgba(40, 35, 25, 0.06);
    --shadow-sm: 0 2px 8px rgba(40, 35, 25, 0.06);
    --shadow-md: 0 8px 24px rgba(40, 35, 25, 0.08);
    --shadow-lg: 0 18px 48px rgba(40, 35, 25, 0.12);
    --shadow-card: 0 10px 30px rgba(40, 35, 25, 0.07);

    --shadow-red: 0 8px 20px rgba(203, 0, 0, 0.28);
    --shadow-red-sm: 0 4px 12px rgba(203, 0, 0, 0.22);

    --grad-red: linear-gradient(180deg, #e21414 0%, #cb0000 55%, #ac0000 100%);
    --grad-red-hover: linear-gradient(180deg, #cb0000 0%, #ac0000 60%, #8f0000 100%);

    --scrim-bottom: linear-gradient(180deg, rgba(20, 18, 15, 0) 0%, rgba(20, 18, 15, 0.55) 100%);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.15s;
    --dur: 0.24s;
    --dur-slow: 0.4s;
}

/* ---------- BASE (дефолты элементов из ДС) ---------- */
:root {
    color-scheme: light;
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

a:hover {
    color: var(--accent-hover);
}

::selection {
    background: var(--red-100);
    color: var(--ink-900);
}

.eyebrow {
    font-family: var(--font-ui);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: var(--fw-medium);
}

.accent-rule {
    width: 44px;
    height: 2px;
    border: 0;
    background: var(--accent);
    margin: 12px auto;
}

/* ============================================================
   RICH-РАСШИРЕНИЕ ТОКЕНОВ (редизайн «богаче», 07.2026).
   Клиент попросил контрастные секции (бордо / тёмная зелень),
   золотые акценты и водные мотивы. Новые значения заводим
   ТОЛЬКО здесь, в блоках — по-прежнему через var().
   ============================================================ */
:root {
    /* Глубокое бордо (винные тёмные поверхности) */
    --wine-950: #3d070d;
    --wine-900: #520a12;
    --wine-800: #6b0d17;
    --wine-700: #85121e;

    /* Хвойная зелень (лес Железноводска) */
    --pine-950: #122b20;
    --pine-900: #16352a;
    --pine-800: #1d4534;
    --pine-700: #2a5c45;
    --pine-100: #dcebe2;

    /* Золото — расширение */
    --gold-700: #c9962e;
    --grad-gold: linear-gradient(120deg, #f6d878 0%, #e7b13a 55%, #c9962e 100%);
    --shadow-gold: 0 10px 28px rgba(231, 177, 58, 0.28);

    /* Текст и линии на тёмных поверхностях */
    --text-on-dark-strong: var(--white);
    --text-on-dark-soft: rgba(255, 255, 255, 0.78);
    --text-on-dark-faint: rgba(255, 255, 255, 0.55);
    --line-on-dark: rgba(255, 255, 255, 0.16);
    --glass-on-dark: rgba(255, 255, 255, 0.07);
    --glass-on-dark-hover: rgba(255, 255, 255, 0.12);

    /* Арочный радиус — мотив архитектуры санатория */
    --radius-arch: 240px 240px var(--radius-lg) var(--radius-lg);

    /* Тёмные текстуры «минеральной воды» (пузырьки) */
    --bubbles-wine:
        radial-gradient(circle at 9% 22%, rgba(255, 255, 255, 0.05) 0 58px, transparent 59px),
        radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.04) 0 92px, transparent 93px),
        radial-gradient(circle at 72% 12%, rgba(250, 218, 113, 0.07) 0 22px, transparent 23px),
        radial-gradient(circle at 30% 88%, rgba(250, 218, 113, 0.05) 0 14px, transparent 15px);
    --surface-wine: linear-gradient(135deg, var(--wine-950) 0%, var(--wine-900) 55%, var(--wine-800) 100%);
    --surface-pine: linear-gradient(160deg, var(--pine-950) 0%, var(--pine-900) 60%, var(--pine-800) 100%);
}


/* ===== global.css ===== */
/* ============================================================
   База проекта — сайт санатория «Славяновский исток».
   Токены берём из РЕАЛЬНОЙ бренд-ДС (папка
   design-system/Славяновский исток — Design System), а не из
   старт-китового заглушечного tokens.css.
   Шрифт — Manrope (по прототипу, согласовано).
   Хардкод значений запрещён: в блоках используем только токены.
   ============================================================ */

/* 1. Шрифты. @import должны идти первыми.
      РЕШЕНИЕ ЗАКАЗЧИКА: типографика как на действующем сайте slavistok.ru,
      а НЕ как в бренд-ДС (там Playfair Display + Golos Text — см. CLAUDE.md).
      Сайт использует: SPSL — заголовки, Roboto — весь остальной текст. */
0,
500;
0,
700;
1,
400&display=swap");

/* 2. Токены бренд-ДС — локальная копия styles/ds.css (плоский импорт).
      Прямой @import оригинала (path с кириллицей/пробелами, вложенный
      styles.css → tokens/*) по file:// нестабилен; см. шапку ds.css. */
/*    ⚠️ ВЕРСИЮ ЗДЕСЬ ПОДНИМАТЬ ВМЕСТЕ С ?v=rNN у <link> в index.html:
      ds.css приходит через @import, скрипт кэш-баста его не трогает,
      и без ручного бампа браузер отдаёт СТАРЫЕ токены. */

/* --- SPSL — фирменная гарнитура сайта. Файлы взяты с slavistok.ru и лежат
       локально: хотлинк с их сервера в прод недопустим.
       ВНИМАНИЕ: у SPSL существует ТОЛЬКО Regular (400). Bold и Italic не
       существует в природе — на сервере 404. Поэтому font-weight > 400 и
       font-style: italic дадут синтетическое (поддельное) начертание.
       Сам сайт набирает заголовки весом 400 — делаем так же. --- */
@font-face {
    font-family: "SPSL";
    src: url("assets/fonts/SPSL/SPSL-New-Cyrillic.woff2") format("woff2"),
        url("assets/fonts/SPSL/SPSL-New-Cyrillic.woff") format("woff"),
        url("assets/fonts/SPSL/SPSL-New-Cyrillic.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- Переопределяем ТОЛЬКО шрифтовые токены на гарнитуры сайта.
       Цвета, отступы, радиусы, тени, motion остаются из ДС. --- */
:root {
    --font-display: "SPSL", Georgia, "Times New Roman", serif;
    --font-sans: "Roboto", system-ui, sans-serif;
    --font-heading: var(--font-display);
    --font-body: var(--font-sans);
    --font-ui: var(--font-sans);
    /* Отдельного serif больше нет: на сайте всего две гарнитуры. Токен оставлен
     как алиас, чтобы не править 6 блоков, которые на него ссылаются. */
    --font-serif: var(--font-display);
}

/* --- Проектные расширения токенов.
       В бренд-ДС нет токенов тёмных поверхностей, а они нужны для
       утилити-бара, секции «Номера», CTA-блока и футера. Заводим их
       здесь, опираясь на существующие значения ДС (не хардкод). --- */
:root {
    --surface-dark: var(--ink-900);
    /* тёмная плашка/секция */
    --text-on-dark: var(--white);
    --text-on-dark-dim: color-mix(in srgb, var(--white) 82%, transparent);

    /* Ширина контейнера расширена с 1200 до 1280: контент шапки
     (лого + меню + контакты + CTA) не помещался в 1200 и переполнял. */
    --container: 1280px;

    /* --- Доступность (аудит WCAG 2.1 AA) ---
     В ДС --focus-ring = color-mix(#cb0000 45%, transparent). Полупрозрачный
     ринг смешивается с фоном в бледно-розовый и даёт контраст 2.31–2.45
     при норме 3:1 (WCAG 1.4.11 Non-text Contrast). Делаем солид: 4.9–5.93. */
    --focus-ring: var(--red-600);
}

/* --- Сброс (поверх базы ДС) --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

ul,
ol {
    list-style: none;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background: var(--surface-page);
    color: var(--text-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}

/* --- Контейнер: центрируем контент, ширина и боковые поля из токенов --- */
.container {
    max-width: var(--container);
    /* 1200px */
    margin-inline: auto;
    padding-inline: var(--space-8);
    /* 32px */
}

@media (max-width: 640px) {
    .container {
        padding-inline: var(--space-4);
    }

    /* 16px */
}

/* ============================================================
   Общие примитивы секции (единый ритм + единая шапка).
   Раньше kicker/rule/title дублировались в каждом блоке с
   расхождениями — теперь один источник. Значения — из ds.css.
   ============================================================ */

/* Единый вертикальный ритм секций */
.section {
    padding-block: var(--section-y);
}

@media (max-width: 640px) {
    .section {
        padding-block: var(--space-12);
    }
}

/* Шапка секции: кикер → черта → заголовок, слева, черта одного размера */
.section-eyebrow {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
    /* кикер в одну строку */
}

.section-rule {
    width: 48px;
    height: 3px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--accent);
    margin: 0 0 var(--space-5);
    /* черта между кикером и заголовком, единый размер */
}

/* Все h2 секций — фирменным SPSL, как заголовки на slavistok.ru.
   Вес 400: у SPSL нет жирного, при --fw-bold браузер рисовал бы фальшивый. */
.section-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 1.1rem + 2.4vw, 2.75rem);
    font-weight: 400;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-normal);
    color: var(--text-heading);
    text-wrap: balance;
}

/* Модификатор больше не различает гарнитуру — на сайте она одна.
   Класс оставлен, чтобы не трогать разметку 5 блоков. */
.section-title--serif {
    font-family: var(--font-heading);
}


/* ===== 01-utility-bar.css ===== */
/* ============================================================
   Блок 1 — верхняя утилити-плашка.
   Прототип: тёмная полоса над хедером. Слева адрес с красной
   точкой-маркером, справа служебные ссылки.
   Все значения — из токенов ДС (тёмная поверхность — проектное
   расширение в global.css).
   ============================================================ */

.utility-bar {
    background: var(--surface-dark);
    color: var(--text-on-dark);
}

.utility-bar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* адрес — промо по центру — ссылки */
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-2);
    /* ~9px в прототипе → 8px по сетке */
    font-size: var(--fs-sm);
}

.utility-bar__addr {
    justify-self: start;
}

.utility-bar__links {
    justify-self: end;
}

/* Промо-строка «Раннее бронирование» — по центру плашки, красный акцент */
.utility-bar__promo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-on-dark-dim);
    white-space: nowrap;
}

/* Акцент красный (по просьбе заказчика). Иконка — чистый --red-500: она
   aria-hidden, т.е. графика, её норма 3:1, а красный на ink-900 даёт 3.34.
   Текст «−15%» — 14px, ему нужно 4.5, и чистый красный не проходит. Осветляем
   примесью белого: 70/30 → 4.8. Цвет остаётся явно красным. */
.utility-bar__promo svg {
    width: 14px;
    height: 14px;
    color: var(--red-500);
    flex-shrink: 0;
}

.utility-bar__promo strong {
    color: color-mix(in srgb, var(--red-500) 70%, var(--white));
    font-weight: var(--fw-bold);
}

/* Адрес */
.utility-bar__addr {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-style: normal;
    /* <address> по умолчанию курсивный */
    color: var(--text-on-dark-dim);
}

.utility-bar__dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: var(--radius-round);
    background: var(--accent);
    /* фирменный красный */
}

/* Служебные ссылки */
.utility-bar__links {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.utility-bar__link {
    display: inline-flex;
    min-height: 24px;
    /* тач-зона WCAG 2.2 AA (2.5.8) */
    align-items: center;
    gap: var(--space-2);
    color: var(--text-on-dark-dim);
    transition: color var(--dur) var(--ease);
}

.utility-bar__link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--accent);
    /* красный глаз — маркер версии для слабовидящих */
}

.utility-bar__link:hover {
    color: var(--text-on-dark);
}

.utility-bar__link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
    color: var(--text-on-dark);
}

/* Адаптив (в прототипе мобайла нет — решение проектное):
   плашку не режем, ничего не прячем (ссылка «для слабовидящих»
   важна), а разрешаем перенос и слегка ужимаем. */
@media (max-width: 640px) {
    .utility-bar__inner {
        grid-template-columns: 1fr auto;
        /* адрес + ссылки; промо прячем */
        gap: var(--space-1) var(--space-3);
        font-size: var(--fs-xs);
    }

    .utility-bar__promo {
        display: none;
    }

    .utility-bar__links {
        gap: var(--space-4);
    }
}


/* ===== 02-header.css ===== */
/* ============================================================
   Блок 2 — шапка сайта (sticky).
   Прототип: полупрозрачная белая шапка с блюром, слева логотип
   с подписью, по центру меню, справа телефоны + мессенджер Макс
   и кнопка «Забронировать».
   Логотип — реальный вордмарк ДС через CSS-маску (перекрашивается
   токеном). Значения — из бренд-ДС.
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--white) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding-block: var(--space-4);
}

/* ---------- Логотип ---------- */
.brand {
    display: flex;
    flex-direction: column;
    /* логотип сверху, подпись под ним */
    align-items: flex-start;
    gap: var(--space-1);
    flex-shrink: 0;
    width: 176px;
    /* компактный лок-ап; лого = ширине подписи */
}

.brand__logo {
    width: 100%;
    /* логотип во всю ширину лок-апа = ширине подписи */
    height: auto;
    /* вордмарк slavistok.ru, соотношение 368×37 */
    display: block;
}

.brand__meta {
    display: flex;
    flex-direction: column;
}

.brand__tagline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 10px;
    /* подпись подогнана под уменьшенный лого (ниже шкалы ДС) */
    color: var(--text-body);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.brand__stars {
    display: inline-flex;
    gap: 1px;
    color: var(--gold-600);
}

.brand__stars svg {
    width: 9px;
    height: 9px;
}

/* ---------- Меню ---------- */
.main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

.main-nav__link {
    color: var(--ink-800);
    white-space: nowrap;
    transition: color var(--dur) var(--ease);
}

.main-nav__link:hover,
.main-nav__link:focus-visible {
    color: var(--accent);
}

.main-nav__link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 4px;
    border-radius: var(--radius-xs);
}

.main-nav__promo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    /* галочка ближе к слову */
    color: var(--accent);
    font-weight: var(--fw-bold);
    transition: color var(--dur) var(--ease);
}

.main-nav__promo:hover {
    color: var(--accent-hover);
}

.main-nav__promo svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--accent);
    /* красная галочка перед словом «Акции» */
}

/* ---------- Правый кластер ---------- */
.header__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.header__contacts {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    align-items: center;
}

.contact__phone {
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    color: var(--text-heading);
    white-space: nowrap;
    transition: color var(--dur) var(--ease);
}

.contact__phone:hover {
    color: var(--accent);
}

.contact__phone--soft {
    font-weight: var(--fw-semibold);
}

.contact__line {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.contact__meta {
    font-size: var(--fs-xs);
    color: var(--text-body);
    white-space: nowrap;
}

/* Мессенджер Макс — иконка с сайта (max.svg, круг со своим градиентом, 1:1) */
/* Тач-зона 24×24 (WCAG 2.2 AA, 2.5.8) — иконка внутри остаётся 20×20 */
.max-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.max-badge:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.max-badge img {
    width: 20px;
    height: 20px;
    display: block;
}

/* CTA — фирменная красная пилюля (sm) */
.header__cta {
    display: inline-flex;
    align-items: center;
    background: var(--grad-red);
    color: var(--text-onred)!important;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-red-sm);
    white-space: nowrap;
    transition: transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        background var(--dur) var(--ease);
}

.header__cta:hover {
    background: var(--grad-red-hover);
    transform: translateY(-1px);
}

.header__cta:active {
    transform: translateY(0);
}

.header__cta:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ---------- Бургер (моб.) ---------- */
.header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--ink-800);
    cursor: pointer;
}

.header__burger svg {
    width: 22px;
    height: 22px;
}

.header__burger:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ---------- Мобильная панель ---------- */
.mobile-menu {
    display: none;
}

/* ============================================================
   АДАПТИВ. В прототипе мобайла нет — раскладка проектная:
   ≤1024px прячем инлайн-меню и контакты, показываем бургер
   и выпадающую панель.
   ============================================================ */
@media (max-width: 1260px) {

    .main-nav,
    .header__contacts {
        display: none;
    }

    .header__burger {
        display: inline-flex;
    }

    .header__right {
        gap: var(--space-3);
    }
    body:has(.mobile-menu:not([hidden])) {
        overflow: hidden;
    }
    .mobile-menu:not([hidden]) {
        display: block;
        height: calc(100vh - 80px);
        padding-bottom: 52px;
        overflow: auto;
    }

    .mobile-menu {
        border-bottom: 1px solid var(--border);
        background: var(--surface-card);
    }

    .mobile-menu__inner {
        padding-block: var(--space-4) var(--space-6);
    }

    .mobile-menu__nav {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        margin-bottom: var(--space-5);
    }

    .mobile-menu__link {
        display: block;
        padding: var(--space-3) 0;
        font-size: var(--fs-lg);
        font-weight: var(--fw-medium);
        color: var(--ink-800);
        border-bottom: 1px solid var(--border);
    }

    .mobile-menu__link:hover, li.active .mobile-menu__link {
        color: var(--accent);
    }

    .mobile-menu__contacts {
        display: grid;
        gap: var(--space-2);
    }

    .mobile-menu__phone {
        font-weight: var(--fw-bold);
        font-size: var(--fs-h4);
        color: var(--text-heading);
    }

    .mobile-menu__meta {
        font-size: var(--fs-sm);
        color: var(--text-body);
    }
}

@media (max-width: 640px) {
    .header__cta {
        padding: var(--space-2) var(--space-4);
    }
}

/* Кнопка брони в мобильном меню — только там, где CTA шапки скрыт (≤560px) */
.mobile-menu__book {
    display: none;
}

/* Шапке нужно ≥427px (лого 176 + gap 24 + правый кластер 195 + padding 32).
   На 375–393px (iPhone SE…15) бургер уезжал за экран и страница ехала вбок.
   Прячем CTA — бронь дублирована кнопкой в мобильном меню и бронибаром героя. */
@media (max-width: 560px) {
    .header__cta {
        display: none;
    }

    .mobile-menu__book {
        display: block;
        text-align: center;
        background: var(--grad-red);
        color: var(--text-onred);
        font-weight: var(--fw-bold);
        font-size: var(--fs-body);
        padding: var(--space-4);
        border-radius: var(--radius-pill);
        box-shadow: var(--shadow-red);
        margin-bottom: var(--space-5);
    }

    .mobile-menu__book:hover {
        background: var(--grad-red-hover);
        color: var(--text-onred);
    }

    .mobile-menu__book:focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 2px;
    }
}


/* ===== 03-hero.css ===== */
/* ============================================================
   Блок 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: 400;
    /* у SPSL нет жирного — иначе фальшивый */
    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)!important;
    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-page);
    /* бежевый фон страницы — как в блоке «Почему» */
}

.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-body);
    /* --text-muted давал 3.98 — ниже нормы WCAG AA */
    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-body);
}

.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);
    }
}


/* ===== 04-trust.css ===== */
/* ============================================================
   Блок 4 — полоса доверия (trust).
   Редакторская «строка достоверных фактов» под первым экраном:
   красные цифры-акценты, золотые звёзды, тонкие разделители.
   Не плиточная SaaS-строка. Значения — из бренд-ДС.
   ============================================================ */

.trust {
    background: var(--surface-page);
    border-block-end: 1px solid var(--border);
    /* только нижняя линия — верхняя убрана */
}

.trust__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    padding-block: var(--space-12);
}

.trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding-inline: var(--space-6);
}

.trust__item:first-child {
    padding-left: 0;
}

.trust__item:last-child {
    padding-right: 0;
}

/* Тонкий разделитель между фактами (в один ряд на десктопе) */
.trust__item+.trust__item {
    border-left: 1px solid var(--border);
}

/* Цифра-акцент */
.trust__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 40px;
    color: var(--accent);
}

.trust__num {
    font-family: var(--font-sans);
    /* Roboto: нужен настоящий жирный/курсив */
    font-weight: var(--fw-bold);
    font-size: clamp(1.75rem, 1rem + 2vw, 2.25rem);
    /* ~28–36px */
    line-height: 1;
    letter-spacing: var(--ls-tight);
}

.trust__unit {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    align-self: flex-end;
    padding-bottom: 0.15em;
}

/* Префикс «№» — тот же размер, что «мин», но прижат вверх */
.trust__unit--pre {
    align-self: flex-start;
    padding-top: 0.15em;
    padding-bottom: 0;
}

/* Звёзды */
.trust__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--gold-600);
}

.trust__stars svg {
    width: 26px;
    height: 26px;
}

.trust__ministars {
    display: inline-flex;
    gap: 1px;
    color: var(--gold-500);
}

.trust__ministars svg {
    width: 14px;
    height: 14px;
}

/* Подпись */
.trust__label {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--text-body);
    text-wrap: pretty;
    max-width: 22ch;
}

/* ---------- Адаптив ---------- */
@media (max-width: 960px) {
    .trust__inner {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-10) var(--space-8);
        padding-block: var(--space-10);
    }

    .trust__item,
    .trust__item:first-child,
    .trust__item:last-child {
        padding-inline: 0;
    }

    .trust__item+.trust__item {
        border-left: none;
    }
}

@media (max-width: 560px) {
    .trust__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8) var(--space-6);
    }
}


/* ===== 05-why.css ===== */
/* ============================================================
   Блок 5 — «Почему „Славяновский исток"» (редизайн).
   Ведущий визуал — фирменная аэро-карта территории (с пинами):
   всё лечение, природа и отдых буквально на одной территории.
   Центрированный заголовок → карта → 4 преимущества.
   Значения — из бренд-ДС.
   ============================================================ */

.why {
    background: var(--surface-page);
}

/* ---- Заголовок (шапка секции — общие классы в global.css) ---- */
.why__head {
    margin: 0 0 var(--space-10);
    /* единая отбивка шапка→контент, как в остальных 8 блоках */
}

/* ---- Карта территории (в контентной колонке) ---- */
.why__map {
    position: relative;
    margin: 0 0 var(--space-12);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}

.why__map img {
    width: 100%;
    aspect-ratio: 2 / 1;
    /* чуть выше, чтобы верхняя точка помещалась */
    object-fit: cover;
    display: block;
    transform: scale(1.18);
    /* зум внутри той же рамки — обрезает лес по краям */
    transform-origin: 44% 42%;
    /* смещение к корпусу и чуть вверх */
}

/* ---- Преимущества ---- */
.why__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-10);
}

.why__item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    /* иконка | заголовок */
    column-gap: var(--space-4);
    row-gap: var(--space-3);
    align-items: center;
}

/* Полупрозрачный вертикальный разделитель между пунктами (в центре промежутка) */
.why__item:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--space-10) / -2);
    width: 1px;
    background: color-mix(in srgb, var(--ink-400) 30%, transparent);
}

.why__ico {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-round);
    background: var(--red-50);
    color: var(--accent);
}

.why__ico svg {
    width: 26px;
    height: 26px;
}

.why__item-title {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--text-heading);
}

.why__item-text {
    grid-column: 1 / -1;
    /* текст на всю ширину пункта (иконка + заголовок) */
    grid-row: 2;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text-body);
    text-wrap: pretty;
}

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
    .why__list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-10) var(--space-8);
    }

    .why__item::before {
        display: none;
    }

    .why__item:nth-child(2n)::before {
        display: block;
        left: calc(var(--space-8) / -2);
    }

    .why__map img {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 560px) {
    .why__head {
        margin-bottom: var(--space-8);
    }

    .why__list {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .why__item::before {
        display: none;
    }

    .why__map {
        margin-bottom: var(--space-8);
    }

    .why__map img {
        aspect-ratio: 4 / 3;
    }
}


/* ===== 06-about.css ===== */
/* ============================================================
   Блок 6 — «О санатории».
   Две колонки: текст слева (кикер → заголовок → 2 абзаца →
   действия) + реальное фото справа. Ведущее действие —
   фирменная глянцевая пилюля «Больше о санатории», рядом —
   ссылка на 3D-тур. Значения — только из бренд-ДС.
   ============================================================ */

.about {
    background: var(--surface-page);
}

/* Шапка на всю ширину — заголовок в одну строку */
.about__head {
    margin-bottom: var(--space-10);
}

.about__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.about__text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-body);
    text-wrap: pretty;
}

.about__text+.about__text {
    margin-top: var(--space-4);
}

/* ---- Действия ---- */
.about__actions {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-top: var(--space-8);
}

/* Ведущая — фирменная глянцевая красная пилюля */
.about__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);
}

.about__btn-primary:hover {
    background: var(--grad-red-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-red), var(--shadow-md);
    color: var(--text-onred);
}

.about__btn-primary:active {
    transform: translateY(0);
}

.about__btn-primary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.about__btn-primary svg {
    width: 16px;
    height: 16px;
}

/* Вторичная — ссылка на 3D-тур */
.about__tour {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body);
    transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}

.about__tour svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
}

.about__tour .about__tour-arrow {
    width: 18px;
    height: 18px;
    color: currentColor;
}

.about__tour:hover {
    color: var(--accent);
    gap: var(--space-3);
}

.about__tour:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

/* ---- Фото ---- */
.about__media {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}

.about__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 40%;
}

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
    .about__inner {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .about__media {
        order: -1;
    }

    /* фото первым — визуальный вход */
    .about__media img {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 560px) {
    .about__head {
        margin-bottom: var(--space-8);
    }

    .about__actions {
        gap: var(--space-5);
        margin-top: var(--space-6);
    }

    .about__btn-primary {
        width: 100%;
        justify-content: center;
    }

    .about__tour {
        padding-block: var(--space-2);
    }

    /* тап-зона ≥44px */
    .about__media img {
        aspect-ratio: 4 / 3;
    }
}


/* ===== 07-programs.css ===== */
/* ============================================================
   Блок 7 — «Лечебные программы».
   Тёплый band с 3 карточками программ (ProgramCard): обложка с
   кнопкой «N фото» → лайтбокс-галерея, теги-чипы, описание,
   строка про санаторно-курортную карту, цена (плейсхолдер),
   «Подробнее». Под карточками — строка чипов-профилей.
   Значения — только из бренд-ДС.
   ============================================================ */

.programs {
    background: var(--surface-muted);
    border-block: 1px solid var(--border);
}

/* ---- Шапка блока (kicker/rule/title — общие классы в global.css) ---- */
.programs__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.programs__head-main {
    min-width: 0;
}

.programs__head-main .section-title {
    white-space: nowrap;
}

/* заголовок в одну строку */
.programs__all {
    display: inline-flex;
    min-height: 24px;
    /* тач-зона WCAG 2.2 AA (2.5.8) */
    align-items: center;
    gap: var(--space-2);
    flex: none;
    white-space: nowrap;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--text-link);
    transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}

.programs__all svg {
    width: 16px;
    height: 16px;
}

.programs__all:hover {
    gap: var(--space-3);
    color: var(--accent-hover);
}

/* ---- Сетка карточек ---- */
.programs__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

/* ---- Карточка программы ---- */
.pcard {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.pcard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}

.pcard__media {
    position: relative;
    flex: none;
    /* фото не растягивается — одинаковая высота во всех карточках */
    aspect-ratio: 16 / 10;
    background: var(--surface-muted);
}

.pcard__media img {
    position: absolute;
    /* убираем из потока — высоту держит aspect-ratio контейнера */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pcard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--pad-card);
}

/* Теги */
.pcard__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.pcard__tag {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-button);
    text-transform: uppercase;
    color: var(--text-body);
    background: var(--surface-muted);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-xs);
}

.pcard__tag--hit {
    color: var(--accent);
    background: var(--red-50);
}

.pcard__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    font-weight: 400;
    /* у SPSL нет жирного — иначе фальшивый */
    line-height: var(--lh-heading);
    color: var(--text-heading);
    margin-bottom: var(--space-2);
}

.pcard__desc {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text-body);
    text-wrap: pretty;
    margin-bottom: var(--space-4);
}

/* Строка про санаторно-курортную карту */
.pcard__note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-page);
    border-radius: var(--radius-sm);
    margin-top: auto;
    /* прижимает блок note+price+more к низу — строки выровнены между карточками */
    margin-bottom: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--text-body);
}

.pcard__note svg {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--text-muted);
}

.pcard__note strong {
    color: var(--text-heading);
    font-weight: var(--fw-semibold);
}

.pcard__note--need {
    background: var(--red-50);
}

.pcard__note--need svg {
    color: var(--accent);
}

.pcard__note--need strong {
    color: var(--accent);
}

/* Цена */
.pcard__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.pcard__price-from,
.pcard__price-unit {
    font-size: var(--fs-sm);
    color: var(--text-body);
}

/* контраст: --text-muted = 3.98, ниже AA */
.pcard__price-val {
    font-family: var(--font-sans);
    /* Roboto: нужен настоящий жирный/курсив */
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--text-heading);
    letter-spacing: var(--ls-tight);
}

.pcard__more {
    display: inline-flex;
    min-height: 24px;
    /* тач-зона WCAG 2.2 AA (2.5.8) */
    align-items: center;
    gap: var(--space-1);
    align-self: flex-start;
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    color: var(--text-link);
    transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pcard__more:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.pcard__more svg {
    width: 15px;
    height: 15px;
}

.pcard__more:hover {
    gap: var(--space-2);
    color: var(--accent-hover);
}

/* ---- Панель «Программы по профилям» ---- */
.programs__profiles {
    margin-top: var(--space-8);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-8);
}

.programs__profiles-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.programs__profiles-title {
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    font-weight: 400;
    /* у SPSL нет жирного — иначе фальшивый */
    line-height: var(--lh-heading);
    color: var(--text-heading);
}

.programs__profiles-all {
    display: inline-flex;
    min-height: 24px;
    /* тач-зона WCAG 2.2 AA (2.5.8) */
    align-items: center;
    gap: var(--space-2);
    flex: none;
    white-space: nowrap;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--text-link);
    transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}

.programs__profiles-all svg {
    width: 16px;
    height: 16px;
}

.programs__profiles-all:hover {
    gap: var(--space-3);
    color: var(--accent-hover);
}

/* ---- Чипы-профили (внутри панели) ---- */
.programs__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.programs__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--text-body);
    background: var(--surface-page);
    border: 1px solid var(--border);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    transition: border-color var(--dur) var(--ease),
        color var(--dur) var(--ease),
        background var(--dur) var(--ease);
}

/* Иконки профилей — оригиналы с slavistok.ru/treatment (заливка, цвет не зашит) */
.programs__chip-ico {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--accent);
    transition: color var(--dur) var(--ease);
}

.programs__chip:hover .programs__chip-ico {
    color: var(--accent-hover);
}

.programs__chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--red-50);
}

.programs__chip:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
    .programs__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .programs__grid>.pcard:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .programs__head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
        margin-bottom: var(--space-8);
    }

    .programs__head-main .section-title {
        white-space: normal;
    }

    /* на узких экранах перенос допустим */
    .programs__grid {
        grid-template-columns: 1fr;
    }

    .programs__grid>.pcard:last-child {
        grid-column: auto;
    }

    .programs__profiles {
        padding: var(--space-5) var(--space-5);
    }

    .programs__profiles-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        margin-bottom: var(--space-4);
    }
}


/* ===== 08-rest.css ===== */
/* ============================================================
   Блок 8 — «Отдых» (редизайн по макету 07.2026).

   Композиция: песочная панель, внутри три колонки —
   белая карточка с тремя пунктами | вертикальное фото
   бассейна | белая карточка с двумя пунктами. Фото выше
   карточек и служит осью симметрии.

   Пункт: круглый бейдж с иконкой слева, справа — заголовок,
   красная линейка и описание (выровнены по заголовку).
   Значения — только из бренд-ДС.
   ============================================================ */

.rest {
    background: var(--surface-page);
}

/* ---------- Шапка блока (kicker/rule/title — общие классы) ---------- */
.rest__head {
    margin-bottom: var(--space-10);
}

/* ---------- Песочная панель с тремя колонками ---------- */
.rest__box {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    /* пропорции макета: карточка | фото | карточка */
    align-items: center;
    gap: var(--space-6);
    background: var(--surface-muted);
    border-radius: var(--radius-xl);
    /* Вертикальное поле маленькое: фото выходит за панель (см. .rest__photo) */
    padding: var(--space-6) var(--space-8);
}

/* ---------- Белая карточка со списком пунктов ---------- */
.rest__col {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Пункты внутри карточки делит тонкая линия */
.rest__tile+.rest__tile {
    border-top: 1px solid var(--border);
}

.rest__tile {
    display: grid;
    grid-template-columns: auto 1fr;
    /* бейдж | контент */
    column-gap: var(--space-4);
    padding: var(--space-6) var(--space-5);
    transition: background var(--dur) var(--ease);
}

.rest__tile:hover {
    background: var(--surface-page);
}

.rest__badge {
    grid-column: 1;
    grid-row: 1 / span 3;
    /* бейдж по левому краю на всю высоту пункта */
    align-self: start;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-round);
    background: var(--surface-muted);
    transition: background var(--dur) var(--ease);
}

.rest__tile:hover .rest__badge {
    background: var(--red-50);
}

.rest__badge svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
}

.rest__tile-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-height: 52px;
    /* заголовок центрируется по бейджу */
    display: flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    font-weight: 400;
    /* у SPSL нет жирного — иначе фальшивый */
    line-height: var(--lh-heading);
    color: var(--text-heading);
    text-wrap: balance;
}

.rest__tile-rule {
    grid-column: 2;
    grid-row: 2;
    width: 28px;
    height: 2px;
    background: var(--accent);
    border-radius: var(--radius-pill);
    margin: var(--space-2) 0 var(--space-3);
}

.rest__tile-text {
    grid-column: 2;
    grid-row: 3;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text-body);
    text-wrap: pretty;
}

/* ---------- Фото бассейна (центральная ось) ---------- */
/* Фото выше карточек И выступает за песочную панель сверху и снизу:
   отрицательное поле съедает padding панели плюс 8px нахлёста. */
.rest__photo {
    margin: calc(-1 * var(--space-6) - 8px) 0;
    border: 1px solid var(--border-onsand);
    /* тёплый кант, как в макете */
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.rest__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    /* фото задаёт высоту ряда и перекрывает панель */
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
}

.rest__photo:hover img {
    transform: scale(1.03);
}

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
    .rest__box {
        gap: var(--space-5);
        padding: var(--space-6);
    }

    .rest__tile {
        padding: var(--space-5);
    }
}

/* Планшет: фото уходит наверх, карточки — в два столбца */
@media (max-width: 900px) {
    .rest__box {
        grid-template-columns: 1fr 1fr;
        padding: var(--space-6);
    }

    .rest__photo {
        grid-column: 1 / -1;
        order: -1;
        margin: 0;
    }

    /* нахлёст только на десктопе */
    .rest__photo img {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 620px) {
    .rest__box {
        grid-template-columns: 1fr;
        border-radius: var(--radius-lg);
        padding: var(--space-4);
    }

    .rest__photo img {
        aspect-ratio: 4 / 3;
    }
}


/* ===== 09-rooms.css ===== */
/* ============================================================
   Блок 9 — «Номера».
   Дизайн карточки — со страницы slavistok.ru/rooms: белая карточка,
   фото с мини-слайдером (стрелки ‹ ›), serif-заголовок по центру,
   цена, описание, разделитель, иконки-удобства + «Смотреть номер».
   Карточки — в горизонтальной карусели со стрелками влево/вправо.
   Значения — только из бренд-ДС.
   ============================================================ */

.rooms {
    background: var(--surface-muted);
    overflow-x: clip;
}

/* ---------- Шапка (kicker/rule/title — общие классы) ---------- */
.rooms__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.rooms__head-main {
    min-width: 0;
}

.rooms__head-main .section-title {
    white-space: nowrap;
}

/* заголовок в одну строку */
.rooms__nav {
    display: flex;
    gap: var(--space-3);
    flex: none;
}

.rooms__nav-btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-round);
    border: 1px solid var(--border-strong);
    background: var(--surface-card);
    color: var(--text-heading);
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.rooms__nav-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-onred);
}

.rooms__nav-btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.rooms__nav-btn:disabled {
    opacity: .4;
    cursor: default;
}

.rooms__nav-btn:disabled:hover {
    background: var(--surface-card);
    border-color: var(--border-strong);
    color: var(--text-heading);
}

.rooms__nav-btn svg {
    width: 20px;
    height: 20px;
}

/* ---------- Лента-карусель ---------- */
.rooms__track {
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
    /* первая/последняя карточка выравнены по контейнеру, дальше — вылет к краю */
    padding-inline: max(var(--space-8), calc(50vw - var(--container) / 2));
    scroll-padding-inline: max(var(--space-8), calc(50vw - var(--container) / 2));
}

.rooms__track::-webkit-scrollbar {
    display: none;
}

/* ---------- Карточка номера ---------- */
.room-card {
    /* Ровно ДВЕ карточки в кадре (правка заказчика — «крупнее»).
     Процент считается от content-box ленты, а он равен ширине
     контейнера, поэтому формула держит 2 карточки на любой ширине. */
    flex: 0 0 calc(50% - var(--space-5) / 2);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Фото-галерея карточки */
.room-card__gallery {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--surface-muted);
}

.room-card__slides {
    display: flex;
    height: 100%;
    transition: transform var(--dur-slow, .4s) var(--ease);
}

.room-card__slides img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.room-card__ctrl {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--radius-round);
    background: color-mix(in srgb, var(--white) 82%, transparent);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: var(--ink-900);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--dur) var(--ease);
}

.room-card__ctrl:hover {
    background: var(--white);
}

.room-card__ctrl:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Стрелки не мозолят глаз: показываем только при наведении на карточку.
   Клавиатурный фокус тоже раскрывает их — иначе они были бы недостижимы. */
@media (hover: hover) {
    .room-card__ctrl {
        opacity: 0;
        transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
    }

    .room-card:hover .room-card__ctrl,
    .room-card__ctrl:focus-visible {
        opacity: 1;
    }
}

.room-card__ctrl svg {
    width: 16px;
    height: 16px;
}

.room-card__ctrl--prev {
    left: var(--space-3);
}

.room-card__ctrl--next {
    right: var(--space-3);
}

.room-card__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-3);
    display: flex;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}

.room-card__dots span {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-round);
    background: color-mix(in srgb, var(--white) 55%, transparent);
    transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}

.room-card__dots span.is-active {
    background: var(--white);
    width: 16px;
    border-radius: var(--radius-pill);
}

/* Тело карточки */
.room-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-6) var(--space-6) var(--space-5);
}

.room-card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    font-weight: 400;
    /* у SPSL нет жирного — иначе фальшивый */
    line-height: var(--lh-heading);
    color: var(--text-heading);
    text-align: center;
    margin-bottom: var(--space-4);
}

.room-card__price {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--text-heading);
    text-align: center;
    /* по центру — вслед за заголовком карточки */
    margin-bottom: var(--space-3);
}

.room-card__price .from {
    color: var(--text-body);
    font-weight: var(--fw-regular);
}

.room-card__price .rub {
    color: var(--accent);
}

.room-card__price .per {
    color: var(--text-body);
    font-weight: var(--fw-regular);
}

.room-card__desc {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text-body);
    text-align: center;
    /* по центру — вслед за заголовком и ценой */
    text-wrap: pretty;
}

.room-card__divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-5) 0 var(--space-4);
    margin-top: auto;
    /* прижимаем футер к низу */
}

.room-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.room-card__amenities {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-body);
}

.room-card__amenities svg {
    width: 20px;
    height: 20px;
}
.room-card__amenities img.icon {
   width: 20px;
   height: 20px;
    filter: invert(100%);
    opacity: .5;
}

.room-card__link {
    display: inline-flex;
    align-items: center;
    flex: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-button);
    text-transform: uppercase;
    color: var(--text-link);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: color var(--dur) var(--ease);
}
.room-card__link:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.room-card__link:hover {
    color: var(--accent-hover);
}

.room-card__link:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

/* ============================================================
   Поддержка Slick для блока «Номера»
   ============================================================ */

/* Внешняя карусель — возвращаем поведение как в оригинале */
.rooms__track.slick-initialized {
    display: block;
    overflow: visible;
    padding-inline: 0;
}

.rooms__track .slick-list {
    /* ограничиваем ширину по контейнеру */
    max-width: var(--container);
    /* 1200px */
    margin-inline: auto;
    overflow: visible;
    padding-inline: var(--space-8);
    /* 32px, как было */
}

@media (max-width: 640px) {
    .rooms__track .slick-list {
        padding-inline: var(--space-4);
    }
}

.rooms__track .slick-track {
    display: flex !important;
    gap: var(--space-5);
}

.rooms__track .slick-slide {
    height: auto;
}

.rooms__track .room-card {
    flex: none;
    width: 100%;
    height: 100%;
}

/* --- Внутренние галереи (важно!) --- */
.room-card__gallery {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Когда Slick инициализирован — полностью перебиваем старые flex-стили */
.room-card__slides.slick-initialized {
    display: block !important;
    width: 100% !important;
    height: 100%;
}

.room-card__slides .slick-list {
    width: 100% !important;
    height: 100%;
    overflow: hidden;
    padding: 0;
}

.room-card__slides .slick-track {
    height: 100%;
    display: flex !important;
    /* Slick сам управляет */
    gap: 0;
}

.room-card__slides .slick-slide {
    width: 100% !important;
    /* ключевая строка */
    height: 100%;
    float: none !important;
}

.room-card__slides .slick-slide img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    flex: none !important;
    /* на случай, если старые стили ещё действуют */
}

/* Прячем старые стрелки и точки из вёрстки */
.room-card__gallery>.room-card__ctrl,
.room-card__gallery>.room-card__dots {
    display: none !important;
}

/* Стрелки Slick */
.room-card__gallery .room-card__ctrl {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* Точки Slick */
.room-card__gallery .slick-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-3);
    display: flex;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 2;
}

.room-card__gallery .slick-dots li {
    margin: 0;
    width: auto;
    height: auto;
}

.room-card__gallery .slick-dots button {
    width: 6px;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--white) 55%, transparent);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: background 0.24s ease, width 0.24s ease;
}

.room-card__gallery .slick-dots li.slick-active button {
    background: #fff;
    width: 16px;
    border-radius: 999px;
}

/* Стрелки только при наведении */
@media (hover: hover) {
    .room-card__gallery .room-card__ctrl {
        opacity: 0;
        transition: opacity 0.24s ease, background 0.24s ease;
    }

    .room-card:hover .room-card__gallery .room-card__ctrl,
    .room-card__gallery .room-card__ctrl:focus-visible {
        opacity: 1;
    }
}

/* Для fade-режима */
.room-card__slides.slick-initialized {
    display: block !important;
    width: 100% !important;
    height: 100%;
}

.room-card__slides .slick-list,
.room-card__slides .slick-track {
    width: 100% !important;
    height: 100%;
}

.room-card__slides .slick-slide {
    width: 100% !important;
    height: 100%;
    float: none !important;
}

.room-card__slides .slick-slide img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
    .rooms__head {
        align-items: flex-start;
    }

    .rooms__head-main .section-title {
        white-space: normal;
    }

    /* на узких экранах перенос допустим */
    /* На планшете две карточки уже мельчат — показываем полторы. */
    .room-card {
        flex-basis: 68%;
    }
}

@media (max-width: 640px) {
    .rooms__head {
        flex-direction: column;
        gap: var(--space-5);
        margin-bottom: var(--space-8);
    }

    .rooms__track {
        padding-inline: var(--space-5);
        gap: var(--space-4);
    }

    .room-card {
        flex-basis: 84%;
    }
}


/* ===== 10-food.css ===== */
/* ============================================================
   Блок 10 — «Питание» (редизайн по макету 07.2026).

   Композиция: бордовая секция, поперёк неё — кремовая лента.
   По центру ленты крупный овал из двух фото залов в двойном
   золотом кольце; овал выступает за ленту сверху и снизу.
   Слева и справа — золотые номера 01/02 с выносной линейкой,
   заголовок и описание зала.

   Мотив: наведение на половину овала разворачивает её фото
   на весь круг (стрелок прокрутки нет — решение заказчика).
   Значения — только из бренд-ДС.
   ============================================================ */

/* Фон секции и цвета шапки задаются в 16-rich.css (бордо + золото) */

/* ---------- Шапка (kicker/rule/title — общие классы) ---------- */
.food__head {
    margin-bottom: var(--space-10);
}

/* ---------- Сцена: кремовая лента во всю ширину ---------- */
.food__stage {
    position: relative;
    padding-block: var(--space-12);
}

.food__band {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 16%;
    bottom: 10%;
    background: var(--surface-page);
}

/* Декор поверх ленты, но под контентом: вензеля по углам + пузырьки */
.food__deco {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Золотые «круги на воде» — общие классы .ripple в 16-rich.css */

.food__deco span {
    position: absolute;
    bottom: -40px;
    left: calc(var(--bx) * 1%);
    width: calc(var(--bs) * 1px);
    height: calc(var(--bs) * 1px);
    border-radius: var(--radius-round);
    border: 1.5px solid rgba(250, 218, 113, 0.3);
    background: rgba(255, 255, 255, 0.05);
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .food__deco span {
        animation: rich-bubble-food calc(var(--bt) * 1s) linear calc(var(--bd) * 1s) infinite;
    }
}

@keyframes rich-bubble-food {
    0% {
        transform: translateY(0) translateX(0) scale(0.9);
        opacity: 0;
    }

    12% {
        opacity: 0.75;
    }

    80% {
        opacity: 0.3;
    }

    100% {
        transform: translateY(-780px) translateX(26px) scale(1.1);
        opacity: 0;
    }
}

.food__layout {
    position: relative;
    /* поверх ленты и декора */
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    /* текст | крупный овал | текст */
    align-items: center;
    gap: var(--space-6);
}

/* ---------- Боковые колонки ---------- */
.food__num-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.food__num {
    font-family: var(--font-heading);
    font-weight: 400;
    /* у SPSL нет жирного — иначе фальшивый */
    font-size: clamp(2.75rem, 1.8rem + 3vw, 4.25rem);
    line-height: 1;
    color: var(--gold-600);
}

/* Выносная линейка с точкой на конце — указывает на овал */
.food__lead {
    position: relative;
    flex: 1;
    height: 1px;
    background: var(--gold-600);
}

.food__lead::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -50%;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-round);
    background: var(--gold-600);
}

.food__side--right {
    text-align: right;
}

.food__side--right .food__lead::after {
    right: auto;
    left: 0;
}

.food__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    /* у SPSL нет жирного — иначе фальшивый */
    line-height: var(--lh-heading);
    color: var(--text-heading);
    margin-bottom: var(--space-4);
    text-wrap: balance;
}

.food__desc {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text-body);
    text-wrap: pretty;
}

/* ---------- Овал с двумя фото ---------- */
.food__oval {
    position: relative;
    aspect-ratio: 8 / 7;
    padding: var(--space-5);
    /* кремовый ореол между кольцом и лентой */
    border-radius: var(--radius-round);
    background: var(--surface-page);
}

/* Внешнее тонкое золотое кольцо */
.food__oval::before {
    content: "";
    position: absolute;
    inset: var(--space-2);
    border: 1px solid var(--gold-600);
    border-radius: var(--radius-round);
    opacity: 0.6;
    pointer-events: none;
}

.food__oval-inner {
    position: relative;
    display: flex;
    height: 100%;
    border-radius: var(--radius-round);
    overflow: hidden;
    box-shadow: 0 0 0 2px var(--gold-600), var(--shadow-lg);
}

.food__half {
    position: relative;
    width: 50%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
    transition: width var(--dur-slow) var(--ease);
}

.food__half img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Золотой шов по стыку половин */
.food__half--l::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: var(--gold-600);
    opacity: 0.7;
}

.food__half:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -6px;
}

/* Наведение (и фокус с клавиатуры) разворачивает половину на весь круг.
   Для левой работает и без :has() — через соседний селектор. */
.food__half--l:hover,
.food__half--l:focus-visible {
    width: 100%;
}

.food__half--l:hover~.food__half--r,
.food__half--l:focus-visible~.food__half--r {
    width: 0;
}

.food__oval-inner:has(.food__half--r:hover) .food__half--r,
.food__oval-inner:has(.food__half--r:focus-visible) .food__half--r {
    width: 100%;
}

.food__oval-inner:has(.food__half--r:hover) .food__half--l,
.food__oval-inner:has(.food__half--r:focus-visible) .food__half--l {
    width: 0;
}

/* Наведение на ТЕКСТОВУЮ колонку разворачивает её половину овала:
   курсор на описании «Курортного» → на весь круг зал 01, на описании
   ВИП — зал 02. Колонки лежат по бокам овала, поэтому связываем их
   через :has() на общем родителе .food__layout. */
.food__layout:has(.food__side--left:hover) .food__half--l {
    width: 100%;
}

.food__layout:has(.food__side--left:hover) .food__half--r {
    width: 0;
}

.food__layout:has(.food__side--right:hover) .food__half--r {
    width: 100%;
}

.food__layout:has(.food__side--right:hover) .food__half--l {
    width: 0;
}

/* Тап/клик — тот же разворот для тач-устройств, где наведения нет.
   Классы вешает скрипт в index.html. */
.food__oval-inner.is-l .food__half--l {
    width: 100%;
}

.food__oval-inner.is-l .food__half--r {
    width: 0;
}

.food__oval-inner.is-r .food__half--r {
    width: 100%;
}

.food__oval-inner.is-r .food__half--l {
    width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .food__half {
        transition: none;
    }
}

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
    .food__layout {
        grid-template-columns: 1fr 3.2fr 1fr;
        gap: var(--space-5);
    }
}

/* Планшет и телефон: овал сверху, залы — колонками под ним */
@media (max-width: 860px) {
    .food__stage {
        padding-block: var(--space-8);
    }

    .food__band {
        top: 0;
        bottom: 0;
    }

    .food__layout {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8) var(--space-6);
    }

    .food__oval {
        grid-column: 1 / -1;
        grid-row: 1;
        max-width: 520px;
        margin-inline: auto;
        width: 100%;
    }

    .food__side--right {
        text-align: left;
    }

    .food__side--right .food__num-row {
        flex-direction: row-reverse;
    }

    .food__side--right .food__lead::after {
        right: 0;
        left: auto;
    }
}

@media (max-width: 560px) {
    .food__layout {
        grid-template-columns: 1fr;
    }

    .food__num-row {
        margin-bottom: var(--space-4);
    }
}

/* ===== 11-promo.css ===== */
/* ============================================================
   Блок 11 — «Акции и события».
   Дизайн карточек — со страницы slavistok.ru/blog: белая карточка
   с фото сверху, serif-заголовком по центру, описанием, красной
   глянцевой кнопкой «Подробнее», разделителем и тегами внизу.
   Просто 3 карточки в ряд. Значения — только из бренд-ДС.
   ============================================================ */

.si-promo {
    background: var(--surface-page);
}

/* ---------- Шапка (kicker/rule/title — общие классы) ---------- */
.si-promo__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.si-promo__all {
    display: inline-flex;
    min-height: 24px;
    /* тач-зона WCAG 2.2 AA (2.5.8) */
    align-items: center;
    gap: var(--space-2);
    flex: none;
    white-space: nowrap;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--text-link);
    transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}

.si-promo__all svg {
    width: 16px;
    height: 16px;
}

.si-promo__all:hover {
    gap: var(--space-3);
    color: var(--accent-hover);
}

.si-promo__all:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

/* ---------- Сетка карточек ---------- */
.si-promo__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

/* ---------- Карточка ---------- */
.si-promo-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.si-promo-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--surface-muted);
}

.si-promo-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow, .4s) var(--ease);
}

.si-promo-card__media:hover img {
    transform: scale(1.04);
}

.si-promo-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-6);
}

.si-promo-card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-h4);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--text-heading);
    text-align: center;
    text-wrap: balance;
    margin-bottom: var(--space-4);
}

.si-promo-card__desc {
    flex: 1;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text-body);
    text-wrap: pretty;
    margin-bottom: var(--space-6);
}

.si-promo-card__btn {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
    background: var(--grad-red);
    color: var(--text-onred)!important;
    font-family: inherit;
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-button);
    text-transform: uppercase;
    padding: var(--space-3) 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);
}

.si-promo-card__btn:hover {
    background: var(--grad-red-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-red), var(--shadow-md);
}

.si-promo-card__btn:active {
    transform: translateY(0);
}

.si-promo-card__btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.si-promo-card__divider {
    height: 1px;
    background: var(--border);
}

.si-promo-card__tags {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-4);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-button);
    text-transform: uppercase;
    color: var(--text-body);
}

.si-promo-card__tags .sep {
    color: var(--border-strong);
}

/* Тач-зона ≥24px по высоте (WCAG 2.2 AA, 2.5.8) */
.si-promo-card__tags a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: inherit;
    transition: color var(--dur) var(--ease);
}

.si-promo-card__tags a:hover {
    color: var(--accent);
}

.si-promo-card__tags a:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
    .si-promo__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .si-promo__grid>.si-promo-card:last-child {
        grid-column: 1 / -1;
        max-width: 520px;
        margin-inline: auto;
    }
}

@media (max-width: 620px) {
    .si-promo__head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .si-promo__grid {
        grid-template-columns: 1fr;
    }

    .si-promo__grid>.si-promo-card:last-child {
        grid-column: auto;
        max-width: none;
    }
}

/* ===== 12-reviews.css ===== */
/* ============================================================
   Блок 12 — «Отзывы гостей».
   По коду-макету заказчика, переведён на токены бренд-ДС.
   Слева шапка (кикер → линия → serif-заголовок), справа карточка
   рейтинга. Ниже — 3 карточки-отзыва со слегка «живым» наклоном,
   на ховере выравниваются и приподнимаются.
   ============================================================ */

.reviews {
    background: var(--surface-muted);
    /* песочный бэнд — разрезает бумажный прогон низа страницы */
}

/* ---------- Шапка (kicker/rule/title — общие классы) ---------- */
.reviews__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
    flex-wrap: wrap;
}

/* ---------- Карточка рейтинга ---------- */
.reviews__rating {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-card);
}

.reviews__rating-num {
    font-family: var(--font-sans);
    /* Roboto: нужен настоящий жирный/курсив */
    font-size: var(--fs-h2);
    /* было --fs-h1 (42px) — спорил с заголовком секции (44px) */
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
}

.reviews__rating-stars {
    color: var(--accent);
    font-size: var(--fs-body);
    letter-spacing: 0.12em;
}

.reviews__rating-note {
    font-size: var(--fs-sm);
    color: var(--text-body);
    margin-top: var(--space-1);
}

/* ---------- Сетка отзывов ---------- */
.reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

/* ---------- Карточка отзыва ---------- */
.review-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-card);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.review-card__quote-mark {
    font-family: var(--font-serif);
    font-size: var(--fs-h1);
    line-height: .5;
    color: var(--sand-400);
    margin-bottom: var(--space-4);
}

.review-card__text {
    font-family: var(--font-sans);
    /* Roboto: нужен настоящий жирный/курсив */
    font-size: var(--fs-body);
    font-style: italic;
    color: var(--text-heading);
    line-height: var(--lh-body);
    margin: 0 0 var(--space-6);
    text-wrap: pretty;
}

.review-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.review-card__person {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

.review-card__name {
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
}

.review-card__date {
    color: var(--text-body);
}

/* контраст: --text-muted = 3.98, ниже AA */

/* ---------- Кнопка «Написать отзыв» ---------- */
.reviews__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-top: var(--space-10);
}

/* Ссылка «Все отзывы» — тот же паттерн, что .programs__all и .promo__all */
.reviews__all {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    /* тач-зона WCAG 2.2 AA (2.5.8) */
    gap: var(--space-2);
    flex: none;
    white-space: nowrap;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--text-link);
    transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}

.reviews__all svg {
    width: 16px;
    height: 16px;
}

.reviews__all:hover {
    gap: var(--space-3);
    color: var(--accent-hover);
}

.reviews__all:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

.reviews__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--grad-red);
    color: var(--text-onred);
    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);
}

.reviews__btn:hover {
    background: var(--grad-red-hover);
    color: var(--text-onred);
    transform: translateY(-1px);
    box-shadow: var(--shadow-red), var(--shadow-md);
}

.reviews__btn:active {
    transform: translateY(0);
}

.reviews__btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.reviews__btn svg {
    width: 18px;
    height: 18px;
    flex: none;
}

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
    .reviews__grid {
        grid-template-columns: 1fr;
        max-width: 560px;
    }
}

@media (max-width: 560px) {
    .reviews__rating {
        padding: var(--space-4) var(--space-5);
    }

    .reviews__cta {
        margin-top: var(--space-8);
    }

    .reviews__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .review-card {
        transform: none !important;
    }
}


/* ===== 13-cta.css ===== */
/* ============================================================
   Блок 13 — «CTA-форма».
   Тёмная карточка: слева заголовок + текст + показатели работы,
   справа белая форма (имя, телефон, select-тема, кнопка, юр-строка).
   Поля с состоянием фокуса (--focus-ring). Кнопка — глянцевая
   красная. Значения — только из бренд-ДС.
   ============================================================ */

.cta {
    background: var(--surface-page);
}

.cta__box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
    background: var(--surface-dark);
    color: var(--text-on-dark);
    border-radius: var(--radius-xl);
    padding: clamp(var(--space-8), 3vw, var(--space-16));
}

/* ---------- Левая колонка ---------- */
.cta__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 1rem + 2.2vw, 2.25rem);
    font-weight: 400;
    /* у SPSL нет жирного — иначе фальшивый */
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--text-on-dark);
    text-wrap: balance;
    margin-bottom: var(--space-4);
}

.cta__lead {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-on-dark-dim);
    max-width: 420px;
    text-wrap: pretty;
}

.cta__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.cta__stat-num {
    font-family: var(--font-sans);
    /* Roboto: нужен настоящий жирный/курсив */
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--text-on-dark);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.cta__stat-label {
    font-size: var(--fs-sm);
    color: var(--text-on-dark-dim);
}

/* ---------- Правая колонка: форма ---------- */
.cta__form-wrap {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.cta-form {
    display: grid;
    gap: var(--space-3);
}

.cta-form .nice-select .list {
  background: #ffffff;
}

.cta-form  .nice-select .option.selected {
  background: #f5f5f5;
  color: inherit;
}

.cta-form .nice-select .current {
  text-transform: initial;
}

.cta-form__field {
    width: 100%;
    font-family: inherit;
    font-size: var(--fs-body);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-heading);
    outline: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cta-form__field::placeholder {
    color: var(--text-body);
}

.cta-form__field:focus {
    border-color: var(--accent);
    outline: 3px solid var(--focus-ring);
    outline-offset: 1px;
}

select.cta-form__field {
    color: var(--text-body);
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--space-10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A857E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
}

.cta-form__submit {
    margin-top: var(--space-1);
    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);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-red);
    transition: transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        background var(--dur) var(--ease);
}

.cta-form__submit:hover {
    background: var(--grad-red-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-red), var(--shadow-md);
}

.cta-form__submit:active {
    transform: translateY(0);
}

.cta-form__submit:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.cta-form__legal {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--text-body) !important;
    /* --text-muted давал 3.98 — ниже нормы WCAG AA */
    margin: 0;
}

.cta-form__legal a {
    color: var(--text-body);
    text-decoration: underline;
}

/* Успешная отправка */
.cta-form__done {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
}

.cta-form__done svg {
    width: 48px;
    height: 48px;
    color: var(--accent);
}

.cta-form__done-title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-h4);
    color: var(--text-heading);
}

.cta-form__done-text {
    font-size: var(--fs-sm);
    color: var(--text-body);
}

.cta__form-wrap.is-sent .cta-form {
    display: none;
}

.cta__form-wrap.is-sent .cta-form__done {
    display: flex;
}

/* ---------- Адаптив ---------- */
@media (max-width: 860px) {
    .cta__box {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

@media (max-width: 560px) {
    .cta__box {
        padding: var(--space-6);
        border-radius: var(--radius-lg);
    }

    .cta__form-wrap {
        padding: var(--space-5);
    }

    .cta__stats {
        gap: var(--space-6);
    }
}


/* ===== 14-faq.css ===== */
/* ============================================================
   Блок 14 — «Часто задаваемые вопросы».
   Аккордеон в стиле страницы slavistok.ru/about/payment: тонкие
   линии-разделители, serif-заголовки капсом, иконка +/−, плавное
   раскрытие. Значения — только из бренд-ДС.
   ============================================================ */

.faq {
    background: var(--surface-page);
}

/* Шапка слева, отбита от списка — как во всех остальных блоках (__head) */
.faq__head {
    margin-bottom: var(--space-10);
}

/* Колонка блока по центру страницы, содержимое внутри — слева */
.faq__wrap {
    max-width: 760px;
    margin-inline: auto;
}

/* ---------- Список ---------- */
.faq__list {
    border-top: 1px solid var(--border);
}

.faq__item {
    border-bottom: 1px solid var(--border);
}

.faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-2);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    /* Roboto: нужен настоящий жирный/курсив */
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: var(--ls-button);
    text-transform: uppercase;
    color: var(--text-heading);
    transition: color var(--dur) var(--ease);
}

.faq__q:hover {
    color: var(--accent);
}

.faq__q:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.faq__icon {
    flex: none;
    color: var(--text-muted);
    transition: color var(--dur) var(--ease);
}

.faq__icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.faq__icon .v {
    transition: opacity var(--dur) var(--ease);
    transform-origin: center;
}

.faq__q:hover .faq__icon {
    color: var(--accent);
}

.faq__item.is-open .faq__icon .v {
    opacity: 0;
}

.faq__item.is-open .faq__icon {
    color: var(--accent);
}

/* ---------- Ответ (плавное раскрытие через grid-rows) ---------- */
.faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-slow, .35s) var(--ease);
}

.faq__item.is-open .faq__a {
    grid-template-rows: 1fr;
}

.faq__a-inner {
    overflow: hidden;
}

.faq__a p {
    margin: 0;
    padding: 0 var(--space-2) var(--space-6);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-body);
    text-wrap: pretty;
}

.faq__a p+p {
    padding-top: var(--space-4);
}

.faq__a strong {
    color: var(--text-heading);
    font-weight: var(--fw-semibold);
}

/* ---------- Адаптив ---------- */
@media (prefers-reduced-motion: reduce) {
    .faq__a {
        transition: none;
    }
}

@media (max-width: 560px) {
    .faq__q {
        font-size: var(--fs-xs);
        gap: var(--space-4);
    }
}


/* ===== 16-rich.css ===== */
/* ============================================================
   Блок 16 — RICH-СЛОЙ (редизайн «богаче», 07.2026).

   Запрос клиента: страница сливается в один бежевый поток —
   нужен контраст между секциями, разнообразие композиций,
   развитие фирменной системы (золото, минеральная вода,
   архитектура) и живая динамика.

   Этот файл подключается ПОСЛЕДНИМ и поверх блочных стилей
   задаёт новый ритм страницы:

     hero (фото)  →  trust (БОРДО)  →  why (свет + карта)
     →  about (белый + арка)  →  programs (ХВОЙНАЯ ЗЕЛЕНЬ)
     →  rest (свет)  →  rooms (белый)  →  food (БОРДО)
     →  promo (песок)  →  reviews (свет + золото)
     →  cta (БОРДО + пузырьки)  →  faq (белый)  →  footer

   Все значения — из токенов ds.css (включая rich-расширение).
   Motion уважает prefers-reduced-motion.
   ============================================================ */

/* ------------------------------------------------------------
   0. Шапка секции — «редакционная линейка» (выбор заказчика):
      кикер красным капсом, от него тонкая золотая линия
      тянется до края колонки. Красная черта-hr скрыта.
   ------------------------------------------------------------ */
.section-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.section-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        var(--gold-600) 0%,
        color-mix(in srgb, var(--gold-600) 35%, transparent) 55%,
        transparent 100%);
}

.section-rule,
.accent-rule {
    display: none;
}

/* Тёмные секции: кикер и линия — золотом поярче */
.programs .section-eyebrow::after,
.food .section-eyebrow::after {
    background: linear-gradient(90deg,
        var(--gold-500) 0%,
        color-mix(in srgb, var(--gold-400) 30%, transparent) 55%,
        transparent 100%);
}

/* ------------------------------------------------------------
   1. Утилити-бар — глубокое бордо: рамка страницы сверху.
   ------------------------------------------------------------ */
.utility-bar {
    background: var(--wine-950);
    border-bottom: 0;
}

.utility-bar__addr,
.utility-bar__link {
    color: var(--text-on-dark-soft);
}

.utility-bar__link:hover {
    color: var(--text-on-dark-strong);
}

.utility-bar__dot {
    background: var(--gold-500);
}

.utility-bar__promo {
    color: var(--gold-400);
}

.utility-bar__promo strong {
    color: var(--gold-400);
}

/* ------------------------------------------------------------
   1.5. Лок-ап бренда — крупнее на 30% (правка заказчика).
        Базовые 176px / 10px / 9px заданы в 02-header.css вне
        шкалы ДС (лого подгонялся вручную) — множитель применяем
        в том же ключе.
   ------------------------------------------------------------ */
.brand {
    width: 220px;
}

/* 176 × 1.3 */
.brand__tagline {
    font-size: 13px;
}

/* 10 × 1.3 */
.brand__stars svg {
    width: 12px;
    height: 12px;
}

/* 9 × 1.3 */

/* ------------------------------------------------------------
   2. Герой — золотой акцент в заголовке, каскадное появление,
      скролл-подсказка.
   ------------------------------------------------------------ */
.hero__title-gold {
    color: var(--gold-400);
}

.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: calc(var(--space-16) + var(--space-10));
    translate: -50% 0;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--white);
    pointer-events: none;
}

.hero__scroll svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 900px) {
    .hero__scroll {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {

    .hero__title,
    .hero__subtitle,
    .hero__rule,
    .hero__features,
    .hero__actions {
        animation: rich-up 0.9s var(--ease) both;
    }

    .hero__subtitle {
        animation-delay: 0.12s;
    }

    .hero__rule {
        animation-delay: 0.2s;
    }

    .hero__features {
        animation-delay: 0.28s;
    }

    .hero__actions {
        animation-delay: 0.38s;
    }

    .booking__bar {
        animation: rich-up 0.9s 0.5s var(--ease) both;
    }

    .hero__scroll {
        animation: rich-bounce 2.2s var(--ease) 1.4s infinite;
    }
}

@keyframes rich-up {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rich-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

/* ------------------------------------------------------------
   3. Полоса доверия — фирменная бордовая лента с золотыми
      цифрами: первый контрастный удар после героя.
   ------------------------------------------------------------ */
.trust {
    position: relative;
    overflow: hidden;
    /* Правка заказчика 23.07: крупные светлые круги (--bubbles-wine) убраны —
     остаётся чистый бордовый градиент и живые пузырьки .trust__bubbles.
     Вернуть — дописать `var(--bubbles-wine),` перед --surface-wine. */
    background: var(--surface-wine);
    border-block-end: 0;
}

.trust__inner {
    position: relative;
    z-index: 1;
    padding-block: var(--space-16);
}

/* «Круги на воде» волосяной линией — вариант A, выбран заказчиком.
   ⚠️ ТЕРМИН ЗАКАЗЧИКА: этот декор он называет ВЕНЗЕЛЯ. Просьба
   «поправить вензеля» относится сюда, а не к букве «С» в блоке 6.
   Кольца расходятся из ДВУХ углов: правого верхнего и левого нижнего.
   Центр каждой связки вынесен за край ленты, поэтому в кадр попадают
   только дуги. Линия 0.8px: гравюра, а не светлые пятна.
   Классы общие: тот же декор стоит в блоке 7 «Лечение» (внутри
   .programs__deco). Прозрачность задаётся атрибутом opacity у каждой
   окружности в разметке, чтобы правка была видна в одном месте. */
.trust__deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.venzel-rings {
    position: absolute;
    width: 720px;
    height: 720px;
    fill: none;
    stroke: var(--gold-600);
    stroke-width: 0.8;
}

.venzel-rings--tr {
    top: -360px;
    right: -300px;
}

/* центр — на верхней кромке, 60px от правого края */
.venzel-rings--bl {
    bottom: -360px;
    left: -300px;
}

/* зеркально: нижняя кромка, 60px от левого края */

@media (max-width: 900px) {
    .venzel-rings {
        width: 520px;
        height: 520px;
    }

    .venzel-rings--tr {
        top: -260px;
        right: -220px;
    }

    .venzel-rings--bl {
        bottom: -260px;
        left: -220px;
    }
}

/* Живые пузырьки минеральной воды на бордовой ленте */
.trust__bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.trust__bubbles span {
    position: absolute;
    bottom: -40px;
    left: calc(var(--bx) * 1%);
    width: calc(var(--bs) * 1px);
    height: calc(var(--bs) * 1px);
    border-radius: var(--radius-round);
    border: 1.5px solid rgba(250, 218, 113, 0.32);
    background: rgba(255, 255, 255, 0.05);
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .trust__bubbles span {
        animation: rich-bubble-trust calc(var(--bt) * 1s) linear calc(var(--bd) * 1s) infinite;
    }
}

@keyframes rich-bubble-trust {
    0% {
        transform: translateY(0) translateX(0) scale(0.9);
        opacity: 0;
    }

    14% {
        opacity: 0.85;
    }

    80% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-340px) translateX(20px) scale(1.1);
        opacity: 0;
    }
}

.trust__item+.trust__item {
    border-left-color: var(--line-on-dark);
}

.trust__figure {
    color: var(--gold-400);
    min-height: 52px;
}

.trust__num {
    /* Цифры — фирменной заголовочной гарнитурой (решение заказчика).
     SPSL существует только в весе 400 — жирный запрещён (см. CLAUDE.md). */
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.4rem);
    /* ключевые цифры — крупно */
}

.trust__unit {
    color: var(--gold-100);
    font-family: var(--font-heading);
    font-weight: 400;
}

.trust__label {
    color: var(--text-on-dark-soft);
}

.trust__stars {
    color: var(--gold-500);
}

.trust__stars svg {
    width: 30px;
    height: 30px;
}

.trust__ministars {
    color: var(--gold-400);
}

/* ------------------------------------------------------------
   4. «Почему мы» — карта становится интерактивной:
      скругление, пульсирующие золотые точки с подписями.
   ------------------------------------------------------------ */
.why__map {
    border-radius: var(--radius-xl);
    border: 0;
}

.map-points {
    position: absolute;
    inset: 0;
}

.map-point {
    position: absolute;
    left: var(--x);
    top: var(--y);
    translate: -50% -50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.map-point__dot {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-round);
    background: var(--gold-400);
    border: 2px solid var(--white);
    box-shadow: var(--shadow-red-sm);
}

.map-point__dot::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    border: 2px solid var(--gold-400);
    opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
    .map-point__dot::before {
        animation: rich-pulse 2.4s var(--ease) infinite;
    }
}

@keyframes rich-pulse {
    0% {
        transform: scale(0.6);
        opacity: 0.8;
    }

    70% {
        transform: scale(1.5);
        opacity: 0;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.map-point__tip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    translate: -50% 4px;
    white-space: nowrap;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--ink-900);
    color: var(--white);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.3;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease), visibility var(--dur);
    pointer-events: none;
    box-shadow: var(--shadow-md);
}

.map-point:hover .map-point__tip,
.map-point:focus-visible .map-point__tip,
.map-point.is-open .map-point__tip {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
}

.map-point:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-round);
}

/* Точки у краёв: не даём подписи вылезти за карту */
.map-point--edge-l .map-point__tip {
    left: 0;
    translate: 0 4px;
}

.map-point--edge-l:hover .map-point__tip,
.map-point--edge-l:focus-visible .map-point__tip,
.map-point--edge-l.is-open .map-point__tip {
    translate: 0 0;
}

/* Названия преимуществ — фирменной гарнитурой, как заголовки
   секций и остальные карточки блоков (единственный блок,
   который оставался на Roboto bold). SPSL — только вес 400. */
.why__item-title {
    font-family: var(--font-heading);
    font-weight: 400;
}

.why__ico {
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.why__item:hover .why__ico {
    background: var(--accent);
    color: var(--white);
    transform: translateY(-3px);
}

/* ------------------------------------------------------------
   5. «О санатории» — вариант «Вензель» (выбор заказчика):
      гигантская фирменная «С» золотым контуром за текстом,
      фото на всю высоту текстовой колонки со смещённой
      золотой рамкой. Кнопки: «Больше о санатории» + 3D-тур.
   ------------------------------------------------------------ */
.about {
    background: var(--white);
    position: relative;
    overflow: hidden;
}

/* Вензель: типографика SPSL как графика бренда.
   Привязан к контейнеру (.about__wrap), а не к секции — лежит
   ровно под шапкой и текстом, как в согласованном макете. */
.about__wrap {
    position: relative;
}

.about__wrap::before {
    --venzel-size: clamp(280px, 30vw, 440px);
    content: "С";
    position: absolute;
    left: -6px;
    /* Верх буквы опущен под кикер: с золотой линейкой шапки вензель
     пересекаться не должен (правка заказчика 23.07). 0.12 — доля кегля
     от верха строчного бокса до чернил «С» у SPSL, поэтому зазор
     держится одинаковым на всех кеглях clamp. */
    top: calc(var(--space-6) - 0.12 * var(--venzel-size));
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: var(--venzel-size);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--gold-600) 45%, transparent);
    pointer-events: none;
    user-select: none;
}

/* Текст и фото — поверх вензеля */
.about__head,
.about__inner {
    position: relative;
}

/* Фото — вровень с высотой текстовой колонки */
.about__inner {
    align-items: stretch;
}

.about__media {
    position: relative;
    overflow: visible;
    /* иначе смещённая рамка обрежется */
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.about__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 40%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* Смещённая золотая рамка за нижним правым углом фото */
.about__media::after {
    content: "";
    position: absolute;
    inset: 40% calc(var(--space-4) * -1) calc(var(--space-4) * -1) 40%;
    border: 1.5px solid var(--gold-600);
    border-radius: var(--radius-lg);
    z-index: -1;
    pointer-events: none;
}

@media (max-width: 900px) {

    /* Кегль меняем через переменную — top пересчитается сам по формуле выше. */
    .about__wrap::before {
        --venzel-size: 240px;
        left: -16px;
    }

    .about__media::after {
        display: none;
    }

    .about__media img {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* Кнопка «Смотреть видео» на фото — верхний правый угол */
.about__play {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
    border: 0;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--white) 88%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--text-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background var(--dur) var(--ease), translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.about__play:hover {
    background: var(--white);
    translate: 0 -2px;
    box-shadow: var(--shadow-lg);
}

.about__play:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.about__play-ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-round);
    background: var(--grad-red);
    color: var(--white);
    box-shadow: var(--shadow-red-sm);
}

.about__play-ico svg {
    width: 18px;
    height: 18px;
    margin-left: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .about__play-ico {
        animation: rich-play-pulse 2.6s var(--ease) infinite;
    }
}

@keyframes rich-play-pulse {

    0%,
    100% {
        box-shadow: var(--shadow-red-sm), 0 0 0 0 color-mix(in srgb, var(--red-600) 35%, transparent);
    }

    50% {
        box-shadow: var(--shadow-red-sm), 0 0 0 10px transparent;
    }
}

/* Модальное окно видео */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
}

.video-modal[hidden] {
    display: none;
}

.video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--wine-950) 78%, black);
    opacity: 0.92;
}

.video-modal__body {
    position: relative;
    width: min(92vw, 960px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ink-900);
    box-shadow: var(--shadow-lg);
}

.video-modal__body video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--ink-900);
}

.video-modal__status {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    color: var(--text-on-dark-soft);
    font-size: var(--fs-body);
    pointer-events: none;
}

.video-modal__status[hidden] {
    display: none;
}

.video-modal__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-round);
    background: color-mix(in srgb, var(--white) 14%, transparent);
    color: var(--white);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}

.video-modal__close:hover {
    background: color-mix(in srgb, var(--white) 26%, transparent);
}

.video-modal__close svg {
    width: 20px;
    height: 20px;
}

/* ------------------------------------------------------------
   6. Программы — хвойная зелень: главный тёмный разворот
      страницы. Белые карточки получают глубину и hover.
   ------------------------------------------------------------ */
.programs {
    position: relative;
    overflow: hidden;
    /* Правка заказчика 23.07: два крупных светлых круга в углах убраны —
     фон чистая хвойная зелень. */
    background: var(--surface-pine);
}

.programs>.container {
    position: relative;
    z-index: 1;
}

/* Живой фон: золотые вензеля + пузырьки минеральной воды */
.programs__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ---- «Круги на воде» — общий золотой декор тёмных секций ----
   Концентрические кольца расходятся из двух противоположных
   углов; волна идёт изнутри наружу (задержка --rd на кольцо).
   Мотив минеральной воды, тот же, что в CTA-форме.
   Вензель «С» остался только в блоке «О санатории». */
.ripple {
    position: absolute;
    border-radius: var(--radius-round);
    border: 1.4px solid rgba(231, 177, 58, 0.30);
    pointer-events: none;
    /* Правка заказчика 23.07: кольца в углах «Лечения» и «Питания» скрыты
     («большие белые круги»). Разметка оставлена — вернуть декор можно
     снятием одной строки ниже. */
    display: none;
}

.ripple--tr1 {
    top: -170px;
    right: -110px;
    width: 420px;
    height: 420px;
}

.ripple--tr2 {
    top: -110px;
    right: -50px;
    width: 300px;
    height: 300px;
    border-color: rgba(231, 177, 58, 0.22);
}

.ripple--tr3 {
    top: -50px;
    right: 10px;
    width: 180px;
    height: 180px;
    border-color: rgba(231, 177, 58, 0.15);
}

.ripple--bl1 {
    bottom: -190px;
    left: -120px;
    width: 460px;
    height: 460px;
}

.ripple--bl2 {
    bottom: -130px;
    left: -60px;
    width: 340px;
    height: 340px;
    border-color: rgba(231, 177, 58, 0.22);
}

.ripple--bl3 {
    bottom: -70px;
    left: 0;
    width: 220px;
    height: 220px;
    border-color: rgba(231, 177, 58, 0.15);
}

@media (prefers-reduced-motion: no-preference) {
    .ripple {
        animation: rich-ripple calc(var(--rt, 9) * 1s) var(--ease) calc(var(--rd, 0) * 1s) infinite;
    }
}

@keyframes rich-ripple {

    0%,
    100% {
        transform: scale(0.94);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .ripple--tr1 {
        width: 300px;
        height: 300px;
        top: -120px;
        right: -80px;
    }

    .ripple--tr2 {
        width: 210px;
        height: 210px;
        top: -75px;
        right: -35px;
    }

    .ripple--tr3 {
        display: none;
    }

    .ripple--bl1 {
        width: 320px;
        height: 320px;
        bottom: -130px;
        left: -85px;
    }

    .ripple--bl2 {
        width: 230px;
        height: 230px;
        bottom: -90px;
        left: -40px;
    }

    .ripple--bl3 {
        display: none;
    }
}

/* Пузырьки — те же, что на бордовых лентах, но золотом по зелени */
.programs__deco span {
    position: absolute;
    bottom: -40px;
    left: calc(var(--bx) * 1%);
    width: calc(var(--bs) * 1px);
    height: calc(var(--bs) * 1px);
    border-radius: var(--radius-round);
    border: 1.5px solid rgba(250, 218, 113, 0.28);
    background: rgba(255, 255, 255, 0.04);
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .programs__deco span {
        animation: rich-bubble-programs calc(var(--bt) * 1s) linear calc(var(--bd) * 1s) infinite;
    }
}

@keyframes rich-bubble-programs {
    0% {
        transform: translateY(0) translateX(0) scale(0.9);
        opacity: 0;
    }

    12% {
        opacity: 0.8;
    }

    82% {
        opacity: 0.35;
    }

    100% {
        transform: translateY(-900px) translateX(30px) scale(1.12);
        opacity: 0;
    }
}

.programs .section-eyebrow {
    color: var(--gold-400);
}

.programs .section-title {
    color: var(--text-on-dark-strong);
}

.programs__all {
    color: var(--gold-400);
}

.programs__all:hover {
    color: var(--gold-100);
}

.pcard {
    transition: translate var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}

.pcard:hover {
    translate: 0 -6px;
    box-shadow: var(--shadow-lg);
}

.pcard__media {
    overflow: hidden;
}

.pcard__media img {
    transition: transform var(--dur-slow) var(--ease);
}

.pcard:hover .pcard__media img {
    transform: scale(1.05);
}

/* Панель профилей — тёмное стекло с золотыми чипами */
.programs__profiles {
    background: var(--glass-on-dark);
    border: 1px solid var(--line-on-dark);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.programs__profiles-title {
    color: var(--text-on-dark-strong);
}

.programs__profiles-all {
    color: var(--gold-400);
}

.programs__profiles-all:hover {
    color: var(--gold-100);
}

.programs__chip {
    background: transparent;
    border-color: var(--line-on-dark);
    color: var(--text-on-dark-soft);
}

.programs__chip:hover {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--wine-950);
}

.programs__chip .programs__chip-ico {
    color: var(--gold-400);
    transition: color var(--dur) var(--ease);
}

.programs__chip:hover .programs__chip-ico {
    color: var(--wine-950);
}

/* ------------------------------------------------------------
   7. «Отдых» — светлая передышка после тёмного разворота.
      Композиция и состояния заданы в 08-rest.css (редизайн
      по макету 07.2026), здесь переопределений не требуется.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   8. Номера — белая секция, карточки с глубиной.
   ------------------------------------------------------------ */
.rooms {
    background: var(--white);
}

.room-card {
    transition: translate var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}

.room-card:hover {
    /*    translate: 0 -4px;*/
    box-shadow: var(--shadow-lg);
}

/* ------------------------------------------------------------
   9. Питание — второй бордовый разворот: ресторанная,
      вечерняя атмосфера.
   ------------------------------------------------------------ */
/* Крупные светлые круги (--bubbles-wine) убраны — как в блоках 4 и 7. */
.food {
    background: var(--surface-wine);
}

.food .section-eyebrow {
    color: var(--gold-400);
}

.food .section-title {
    color: var(--text-on-dark-strong);
}

/* Композиция блока (кремовая лента, овал, номера) — в 10-food.css.
   Текст лежит на светлой ленте, поэтому его НЕ перекрашиваем. */

/* ------------------------------------------------------------
   10. Акции — белый фон (правка заказчика), карточки живые,
       глубину дают тени.
   ------------------------------------------------------------ */
.promo {
    background: var(--white);
}

.promo-card {
    transition: translate var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}

.promo-card:hover {
    translate: 0 -6px;
    box-shadow: var(--shadow-lg);
}

.promo-card__media {
    overflow: hidden;
    display: block;
}

.promo-card__media img {
    transition: transform var(--dur-slow) var(--ease);
}

.promo-card:hover .promo-card__media img {
    transform: scale(1.05);
}

/* ------------------------------------------------------------
   11. Отзывы — карточки стоят РОВНЫМ рядом.

       Из «живой» сетки по референсу заказчика оставлены
       песочные кавычки, аватары-инициалы, звёзды в подписи и
       серифная цифра рейтинга; наклон и вертикальные сдвиги
       сняты по его же просьбе (23.07) — второй раз за проект,
       не возвращать без явного запроса.

       Подъём на hover — свойством translate, а не transform:
       иначе он конфликтует с reveal-трансформом.
   ------------------------------------------------------------ */
.review-card {
    position: relative;
    transition:
        translate var(--dur-slow) var(--ease),
        box-shadow var(--dur-slow) var(--ease);
}

.review-card:hover {
    translate: 0 -4px;
    box-shadow: var(--shadow-md);
}

.review-card__quote-mark {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 2.4rem + 1.2vw, 3.25rem);
    line-height: 0.6;
    color: var(--sand-400);
    opacity: 1;
}

/* Подпись: аватар-инициалы · имя и дата · звёзды справа */
.review-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.review-card__avatar {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-round);
    background: var(--red-50);
    display: grid;
    place-items: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--accent);
}

.review-card__stars {
    margin-left: auto;
    color: var(--accent);
    font-size: var(--fs-sm);
    letter-spacing: 1.5px;
    white-space: nowrap;
}

/* Стикер-приём для отзывов (гвоздик, загнутый уголок, наклон, покачивание)
   полностью убран по правкам заказчика: карточки стоят ровным рядом.
   Стили карточки — выше (position/transition/hover в блоке 11). */

/* Вензеля на песочном бэнде «Отзывы»: те же кольца, что в блоках 4 и 7.
   На светлом полотне золото контрастнее, поэтому связки приглушены. */
.reviews {
    position: relative;
    overflow: hidden;
}

.reviews__deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.reviews>.container {
    position: relative;
    z-index: 1;
}

.reviews .venzel-rings {
    opacity: .62;
}

/* Цифра рейтинга — фирменной гарнитурой, красным */
.reviews__rating-num {
    font-family: var(--font-heading);
    font-weight: 400;
    /* у SPSL нет жирного */
    font-size: clamp(2.6rem, 2rem + 1.6vw, 3rem);
    line-height: 1;
    color: var(--accent);
}


/* ------------------------------------------------------------
   12. CTA — бордовый «водный» финал: градиент, кольца-блики,
       всплывающие пузырьки минеральной воды, золотая кнопка.
   ------------------------------------------------------------ */
.cta__box {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% -10%, rgba(250, 218, 113, 0.14) 0%, transparent 46%),
        radial-gradient(circle at -6% 110%, rgba(250, 218, 113, 0.08) 0%, transparent 40%),
        var(--surface-wine);
    box-shadow: var(--shadow-lg);
}

/* Кольца-«круги на воде» в углу */
.cta__box::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -90px;
    width: 320px;
    height: 320px;
    border-radius: var(--radius-round);
    border: 1.5px solid rgba(250, 218, 113, 0.25);
    box-shadow:
        0 0 0 44px rgba(250, 218, 113, 0.000),
        inset 0 0 0 1.5px rgba(250, 218, 113, 0.0);
    pointer-events: none;
}

.cta__box::after {
    content: "";
    position: absolute;
    top: -34px;
    right: -34px;
    width: 208px;
    height: 208px;
    border-radius: var(--radius-round);
    border: 1.5px solid rgba(250, 218, 113, 0.35);
    pointer-events: none;
}

.cta__title {
    color: var(--text-on-dark-strong);
}

.cta__lead {
    color: var(--text-on-dark-soft);
}

.cta__stat-num {
    color: var(--gold-400);
    font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
}

.cta__stat-label {
    color: var(--text-on-dark-faint);
}

/* Пузырьки минеральной воды */
.cta__bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cta__bubbles span {
    position: absolute;
    bottom: -30px;
    left: calc(var(--bx) * 1%);
    width: calc(var(--bs) * 1px);
    height: calc(var(--bs) * 1px);
    border-radius: var(--radius-round);
    border: 1.5px solid rgba(250, 218, 113, 0.35);
    background: rgba(255, 255, 255, 0.04);
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .cta__bubbles span {
        animation: rich-bubble calc(var(--bt) * 1s) linear calc(var(--bd) * 1s) infinite;
    }
}

@keyframes rich-bubble {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    12% {
        opacity: 0.9;
    }

    85% {
        opacity: 0.35;
    }

    100% {
        transform: translateY(-540px) translateX(24px);
        opacity: 0;
    }
}

/* Кнопка формы — золото на бордо */
.cta-form__submit {
    background: var(--grad-gold);
    color: var(--wine-950);
    box-shadow: var(--shadow-gold);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.cta-form__submit:hover {
    background: var(--grad-gold);
    filter: brightness(1.05);
    transform: translateY(-2px);
}

.cta-form__legal {
    color: var(--text-on-dark-faint);
}

.cta-form__legal a {
    color: var(--gold-400);
}

.cta-form__legal a:hover {
    color: var(--gold-100);
}

.cta-form__done {
    color: var(--text-on-dark-strong);
}

.cta-form__done-text {
    color: var(--text-on-dark-soft);
}

/* ------------------------------------------------------------
   13. FAQ — белая секция для контраста с бордовым CTA.
   ------------------------------------------------------------ */
.faq {
    background: var(--white);
}

/* ------------------------------------------------------------
   14. Футер — золотая линия-волна сверху как фирменная кромка.
   ------------------------------------------------------------ */
.footer {
    position: relative;
}

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grad-gold);
}

/* ------------------------------------------------------------
   15. Scroll-reveal: класс .rv навешивает JS (без JS ничего
       не скрыто). Задержка каскада — через --rv-d.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .rv {
        opacity: 0;
        transform: translateY(26px);
        /*transition:
            opacity 0.7s var(--ease) var(--rv-d, 0ms),
            transform 0.7s var(--ease) var(--rv-d, 0ms);*/
    }

    .rv.is-in {
        opacity: 1;
        transform: translateY(0);
    }
}


/*адаптация старых блоков под новые*/

.booking__bar #start-widget {
    position: relative;
    background: transparent !important;
    margin: 0 0 -7px !important;
    overflow: hidden;
}

.booking__bar #start-widget .room-booking {
    background: transparent;
    padding: 0;
}

@media (min-width: 993px) {
    .booking__bar #start-widget .room-booking>iframe {
        max-height: 103px !important;
    }

    .booking__bar #start-widget .room-booking {
        margin: -7px;
    }
}

.why__map .complex-map-wrapper {
    overflow: hidden;
}

.why__map .complex-map-container {
    margin: 0 0 -7px;
}

.why__map .complex-map__zoom {
  position: relative;
  top: -15px;
}

svg {
  display: inline-block;
  flex-shrink: 0;
}

/* размеры как раньше задавай у родителя / конкретного блока */
.room-card__ctrl svg,
.rooms__nav-btn svg {
  width: 16px;
  height: 16px;
}




/* ============================================================
   integration.css — дополнения к верстке редизайна gjckt интеграции
   ============================================================ */

/* ---------- Утилити-плашка: адрес и промо стали ссылками ---------- */
.utility-bar__addr a {
    color: inherit;
}

.utility-bar__addr a:hover{
    color: var(--accent);
}

/* ---------- Основное меню: пунктов больше, чем в макете ---------- */
.main-nav {
    gap: var(--space-2);
}

.main-nav__item {
    position: relative;
}

.main-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.main-nav__link.is-active {
    color: var(--accent);
}

.main-nav__caret {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    transition: transform var(--dur) var(--ease);
}

.main-nav__item--has-sub:hover .main-nav__caret,
.main-nav__item--has-sub:focus-within .main-nav__caret {
    transform: rotate(180deg);
}

/* ---------- Выпадающее подменю ---------- */
.main-nav__sub {
    position: absolute;
    top: 100%;
    left: calc(var(--space-3) * -1);
    z-index: 110;
    min-width: 250px;
    padding: var(--space-2) 0;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

/* невидимый «мостик», чтобы курсор не терял меню в зазоре под ссылкой */
.main-nav__item--has-sub::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: var(--space-4);
}

.main-nav__item--has-sub:hover .main-nav__sub,
.main-nav__item--has-sub:focus-within .main-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-nav__sub-link {
    padding: 7px var(--space-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: 1.35;
    color: var(--ink-800);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.main-nav__sub-link:hover,
.main-nav__sub-link:focus-visible {
    background: var(--surface-muted);
    color: var(--accent);
}

.main-nav__sub-link.is-active {
    color: var(--accent);
}

/* последний пункт меню прижат к правому краю — подменю открываем влево */
.main-nav__item:last-of-type .main-nav__sub {
    left: auto;
    right: calc(var(--space-3) * -1);
}


/* ---------- Мобильное меню: подпункты ---------- */
.mobile-menu .mobile-menu__sub {
  transition: .4s all linear;
}
.mobile-menu li {
    overflow: hidden;
}
.mobile-menu li:not(.open) .mobile-menu__sub {
    max-height: 0px;
    opacity: 0;
    pointer-events: none;
}
.mobile-menu li.open .mobile-menu__sub {
    max-height: 500px;
    opacity: 1;
}
.mobile-menu__sub {
    display: flex;
    flex-direction: column;
    padding-left: var(--space-4);
    border: 1px solid var(--border);
    border-top: unset;
}

.mobile-menu__sub-link {
    padding-block: 6px;
    font-size: var(--fs-sm);
    color: var(--text-body);
}

.mobile-menu__link.open, .mobile-menu__link .mobile-menu__sub-lin.is-active {
    color: var(--accent);
}

.mobile-menu__link--promo {
    color: var(--accent);
    font-weight: var(--fw-bold);
}

/* ---------- Узкий десктоп: меню не должно ломать шапку ---------- */
@media (max-width: 1440px) {
    .main-nav {
        gap: var(--space-2);
        font-size: 13px;
    }

    .site-header__inner {
        gap: var(--space-4);
    }
}




.header__contacts .contact__line.one_line .max-badge,
.header__contacts .contact__line.one_line .max-badge img {
    width: 32px;
    height: 32px;
}
.header__contacts .contact__line.one_line .phone_text {
    display: flex;
    flex-direction: column;
}
@media (max-width: 1260px) {
    .site-header__inner {
        padding: 5px 10px;
    }
    .header__contacts {
        display: block;
    }
    .header__contacts .contact__line.one_line {
        /*
        flex-direction: column;
        align-items: end;
        gap: 0;
        */
        gap: 4px;
    }
    .header__contacts .max-badge {
        order: 2;
    }
    .header__contacts .contact__line.one_line .max-badge,
    .header__contacts .contact__line.one_line .max-badge img{
        width: 22px;
        height: 22px;
    }
    .header__contacts .contact__line.one_line .contact__meta {
        display: none;
    }
    .brand {
        width: 150px;
    }
    .brand__tagline {
        font-size: 7px;
    }
    .booking__bar {
        padding: 0;
        overflow: hidden;
        margin-bottom: 15px;
    }
    .booking__bar .booking__note {
        margin: 0;
        z-index: 2 !important;
        position: relative;
        padding: var(--space-4) var(--space-6) var(--space-5);
        background: #fff;
    }
    .booking__bar #start-widget {
        transform: scale(1.06);
    }

}