/* Новый дизайн — Главная (1:1 по Figma). Верхний блок:
   шапка + герой + фото-оверлей + бар быстрого бронирования. */

/* Контент ровно 1600px (на широких экранах); на узких — с гаттером 24px по краям */
.container {
    width: min(100% - 48px, var(--container));
    margin-inline: auto;
    padding: 0;
}

/* Кнопки — из assets/css/components.css (.btn + --pill/--square/--fill/--outline). */

/* ---------- Шапка ----------
   Сам навбар — компонент .menu / .navpill из assets/css/components.css.
   Здесь только sticky-обёртка. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
}

/* ---------- Бегущая строка над навбаром ----------
   Тёмно-зелёная лента, текст курсивом (стиль D1), разделитель — иконка ✦
   (assets/icons/blink.svg, как у eyebrow секций). Бесшовный цикл: контент
   повторён 6 раз (TICKER_COPIES в header.php), дорожка за цикл уезжает ровно
   на одну копию = 100%/6 своей ширины. Без пауз и без масок по краям. */
.ticker {
    overflow: hidden;
    background: var(--c-green);
    color: var(--c-light);
    font-family: var(--font-body);
    font-style: italic;
    font-weight: var(--fw-medium);
    font-size: 16px;
    line-height: 1;
    padding: 10px 0;
}

/* Скорость: длительность одного цикла (проход одной копии ~1150px).
   Пиксельная скорость постоянна, но на узком экране та же скорость воспринимается
   быстрее (за секунду проходит бОльшая доля экрана), поэтому чем уже экран —
   тем длиннее цикл. Значения — в переменной, переопределяется в медиа ниже. */
.ticker__track {
    --ticker-duration: 30s;          /* десктоп ≥1200px */
    display: flex;
    width: max-content;
    animation: ticker-scroll var(--ticker-duration) linear infinite;
    will-change: transform;
}

.ticker__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ticker__item {
    white-space: nowrap;
    letter-spacing: .01em;
}

.ticker__sep {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin: 0 36px;
    background: var(--c-light);
    -webkit-mask: url('/assets/icons/blink.svg') center / contain no-repeat;
            mask: url('/assets/icons/blink.svg') center / contain no-repeat;
    opacity: .9;
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% / 6)); }   /* = ширина одной копии */
}

@media (prefers-reduced-motion: reduce) {
    .ticker__track { animation: none; }
}

@media (max-width: 640px) {
    .ticker { font-size: 14px; padding: 8px 0; }
    .ticker__sep { margin: 0 22px; }
}

/* ---------- Герой ---------- */
.hero {
    padding: 42px 0 0;
    z-index: 1;
    position: relative;
}

.hero__head {
    display: flex;
    align-items: flex-start;
    gap: 34px;
}

.hero__intro {
    flex: 0 0 auto;
}

.hero__eyebrow {
    font-family: var(--font-head);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 46px;
    letter-spacing: .01em;
    line-height: 75%;
}

.hero__slogan {
    margin-top: 7px;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 20px;
    line-height: 1;
    font-weight: 500;
    color: var(--text);
}

.hero__wordmark {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--c-green);
    font-size: clamp(88px, 12.2vw, 194px);
    line-height: .66;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.wm-gap {
    position: relative;
    display: inline-block;
    width: .34em;
}

.wm-hash {
    position: absolute;
    top: 32%;
    left: 30%;
    transform: translate(-50%, -86%);
    width: 47px;
    height: 47px;
    border-radius: 50%;
    background: var(--c-green);
    color: var(--c-light);
    font-size: 31px;
    font-weight: 500;
    font-style: normal;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 3px;
}

.hero__wordmark .hash {
    font-size: .34em;
    vertical-align: .55em;
    margin: 0 -.02em;
}

/* Фото с оверлеем */
.hero__media {
    margin-top: 36px;
    position: relative;
    overflow: hidden;
    width: 100%;
    /* height: clamp(420px, 34vw, 660px); */
    height: 550px;
}

.hero__media img {
    inset: 0;
    width: 100%;
    height: auto;

    object-fit: cover;
    object-position: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -44%);
    transform-origin: center;
}

.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url(/assets/images/home_hero_mask.png) center center / cover no-repeat;
    pointer-events: none;
}

.hero__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding-bottom: 30px;
    color: #fff;
    display: flex;
    align-items: flex-end;
}

.hero__overlay .container {
    width: min(100% - 48px, var(--container));
    margin-inline: auto;
}

/* Маршрут расстояний «От нашего дома» на фото героя — разметка .lz-route
   (leisure_route()), светлый вариант: лежит на тёмном снимке. */
.hero__route {
    width: 100%;
}

.hero__route .section__eyebrow {
    font-size: 18px;
    color: rgba(255, 255, 241, .85);
}

.hero__route .section__eyebrow::before {
    background: var(--c-light);
}

.hero__route .section__eyebrow::after {
    background: rgba(255, 255, 241, .35);
}

.hero__route .lz-route {
    margin-top: 24px;
}

.hero__route .lz-route__start,
.hero__route .lz-route__item {
    border-top-color: rgba(255, 255, 241, .5);
}

.hero__route .lz-route__item::before,
.hero__route .lz-route__start .lz-route__pin {
    background: var(--c-light);
}

.hero__route .lz-route__start .lz-route__pin {
    box-shadow: none;
}

.hero__route .lz-route__num,
.hero__route .lz-route__label {
    color: var(--c-light);
}

.hero__route .lz-route__num small,
.hero__route .lz-route__note {
    color: rgba(255, 255, 241, .75);
}

/* ---------- Бар быстрого бронирования (full-bleed: во всю ширину экрана) ---------- */
.booking {
    margin-top: 0;
    background: var(--c-beige);
    border-radius: 0;
    padding: 26px 0;
}

/* Внутренний контейнер выравнивает контент по общей сетке (.container) */
.booking__inner {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.booking__title {
    flex: 0 0 auto;
}

.booking__title b {
    display: block;
    font-family: var(--font-head);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--c-green);
}

.booking__title span {
    display: block;
    margin-top: 10px;
    max-width: 330px;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.02em;
    font-weight: var(--fw-normal);
    color: var(--c-muted);
}

.booking__form {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.field {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--c-light);
    border: 0;
    border-radius: var(--radius-pill);
    padding: 13px 22px;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    font-weight: var(--fw-normal);
    color: var(--c-green);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}

.field:hover {
    filter: brightness(.98);
}

.field__ic {
    width: 24px;
    height: auto;
    flex: 0 0 auto;
}

.field .caret {
    width: 14px;
    height: 14px;
    margin-left: 6px;
    color: var(--c-green);
    opacity: .85;
}

.booking .btn {
    flex: 0 0 auto;
    padding: 13px 32px;
    font-size: 20px;
    line-height: 1;
    font-weight: var(--fw-medium);
    letter-spacing: -0.02em;
}

/* ---------- Якорное меню (по макету: курсив, обычный регистр) ---------- */
.anchornav {
    display: flex;
    gap: 34px;
    align-items: center;
    flex-wrap: wrap;
    padding: 35px 0 35px;
}

.anchornav a {
    color: var(--c-green);
    font-weight: 400;
    font-style: Italic;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: -2%;
}

.anchornav a:hover {
    opacity: .6;
}

/* ---------- Секция (общее) ---------- */
.section {
    padding: 65px 0;
}

/* Заглушка ещё не свёрстанного раздела */
.page-stub {
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--c-muted);
}

/* Eyebrow: ✦ + курсив + линия до правого края */
.section__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 20px;
    font-weight: var(--fw-normal);
    color: var(--c-green);
}

.section__eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: var(--c-green);
    -webkit-mask: url(/assets/icons/blink.svg) center / contain no-repeat;
    mask: url(/assets/icons/blink.svg) center / contain no-repeat;
}

.section__eyebrow::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--c-green);
}

.section__title {
    font-family: var(--font-head);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    font-size: var(--fs-h2);
    line-height: var(--lh-head);
    letter-spacing: var(--ls-head);
    color: var(--c-green);
    margin-top: 24px;
}

/* В макете часть заголовков смещена вправо (по колонке фото) / по центру */
.section__title--offset {
    margin-left: 26%;
}

.section__title--center {
    text-align: center;
}

/* ---------- Преимущества ---------- */
.features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    margin-top: 44px;
}

.feature__icon {
    aspect-ratio: 5 / 2;
    background-color: var(--c-beige);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* У каждой карточки — свой фон-паттерн из ассетов (по порядку карточек) */
.feature:nth-child(1) .feature__icon {
    background-image: url(/assets/images/team_bg.png);
}

.feature:nth-child(2) .feature__icon {
    background-image: url(/assets/images/direction_bg.png);
}

.feature:nth-child(3) .feature__icon {
    background-image: url(/assets/images/hope_bg.png);
}

.feature:nth-child(4) .feature__icon {
    background-image: url(/assets/images/warm_bg.png);
}

.feature h3 {
    font-family: var(--font-head);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    font-size: 26px;
    color: var(--c-green);
    margin-top: 13px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--c-green);
}

.feature p {
    margin: 11px 0 0;
    font-size: 20px;
    font-weight: var(--fw-normal);
    line-height: 1;
    color: var(--c-green);
}

/* ---------- Интро секции номеров: текст | большое фото | фото + время заезда ---------- */
.intro3 {
    display: flex;
    gap: 20px;
    margin-top: 26px;
}

.intro3__lead h3 {
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-size: 20px;
    line-height: 1.2;
    color: var(--c-green);
    margin: 0;
}

.intro3__lead p {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--c-green);
}

.intro3__photo {
    overflow: hidden;
    background: linear-gradient(135deg, #7f8a5e, #3f4a2c);
    aspect-ratio: 3 / 4;
}

.intro3__photo--sm {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #8a6a3e, #45402a);
}

.intro3__photo_container {
    max-width: 250px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.intro3__times {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.intro3__time {
    border-top: 1px solid #433D0880;
    padding-top: 10px;
}

.intro3__time b {
    display: block;
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-size: 15px;
    color: var(--c-green);
}

.intro3__time span {
    font-size: 15px;
    color: var(--c-green);
}

@media (max-width: 900px) {
    .intro3 {
        grid-template-columns: 1fr;
    }
}

/* ---------- Бежевая полоса секции (Летние номера) ---------- */
.section--beige {
    background: var(--c-beige);
}

/* ---------- Фильтры каталога номеров ---------- */
.roomfilters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.roomfilters__sort {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.roomfilters__sort>span {
    font-size: 14px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--c-green);
}

/* ---------- Развлечения ---------- */
.leisure__head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    margin-top: 22px;
}

.leisure__lead h3 {
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-size: 20px;
    line-height: 1.2;
    color: var(--c-green);
    margin: 0;
}

.leisure__lead p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--c-green);
}

@media (max-width: 1000px) {
    .leisure__head {
        grid-template-columns: 1fr;
    }
}

/* Маршрут расстояний «От нашего дома» (только герой главной; разметка —
   leisure_route() в preview/inc/leisure-data.php). Линия сверху с узлами ✦:
   первый узел — «Наш дом» (залитый круг), дальше — расстояния по возрастанию. */
.lz-route {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0 18px;
}

.lz-route__start,
.lz-route__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-top: 22px;
    border-top: 1px solid var(--c-green);
}

/* узел на линии */
.lz-route__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: -7px;
    width: 13px;
    height: 13px;
    background: var(--c-green);
    -webkit-mask: url(/assets/icons/blink.svg) center / contain no-repeat;
    mask: url(/assets/icons/blink.svg) center / contain no-repeat;
}

.lz-route__start .lz-route__pin {
    position: absolute;
    left: 0;
    top: -8px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--c-green);
    box-shadow: 0 0 0 4px var(--bg);
}

.lz-route__num {
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    font-size: var(--fs-n1);
    line-height: 1;
    letter-spacing: var(--ls-head);
    color: var(--c-green);
    white-space: nowrap;
}

.lz-route__num small {
    font-size: .5em;
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    margin-left: .12em;
    color: var(--c-muted);
}

.lz-route__label {
    font-family: var(--font-head);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    font-size: 15px;
    line-height: 1.15;
    letter-spacing: .01em;
    color: var(--c-green);
}

/* «Наш дом» — подпись на месте числа, того же роста */
.lz-route__start .lz-route__label {
    font-weight: var(--fw-bold);
    font-size: 22px;
    line-height: 1;
    padding-top: 4px;
}

.lz-route__note {
    font-style: italic;
    font-size: 14px;
    line-height: 1.3;
    color: var(--c-muted);
}

@media (max-width: 1000px) {
    .lz-route {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 26px 18px;
    }
}

/* ============================================================
   Зелёная полоса «Чем заняться на базе отдыха» (.lz-resort) — главная (#stay,
   вместо скрытой секции «Отапливаемый дом»); со страницы «Развлечения» убрана
   2026-09-02. Разметка — leisure_stay() в preview/inc/leisure-data.php.
   Поэтому стили лежат здесь, в home.css, а не в leisure.css (как .lz-route и .act).
   ============================================================ */
.lz-resort {
    background: var(--c-green);
    color: var(--c-light);
    padding: 56px 0 44px;
}

.lz-resort .section__eyebrow {
    color: var(--c-light);
}

.lz-resort .section__eyebrow::before {
    background: var(--c-light);
}

.lz-resort .section__eyebrow::after {
    background: rgba(255, 255, 241, .3);
}

.lz-resort__grid {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    gap: 40px 80px;
    margin-top: 28px;
    align-items: start;
}

.lz-resort__title {
    font-family: var(--font-head);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    font-size: var(--fs-h2);
    line-height: var(--lh-head);
    letter-spacing: var(--ls-head);
    color: var(--c-light);
    margin: 0;
}

/* Главный факт страницы: огромное «2,5 КМ» */
.lz-resort__dist {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 241, .3);
}

.lz-resort__num {
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    font-size: clamp(72px, 8.4vw, 160px);
    line-height: .9;
    letter-spacing: var(--ls-head);
    color: var(--c-light);
    white-space: nowrap;
}

.lz-resort__num small {
    font-size: .38em;
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    margin-left: .12em;
    color: var(--c-coffee);
}

.lz-resort__time {
    font-style: italic;
    font-size: var(--fs-t1);
    line-height: 1.3;
    color: var(--c-coffee);
}

.lz-resort__text {
    margin: 26px 0 0;
    font-size: var(--fs-t1);
    line-height: 1.5;
    color: rgba(255, 255, 241, .86);
    max-width: 640px;
}

.lz-resort__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* Светлая outline-кнопка для тёмного фона */
.lz-btn-light {
    background: transparent;
    border-color: rgba(255, 255, 241, .7);
    color: var(--c-light);
}

.lz-btn-light:hover {
    background: var(--c-light);
    border-color: var(--c-light);
    color: var(--c-green);
}

/* Три группы активностей: Зимой | Летом | Круглый год — колонки с тонкими линиями */
.lz-resort__groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-top: 10px;   /* заголовки групп — на уровне «МАНЖЕРОК» слева */
}

.lz-resort__group {
    padding: 0 26px;
    border-left: 1px solid rgba(255, 255, 241, .18);
    min-width: 0;
}

.lz-resort__group:first-child {
    padding-left: 0;
    border-left: 0;
}

.lz-resort__gtitle {
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-size: var(--fs-h3);
    line-height: 1.1;
    letter-spacing: var(--ls-head);
    color: var(--c-light);
    margin: 0 0 18px;
}

.lz-resort__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lz-resort__list li {
    position: relative;
    padding-left: 24px;
    font-size: var(--fs-t2);
    line-height: 1.4;
    color: rgba(255, 255, 241, .86);
}

/* маркер-звёздочка ✦ (blink.svg) в цвете «кофе с молоком» */
.lz-resort__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .32em;
    width: 12px;
    height: 12px;
    background: var(--c-coffee);
    -webkit-mask: url(/assets/icons/blink.svg) center / contain no-repeat;
    mask: url(/assets/icons/blink.svg) center / contain no-repeat;
}

@media (max-width: 1100px) {
    .lz-resort__grid {
        grid-template-columns: 1fr;
    }

    .lz-resort__groups {
        margin-top: 10px;
    }
}

@media (max-width: 900px) {
    .lz-resort__groups {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .lz-resort__group {
        padding: 0;
        border-left: 0;
    }
}

@media (max-width: 640px) {
    .lz-resort {
        padding: 40px 0 34px;
    }

    .lz-resort__grid {
        gap: 30px;
        margin-top: 20px;
    }

    .lz-resort__num {
        font-size: 84px;
    }

    .lz-resort__time {
        max-width: none;
        font-size: 17px;
    }

    .lz-resort__text {
        font-size: 17px;
        margin-top: 20px;
    }

    .lz-resort__actions .btn {
        flex: 1 1 100%;
    }

    .lz-resort__gtitle {
        font-size: 22px;
        margin-bottom: 12px;
    }
}

/* ---------- Активности «Чем заняться»: горизонтальные блоки фото | текст ----------
   Общий компонент главной и leisure.php (разметка — leisure_act() в preview/inc/leisure-data.php).
   .act — беж, фото слева; .act--reverse — «кофе с молоком», фото справа. Не ссылки: отдельных
   страниц у активностей нет. На leisure.php — стопка (.acts), на главной — сетка 2×2 (.acts--grid). */
.acts {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 44px;
}

.act {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    gap: 40px;
    align-items: center;
    padding: 14px;
    background: var(--c-beige);
}

.act--reverse {
    background: var(--c-coffee);
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);   /* зеркально: текст | фото */
}

/* фото справа: меняем порядок колонок, а не DOM — для screen reader порядок тот же */
.act--reverse .act__media {
    order: 2;
}

.act--reverse .act__body {
    order: 1;
    padding-left: 32px;
}

/* Фото 3:2 — исходники с боевого сайта мелкие (370×208), поэтому колонка фото умеренная */
.act__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: linear-gradient(135deg, #8fa2b5, #4f6274);
    min-width: 0;
}

.act__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.act__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 32px 20px 0;
    min-width: 0;
}

.act__idx {
    font-style: italic;
    font-size: 15px;
    color: var(--c-muted);
}

.act__title {
    font-family: var(--font-head);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    font-size: clamp(26px, 2vw, 36px);
    line-height: 1.05;
    letter-spacing: var(--ls-head);
    color: var(--c-green);
    margin: 0;
}

/* «✦ где находится» — тот же приём, что .service-card__where */
.act__where {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-style: italic;
    font-size: var(--fs-t2);
    line-height: 1.3;
    color: var(--c-green);
}

.act__where::before {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    background: var(--c-green);
    -webkit-mask: url(/assets/icons/blink.svg) center / contain no-repeat;
    mask: url(/assets/icons/blink.svg) center / contain no-repeat;
}

.act__text {
    margin: 6px 0 0;
    font-size: var(--fs-t2);
    line-height: 1.55;
    color: var(--c-green);
    max-width: 640px;
}

/* Низ блока: чипы слева, «Подробнее» справа (кнопка есть только у блоков с детальной страницей) */
.act__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 10px;
    align-self: stretch;
}

.act__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Главная: сетка 2×2, шахматный порядок задаёт PHP (1,4 — обычные; 2,3 — reverse) */
.acts--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}

/* В половинной ширине фото 40% мелковато — здесь 50/50, фото растянуто на всю высоту блока */
.acts--grid .act,
.acts--grid .act--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 24px;
    padding: 12px;
}

.acts--grid .act__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 260px;
}

.acts--grid .act__title {
    font-size: 28px;
}

.acts--grid .act__body {
    padding: 12px 20px 12px 0;
    gap: 10px;
}

.acts--grid .act--reverse .act__body {
    padding-left: 20px;
}

@media (max-width: 1000px) {
    .acts--grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Контакты ---------- */
.contacts {
    display: grid;
    grid-template-columns: 1fr 2.1fr;
    gap: 40px;
    margin-top: 26px;
    align-items: start;
}

.contacts__org {
    text-transform: uppercase;
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    font-size: 17px;
    line-height: 1.25;
    color: var(--c-coffee);
}

.contacts__block {
    margin-top: 44px;
}

.contacts__block h4 {
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-size: 17px;
    color: var(--c-green);
    margin: 0 0 10px;
}

.contacts__block p,
.contacts__block a {
    display: block;
    font-size: 17px;
    line-height: 1.5;
    color: var(--c-green);
    margin: 0;
}

.contacts__block a {
    text-decoration: underline;
}

.contacts__map {
    position: relative;
    min-height: 400px;
    overflow: hidden;
    /* Фон-плейсхолдер, пока грузится карта. */
    background: linear-gradient(135deg, #cfe0c6, #a9c9d8);
}

/* Холст Яндекс.Карты — растягивается на весь контейнер-обёртку
   (у обёртки должен быть position:relative). См. assets/js/ymap.js */
.ymap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 900px) {
    .contacts {
        grid-template-columns: 1fr;
    }

    .contacts__block {
        margin-top: 24px;
    }
}

/* ---------- Карточки номеров (компонент .room-card из components.css) ----------
   По макету: 2 крупные карточки в ряд. */
.rooms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.rooms-more {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

/* ---------- О компании (О нас) ---------- */
.about {
    display: grid;
    grid-template-columns: 1.3fr 1.45fr 1.3fr 1fr;
    gap: 40px;
    margin-top: 40px;
    align-items: start;
}

.about__lead {
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-size: 20px;
    line-height: 1.15;
    color: var(--c-green);
    margin: 0;
}

.about__main>p {
    margin: 12px 0 0;
    color: var(--c-muted);
    line-height: 1.6;
}

.about__photo {
    overflow: hidden;
    background: linear-gradient(135deg, #b7a87e, #5f6d47);
}

.about__photo--big {
    background: url('/assets/images/about_company_1.jpg') 30% 50% / cover no-repeat;
    aspect-ratio: 5 / 6;
}

.about__photo--sm {
    background: url('/assets/images/about_company_2.png') center / cover no-repeat;
    aspect-ratio: 16 / 10;
    margin-top: 130px;
    margin-bottom: 18px;
}

.about__col h4 {
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-size: 16px;
    color: var(--c-green);
    margin: 0 0 12px;
}

.about__col p {
    margin: 0 0 14px;
    color: var(--c-muted);
    line-height: 1.6;
    font-size: 14px;
}

.about__col .btn--fill {
    width: 100%;
}

.about__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 24px;
}

.about__list li {
    padding: 11px 0;
    border-top: 1px solid var(--c-line);
    color: var(--c-muted);
    font-size: 14px;
    line-height: 1.4;
}

.about__list li::before {
    content: none;
}

@media (max-width: 900px) {
    .about {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* ---------- Каталожная сетка номеров — 4 в ряд ---------- */
.rooms--catalog {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1200px) {
    .rooms--catalog {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .rooms--catalog {
        grid-template-columns: 1fr;
    }
}

/* ---------- Баня и чан — тёмно-зелёная полоса ---------- */
.section--banya {
    background: var(--c-green);
    color: var(--c-light);
}

.section--banya .section__eyebrow {
    color: rgba(255, 255, 241, .8);
}

.section--banya .section__eyebrow::before {
    background: var(--c-light);
}

.section--banya .section__eyebrow::after {
    background: rgba(255, 255, 241, .3);
}

.banya {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 40px;
    margin-top: 26px;
    align-items: start;
}

.banya__title {
    font-family: var(--font-head);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    font-size: var(--fs-h2);
    line-height: .95;
    letter-spacing: var(--ls-head);
    color: var(--c-light);
    margin: 0;
}

.banya__more {
    display: inline-block;
    margin-top: 16px;
    color: var(--c-light);
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: var(--fw-bold);
    letter-spacing: .03em;
}

.banya__extra {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 120px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 241, .3);
}

/* Фото к «Массажу горячим веником»: веники в парной (кадр из галереи бани),
   отдельного фото массажа нет — заменить файл, когда клиент его пришлёт */
.banya__extra-photo {
    width: 130px;
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
    background: #6d4a17 url('/assets/images/banya/banya/2.jpg') 23% 45% / 300% auto no-repeat;
}

.banya__extra span {
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-size: 17px;
    line-height: 1.2;
    color: var(--c-light);
}

/* Карусель карточек бани/чана: бесшовная лента (крутится справа→влево). Активная
   слева (макс 965px), следующая выглядывает справа. Для зацикливания карточки
   клонируются, лента сдвигается translateX и телепортируется на оригинал — в app.js. */
.banya__slider {
    position: relative;
    overflow: hidden;
}

.banya__track {
    display: flex;
    gap: 135px;
    transition: transform .5s ease;
    will-change: transform;
}

.section--banya .banya-card {
    flex: 0 0 965px;
    width: 965px;
    max-width: 965px;
    border-radius: 0;
    opacity: .45;                 /* полупрозрачна, пока не станет активной (управляет app.js) */
    transition: opacity .5s ease;
}

.section--banya .banya-card.is-active {
    opacity: 1;
}

/* мгновенно (без плавности) — на бесшовном телепорте ленты к оригиналу */
.banya__track.is-instant .banya-card {
    transition: none;
}

/* без скруглений — цена */
.section--banya .banya-price {
    border-radius: 0;
}

.banya__nav {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 6;
    border-color: rgba(255, 255, 241, .85);
    color: var(--c-light);
    background: rgba(17, 57, 30, .4);
    backdrop-filter: blur(2px);
}

.banya__nav:hover {
    background: var(--c-green);
}

/* стрелка «вперёд» — в зазоре справа от активной карточки, 20px от её края */
.banya__nav--next {
    left: calc(965px + 20px);
}

/* Карточка бани внутри зелёной секции: заголовок сверху, фото слева, инфо справа */
.section--banya .banya-card {
    padding: 20px;                  /* общие отступы карточки */
    overflow: hidden;
    gap: 0;
}

/* Левая колонка: заголовок над фото, фото заполняет остаток высоты */
.section--banya .banya-card__col-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.section--banya .banya-card__title {
    padding: 0 0 16px;              /* только зазор до фото; края держит padding карточки */
    font-size: clamp(28px, 3vw, 65px);
}

.section--banya .banya-card__cols {
    grid-template-columns: 500px 1fr;
    gap: 20px;
    align-items: stretch;
    min-height: 635px;             /* высота макета; длинное описание из админки растягивает карточку, а не обрезается */
}

.section--banya .banya-card__media {
    flex: 1 1 auto;                /* фото занимает всю высоту колонки под заголовком */
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
    margin: 0;
}

.banya-card__media--chan {
    background: linear-gradient(135deg, #5a6a4a, #2b3320);
}

.banya-card__info {
    padding: 0;                     /* отступы даёт padding карточки + gap колонок */
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: space-between;
}

.banya-card__info h4 {
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-size: 18px;
    line-height: 1.2;
    color: var(--c-green);
    margin: 0;
}

.banya-card__info p {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--c-green);
}

.banya-price__badge--beige {
    background: var(--c-beige);
    color: var(--c-green);
}

.banya-card__extra {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    font-size: 20px;
    color: var(--c-green);
}

.banya-card__book {
    font-size: 14px;
    line-height: 1.4;
    color: var(--c-green);
}

@media (max-width: 1000px) {
    .banya {
        grid-template-columns: 1fr;
    }

    .banya__extra {
        margin-top: 24px;
    }

    .section--banya .banya-card__cols {
        grid-template-columns: 1fr;
        height: auto;
    }

    .section--banya .banya-card__media {
        min-height: 260px;
    }

    .banya-card__info {
        padding: 0;
    }
}

/* ---------- Адаптив ---------- */
@media (max-width: 1000px) {

    .lead,
    .services {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .rooms {
        grid-template-columns: 1fr;
    }
}

/* ---------- Фотогалерея ---------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 190px;
    gap: 16px;
    margin-top: 36px;
}

.gallery__item {
    border-radius: var(--radius);
    background: linear-gradient(135deg, #b7a87e, #5f6d47);
}

.gallery__item:nth-child(3n) {
    background: linear-gradient(135deg, #9a8a5f, #3c4a2c);
}

.gallery__item--tall {
    grid-row: span 2;
}

.gallery__item--wide {
    grid-column: span 2;
}

/* ---------- Отзывы ---------- */
.reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 36px;
}

.review {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: 26px;
}

.review__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--c-beige);
    flex: 0 0 auto;
}

.review__name {
    font-weight: var(--fw-bold);
}

.review__date {
    font-size: 12px;
    color: var(--c-muted);
}

.review__stars {
    margin-left: auto;
    color: #E6B23A;
    letter-spacing: 2px;
}

.review__text {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--c-muted);
}

/* ---------- FAQ (компонент .acc из components.css) ---------- */
.faq {
    margin-top: 30px;
}

/* ============================================================
   Общие блоки внутренних страниц
   ============================================================ */

/* ---------- Зелёный герой внутренней страницы ---------- */
.pagehero {
    background: var(--c-green);
    color: var(--c-light);
    padding: 20px 0 30px;
}

.pagehero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: start;
}

.pagehero__title {
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-size: clamp(48px, 12.3vw, 197px);   /* адаптивный: до 197px на широких, меньше на узких */
    line-height: .9;
    letter-spacing: var(--ls-head);
    margin: 0;
}

.pagehero__col {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.pagehero__title span {
    display: block;
    color: rgba(255, 255, 241, .38);
}

.pagehero__photo {
    aspect-ratio: 16 / 11;
    background: linear-gradient(135deg, #8aa06a, #2f3a24);
}

.pagehero__foot {
    display: grid;
    grid-template-columns: 315px 1fr;
    gap: 26px;
    align-items: center;
}

.pagehero__thumb {
    aspect-ratio: 16 / 8;
    background: linear-gradient(135deg, #c9a86a, #4a5a33);
}

.pagehero__tagline {
    font-family: var(--font-head);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    font-size: 26px;
    line-height: 1.15;
    color: #CCC5B5;
    width: fit-content;
}

@media (max-width: 900px) {
    .pagehero__grid {
        grid-template-columns: 1fr;
    }

    .pagehero__foot {
        grid-template-columns: 1fr;
    }
}

/* ---------- Фотогалерея (зелёная полоса) ---------- */
.pgallery {
    background: var(--c-green);
    padding: 56px 0 64px;
}

.pgallery__title {
    text-align: center;
    color: var(--c-light);
    font-family: var(--font-head);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    font-size: var(--fs-h2);
    line-height: var(--lh-head);
    letter-spacing: var(--ls-head);
    margin: 0;
}

.pgallery__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 178px;
    gap: 14px;
    margin-top: 36px;
}

.pgallery__item {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #b7a87e, #5f6d47);
}

.pgallery__item:nth-child(3n) {
    background: linear-gradient(135deg, #7f9a6a, #2f3a24);
}

.pgallery__item:nth-child(4n) {
    background: linear-gradient(135deg, #c9a86a, #6d4a17);
}

.pgallery__item--w2 {
    grid-column: span 2;
}

.pgallery__item--h2 {
    grid-row: span 2;
}

.pgallery__item .tag {
    position: absolute;
    top: 12px;
    left: 12px;
}

@media (max-width: 900px) {
    .pgallery__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
    }

    .pgallery__item--w2 {
        grid-column: span 1;
    }
}

/* ---------- «Остались вопросы?» — форма ---------- */
.qform {
    max-width: 535px;
    margin-left: 26%;
    margin-top: 22px;
}

.qform__lead {
    font-size: 16px;
    line-height: 1.45;
    color: var(--c-green);
    margin: 0 0 22px;
}

.qform__field {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--c-line);
    background: transparent;
    font: inherit;
    font-size: 17px;
    color: var(--c-green);
    padding: 12px 0;
    margin-bottom: 14px;
}

.qform__field::placeholder {
    color: var(--c-muted);
}

.qform__field:focus {
    outline: none;
    border-bottom-color: var(--c-green);
}

textarea.qform__field {
    resize: vertical;
    min-height: 64px;
}

.qform__check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 0 22px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--c-green);
}

.qform__check input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--c-green);
    margin-top: 1px;
}

.qform .btn {
    width: 100%;
}

@media (max-width: 900px) {
    .qform {
        margin-left: 0;
        max-width: none;
    }
}

/* ---------- Подвал (1:1 по макету) ---------- */
.site-footer {
    position: relative;
    overflow: hidden;
    background: var(--c-green);
    color: var(--c-light);
    padding: 56px 0 62px;
}

/* Крупный водяной знак «У#Дачный» на фоне — вёрстка 1:1 с вордмарком героя
   (.hero__wordmark в home.css): буква «У», кружок с хэштегом в зазоре, «ДАЧНЫЙ».
   Кружок — светлый диск, хэштег «выбит» цветом фона (читается как отверстие). */
.footer__wm {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    z-index: 0;
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    font-size: 250px;
    line-height: 1;
    letter-spacing: -.01em;      /* как в .hero__wordmark */
    color: rgba(255, 255, 241, .05);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* Зазор между «У» и «ДАЧНЫЙ» под кружок — та же пропорция, что в герое (.34em) */
.footer__wm-gap {
    position: relative;
    display: inline-block;
    width: .34em;
}

/* Кружок с хэштегом. В герое 47/31px при 194px → та же пропорция при 250px = 60/40px */
.footer__wm-hash {
    position: absolute;
    top: 32%;
    left: 30%;
    transform: translate(-50%, -86%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 241, .05);   /* светлый диск */
    color: var(--c-green);                 /* хэштег цветом фона — «дырка» в диске */
    font-size: 40px;
    font-weight: var(--fw-medium);
    font-style: normal;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 4px;
}

.site-footer .container {
    position: relative;
    z-index: 1;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1.35fr 1.2fr;
    gap: 40px;
}

.footer__logo {
    width: 205px;
    max-width: 100%;
    aspect-ratio: 205 / 112;
    display: grid;
    place-items: center;
    background: var(--c-beige);
    color: var(--c-green);
    font-family: var(--font-head);
    font-weight: var(--fw-medium);
    font-size: 44px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.footer__copy {
    margin-top: 26px;
    font-style: italic;
    font-size: 15px;
    color: var(--c-light);
}

/* Реестровый номер объекта классификации и награда Яндекса «Хорошее место»
   (ТЗ 12.09.2026) — под копирайтом в колонке бренда. В HostCMS текст номера
   приходит из документа 78 (может быть обёрнут в <p>). */
.footer__reg {
    margin-top: 14px;
    font-style: italic;
    font-size: 14px;
    line-height: 1.4;
    color: var(--c-light);
    opacity: .85;
}

.footer__reg p {
    margin: 0;
}

.footer__reg b {
    font-style: normal;
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.footer__awards {
    margin-top: 16px;
}

.footer__awards iframe {
    display: block;
    width: 150px;
    max-width: 100%;
    height: 50px;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.footer h4 {
    font-family: var(--font-head);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-size: 17px;
    letter-spacing: .01em;
    color: var(--c-light);
    margin: 0 0 22px;
}

.footer__col a,
.footer__col p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-style: italic;
    font-size: 15px;
    line-height: 1.45;
    color: var(--c-light);
    margin: 0 0 13px;
}

.footer__col a:hover {
    opacity: .7;
}

.footer__col a.is-current {
    text-decoration: underline;
}

.footer__col svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 2px;
}

@media (max-width: 1000px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .reviews {
        grid-template-columns: 1fr;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Адаптив (общий) ---------- */
@media (max-width: 1000px) {
    .features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .container {
        padding: 0 20px;
    }

    .hero__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .hero__wordmark {
        text-align: left;
        font-size: clamp(44px, 17vw, 120px);
    }

    .anchornav {
        flex-wrap: wrap;
        gap: 12px 18px;
    }

    /* Бар брони — вертикальная раскладка */
    .booking {
        padding: 22px 0;
    }

    .booking__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .booking__title span {
        max-width: none;
    }

    .booking__form {
        justify-content: stretch;
        flex-direction: column;
        align-items: stretch;
    }

    .field {
        justify-content: flex-start;
    }

    .field .caret {
        margin-left: auto;
    }

    .booking .btn {
        width: 100%;
    }
}

/* Узкие телефоны — подвал в одну колонку (перекрывает 2-колоночное правило выше) */
@media (max-width: 620px) {
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer__wm {
        font-size: 110px;
    }

    .footer__wm-hash {
        width: 27px;
        height: 27px;
        font-size: 18px;
        padding-right: 2px;
    }
}

/* ===== Дропдауны фильтров каталога — анимация 1:1 как у дропдауна навбара ===== */
.filter {
    position: relative;
    display: inline-block;
}

.filter__menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 100%;
    background: var(--c-beige, #EAE3D3);
    border-radius: var(--radius-lg, 18px);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s, transform .18s;
    z-index: 60;
    box-shadow: 0 18px 40px rgba(17, 57, 30, .18);
}

/* «мост» через зазор, чтобы курсор не терял область */
.filter__menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.filter.is-open .filter__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.filter__menu button {
    background: var(--c-light, #FFFFF1);
    border: 0;
    border-radius: var(--radius-pill, 999px);
    padding: 10px 20px;
    font: inherit;
    color: var(--c-green, #11391E);
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.filter__menu button:hover {
    background: var(--c-green, #11391E);
    color: var(--c-light, #FFFFF1);
}

/* каретка поворачивается при открытии — как в навбаре */
.filter [data-filter-toggle] .caret {
    transition: transform .2s;
}

.filter.is-open [data-filter-toggle] .caret {
    transform: rotate(180deg);
}

.rooms-empty {
    text-align: center;
    padding: 48px 0;
    color: var(--c-green, #11391E);
    font-size: 18px;
}

.rooms [hidden] {
    display: none !important;
}

/* ===== Фото карточек бани/чана (.advice-card): картинку ставит XSL 297 инлайном
   из основного изображения материала инфосистемы 48, здесь — только кадрирование ===== */
.advice-card__media {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ===== Галерея фото в карточке бани/чана (главная): большое фото + стрелки + точки + миниатюры ===== */
.banya-gallery {
    position: relative;
}

.banya-gallery__main {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* точки-индикатор — слева внизу поверх фото */
.banya-gallery__dots {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    display: flex;
    gap: 7px;
}

.banya-gallery__dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid var(--c-light, #FFFFF1);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background-color .15s;
}

.banya-gallery__dots button.is-active {
    background: var(--c-light, #FFFFF1);
}

/* стрелки листания фото — справа внизу поверх фото */
.banya-gallery__nav {
    position: absolute;
    right: 16px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    gap: 8px;
}

/* миниатюры — в правой колонке под телефоном */
.banya-gallery__thumbs {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.banya-gallery__thumb {
    flex: 1 1 0;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s, outline-color .15s;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.banya-gallery__thumb:hover {
    opacity: 1;
}

.banya-gallery__thumb.is-active {
    opacity: 1;
    outline-color: var(--c-green, #11391E);
}

/* ===== «Отапливаемый дом»: реальные фото + раскладка под макет ===== */
/* Большое фото по центру ~квадрат (было 3/4 — слишком высокое), правая колонка
   тянется на его высоту, малое фото компактное в правом верхнем углу, времена — к низу. */
#houses .intro3 {
    align-items: stretch;
}

#houses .intro3__lead {
    align-self: start;
    max-width: 385px;
}

#houses .intro3__photo {
    background: url(/assets/images/heated_house_1.png) center top / cover no-repeat;
    aspect-ratio: 1 / 1;
    align-self: start;
    width: 100%;
    max-width: 520px;
}

#houses .intro3__aside {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#houses .intro3__photo--sm {
    background: url('/assets/images/heated_house_2.png') center 40% / cover no-repeat;
    aspect-ratio: 1 / 1;
    max-width: 250px;
    width: 100%;
}

#houses .intro3__times {
    margin-top: auto;
}

/* ===== «Летние номера»: реальные фото + раскладка (зеркально «Отапливаемому дому») ===== */
/* Порядок колонок: малое фото + времена | большое фото | текст.
   Малое фото прижато к ЛЕВОМУ (внешнему) краю, времена — к низу. */
#summer .intro3 {
    align-items: stretch;
}

#summer .intro3__lead {
    align-self: start;
    width: 385px;
}

#summer .intro3__photo {
    background: url(/assets/images/summer_issues_1.png) center 35% / cover no-repeat;
    aspect-ratio: 1 / 1;
    align-self: start;
    width: 100%;
    max-width: 520px;
}

#summer .intro3__aside {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 385px;
}

#summer .intro3__photo--sm {
    background: url('/assets/images/summer_issues_2.png') center 32% / cover no-repeat;
    aspect-ratio: 7 / 6;
    width: 100%;
    max-width: 250px;
}

#summer .intro3__times {
    margin-top: auto;
}

/* ===== Быстрое бронирование: попапы календаря и числа гостей ===== */
.bk {
    position: relative;
    display: inline-flex;
    gap: 16px;
}

/* поле с выбранным значением — подсветка как акцент */
.bk .field.is-set {
    background: var(--c-green, #11391E);
    color: var(--c-light, #FFFFF1);
}

.bk .field.is-set .caret {
    color: var(--c-light, #FFFFF1);
}

.bk__pop {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 60;
    background: var(--c-light, #FFFFF1);
    border-radius: var(--radius-lg, 18px);
    padding: 16px;
    box-shadow: 0 18px 40px rgba(17, 57, 30, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s, transform .18s;
}

.bk.is-open .bk__pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bk [data-bk-toggle] .caret {
    transition: transform .2s;
}

.bk.is-open [data-bk-toggle] .caret {
    transform: rotate(180deg);
}

/* --- Число гостей --- */
.bk__pop--guests {
    min-width: 190px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.bk__pop--guests button {
    background: var(--c-beige, #EAE3D3);
    border: 0;
    border-radius: var(--radius-pill, 999px);
    padding: 10px 20px;
    font: inherit;
    color: var(--c-green, #11391E);
    text-align: left;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.bk__pop--guests button:hover {
    background: var(--c-green, #11391E);
    color: var(--c-light, #FFFFF1);
}

/* --- Календарь-диапазон --- */
.bk__pop--cal {
    width: 300px;
}

.bkcal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bkcal__title {
    font-family: var(--font-head);
    font-weight: var(--fw-medium, 500);
    color: var(--c-green, #11391E);
    text-transform: capitalize;
    font-size: 16px;
}

.bkcal__nav {
    width: 32px;
    height: 32px;
    border: 0;
    background: var(--c-beige, #EAE3D3);
    border-radius: 50%;
    color: var(--c-green, #11391E);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bkcal__nav:hover {
    background: var(--c-green, #11391E);
    color: var(--c-light, #FFFFF1);
}

.bkcal__nav svg {
    width: 16px;
    height: 16px;
}

.bkcal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.bkcal__wd {
    text-align: center;
    font-size: 12px;
    color: var(--c-muted, #8a8a7a);
    padding-bottom: 4px;
}

.bkcal__day {
    height: 34px;
    border: 0;
    background: transparent;
    border-radius: 9px;
    cursor: pointer;
    color: var(--c-green, #11391E);
    font: inherit;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .12s, color .12s;
}

.bkcal__day--empty {
    visibility: hidden;
}

.bkcal__day:not(.bkcal__day--disabled):not(.bkcal__day--empty):hover {
    background: var(--c-beige, #EAE3D3);
}

.bkcal__day--disabled {
    color: #c7c9c0;
    cursor: default;
}

.bkcal__day--in-range {
    background: var(--c-beige, #EAE3D3);
    border-radius: 0;
}

.bkcal__day--start,
.bkcal__day--end {
    background: var(--c-green, #11391E) !important;
    color: var(--c-light, #FFFFF1);
}

.bkcal__hint {
    margin-top: 12px;
    font-size: 13px;
    color: var(--c-muted, #8a8a7a);
    text-align: center;
}

/* Плашка выбранных дат/гостей — в строке фильтров каталога, после «Количество мест» */
.rooms-daterange {
    margin: 0;
    padding: 13px 22px;
    background: var(--c-beige, #EAE3D3);
    border-radius: var(--radius-pill, 999px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1;
    color: var(--c-green, #11391E);
}

.rooms-daterange span {
    font-weight: var(--fw-bold, 700);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Кнопка «Все развлечения» ПОСЛЕ карусели — только для мобилки
   (в макете 390 кнопка стоит под карточками; на десктопе скрыта,
   там работает кнопка в .leisure__head). */
.leisure__more-mob {
    display: none;
}

/* ============================================================
   МОБИЛЬНАЯ ВЁРСТКА ГЛАВНОЙ (эталон — фрейм Figma «Главная 390»).
   Единый брейкпоинт 640px; правила ниже перекрывают планшетные
   (≤900/≤1000) за счёт позднего положения в файле. Десктоп не тронут.
   ============================================================ */
@media (max-width: 640px) {
    /* Поля страницы 16px (в макете 390 контент = 358px) */
    .container {
        width: calc(100% - 32px);
        padding: 0;
    }

    .hero__overlay .container {
        width: calc(100% - 32px);
    }

    /* ---------- Герой ---------- */
    .hero {
        padding: 20px 0 0;
    }

    .hero__head {
        gap: 2px;
    }

    .hero__eyebrow {
        font-size: 30px;
        line-height: 1;
    }

    .hero__slogan {
        margin-top: 8px;
        font-size: 17px;
        line-height: 1.12;
    }

    /* Вордмарк «У#ДАЧНЫЙ» — во всю ширину контента (~64px на 390 → 356px) */
    .hero__wordmark {
        margin-top: 14px;
        font-size: clamp(48px, 16.4vw, 78px);
        line-height: .78;
    }

    /* Кружок-хэштег масштабируется вместе со шрифтом. Пропорции десктопа:
       круг .242 и хэштег .16 от кегля вордмарка. font-size задан первым,
       поэтому width/height в em считаются уже от НЕГО: .242/.16 = 1.51em. */
    .wm-hash {
        font-size: .16em;
        width: 1.51em;
        height: 1.51em;
        padding-right: .02em;
    }

    /* Фото-герой: вертикальный кадр (в макете 390×~530) */
    .hero__media {
        margin-top: 20px;
        height: min(136vw, 620px);
    }

    .hero__media img {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: none;
        object-position: 62% center;
    }

    /* Подписи на фото — вертикальный стек: первая выше, две — к низу.
       Линия-подчёркивание у каждой подписи своя (общая скрыта). */
    .hero__overlay {
        top: 0;
        padding: 0 0 30px;
    }

    .hero__overlay .container {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Маршрут на фото: 2 колонки, «Наш дом» во всю ширину (как в секции «Развлечения»),
       прижат к низу кадра. Примечания скрыты — иначе лента не влезает в высоту фото. */
    .hero__route {
        margin-top: auto;
    }

    .hero__route .section__eyebrow {
        font-size: 15px;
        gap: 10px;
    }

    .hero__route .section__eyebrow::before {
        width: 15px;
        height: 15px;
    }

    .hero__route .lz-route {
        margin-top: 18px;
    }

    .hero__route .lz-route__note {
        display: none;
    }

    .hero__route .lz-route__start,
    .hero__route .lz-route__item {
        padding-top: 16px;
    }

    .hero__route .lz-route__num {
        font-size: 26px;
    }

    .hero__route .lz-route__start .lz-route__label {
        font-size: 19px;
    }

    .hero__route .lz-route__label {
        font-size: 13px;
    }

    /* ---------- Быстрое бронирование ---------- */
    .booking {
        padding: 34px 0 40px;
    }

    .booking__inner {
        gap: 20px;
    }

    .booking__title b {
        font-size: 24px;
    }

    .booking__title span {
        margin-top: 8px;
        font-size: 18px;
        line-height: 1.25;
    }

    .booking__form {
        gap: 14px;
    }

    /* Поля дат — друг под другом (на десктопе пара в строку) */
    .bk {
        flex-direction: column;
        width: 100%;
        gap: 14px;
    }

    .field {
        width: 100%;
        padding: 19px 22px;
        font-size: 18px;
    }

    .booking .btn {
        padding: 20px 32px;
        font-size: 18px;
    }

    /* ---------- Якорное меню: в макете 390 его нет ---------- */
    .anchornav {
        display: none;
    }

    /* ---------- Секции ---------- */
    .section {
        padding: 42px 0;
    }

    .section__eyebrow {
        font-size: 15px;
        gap: 10px;
    }

    .section__eyebrow::before {
        width: 16px;
        height: 16px;
    }

    .section__title {
        margin-top: 14px;
    }

    /* Смещения/центровка заголовков — только десктопные приёмы */
    .section__title--offset {
        margin-left: 0;
    }

    .section__title--center {
        text-align: left;
    }

    /* ---------- Преимущества: вертикальный стек ---------- */
    .features {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-top: 28px;
    }

    .feature__icon {
        aspect-ratio: 7 / 3;
    }

    .feature h3 {
        font-size: 24px;
        margin-top: 16px;
        padding-bottom: 12px;
    }

    .feature p {
        font-size: 18px;
        line-height: 1.3;
    }

    /* ---------- Отапливаемый дом / Летние номера: колонка ---------- */
    .intro3 {
        flex-direction: column;
        gap: 22px;
    }

    .intro3__lead h3 {
        font-size: 24px;
        line-height: 1.15;
    }

    .intro3__lead p {
        font-size: 18px;
        line-height: 1.35;
    }

    .intro3__time b,
    .intro3__time span {
        font-size: 17px;
    }

    #houses .intro3__lead,
    #summer .intro3__lead {
        max-width: none;
        width: auto;
    }

    #houses .intro3__photo,
    #summer .intro3__photo {
        max-width: none;
        aspect-ratio: 16 / 15;
    }

    /* Малые фото в макете 390 отсутствуют */
    #houses .intro3__photo_container,
    #summer .intro3__photo--sm {
        display: none;
    }

    /* Летние: порядок по макету — текст → фото → времена заезда */
    #summer .intro3__lead {
        order: 1;
    }

    #summer .intro3__photo {
        order: 2;
    }

    #summer .intro3__aside {
        order: 3;
        max-width: none;
    }

    /* ---------- Фильтры каталога ---------- */
    .roomfilters {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-top: 20px;
    }

    .roomfilters__sort {
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .roomfilters__sort>span {
        font-size: 15px;
    }

    .filter-select {
        min-width: 0;
        padding: 15px 26px;
        font-size: 15px;
    }

    /* ---------- Сетки номеров ---------- */
    .rooms,
    .rooms--catalog {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 24px;
    }

    .rooms-more {
        margin-top: 24px;
    }

    .rooms-more .btn {
        width: 100%;
        font-size: 16px;
    }

    /* ---------- О компании ---------- */
    .about {
        gap: 26px;
        margin-top: 24px;
    }

    .about__lead {
        font-size: 24px;
    }

    .about__main>p,
    .about__col p {
        font-size: 17px;
    }

    .about__col h4 {
        font-size: 20px;
    }

    .about__list li {
        font-size: 17px;
    }

    .about__photo--sm {
        margin-top: 0;
        margin-bottom: 14px;
    }

    /* ---------- Баня и чан ---------- */
    .banya {
        gap: 18px;
        margin-top: 20px;
    }

    /* В макете 390 заголовок одной строкой */
    .banya__title br {
        display: none;
    }

    .banya__extra {
        display: none;
    }

    .banya__track {
        gap: 16px;
    }

    .section--banya .banya-card {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding: 16px;
    }

    .section--banya .banya-card__title {
        font-size: 32px;
        padding-bottom: 12px;
    }

    .section--banya .banya-card__cols {
        gap: 16px;
    }

    .section--banya .banya-card__media {
        min-height: 320px;
    }

    .banya-card__info h4 {
        font-size: 20px;
    }

    .banya-card__info p {
        font-size: 16px;
        line-height: 1.4;
    }

    .banya-price {
        padding: 20px 18px;
    }

    .banya-price__val {
        font-size: 38px;
    }

    .banya-price__badge {
        font-size: 14px;
        padding: 10px 16px;
    }

    /* Порядок блоков в карточке — по макету 390:
       цена → кнопка → «бронируется заранее» → телефон → +2 человека → примечание */
    .banya-card__info>h4 {
        order: 1;
    }

    .banya-card__info>p {
        order: 2;
    }

    .banya-card__info .banya-price {
        order: 3;
    }

    .banya-card__info .btn {
        order: 4;
    }

    .banya-card__info .banya-card__book {
        order: 5;
        font-size: 16px;
    }

    .banya-card__info .banya-card__phone {
        order: 6;
        font-size: 24px;
        text-decoration: underline;
        text-underline-offset: 5px;
    }

    .banya-card__info .banya-card__extra {
        order: 7;
    }

    .banya-card__info .banya-card__note {
        order: 8;
        font-size: 13px;
    }

    .banya-gallery__thumbs {
        display: none;
    }

    /* Стрелка карусели — под карточкой слева (по макету) */
    .banya__slider {
        padding-bottom: 64px;
    }

    .banya__nav {
        top: auto;
        bottom: 0;
        transform: none;
    }

    .banya__nav--next {
        left: 16px;
    }

    /* Активности .act: одна колонка, фото сверху (и в reverse тоже); на главной сетка → 1 колонка */
    .acts {
        gap: 14px;
        margin-top: 26px;
    }

    .act {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 10px;
    }

    .act--reverse .act__media {
        order: 0;
    }

    .act--reverse .act__body {
        order: 0;
        padding-left: 4px;
    }

    .act__body {
        padding: 16px 4px 8px;
        gap: 10px;
    }

    .act__title {
        font-size: 24px;
    }

    .act__text {
        font-size: 16px;
    }

    /* «Подробнее» на мобиле — во всю ширину, под чипами */
    .act__foot .act__more {
        flex: 1 1 100%;
    }

    .acts--grid {
        gap: 14px;
        margin-top: 24px;
    }

    /* Блоки сетки — тоже в одну колонку, фото сверху. Дублируем правила .act/.act__body
       с префиксом .acts--grid: десктопные .acts--grid .act и .acts--grid .act__body
       весомее одноклассовых мобильных, иначе текст остаётся в узкой второй колонке. */
    .acts--grid .act,
    .acts--grid .act--reverse {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 10px;
    }

    .acts--grid .act__body,
    .acts--grid .act--reverse .act__body {
        padding: 16px 4px 8px;
    }

    .acts--grid .act__media {
        aspect-ratio: 3 / 2;
        height: auto;
        min-height: 0;
    }

    .acts--grid .act__title {
        font-size: 24px;
    }

    /* ---------- Развлечения ---------- */
    .leisure__head {
        gap: 14px;
        margin-top: 10px;
    }

    .leisure__lead h3 {
        font-size: 24px;
        line-height: 1.15;
    }

    .leisure__lead p {
        font-size: 17px;
    }

    /* Маршрут расстояний — 2 колонки, «Наш дом» во всю ширину */
    .lz-route {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 16px;
    }

    .lz-route__start {
        grid-column: 1 / -1;
    }

    /* Кнопка из шапки секции — вниз, под карусель (мобильный дубль) */
    .leisure__head .btn {
        display: none;
    }

    .leisure__more-mob {
        display: block;
        margin-top: 24px;
    }

    .leisure__more-mob .btn {
        width: 100%;
        font-size: 16px;
    }

    /* ---------- Контакты: орг → карта → адрес → связаться ---------- */
    .contacts {
        gap: 24px;
        margin-top: 20px;
    }

    .contacts>div:first-child {
        display: contents;
    }

    .contacts__org {
        order: 1;
        font-size: 18px;
    }

    .contacts__map {
        order: 2;
        min-height: 420px;
    }

    .contacts__block {
        order: 3;
        margin-top: 0;
    }

    .contacts__block h4 {
        font-size: 22px;
    }

    .contacts__block p,
    .contacts__block a {
        font-size: 18px;
    }

    /* ---------- Подвал ---------- */
    .site-footer {
        padding: 44px 0 54px;
    }

    .footer__grid {
        gap: 34px;
    }

    .footer h4 {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .footer__col a,
    .footer__col p {
        font-size: 17px;
    }

    /* ---------- Общие блоки внутренних страниц ---------- */
    .pagehero__tagline {
        font-size: 22px;
    }

    .qform .btn {
        font-size: 16px;
    }
}