/* =========================================================
   КСК «Соловьиная Роща». Базовые стили
   1. Переменные
   2. Reset / base
   3. Типографика
   4. Container / секции
   5. Кнопки
   6. Header / навигация
   7. Footer
   8. Утилиты
   9. Адаптивность
   ========================================================= */

/* ============ 1. Переменные ============ */
:root {
    /* Цвета */
    --color-brown: #24170F;
    --color-dark: #17100B;
    --color-cream: #F4EBDD;
    --color-beige: #E9D8C1;
    --color-gold: #C79A5B;
    --color-gold-light: #D9B47A;
    --color-text: #3A2A1D;
    --color-white: #FFFDF8;

    /* Производные */
    --color-line: rgba(199, 154, 91, 0.35);
    --color-text-muted: rgba(58, 42, 29, 0.7);
    --color-overlay: rgba(23, 16, 11, 0.55);

    /* Шрифты */
    --font-serif: "Cormorant Garamond", "Times New Roman", serif;
    --font-sans: "Manrope", "Segoe UI", Arial, sans-serif;
    --font-nav: "Jost", "Manrope", "Segoe UI", Arial, sans-serif;

    /* Размеры */
    --container-width: 1280px;
    --container-gap: 48px;
    --header-height: 96px;

    /* Скругления */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    /* Вертикальный ритм */
    --section-space: 120px;
    --section-space-sm: 80px;

    /* Прочее */
    --transition: 0.25s ease;
    --shadow-soft: 0 18px 40px rgba(36, 23, 15, 0.12);
}

/* ============ 2. Reset / base ============ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--color-cream);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.is-menu-open {
    overflow: hidden;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

/* ============ 3. Типографика ============ */
h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-brown);
    letter-spacing: 0.01em;
}

h1 { font-size: clamp(34px, 4.2vw, 56px); }
h2 { font-size: clamp(28px, 3.2vw, 42px); }
h3 { font-size: clamp(20px, 2vw, 26px); }
h4 { font-size: 18px; }

p {
    margin: 0 0 16px;
}

p:last-child {
    margin-bottom: 0;
}

/* Надзаголовок: «О КЛУБЕ», «НАШИ УСЛУГИ» */
.eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
}

/* Тонкая золотистая линия */
.divider {
    height: 1px;
    border: 0;
    margin: 0;
    background-color: var(--color-line);
}

/* ============ 4. Container / секции ============ */
.container {
    max-width: var(--container-width);
    width: calc(100% - var(--container-gap));
    margin: 0 auto;
}

.section {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}

.section--tight {
    padding-top: var(--section-space-sm);
    padding-bottom: var(--section-space-sm);
}

.section--dark {
    background-color: var(--color-brown);
    color: var(--color-beige);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
    color: var(--color-white);
}

/* ============ 4.1. Hero ============ */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 720px;
    padding-top: var(--header-height);
    padding-bottom: 32px;
    /* фолбэк, если фотография ещё не загружена */
    background-color: var(--color-brown);
    background-image: url("../assets/images/solhorse-background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-white);
    overflow: hidden;
}

/* Тёмный overlay поверх фотографии */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(23, 16, 11, 0.55) 0%,
        rgba(23, 16, 11, 0.45) 40%,
        rgba(23, 16, 11, 0.72) 100%
    );
    pointer-events: none;
}

.hero__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    padding-top: 56px;
    padding-bottom: 72px;
}

/* Контент по центру hero */
.hero__content {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold-light);
}

.hero__eyebrow::before,
.hero__eyebrow::after {
    content: "";
    width: 60px;
    height: 1px;
    background-color: var(--color-line);
}

.hero__title {
    margin-bottom: 24px;
    font-size: clamp(32px, 3.3vw, 48px);
    font-weight: 600;
    line-height: 1.16;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--color-white);
}

.hero__title-accent {
    color: var(--color-gold-light);
}

.hero__text {
    max-width: 560px;
    margin: 0 auto 36px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-beige);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* ============ 4.2. Панель преимуществ ============ */
.hero__features-wrap {
    position: relative;
    z-index: 1;
    max-width: 1220px;
}

.features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    min-height: 90px;
    padding: 14px 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background-color: rgba(23, 16, 11, 0.55);
    backdrop-filter: blur(6px);
}

.features__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 20px;
    border-left: 1px solid rgba(199, 154, 91, 0.28);
}

.features__item:first-child {
    border-left: 0;
}

.features__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.features__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.features__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-white);
}

.features__text {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(233, 216, 193, 0.8);
}

/* ============ 4.3. Секция «О клубе» ============ */
.about {
    padding-top: 100px;
    padding-bottom: 72px;
    background-color: var(--color-cream);
}

.about__inner {
    display: grid;
    grid-template-columns: 47fr 53fr;
    align-items: stretch;
    gap: 56px;
}

.about__title {
    margin-bottom: 24px;
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.18;
    text-transform: uppercase;
}

.about__text {
    max-width: 520px;
    margin-bottom: 18px;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* текст блока приходит из редактора, абзацы внутри контейнера */
.about__text p:not(:last-child) {
    margin-bottom: 18px;
}

.about__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}

/* список в две колонки: компактнее */
.about__list--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-line);
}

.about__quote {
    margin-bottom: 28px;
    padding-left: 18px;
    border-left: 2px solid var(--color-gold);
    font-family: var(--font-serif);
    font-size: 20px;
    line-height: 1.45;
    color: var(--color-brown);
}

/* цифры под фотографией */
.about__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
    padding: 20px 22px;
    border: 1px solid rgba(199, 154, 91, 0.35);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.about__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 18px;
    border-left: 1px solid rgba(199, 154, 91, 0.3);
}

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

.about__stat-value {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-brown);
}

.about__stat-label {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--color-text);
}

.about__list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--color-text);
}

.about__check {
    flex-shrink: 0;
}

.about__btn {
    background-color: var(--color-white);
}

/* Фотография */
.about__media {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* фото тянется по высоте текстовой колонки: без пустоты справа */
.about__frame {
    position: relative;
    flex: 1 1 auto;
    min-height: 420px;
}

.about__photo {
    display: block;
    width: 81%;
    height: 101%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-beige);
}

/* Карточка «15+ лет опыта» */
.about__card {
    position: absolute;
    left: -24px;
    bottom: 16px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 72%;
    padding: 18px 24px;
    border-radius: var(--radius-md);
    background-color: var(--color-brown);
    color: var(--color-beige);
    box-shadow: var(--shadow-soft);
}

.about__card-icon {
    flex-shrink: 0;
}

.about__card-value {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}

.about__card-number {
    font-family: var(--font-serif);
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-white);
}

.about__card-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gold-light);
}

.about__card-text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(233, 216, 193, 0.85);
}

/* ============ 4.4. Секция «Услуги» ============ */
.services {
    padding-top: 72px;
    padding-bottom: 100px;
}

/* Центрированная шапка секции */
.section-head {
    margin-bottom: 48px;
    text-align: center;
}

/* « НАШИ УСЛУГИ »: тонкие золотистые линии по бокам, как в макете */
.section-head .eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 12px;
}

.section-head .eyebrow::before,
.section-head .eyebrow::after {
    content: "";
    width: 48px;
    height: 1px;
    background-color: var(--color-line);
}

.section-head__title {
    text-transform: uppercase;
    font-size: clamp(26px, 2.8vw, 40px);
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    /* 4 × 300px + 3 × 20px: карточка ровно 300px на десктопе */
    max-width: 1260px;
    margin: 0 auto;
}

/* Вариант сетки для страницы услуг: 3 карточки в ряд */
.services__grid--three {
    grid-template-columns: repeat(3, 1fr);
}

/* Карточка услуги */
.service-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-cream);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-gold);
    box-shadow: var(--shadow-soft);
}

.service-card__media {
    position: relative;
}

.service-card__img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: var(--color-beige);
}

/* Иконка на границе изображения и текста */
.service-card__icon {
    position: absolute;
    left: 22px;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    transform: translateY(50%);
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background-color: var(--color-brown);
}

.service-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 42px 22px 24px;
    background-color: var(--color-cream);
}

.service-card__title {
    margin-bottom: 10px;
    font-size: 20px;
}

.service-card__text {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.service-card__link,
.horse-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-bottom: 3px;
    align-self: flex-start;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gold);
    border-bottom: 1px solid var(--color-line);
}

.service-card__link:hover,
.horse-card__link:hover {
    color: var(--color-gold-light);
    border-bottom-color: var(--color-gold);
}

/* ============ 4.5. Новости + онлайн-бронирование ============ */
.highlights {
    padding-top: 0;
    padding-bottom: 100px;
}

.highlights__grid {
    display: block;
}

/* --- Онлайн-бронирование --- */
.booking {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-brown);
    color: var(--color-beige);
}

.booking__photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 62%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 22%;
    /* мягкое растворение левого края фотографии в фоне блока */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 22%, #000 55%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 22%, #000 55%);
}

.booking__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(36, 23, 15, 0.92) 0%,
        rgba(36, 23, 15, 0.86) 38%,
        rgba(36, 23, 15, 0.6) 55%,
        rgba(36, 23, 15, 0.28) 70%,
        rgba(36, 23, 15, 0.05) 85%,
        rgba(36, 23, 15, 0) 100%
    );
    pointer-events: none;
}

.booking__content {
    position: relative;
    z-index: 1;
    max-width: 460px;
    padding: 44px 40px;
}

.booking__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    color: var(--color-gold-light);
}

.booking__eyebrow::after {
    content: "";
    flex: 1 1 auto;
    max-width: 80px;
    height: 1px;
    background-color: var(--color-line);
}

.booking__title {
    margin-bottom: 14px;
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.25;
    color: var(--color-white);
}

.booking__text {
    margin-bottom: 28px;
    font-size: 15px;
    color: rgba(233, 216, 193, 0.85);
}

.booking__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}

.booking__list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--color-beige);
}

.booking__btn {
    align-self: flex-start;
}

/* ============ 4.6. Страница «О клубе» ============ */
/* Текущий пункт меню (используется только на внутренних страницах) */
.nav__link--current {
    color: var(--color-gold-light);
}

.nav__link--current:hover {
    color: var(--color-gold-light);
}

.nav__link--current::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--color-gold);
}

/* Hero внутренней страницы */
.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 430px;
    padding-top: calc(var(--header-height) + 48px);
    padding-bottom: 56px;
    background-color: var(--color-brown);
    background-image: url("../assets/images/about-hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-white);
    overflow: hidden;
}

.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(23, 16, 11, 0.6) 0%,
        rgba(23, 16, 11, 0.68) 100%
    );
    pointer-events: none;
}

.page-hero__container {
    position: relative;
    z-index: 1;
    text-align: left;
}

.page-hero__eyebrow {
    color: var(--color-gold-light);
}

.page-hero__title {
    margin-bottom: 18px;
    font-size: clamp(30px, 3.3vw, 48px);
    line-height: 1.16;
    text-transform: uppercase;
    color: var(--color-white);
}

.page-hero__text {
    max-width: 560px;
    margin: 0;
    font-size: 16px;
    color: var(--color-beige);
}

/* Золотистая линейка под заголовком. Одна на все внутренние страницы,
   поэтому шапки выглядят одинаково, а не каждая по-своему. */
.page-hero__rule {
    display: block;
    width: 92px;
    height: 1px;
    margin: 0 0 20px;
    background-color: rgba(199, 154, 91, 0.75);
}

/* заголовок и линейка идут вплотную, отступ держит сама линейка */
.page-hero__title + .page-hero__rule {
    margin-top: 2px;
}

/* Фон hero для страницы услуг */
.page-hero--services {
    background-image: url("../assets/images/services-hero.jpg");
}

/* Фон hero для страницы «Наши лошади» */
.page-hero--horses {
    background-image: url("../assets/images/horses-hero.jpg");
}


/* Фон hero для страницы записи */
.page-hero--calendar {
    background-image: url("../assets/images/calendar-hero.jpg");
}

/* Фон hero для страницы контактов */
.page-hero--contacts {
    background-image: url("../assets/images/contacts-hero.jpg");
}

/* Фон hero для детальной страницы услуги */
.page-hero--service {
    background-image: url("../assets/images/service-riding.jpg");
}

/* Двухколоночный блок «текст + фотография» */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
}

.split--reverse .split__content {
    order: 1;
}

.split--reverse .split__media {
    order: 2;
}

.split__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-beige);
}

.split__title {
    margin-bottom: 20px;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.22;
}

.split__content p {
    color: var(--color-text-muted);
}

/* Цифры клуба */
.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--color-line);
}

.stats__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats__value {
    font-family: var(--font-serif);
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-gold);
}

.stats__label {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Ценности */
.values__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.value-card {
    padding: 28px 24px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.value-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background-color: var(--color-brown);
}

.value-card__title {
    margin-bottom: 8px;
    font-size: 20px;
}

.value-card__text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* Конюшня */
.stable__list {
    margin-top: 24px;
    margin-bottom: 0;
}

/* CTA */
.cta {
    padding-top: 84px;
    padding-bottom: 84px;
    background-color: var(--color-brown);
    color: var(--color-beige);
}

.cta__inner {
    max-width: 720px;
    text-align: center;
}

.cta__title {
    margin-bottom: 14px;
    font-size: clamp(26px, 2.8vw, 40px);
    text-transform: uppercase;
    color: var(--color-white);
}

.cta__text {
    margin-bottom: 32px;
    font-size: 16px;
    color: rgba(233, 216, 193, 0.85);
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* ============ 4.7. Страница «Наши лошади» ============ */
/* Фильтры: пока только визуальные кнопки */
.filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 48px;
}

.filters__btn {
    min-height: 42px;
    padding: 10px 24px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background-color: var(--color-white);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.filters__btn:hover {
    border-color: var(--color-gold);
    color: var(--color-brown);
}

.filters__btn.is-active {
    border-color: var(--color-gold);
    background-color: var(--color-gold-light);
    color: var(--color-dark);
}

/* Каталог */
.horses__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Скрытые фильтром или ещё не подгруженные карточки */
.horse-card.is-hidden {
    display: none;
}

/* Кнопка «Показать ещё» */
.horses__more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.horses__counter {
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    color: var(--color-text-muted);
}

.horses__empty {
    margin-top: 32px;
    text-align: center;
    color: var(--color-text-muted);
}

.horse-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.horse-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-gold);
    box-shadow: var(--shadow-soft);
}

.horse-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: var(--color-beige);
}

.horse-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px 22px;
}

.horse-card__name {
    margin-bottom: 8px;
    font-size: 24px;
}

.horse-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-line);
    font-size: 13px;
    color: var(--color-gold);
}

.horse-card__meta li + li {
    position: relative;
    padding-left: 15px;
}

.horse-card__meta li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 12px;
    transform: translateY(-50%);
    background-color: var(--color-line);
}

.horse-card__text {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.horse-card__link {
    margin-top: auto;
    align-self: flex-start;
}

/* Лошадь месяца */
.featured {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: var(--color-brown);
    color: var(--color-beige);
}

.featured .split__title {
    color: var(--color-white);
}

.featured .split__content p {
    color: rgba(233, 216, 193, 0.85);
}

.featured__eyebrow {
    color: var(--color-gold-light);
}

.featured__meta {
    color: var(--color-gold-light);
}

.featured__btn {
    margin-top: 12px;
    background-color: var(--color-beige);
    border-color: var(--color-beige);
    color: var(--color-dark);
}

.featured__btn:hover {
    background-color: var(--color-white);
    border-color: var(--color-white);
}

/* ============ 4.9. Страница «Запись на занятие» ============ */
.booking-page__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
    gap: 24px;
}

/* Календарь месяца */
.calendar {
    padding: 28px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
}

.calendar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.calendar__month {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-brown);
}

.calendar__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: var(--color-gold);
    transition: border-color var(--transition), color var(--transition);
}

.calendar__nav:hover {
    border-color: var(--color-gold);
    color: var(--color-brown);
}

.calendar__weekdays,
.calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.calendar__weekdays {
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-line);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-text-muted);
}

.calendar__day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-color: var(--color-cream);
    font-size: 15px;
    color: var(--color-text);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.calendar__day:hover {
    border-color: var(--color-gold);
}

.calendar__day.is-selected {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold);
    color: var(--color-dark);
    font-weight: 600;
}

.calendar__day.is-disabled,
.calendar__day:disabled {
    background-color: transparent;
    color: rgba(58, 42, 29, 0.35);
    cursor: default;
}

.calendar__day.is-disabled:hover,
.calendar__day:disabled:hover {
    border-color: transparent;
}

.calendar__note {
    margin-top: 18px;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Выбранная дата и слоты */
.daysheet {
    padding: 28px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background-color: var(--color-brown);
    color: var(--color-beige);
}

.daysheet .eyebrow {
    color: var(--color-gold-light);
}

.daysheet__date {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-white);
}

.daysheet__title {
    margin-bottom: 16px;
    font-size: 18px;
    color: var(--color-white);
}

.slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.slot {
    width: 100%;
    min-height: 46px;
    padding: 10px 8px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background-color: rgba(244, 235, 221, 0.06);
    font-size: 15px;
    color: var(--color-beige);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.slot:hover {
    border-color: var(--color-gold);
    color: var(--color-white);
}

.slot.is-active {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold);
    color: var(--color-dark);
    font-weight: 600;
}

/* время и дни календаря приходят ссылками, поэтому центрируем содержимое */
a.slot,
span.slot {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slot.is-disabled {
    border-color: rgba(199, 154, 91, 0.18);
    color: rgba(233, 216, 193, 0.35);
    cursor: default;
}

.slot.is-disabled:hover {
    border-color: rgba(199, 154, 91, 0.18);
    color: rgba(233, 216, 193, 0.35);
}

.daysheet__note {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(233, 216, 193, 0.75);
}

/* --- Бронирование: услуги, места, лошади --- */

/* фильтр услуг собран из ссылок */
a.filters__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.calendar__nav.is-disabled {
    color: rgba(58, 42, 29, 0.25);
    cursor: default;
}

/* день календаря с числом свободных мест */
.calendar__day {
    position: relative;
    flex-direction: column;
    gap: 2px;
}

.calendar__count {
    font-size: 11px;
    line-height: 1;
    color: var(--color-text-muted);
}

.calendar__day--free {
    background-color: rgba(199, 154, 91, 0.16);
}

.calendar__day--few {
    background-color: rgba(199, 154, 91, 0.06);
    border-color: rgba(199, 154, 91, 0.35);
}

.calendar__day.is-selected .calendar__count {
    color: var(--color-dark);
}

.calendar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.calendar__legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar__legend-item::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 1px solid var(--color-line);
    border-radius: 4px;
}

.calendar__legend-item--free::before {
    background-color: rgba(199, 154, 91, 0.35);
}

.calendar__legend-item--few::before {
    background-color: rgba(199, 154, 91, 0.12);
}

.calendar__legend-item--none::before {
    background-color: transparent;
}

/* список времени на выбранный день */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.timeline__item {
    padding: 12px;
    border: 1px solid rgba(199, 154, 91, 0.18);
    border-radius: var(--radius-sm);
}

.timeline__item.is-active {
    border-color: var(--color-gold);
    background-color: rgba(199, 154, 91, 0.08);
}

.timeline__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.timeline__head .slot {
    width: auto;
    min-width: 84px;
    flex-shrink: 0;
}

.timeline__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.timeline__service {
    font-size: 14px;
    color: var(--color-beige);
}

.timeline__places {
    font-size: 13px;
    color: var(--color-gold-light);
}

.timeline__places.is-none {
    color: rgba(233, 216, 193, 0.4);
}

/* выбор лошади */
.horse-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.horse-picker__btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    font-size: 13px;
    color: var(--color-beige);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.horse-picker__btn:hover {
    border-color: var(--color-gold);
    color: var(--color-white);
}

.horse-picker__btn.is-active {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold);
    color: var(--color-dark);
    font-weight: 600;
}

/* подпись выбранного занятия над формой */
.booking-summary {
    padding: 14px 18px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-sm);
    background-color: var(--color-cream);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
}

.booking-summary__label {
    font-weight: 600;
    color: var(--color-brown);
}

/* Форма бронирования */
.booking-form-section {
    padding-top: 0;
}

.booking-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 860px;
    margin: 0 auto;
    padding: 36px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.field--wide {
    grid-column: 1 / -1;
}

.field__label {
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brown);
}

.field__input {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background-color: var(--color-cream);
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--color-text);
    transition: border-color var(--transition);
}

.field__input::placeholder {
    color: rgba(58, 42, 29, 0.45);
}

.field__input:focus {
    outline: none;
    border-color: var(--color-gold);
}

.field__input--area {
    min-height: 110px;
    resize: vertical;
}

/* Тип занятия */
.choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.choice {
    cursor: pointer;
}

.choice__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.choice__box {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 22px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background-color: var(--color-cream);
    font-size: 14px;
    font-weight: 600;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.choice__input:checked + .choice__box {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold);
    color: var(--color-dark);
}

.choice__input:focus-visible + .choice__box {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

.booking-form__footer {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
}

.booking-form__message {
    flex: 1 1 260px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.booking-form__message.is-visible {
    color: var(--color-brown);
}


.booking-done {
    max-width: 860px;
    margin: 0 auto 20px;
    padding: 16px 20px;
    border: 1px solid rgba(199, 154, 91, 0.4);
    border-radius: var(--radius-sm);
    background-color: rgba(199, 154, 91, 0.14);
    font-size: 15px;
    color: var(--color-brown);
}

.booking-form__message.is-error {
    color: #8f3222;
}

.booking-form button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ============ 4.9.1. Бронирование: новый экран ============ */
.book-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 48px;
}

.book-service__link {
    display: block;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    transition: border-color var(--transition), transform 0.25s ease, box-shadow 0.25s ease;
}

.book-service__link:hover {
    transform: translateY(-3px);
    border-color: var(--color-gold);
    box-shadow: 0 10px 26px rgba(36, 23, 15, 0.08);
}

.book-service.is-active .book-service__link {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 1px var(--color-gold) inset;
}

.book-service__photo {
    display: block;
    width: 100%;
    height: 118px;
    object-fit: cover;
}

.book-service__body {
    display: block;
    padding: 16px 18px 18px;
}

.book-service__name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--color-brown);
}

.book-service__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.book-subtitle {
    margin-bottom: 24px;
    font-size: clamp(24px, 2.4vw, 32px);
    color: var(--color-brown);
}

.book-grid {
    display: grid;
    grid-template-columns: 320px 1fr 300px;
    align-items: start;
    gap: 24px;
}

/* расписание дня */
.book-day {
    padding: 24px;
    border: 1px solid rgba(199, 154, 91, 0.24);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.book-day__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.book-day__date {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--color-brown);
}

.book-periods {
    display: flex;
    gap: 8px;
}

.book-period {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--color-text);
    transition: border-color var(--transition), background-color var(--transition);
}

.book-period:hover {
    border-color: var(--color-gold);
}

.book-period.is-active {
    border-color: var(--color-gold);
    background-color: rgba(199, 154, 91, 0.14);
    font-weight: 600;
    color: var(--color-brown);
}

.book-period__time {
    font-size: 11px;
    color: var(--color-text-muted);
}

.book-slots {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.book-slot {
    display: grid;
    grid-template-columns: 86px 1fr auto auto;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(199, 154, 91, 0.22);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), background-color var(--transition);
}

.book-slot:hover {
    border-color: var(--color-gold);
}

.book-slot.is-chosen {
    border-color: var(--color-gold);
    background-color: rgba(199, 154, 91, 0.1);
}

.book-slot.is-full {
    opacity: 0.6;
}

.book-slot__time {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.book-slot__start {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-brown);
}

.book-slot__end {
    font-size: 12px;
    color: var(--color-text-muted);
}

.book-slot__name {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--color-text);
}

.book-slot__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.book-slot__side {
    text-align: right;
}

.book-slot__price {
    margin: 0 0 4px;
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--color-brown);
}

.book-slot__free {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

.book-slot__free::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.book-slot__free--many::before {
    background-color: #6a8f5c;
}

.book-slot__free--few::before {
    background-color: var(--color-gold);
}

.book-slot__free--none::before {
    background-color: rgba(58, 42, 29, 0.25);
}

.book-slot__btn {
    white-space: nowrap;
}

.book-slot__btn.is-disabled {
    opacity: 0.6;
    cursor: default;
}

.book-empty {
    padding: 24px 0;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* ваш выбор */
.book-choice__inner {
    position: sticky;
    top: calc(var(--header-height) + 16px);
    padding: 24px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.book-choice__name {
    margin: 10px 0 16px;
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--color-brown);
}

.book-choice__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.book-choice__list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.book-choice__list strong {
    font-weight: 600;
    text-align: right;
    color: var(--color-text);
}

.book-choice__label {
    margin: 0 0 8px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.book-choice .horse-picker {
    margin-bottom: 18px;
}

.book-choice .horse-picker__btn {
    border-color: rgba(199, 154, 91, 0.4);
    color: var(--color-text);
}

.book-choice .horse-picker__btn.is-active {
    color: var(--color-dark);
}

.book-choice__price {
    margin: 0 0 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-line);
    font-family: var(--font-serif);
    font-size: 28px;
    color: var(--color-brown);
}

.book-choice__btn {
    width: 100%;
    justify-content: center;
}

.book-choice__empty {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* состояния дней в календаре */
.calendar__day--many {
    background-color: rgba(106, 143, 92, 0.16);
}

.calendar__day--few {
    background-color: rgba(199, 154, 91, 0.18);
}

.calendar__legend-item--many::before {
    background-color: rgba(106, 143, 92, 0.5);
}

.calendar__legend-item--few::before {
    background-color: rgba(199, 154, 91, 0.5);
}

.calendar__legend-item--none::before {
    background-color: transparent;
}

/* ============ 4.9.2. Абонементы ============ */
.pass-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.pass-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pass-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-gold);
    box-shadow: 0 12px 30px rgba(36, 23, 15, 0.08);
}

.pass-card--featured {
    border-color: var(--color-gold);
    background-color: rgba(199, 154, 91, 0.07);
}

.pass-card.is-chosen {
    box-shadow: 0 0 0 2px var(--color-gold) inset;
}

.pass-card__label {
    position: absolute;
    top: -13px;
    left: 28px;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    background-color: var(--color-gold);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-dark);
}

.pass-card__title {
    margin: 0 0 14px;
    font-size: 22px;
    color: var(--color-brown);
}

.pass-card__price {
    margin: 0 0 4px;
    font-family: var(--font-serif);
    font-size: 38px;
    line-height: 1;
    color: var(--color-brown);
}

.pass-card__per {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--color-gold);
}

.pass-card__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-line);
}

.pass-card__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--color-text);
}

.pass-card__text {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.pass-card__btn {
    margin-top: auto;
    justify-content: center;
}

.pass-form-section {
    padding-top: 0;
}

/* абонемент в кабинете */
.cab-pass__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}


/* плавная смена содержимого без перезагрузки */
#bookingLive {
    transition: opacity 0.2s ease;
}

#bookingLive.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

.book-slot,
.book-service__link,
.calendar__day {
    transition: background-color var(--transition), border-color var(--transition), transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    #bookingLive,
    .book-slot,
    .book-service__link,
    .calendar__day {
        transition: none;
    }
}


/* кнопки на карточке услуги */
.service-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.service-card__book {
    padding: 8px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    font-size: 13px;
    color: var(--color-brown);
    transition: border-color var(--transition), background-color var(--transition);
}

.service-card__book:hover {
    border-color: var(--color-gold);
    background-color: rgba(199, 154, 91, 0.1);
}

/* предстоящие записи на странице бронирования */
.booking-mine {
    padding-top: 0;
}

.mine-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.mine-item {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border: 1px solid rgba(199, 154, 91, 0.24);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
}

.mine-item__when {
    display: flex;
    flex-direction: column;
}

.mine-item__date {
    font-weight: 600;
    color: var(--color-brown);
}

.mine-item__time {
    font-size: 13px;
    color: var(--color-text-muted);
}

.mine-item__name {
    margin: 0 0 2px;
    font-weight: 600;
    color: var(--color-text);
}

.mine-item__meta {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

@media (max-width: 767px) {
    .mine-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ============ 4.10. Страница «Контакты» ============ */
.contacts__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 24px;
}

.contacts__title {
    margin-bottom: 28px;
    font-size: clamp(24px, 2.4vw, 34px);
}

.contact-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    transition: border-color var(--transition);
}

.contact-item:hover {
    border-color: var(--color-gold);
}

.contact-item__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    /* тёмная подложка: иконки мессенджеров нарисованы светлым */
    background-color: var(--color-brown);
}

.contact-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.contact-item__label {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.contact-item__value {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-brown);
    word-break: break-word;
}

.contact-item__value:hover {
    color: var(--color-gold);
}

/* Режим работы */
.hours-card {
    padding: 32px 30px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background-color: var(--color-brown);
    color: var(--color-beige);
}

.hours-card__eyebrow {
    color: var(--color-gold-light);
}

.hours-card__list {
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--color-line);
}

.hours-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.hours-card__row dt {
    font-size: 15px;
    color: rgba(233, 216, 193, 0.75);
}

.hours-card__row dd {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-white);
}

.hours-card__note {
    margin-bottom: 26px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(233, 216, 193, 0.8);
}

/* Адрес и карта */
.address {
    padding-top: 0;
}

.address__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    gap: 40px;
}

.address__title {
    margin-bottom: 16px;
    font-size: clamp(24px, 2.4vw, 34px);
}

.address__text {
    margin-bottom: 22px;
    font-size: 17px;
    line-height: 1.6;
}

.address__facts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.address__facts li {
    position: relative;
    padding-left: 18px;
    font-size: 15px;
    color: var(--color-text-muted);
}

.address__facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 8px;
    height: 1px;
    background-color: var(--color-gold);
}

.map-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background-color: var(--color-beige);
}

.map-frame__img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.map-frame__map {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

.map-frame__note {
    position: absolute;
    left: 18px;
    bottom: 18px;
    padding: 8px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background-color: rgba(36, 23, 15, 0.85);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-beige);
}

.message-section {
    padding-top: 0;
}

/* ============ 4.11. Страница одной лошади ============ */
/* Хлебные крошки */
.breadcrumbs {
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: 4px;
    background-color: var(--color-cream);
}

/* крошки под шапкой страницы: отступ под меню уже не нужен */
.breadcrumbs--under-hero {
    padding-top: 22px;
    padding-bottom: 0;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.breadcrumbs__list a {
    color: var(--color-gold);
}

.breadcrumbs__list a:hover {
    color: var(--color-brown);
}

.breadcrumbs__list li + li::before {
    content: "/";
    margin-right: 10px;
    color: var(--color-line);
}

/* Карточка лошади */
.horse-hero {
    padding-top: 36px;
}

.horse-hero__photo {
    aspect-ratio: 4 / 5;
}

.horse-hero__name {
    margin-bottom: 8px;
    font-size: clamp(34px, 3.4vw, 48px);
    line-height: 1.1;
}

.horse-hero__meta {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-line);
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--color-gold);
}

.horse-hero__text {
    margin-bottom: 28px;
    font-size: 16px;
    color: var(--color-text-muted);
}

.horse-hero__btn {
    margin-top: 4px;
}

/* Характеристики */
/* карточки подстраиваются под длину значения, а не наоборот */
.specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}

.spec {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.spec__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--color-brown);
}

.spec__icon img {
    width: 22px;
    height: 22px;
}

.spec__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.spec__label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.spec__value {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
    hyphens: auto;
    color: var(--color-brown);
}

/* Описание */
.horse-about {
    padding-top: 0;
}

.horse-about__inner {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

.horse-about__title {
    margin-bottom: 20px;
    font-size: clamp(26px, 2.6vw, 36px);
    text-transform: uppercase;
}

.horse-about__inner p {
    color: var(--color-text-muted);
}

/* Галерея */
.gallery-section {
    padding-top: 0;
}

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

.gallery__btn {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-beige);
    cursor: zoom-in;
    transition: border-color var(--transition), transform 0.25s ease;
}

.gallery__btn:hover {
    border-color: var(--color-gold);
    transform: translateY(-4px);
}

.gallery__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Лайтбокс */
.lightbox[hidden] {
    display: none;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background-color: rgba(23, 16, 11, 0.92);
}

.lightbox__img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius-md);
    object-fit: contain;
}

.lightbox__close {
    position: absolute;
    top: 24px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background-color: rgba(36, 23, 15, 0.6);
    transition: border-color var(--transition), background-color var(--transition);
}

.lightbox__close:hover {
    border-color: var(--color-gold);
    background-color: var(--color-brown);
}

/* ============ 4.12. Детальная страница услуги ============ */
.service-about__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
    gap: 48px;
}

.service-about__title {
    margin-bottom: 20px;
    font-size: clamp(26px, 2.6vw, 36px);
}

.service-about__content p {
    color: var(--color-text-muted);
}

/* Карточка с условиями услуги */
.info-card {
    padding: 30px 28px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
}

.info-card__price-label {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.info-card__price {
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-serif);
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-brown);
}

.info-card__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 26px;
}

.info-card__row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.info-card__row dt {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.info-card__row dd {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-brown);
}

.info-card__note {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Секции «Что вас ждёт» и «Кому подойдёт» */
.service-steps,
.service-audience {
    padding-top: 0;
}

.values__grid--three {
    grid-template-columns: repeat(3, 1fr);
}

/* ============ 4.13. Детальная страница новости ============ */
.article__narrow {
    max-width: 820px;
}

.article__header {
    padding-bottom: 0;
}

.article__meta {
    margin-bottom: 18px;
}

.article__title {
    margin-bottom: 14px;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.18;
    text-transform: uppercase;
}

.article__lead {
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.article__cover {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--color-beige);
}

/* Тело статьи */
.article__content {
    padding-bottom: 0;
}

.article__body {
    text-align: left;
}

.article__body p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-text);
}

.article__body p.article__intro {
    font-size: 18px;
    color: var(--color-text-muted);
}

.article__body h2 {
    margin-top: 44px;
    margin-bottom: 16px;
    font-size: clamp(24px, 2.4vw, 30px);
}

.article__body h3 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: 21px;
}

.article__body ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.article__body ul li {
    position: relative;
    padding-left: 22px;
    line-height: 1.65;
    color: var(--color-text);
}

.article__body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 10px;
    height: 1px;
    background-color: var(--color-gold);
}

.article__body blockquote {
    margin: 32px 0;
    padding: 24px 28px;
    border-left: 2px solid var(--color-gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background-color: var(--color-beige);
    font-family: var(--font-serif);
    font-size: 22px;
    line-height: 1.45;
    color: var(--color-brown);
}

.article__figure {
    margin: 32px 0;
}

.article__figure img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-md);
    background-color: var(--color-beige);
}

.article__figure figcaption {
    margin-top: 10px;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Поделиться */
.article__share-section {
    padding-bottom: 0;
}

.share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    padding-top: 28px;
    border-top: 1px solid var(--color-line);
}

.share__title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-brown);
}

/* ============ 4.14. Страница «Заявка принята» ============ */
.success {
    display: flex;
    align-items: center;
    /* карточка по центру, футер остаётся внизу экрана */
    min-height: calc(100vh - 66px);
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 56px;
    background-color: var(--color-cream);
}

.success__inner {
    display: flex;
    justify-content: center;
}

.success-card {
    width: 100%;
    max-width: 620px;
    padding: 48px 44px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.success-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 24px;
    border-radius: 50%;
    background-color: var(--color-gold-light);
}

.success-card__title {
    margin-bottom: 12px;
    font-size: clamp(26px, 2.8vw, 38px);
    text-transform: uppercase;
}

.success-card__text {
    margin-bottom: 32px;
    font-size: 16px;
    color: var(--color-text-muted);
}

/* Данные заявки */
.success-details {
    margin: 0 0 26px;
    padding: 8px 0;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    text-align: left;
}

.success-details__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 20px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(199, 154, 91, 0.2);
}

.success-details__row:last-child {
    border-bottom: 0;
}

.success-details__row dt {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.success-details__row dd {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-brown);
}

.success-card__note {
    margin-bottom: 32px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.success-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* Компактный футер */
.footer--compact {
    border-top: 0;
}

/* ============ 4.15. Личный кабинет ============ */
.account {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

/* Боковое меню */
.account__sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 28px 22px;
    background-color: var(--color-brown);
    color: var(--color-beige);
}

.account__logo img {
    width: 176px;
    height: auto;
}

.account-nav {
    flex: 1 1 auto;
}

.account-nav__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-nav__link {
    display: block;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    color: rgba(233, 216, 193, 0.8);
    transition: background-color var(--transition), color var(--transition);
}

.account-nav__link:hover {
    background-color: rgba(244, 235, 221, 0.08);
    color: var(--color-white);
}

.account-nav__link.is-active {
    background-color: var(--color-gold-light);
    color: var(--color-dark);
    font-weight: 600;
}

.account__logout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-beige);
    transition: border-color var(--transition), color var(--transition);
}

.account__logout:hover {
    border-color: var(--color-gold);
    color: var(--color-white);
}

/* Основная область */
.account__main {
    padding: 48px 40px 64px;
    background-color: var(--color-cream);
}

.account__head {
    margin-bottom: 36px;
}

.account__title {
    margin-bottom: 8px;
    font-size: clamp(26px, 2.6vw, 36px);
}

.account__subtitle {
    font-size: 16px;
    color: var(--color-text-muted);
}

.account-section {
    margin-bottom: 40px;
}

.account-section:last-child {
    margin-bottom: 0;
}

.account-section__title {
    margin-bottom: 18px;
    font-size: 22px;
}

/* Карточки статистики */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 20px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    border-radius: 50%;
    background-color: var(--color-brown);
}

.stat-card__label {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.stat-card__value {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-brown);
}

/* Ближайшее занятие */
.next-lesson {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
}

.next-lesson__when {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 20px;
    background-color: var(--color-brown);
    color: var(--color-beige);
    text-align: center;
}

.next-lesson__date {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-white);
}

.next-lesson__time {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-gold-light);
}

.next-lesson__body {
    padding: 28px 30px;
}

.next-lesson__name {
    margin-bottom: 16px;
    font-size: 24px;
}

.next-lesson__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    margin: 0 0 24px;
}

.next-lesson__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.next-lesson__row dt {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.next-lesson__row dd {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-brown);
}

/* Таблица бронирований */
.table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table th,
.table td {
    padding: 16px 20px;
    text-align: left;
    white-space: nowrap;
}

.table th {
    border-bottom: 1px solid var(--color-line);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.table tbody tr + tr td {
    border-top: 1px solid rgba(199, 154, 91, 0.2);
}

.table td {
    color: var(--color-text);
}

/* Статусы */
.status {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
}

.status--ok {
    border-color: rgba(199, 154, 91, 0.6);
    background-color: var(--color-beige);
    color: var(--color-brown);
}

.status--wait {
    background-color: var(--color-cream);
    color: var(--color-text-muted);
}

.status--done {
    border-color: transparent;
    background-color: rgba(58, 42, 29, 0.08);
    color: var(--color-text-muted);
}

/* ============ 4.16. Страница входа ============ */
.login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

/* Фотография слева */
.login__media {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 48px;
    background-color: var(--color-brown);
    background-image: url("../assets/images/login-horse.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.login__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(23, 16, 11, 0.35) 0%,
        rgba(23, 16, 11, 0.75) 100%
    );
    pointer-events: none;
}

.login__caption {
    position: relative;
    z-index: 1;
    max-width: 420px;
}

.login__eyebrow {
    color: var(--color-gold-light);
}

.login__slogan {
    font-family: var(--font-serif);
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.2;
    color: var(--color-white);
}

/* Панель с формой */
.login__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 48px;
    background-color: var(--color-cream);
}

.login__inner {
    width: 100%;
    max-width: 420px;
}

/* Более широкая панель: для формы регистрации */
.login__inner--wide {
    max-width: 520px;
}

.register-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
}

.register-form .checkbox__text a {
    color: var(--color-gold);
    border-bottom: 1px solid var(--color-line);
}

.register-form .checkbox__text a:hover {
    color: var(--color-brown);
    border-bottom-color: var(--color-gold);
}

.login__logo {
    display: inline-flex;
    margin-bottom: 28px;
}

.login__logo img {
    width: 280px;
    height: auto;
}

.login__title {
    margin-bottom: 10px;
    font-size: clamp(28px, 2.8vw, 38px);
    text-transform: uppercase;
}

.login__text {
    margin-bottom: 32px;
    font-size: 15px;
    color: var(--color-text-muted);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-form__options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox__input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-gold);
    cursor: pointer;
}

.checkbox__text {
    font-size: 14px;
    color: var(--color-text);
}

.login-form__forgot {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gold);
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 2px;
}

.login-form__forgot:hover {
    color: var(--color-brown);
    border-bottom-color: var(--color-gold);
}

.login-form__submit {
    width: 100%;
}

.login-form__message {
    font-size: 14px;
    color: var(--color-text-muted);
}

.login-form__message.is-visible {
    color: var(--color-brown);
}

.login__signup {
    margin-top: 28px;
    font-size: 15px;
    color: var(--color-text-muted);
}

.login__signup a {
    font-weight: 600;
    color: var(--color-gold);
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 2px;
}

.login__signup a:hover {
    color: var(--color-brown);
    border-bottom-color: var(--color-gold);
}

/* «Вернуться на сайт»: небольшая кнопка со стрелкой влево */
.login__back {
    margin-top: 22px;
    min-height: 38px;
    padding: 8px 16px;
    font-size: 13px;
}

.login__back .btn__icon {
    transform: rotate(180deg);
}

/* ============ 4.17. Страница 404 ============ */
.error-page {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 320px);
    padding-top: calc(var(--header-height) + 72px);
    padding-bottom: 96px;
    background-color: var(--color-cream);
}

.error-page__inner {
    text-align: center;
}

.error-page__mark {
    width: 96px;
    height: 96px;
    margin: 0 auto 8px;
    opacity: 0.9;
}

.error-page__number {
    margin-bottom: 12px;
    font-family: var(--font-serif);
    font-size: clamp(88px, 13vw, 168px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-gold);
}

.error-page__title {
    max-width: 640px;
    margin: 0 auto 14px;
    font-size: clamp(24px, 2.6vw, 34px);
    text-transform: uppercase;
}

.error-page__text {
    max-width: 520px;
    margin: 0 auto 36px;
    font-size: 16px;
    color: var(--color-text-muted);
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* ============ 4.18. Юридические страницы ============ */
.legal {
    padding-top: calc(var(--header-height) + 64px);
    background-color: var(--color-cream);
}

.legal__inner {
    max-width: 900px;
}

.legal__title {
    margin-bottom: 10px;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.18;
    text-transform: uppercase;
}

.legal__updated {
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--color-gold);
}

.legal__disclaimer {
    margin-bottom: 40px;
    padding: 18px 22px;
    border-left: 2px solid var(--color-gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background-color: var(--color-beige);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
}

.legal__body h2 {
    margin-top: 36px;
    margin-bottom: 14px;
    font-size: clamp(20px, 2vw, 24px);
    text-transform: none;
}

.legal__body h2:first-child {
    margin-top: 0;
}

.legal__body p {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-text);
}

.legal__body ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.legal__body ul li {
    position: relative;
    padding-left: 22px;
    line-height: 1.65;
    color: var(--color-text);
}

.legal__body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 10px;
    height: 1px;
    background-color: var(--color-gold);
}

.legal__body a {
    color: var(--color-gold);
    border-bottom: 1px solid var(--color-line);
}

.legal__body a:hover {
    color: var(--color-brown);
    border-bottom-color: var(--color-gold);
}

/* ============ 5. Кнопки ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition),
                border-color var(--transition);
}

.btn__icon {
    flex-shrink: 0;
}

.btn--primary {
    background-color: var(--color-gold-light);
    color: var(--color-dark);
}

.btn--primary:hover {
    background-color: var(--color-gold);
}

.btn--dark {
    background-color: rgba(23, 16, 11, 0.65);
    border-color: var(--color-line);
    color: var(--color-white);
}

.btn--dark:hover {
    background-color: rgba(23, 16, 11, 0.85);
    border-color: var(--color-gold);
}

.btn--outline {
    border-color: var(--color-gold);
    background-color: rgba(23, 16, 11, 0.55);
    color: var(--color-white);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(6px);
}

.btn--outline:hover {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold-light);
    color: var(--color-dark);
}

/* иконка светло-золотая: на золотой заливке делаем её тёмной */
.btn--outline .btn__icon {
    transition: filter var(--transition);
}

.btn--outline:hover .btn__icon {
    filter: brightness(0) saturate(100%) opacity(0.82);
}

.btn--ghost {
    border-color: var(--color-line);
    color: var(--color-text);
}

.btn--ghost:hover {
    border-color: var(--color-gold);
    color: var(--color-brown);
}

/* ============ 6. Header / навигация ============ */
.header {
    position: fixed;
    background-color: rgba(23, 16, 11, 0.38);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(199, 154, 91, 0.18);
    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: var(--header-height);
    color: var(--color-white);
}

/* После прокрутки шапка становится светлой: размеры не меняются */
.header.is-scrolled {
    background-color: var(--color-cream);
    border-bottom: 1px solid rgba(199, 154, 91, 0.35);
    box-shadow: 0 8px 28px rgba(36, 23, 15, 0.08);
}

.header.is-scrolled .nav__link {
    color: var(--color-text);
    text-shadow: none;
}

.header.is-scrolled .nav__link:hover,
.header.is-scrolled .nav__link--current {
    color: var(--color-gold);
}

.header.is-scrolled .nav__link--current::after {
    background-color: var(--color-gold);
}

.header.is-scrolled .btn--outline {
    background-color: var(--color-white);
    border-color: var(--color-gold);
    color: var(--color-brown);
}

.header.is-scrolled .btn--outline .btn__icon {
    filter: brightness(0) saturate(100%) opacity(0.7);
}

.header.is-scrolled .btn--outline:hover {
    background-color: var(--color-gold-light);
    color: var(--color-dark);
}

.header.is-scrolled .lang {
    background-color: var(--color-white);
    border-color: rgba(199, 154, 91, 0.55);
}

.header.is-scrolled .lang__btn {
    color: var(--color-text);
}

.header.is-scrolled .lang__btn.is-active {
    color: var(--color-dark);
}

.header.is-scrolled .burger {
    border-color: rgba(199, 154, 91, 0.55);
}

.header.is-scrolled .burger__line {
    background-color: var(--color-brown);
}

/* Сплошная шапка: для страниц без тёмного hero под ней */
.header--solid {
    background-color: var(--color-brown);
    border-bottom: 1px solid rgba(199, 154, 91, 0.28);
}

/* одна строка: логотип слева, меню по центру, утилиты справа */
.header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 28px;
    height: 100%;
}

.logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 280px;
    margin-left: -14px;
}

.header__utils {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-self: end;
}

.header .nav {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}

/* Логотип */
.logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Логотип вписывается в высоту шапки, пропорции сохраняются */
.logo__img {
    width: auto;
    height: 60px;
}

/* вверху: светлая версия, после прокрутки: тёмная */
.logo__img--dark {
    display: none;
}

.header.is-scrolled .logo__img--light {
    display: none;
}

.header.is-scrolled .logo__img--dark {
    display: block;
}



/* Навигация */
.nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 32px;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 auto;
}

.nav__account {
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 500;
}

.nav__link {
    position: relative;
    white-space: nowrap;
    font-family: var(--font-nav);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(255, 253, 248, 0.88);
    padding-bottom: 4px;
    text-shadow: 0 1px 6px rgba(23, 16, 11, 0.45);
}

.nav__link:hover {
    color: var(--color-gold-light);
}

.nav__link.is-active {
    color: var(--color-white);
}

.nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--color-gold);
}

/* Язык и кабинет внутри выпадающего меню: только на мобильном */
.nav__utils {
    display: none;
}

/* Переключатель языка */
.lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 3px;
    border: 1px solid rgba(199, 154, 91, 0.5);
    border-radius: var(--radius-pill);
    background-color: rgba(23, 16, 11, 0.45);
    backdrop-filter: blur(6px);
}

.lang__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-beige);
    transition: background-color var(--transition), color var(--transition);
}

.lang__btn img {
    width: 20px;
    height: auto;
    border-radius: 2px;
}

.lang__btn:hover {
    color: var(--color-white);
}

.lang__btn.is-active {
    background-color: var(--color-gold-light);
    color: var(--color-dark);
}

/* Еле заметные разделители между пунктами меню */
.nav__item {
    display: inline-flex;
    align-items: center;
}

.nav__item:not(:last-child)::after {
    content: "|";
    margin: 0 12px;
    font-family: var(--font-nav);
    font-size: 15px;
    font-weight: 300;
    line-height: 1;
    color: rgba(233, 216, 193, 0.3);
}

.header.is-scrolled .nav__item:not(:last-child)::after {
    color: rgba(58, 42, 29, 0.25);
}

/* Бургер */
.burger {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
}

.burger__line {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--color-white);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

.burger.is-active .burger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger.is-active .burger__line:nth-child(2) {
    opacity: 0;
}

.burger.is-active .burger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Затемнение под мобильным меню */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background-color: var(--color-overlay);
}

/* ============ 7. Footer ============ */
.footer {
    background-color: var(--color-cream);
    color: var(--color-text);
    font-size: 15px;
    border-top: 1px solid var(--color-line);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-top: 64px;
    padding-bottom: 56px;
}

.footer__title {
    margin-bottom: 20px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-brown);
}

/* Колонка с логотипом */
.footer__logo {
    width: 210px;
    height: auto;
    margin-bottom: 18px;
}

.footer__about {
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.socials__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background-color: var(--color-brown);
    transition: background-color var(--transition);
}

.socials__link:hover {
    background-color: var(--color-dark);
}

/* Контакты */
.footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.footer__contact {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.footer__contact img {
    flex-shrink: 0;
    margin-top: 2px;
}

.footer__contact a:hover {
    color: var(--color-gold);
}

.footer__note {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Режим работы */
.footer__hours {
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__hours-row {
    display: flex;
    gap: 8px;
    font-size: 14px;
}

.footer__hours dt {
    color: var(--color-text-muted);
}

.footer__hours dd {
    margin: 0;
    font-weight: 600;
}

/* Карта */
.footer__map {
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
}

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

.footer__map-frame {
    display: block;
    width: 100%;
    height: 160px;
    border: 0;
}

/* Нижняя полоса */
.footer-bottom {
    background-color: var(--color-brown);
    color: var(--color-beige);
}

.footer-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 60px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.footer-bottom__legal {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer-bottom__copy {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(233, 216, 193, 0.75);
}

.footer-bottom__author {
    color: var(--color-gold-light);
    transition: color var(--transition);
}

.footer-bottom__author:hover {
    color: var(--color-gold);
}

.footer-bottom__mark {
    flex-shrink: 0;
    opacity: 0.9;
}

.footer-bottom__links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.footer-bottom__links a {
    font-size: 13px;
    color: rgba(233, 216, 193, 0.75);
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 2px;
}

.footer-bottom__links a:hover {
    color: var(--color-gold-light);
    border-bottom-color: var(--color-gold);
}

/* ============ 6.8. Страница «О клубе»: шапка, цифры, призыв ============ */
.page-hero--about {
    align-items: center;
}

.page-hero__crumbs {
    margin-bottom: 26px;
    font-size: 13px;
}

.page-hero__crumbs .breadcrumbs__list {
    color: rgba(244, 235, 221, 0.75);
}

.page-hero__crumbs a {
    color: rgba(244, 235, 221, 0.9);
}

.page-hero__crumbs a:hover {
    color: var(--color-gold-light);
}

.page-hero__crumbs li + li::before {
    content: "/";
    margin-right: 10px;
    color: rgba(244, 235, 221, 0.45);
}

.page-hero__title--caps {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

/* цифры истории клуба */
.stats--icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--color-line);
}

.stats--icons .stats__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 28px;
    border-left: 1px solid var(--color-line);
}

.stats--icons .stats__item:first-child {
    padding-left: 0;
    border-left: 0;
}

.stats__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background-color: rgba(199, 154, 91, 0.14);
}

.stats--icons .stats__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stats--icons .stats__value {
    font-family: var(--font-serif);
    font-size: 28px;
    line-height: 1;
    color: var(--color-gold);
}

.stats--icons .stats__label {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* тёмная панель призыва */
.cta-panel-wrap {
    padding-top: 0;
}

.cta-panel {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    padding: 44px 48px;
    border-radius: var(--radius-lg);
    background-color: var(--color-dark);
    color: var(--color-cream);
}

.cta-panel__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    opacity: 0.45;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 80%);
}

.cta-panel__content {
    position: relative;
    max-width: 560px;
}

.cta-panel__title {
    margin: 0 0 12px;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-white);
}

.cta-panel__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(244, 235, 221, 0.8);
}

.cta-panel__actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


/* Отступы секций «О клубе» задаёт переменная --section-space,
   она переопределена для .page-about ниже, в разделе оформления
   страницы. Отдельных значений здесь больше нет: раньше они
   расходились между блоками и ритм страницы плыл. */

.cta-panel-wrap {
    padding-top: 0;
    padding-bottom: 72px;
}

/* ============ 6.9. Личный кабинет ============ */
.cabinet-page {
    background-color: var(--color-cream);
}

.cab {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

/* --- боковая панель --- */
.cab__side {
    position: relative;
    background-color: var(--color-dark);
    background-image: url("../assets/images/solhorse-background.jpg");
    background-size: cover;
    background-position: 40% center;
}

.cab__side-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 16, 11, 0.94) 0%, rgba(23, 16, 11, 0.88) 45%, rgba(23, 16, 11, 0.72) 100%);
}

.cab__side-inner {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 28px 20px 28px 24px;
}

.cab__logo {
    display: block;
    margin-bottom: 36px;
}

.cab__logo img {
    display: block;
    width: 100%;
    max-width: 190px;
    height: auto;
}

.cab-nav__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cab-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 15px;
    color: rgba(233, 216, 193, 0.82);
    transition: background-color var(--transition), color var(--transition);
}

.cab-nav__icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.cab-nav__icon img {
    width: 20px;
    height: 20px;
    opacity: 0.85;
}

.cab-nav__link:hover {
    background-color: rgba(199, 154, 91, 0.16);
    color: var(--color-white);
}

.cab-nav__link.is-active {
    background-color: var(--color-gold-light);
    font-weight: 600;
    color: var(--color-dark);
}

.cab-nav__link.is-active .cab-nav__icon img {
    filter: brightness(0);
    opacity: 1;
}

.cab__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding: 14px 18px;
    border: 1px solid rgba(233, 216, 193, 0.3);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--color-beige);
    transition: border-color var(--transition), color var(--transition);
}

.cab__logout:hover {
    border-color: var(--color-gold);
    color: var(--color-white);
}

/* --- рабочая область --- */
.cab__main {
    position: relative;
    padding: 32px 36px 28px;
    background-color: var(--color-cream);
    background-image: url("../assets/icons/mark-dark.png");
    background-repeat: no-repeat;
    background-position: right 40px top 10px;
    background-size: 260px auto;
}

.cab__main::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(244, 235, 221, 0.86);
    pointer-events: none;
}

.cab__main > * {
    position: relative;
}

.cab__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.cab__user {
    display: flex;
    align-items: center;
    gap: 18px;
}

.cab__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(199, 154, 91, 0.4);
}

.cab__greeting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.2;
}

.cab__badge {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background-color: var(--color-beige);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-brown);
}

.cab__subtitle {
    margin: 0;
    font-size: 15px;
    color: var(--color-text-muted);
}

/* --- плитки --- */
.cab-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.cab-stat {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 16px;
    padding: 20px 22px;
    border: 1px solid rgba(199, 154, 91, 0.24);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.cab-stat__icon {
    grid-row: 1 / 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-brown);
}

.cab-stat__label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.cab-stat__value {
    font-family: var(--font-serif);
    font-size: 26px;
    line-height: 1.2;
    color: var(--color-brown);
}

.cab-stat__note {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* --- блоки --- */
.cab__row {
    display: grid;
    gap: 24px;
    margin-bottom: 28px;
}

.cab__row--split {
    grid-template-columns: 1.15fr 1fr;
}

.cab__row--wide {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
}

.cab-block {
    padding: 24px;
    border: 1px solid rgba(199, 154, 91, 0.24);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.cab-block__title {
    margin: 0 0 18px;
    font-size: 22px;
    color: var(--color-brown);
}

.cab-block__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--color-line);
    font-size: 14px;
    color: var(--color-brown);
}

/* ближайшее занятие */
.cab-lesson {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 22px;
}

.cab-lesson__photo {
    width: 100%;
    height: 100%;
    max-height: 230px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.cab-lesson__date {
    display: inline-block;
    margin: 0 0 12px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background-color: var(--color-beige);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brown);
}

.cab-lesson__name {
    margin: 0 0 16px;
    font-size: 24px;
    color: var(--color-brown);
}

.cab-lesson__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 0 0 20px;
}

.cab-lesson__meta dt,
.cab-pass__meta dt {
    margin-bottom: 4px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.cab-lesson__meta dd,
.cab-pass__meta dd {
    margin: 0;
    font-weight: 600;
    color: var(--color-brown);
}

.cab-lesson__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.cab-lesson__time {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 160px;
    padding: 12px 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    font-size: 15px;
    color: var(--color-text);
}

/* абонемент */
.cab-pass__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.cab-pass__name {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--color-brown);
}

.cab-pass__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 0 0 22px;
}

.cab-pass__progress {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.cab-pass__bar {
    flex: 1 1 auto;
    height: 8px;
    border-radius: var(--radius-pill);
    background-color: var(--color-beige);
    overflow: hidden;
}

.cab-pass__fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background-color: var(--color-gold);
}

.cab-pass__percent {
    font-size: 13px;
    color: var(--color-text-muted);
}

.cab-pass__btn {
    width: 100%;
    justify-content: center;
}

/* метки статусов */
.cab-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.cab-tag--ok {
    background-color: rgba(106, 143, 92, 0.16);
    color: #4d6b42;
}

.cab-tag--wait {
    background-color: rgba(199, 154, 91, 0.2);
    color: #8a6220;
}

.cab-tag--done {
    background-color: rgba(58, 42, 29, 0.1);
    color: var(--color-text-muted);
}

/* таблица бронирований */
.cab-table-wrap {
    overflow-x: auto;
}

.cab-table {
    width: 100%;
    border-collapse: collapse;
}

.cab-table th {
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--color-line);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    color: var(--color-text-muted);
}

.cab-table td {
    padding: 16px 12px;
    border-bottom: 1px solid rgba(199, 154, 91, 0.16);
    font-size: 14px;
    color: var(--color-text);
    vertical-align: middle;
}

.cab-table tr:last-child td {
    border-bottom: 0;
}

.cab-table__date {
    display: block;
    font-weight: 600;
    color: var(--color-brown);
}

.cab-table__time {
    display: block;
    font-size: 13px;
    color: var(--color-text-muted);
}

.cab-table__btn {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--color-brown);
    white-space: nowrap;
    transition: border-color var(--transition), background-color var(--transition);
}

.cab-table__btn:hover {
    border-color: var(--color-gold);
    background-color: rgba(199, 154, 91, 0.08);
}

/* быстрые действия */
.cab__aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cab-quick {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cab-quick__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(199, 154, 91, 0.2);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--color-text);
    transition: border-color var(--transition), background-color var(--transition);
}

.cab-quick__link:hover {
    border-color: var(--color-gold);
    background-color: rgba(199, 154, 91, 0.06);
}

.cab-quick__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.cab-quick__arrow {
    margin-left: auto;
    color: var(--color-gold);
}

/* сертификат */
.cab-gift {
    position: relative;
    overflow: hidden;
    min-height: 210px;
    padding: 26px;
    border-radius: var(--radius-md);
    background-color: var(--color-brown);
    color: var(--color-cream);
}

.cab-gift__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 35%, #000 75%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 35%, #000 75%);
}

.cab-gift__body {
    position: relative;
    max-width: 62%;
}

.cab-gift__eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold-light);
}

.cab-gift__title {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 1.15;
    color: var(--color-white);
}

.cab-gift__text {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(244, 235, 221, 0.85);
}

/* подвал кабинета */
.cab__foot {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--color-line);
    font-size: 13px;
    color: var(--color-text-muted);
}

.cab__foot p {
    margin: 0;
}

.cab__foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.cab__foot-links a {
    color: var(--color-text-muted);
}

.cab__foot-links a:hover {
    color: var(--color-brown);
}


/* уведомления и пустые состояния кабинета */
.cab-notice {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.cab-notice.is-success {
    border: 1px solid rgba(199, 154, 91, 0.4);
    background-color: rgba(199, 154, 91, 0.14);
    color: var(--color-brown);
}

.cab-notice.is-error {
    border: 1px solid rgba(179, 64, 43, 0.35);
    background-color: rgba(179, 64, 43, 0.08);
    color: #8f3222;
}

.cab-empty {
    margin: 0 0 20px;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* отзывы тренера */
.cab-notes {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cab-note {
    padding: 16px 18px;
    border: 1px solid rgba(199, 154, 91, 0.2);
    border-radius: var(--radius-sm);
    background-color: rgba(244, 235, 221, 0.5);
}

.cab-note__head {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.cab-note__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
}

/* форма отзыва в таблице */
.cab-note-form summary {
    cursor: pointer;
    list-style: none;
}

.cab-note-form summary::-webkit-details-marker {
    display: none;
}

.cab-note-form form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    min-width: 220px;
}

.cab-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cab-form .field__input:disabled {
    background-color: var(--color-cream);
    color: var(--color-text-muted);
}


/* разделы кабинета: показывается один, смена плавная */
.cab-panel {
    display: none;
}

.cab-panel.is-active {
    display: block;
    animation: cab-fade 0.28s ease;
}

@keyframes cab-fade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* профиль */
.cab-profile {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cab-profile__photo {
    display: flex;
    align-items: center;
    gap: 22px;
}

.cab-profile__preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(199, 154, 91, 0.4);
    background-color: var(--color-cream);
}

.cab-profile__photo-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.cab-profile__upload {
    cursor: pointer;
}

.cab-profile__hint {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.cab-profile__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.cab-profile button[type="submit"] {
    align-self: flex-start;
}

/* настройки */
.cab-fieldset {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 20px;
    border: 1px solid rgba(199, 154, 91, 0.2);
    border-radius: var(--radius-sm);
}

.cab-fieldset__title {
    padding: 0 6px;
    font-family: var(--font-serif);
    font-size: 19px;
    color: var(--color-brown);
}

.cab-note__text--empty {
    color: var(--color-text-muted);
    font-style: italic;
}

.cab-note-edit {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.cab-note-edit button {
    align-self: flex-start;
}


/* переключатель языка в кабинете */
.cab__top-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cab__top-actions .lang {
    flex-shrink: 0;
}

/* ============ 7.0. Отзывы ============ */
.section-actions {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.reviews {
    padding-top: 0;
}

.reviews__viewport {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.reviews__viewport::-webkit-scrollbar {
    display: none;
}

.reviews__track {
    display: flex;
    gap: 24px;
}

.review-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 380px;
    height: 260px;
    padding: 28px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    scroll-snap-align: start;
}

.review-card__stars {
    margin-bottom: 14px;
    font-size: 16px;
    letter-spacing: 2px;
    color: var(--color-gold);
}

.review-card__stars-rest {
    color: rgba(199, 154, 91, 0.25);
}

/* текст обрезается, чтобы карточки были одинаковой высоты */
.review-card__text {
    flex: 1 1 auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.review-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--color-line);
}

.review-card__author {
    font-weight: 600;
    color: var(--color-brown);
}

.review-card__date {
    font-size: 13px;
    color: var(--color-text-muted);
}

.reviews__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.reviews__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background-color: var(--color-white);
    font-size: 22px;
    line-height: 1;
    color: var(--color-gold);
    transition: border-color var(--transition), color var(--transition);
}

.reviews__nav:hover {
    border-color: var(--color-gold);
    color: var(--color-brown);
}

/* ============ 7.2. Экран загрузки «Утро в Соловьиной Роще» ============ */
.intro {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #0b0705;
    opacity: 1;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

.intro.is-done {
    opacity: 0;
    visibility: hidden;
}

/* кадры: лес, конюшня, лошадь, всадник */
.intro__stage {
    position: absolute;
    inset: 0;
}

.intro__shot {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transform: scale(1.08);
    animation: intro-shot 2.6s ease forwards;
}

/* каждый следующий кадр светлее предыдущего */
.intro__shot:nth-child(1) { filter: brightness(0.3) saturate(0.7); }
.intro__shot:nth-child(2) { filter: brightness(0.45) saturate(0.8); }
.intro__shot:nth-child(3) { filter: brightness(0.62) saturate(0.9); }
.intro__shot:nth-child(4) { filter: brightness(0.8); }

@keyframes intro-shot {
    20% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* затемнение, чтобы текст читался на любой фотографии */
.intro__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(11, 7, 5, 0.25) 0%, rgba(11, 7, 5, 0.78) 75%),
        linear-gradient(to bottom, rgba(11, 7, 5, 0.5), rgba(11, 7, 5, 0.35) 40%, rgba(11, 7, 5, 0.85));
}

.intro__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 24px;
    text-align: center;
    color: var(--color-gold);
}

.intro__logo {
    width: 240px;
    max-width: 62vw;
    height: auto;
    opacity: 0;
    animation: intro-appear 1.2s ease 0.4s forwards;
}

.intro__club {
    margin: 0;
    font-family: var(--font-nav);
    font-size: 12px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(233, 216, 193, 0.75);
    opacity: 0;
    animation: intro-appear 1.2s ease 0.9s forwards;
}

.intro__slogan {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 0;
    font-family: var(--font-serif);
    font-size: clamp(26px, 5vw, 44px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-cream);
}

.intro__slogan span {
    opacity: 0;
    transform: translateY(14px);
    animation: intro-line 1.1s ease forwards;
}

.intro__slogan span:nth-child(1) { animation-delay: 1.5s; }
.intro__slogan span:nth-child(2) { animation-delay: 1.9s; }
.intro__slogan span:nth-child(3) { animation-delay: 2.3s; }
.intro__slogan span:nth-child(4) { animation-delay: 2.7s; }

@keyframes intro-line {
    to {
        opacity: 1;
        transform: none;
    }
}

.intro__dot {
    width: 6px;
    height: 6px;
    margin-top: 10px;
    border-radius: 50%;
    background-color: var(--color-gold);
    opacity: 0;
    animation: intro-appear 1s ease 3s forwards;
}

/* полоса показывает настоящий ход загрузки страницы */
.intro__progress {
    width: 180px;
    height: 2px;
    margin-top: 26px;
    border-radius: 2px;
    background-color: rgba(233, 216, 193, 0.2);
    overflow: hidden;
}

.intro__progress-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 2px;
    background-color: var(--color-gold);
    transition: width 0.2s linear;
}

@keyframes intro-appear {
    to {
        opacity: 1;
        transform: none;
    }
}

body.is-intro,
html.is-intro {
    overflow: hidden;
}

@media (max-width: 767px) {

    .intro__logo {
        width: 200px;
    }

    .intro__progress {
        width: 140px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .intro__shot,
    .intro__logo,
    .intro__club,
    .intro__slogan span,
    .intro__dot {
        animation-duration: 0.01s;
        animation-delay: 0s;
        opacity: 1;
        transform: none;
    }

    /* без движения оставляем только последний, самый светлый кадр */
    .intro__shot:not(:last-child) {
        display: none;
    }
}


/* ============ 7.1. Кнопка «наверх» ============ */
.to-top[hidden] {
    display: none;
}

.to-top {
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--color-gold);
    border-radius: 50%;
    background-color: rgba(36, 23, 15, 0.85);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 28px rgba(36, 23, 15, 0.25);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--transition), transform var(--transition),
                background-color var(--transition), border-color var(--transition);
}

.to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.to-top:hover {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold-light);
}

/* стрелка */
.to-top__arrow {
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--color-gold-light);
    border-left: 2px solid var(--color-gold-light);
    transform: rotate(45deg) translate(2px, 2px);
    transition: border-color var(--transition);
}

.to-top:hover .to-top__arrow {
    border-color: var(--color-dark);
}

/* ============ 8. Утилиты ============ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 24px;
    z-index: 100;
    padding: 12px 20px;
    background-color: var(--color-gold-light);
    color: var(--color-dark);
    border-radius: var(--radius-sm);
    transition: top var(--transition);
}

.skip-link:focus {
    top: 16px;
}

/* ============ 9. Адаптивность ============ */

/* Tablet: 768–1199px */
@media (max-width: 1199px) {
    :root {
        --container-gap: 40px;
        --header-height: 88px;
        --section-space: 96px;
        --section-space-sm: 64px;
    }

    /* в меню семь пунктов: на планшете ужимаем шапку */
    .nav {
        gap: 16px;
    }

    .nav__list {
        gap: 0;
    }

    .nav__item:not(:last-child)::after {
        margin: 0 10px;
    }

    .nav__link {
        font-size: 15px;
    }

    .nav__account {
        padding: 10px 14px;
        font-size: 13px;
        gap: 8px;
    }

    .lang__btn {
        padding: 6px 8px;
        gap: 4px;
    }

    .logo {
        width: 240px;
        margin-left: -10px;
    }

    .logo__img {
        height: 48px;
    }

    /* на планшете у кнопки остаётся только иконка */
    .nav__account {
        width: 44px;
        height: 44px;
        padding: 0;
        gap: 0;
        font-size: 0;
        justify-content: center;
    }

    .nav__account .btn__icon {
        width: 20px;
        height: 20px;
    }

    .hero {
        min-height: 600px;
    }

    .hero__content {
        max-width: 560px;
    }

    .about {
        padding-top: 90px;
        padding-bottom: 64px;
    }

    .services {
        padding-top: 64px;
        padding-bottom: 90px;
    }

    .highlights {
        padding-bottom: 90px;
    }

    /* Планшет: футер 2 × 2 */
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 32px;
    }

    .booking__content {
        max-width: none;
        padding: 36px 32px;
    }

    .booking__photo {
        width: 58%;
    }

    /* Планшет: 2 × 2 */
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Ценности: 2 × 2 */
    .values__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Каталог лошадей: 2 в ряд */
    .horses__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Новости: 2 в ряд */

    /* Календарь и слоты: в одну колонку */
    .booking-page__grid {
        grid-template-columns: 1fr;
    }

    .address__grid {
        gap: 28px;
    }

    .service-about__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .account {
        grid-template-columns: 210px 1fr;
    }

    .login__media {
        padding: 32px;
    }

    .login__panel {
        padding: 48px 32px;
    }

    .account__main {
        padding: 40px 28px 56px;
    }

    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .values__grid--three {
        grid-template-columns: repeat(2, 1fr);
    }

    .map-frame__img {
        height: 340px;
    }

    .split {
        gap: 40px;
    }

    .about__inner {
        gap: 40px;
    }

    .about__card {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
        padding: 18px 20px;
        gap: 14px;
    }

    .features {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 0;
    }

    .features__item {
        padding: 4px 18px;
    }

    .features__item:nth-child(odd) {
        border-left: 0;
    }
}

/* Mobile: до 767px */
/* Планшет (узкий): двухколоночные блоки складываются в одну колонку */
@media (max-width: 900px) {
    .about__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about__frame {
        min-height: 0;
    }

    .about__photo {
        aspect-ratio: 4 / 3;
        height: auto;
    }

    /* сначала текст, затем фотография */
    .about__content {
        order: 1;
    }

    .about__media {
        order: 2;
    }

    .about__text {
        max-width: none;
    }

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

    .about__stats {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 20px;
        padding: 18px;
    }

    .about__stat {
        padding-left: 0;
        padding-top: 14px;
        border-left: 0;
        border-top: 1px solid rgba(199, 154, 91, 0.3);
    }

    .about__stat:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .about__quote {
        font-size: 18px;
    }

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

    /* Блоки «текст + фото» складываются: сначала текст */
    .split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .split__content {
        order: 1;
    }

    .split__media {
        order: 2;
    }

    .split__photo {
        aspect-ratio: 4 / 3;
    }

    .featured {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    /* Контакты и адрес: в одну колонку */
    .contacts__grid,
    .address__grid {
        grid-template-columns: 1fr;
    }

    .booking__content {
        max-width: 620px;
    }
}

@media (max-width: 767px) {
    :root {
        --container-gap: 32px;
        --header-height: 72px;
        --section-space: 72px;
        --section-space-sm: 56px;
    }

    body {
        font-size: 15px;
    }

    /* Меню превращается в выпадающую панель */
    .header .nav {
        justify-self: stretch;
        grid-column: 1 / -1;
        padding: 28px 32px 36px;
    }

    .nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        z-index: 45;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        padding: 28px 32px 36px;
        background-color: var(--color-brown);
        border-top: 1px solid var(--color-line);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    }

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

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin: 0;
    }

    /* в выпадающем меню разделители не нужны */
    .nav__item {
        display: block;
    }

    .nav__item:not(:last-child)::after {
        display: none;
    }

    .nav__link {
        display: block;
        padding: 14px 0;
        font-size: 18px;
        border-bottom: 1px solid rgba(199, 154, 91, 0.18);
    }

    .nav__link.is-active::after {
        display: none;
    }

    .nav__account {
        width: 100%;
    }

    .lang {
        align-self: flex-start;
    }

    .to-top {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }

    .burger {
        display: flex;
    }

    .header__inner {
        grid-template-columns: auto 1fr;
        column-gap: 12px;
        height: var(--header-height);
    }

    .logo {
        grid-column: 1;
        justify-self: start;
    }

    .header__utils {
        display: none;
    }

    .logo {
        width: auto;
        margin-left: 0;
    }

    .logo__img {
        height: 42px;
    }

    .header.is-scrolled .header__inner {
        grid-template-columns: auto 1fr;
    }

    .burger {
        grid-column: 2;
    }

    /* язык и кабинет: внутри выпадающего меню */
    .nav__utils {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .nav__utils .lang {
        align-self: flex-start;
    }

    .nav__utils .nav__account {
        width: 100%;
        height: auto;
        min-height: 52px;
        padding: 12px 20px;
        gap: 10px;
        font-size: 15px;
        justify-content: center;
    }

    /* выпадающее меню всегда тёмное: ссылки в нём светлые */
    .header.is-scrolled .nav__link {
        color: rgba(233, 216, 193, 0.85);
    }

    .header.is-scrolled .nav__link:hover,
    .header.is-scrolled .nav__link--current {
        color: var(--color-gold-light);
    }

    .header.is-scrolled .lang {
        background-color: rgba(23, 16, 11, 0.45);
    }

    .header.is-scrolled .lang__btn {
        color: var(--color-beige);
    }

    .hero {
        min-height: 0;
        padding-bottom: 28px;
        background-position: 60% center;
    }

    .hero__overlay {
        background: linear-gradient(
            180deg,
            rgba(23, 16, 11, 0.5) 0%,
            rgba(23, 16, 11, 0.75) 100%
        );
    }

    .hero__container {
        padding-top: 72px;
        padding-bottom: 56px;
    }

    .hero__content {
        max-width: none;
    }

    .hero__title {
        font-size: clamp(28px, 8vw, 36px);
    }

    .hero__text {
        font-size: 15px;
        margin-bottom: 28px;
    }

    /* на узких экранах текст переносится сам, без жёстких переносов */
    .hero__text br,
    .footer__about br,
    .booking__title br {
        display: none;
    }

    .hero__actions {
        gap: 12px;
    }

    .about {
        padding-top: 72px;
        padding-bottom: 48px;
    }

    .services {
        padding-top: 48px;
        padding-bottom: 72px;
    }

    .highlights {
        padding-bottom: 72px;
    }

    /* Мобильный: футер в одну колонку */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 48px;
        padding-bottom: 40px;
    }

    .footer-bottom__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding-top: 20px;
        padding-bottom: 24px;
    }

    .footer-bottom__mark {
        order: -1;
        align-self: center;
    }

    .footer-bottom__links {
        flex-direction: column;
        gap: 10px;
    }

    .footer-bottom__links a {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .highlights__grid {
        gap: 18px;
    }



    .booking__content {
        padding: 28px 20px;
    }

    .booking__photo {
        width: 100%;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
    }

    .booking__overlay {
        background: linear-gradient(
            180deg,
            rgba(36, 23, 15, 0.94) 0%,
            rgba(36, 23, 15, 0.9) 70%,
            rgba(36, 23, 15, 0.72) 100%
        );
    }

    .booking__btn {
        align-self: stretch;
    }

    /* Мобильный: одна колонка */
    .services__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .values__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .values__grid--three {
        grid-template-columns: 1fr;
    }

    .info-card {
        padding: 24px 20px;
    }

    .article__lead {
        font-size: 16px;
        margin-bottom: 28px;
    }

    .article__body blockquote {
        padding: 18px 20px;
        font-size: 19px;
    }

    .article__cover {
        aspect-ratio: 3 / 2;
    }

    .success {
        padding-top: calc(var(--header-height) + 36px);
        padding-bottom: 48px;
    }

    .success-card {
        padding: 32px 20px;
    }

    .success-card__icon {
        width: 64px;
        height: 64px;
        margin-bottom: 20px;
    }

    .success-details__row {
        flex-direction: column;
        gap: 2px;
    }

    /* Вход: фотография сверху, форма снизу */
    .login {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .login__media {
        min-height: 220px;
        padding: 24px 20px;
    }

    .login__slogan {
        font-size: 22px;
    }

    .login__panel {
        padding: 36px 20px 48px;
    }

    .login__logo img {
        width: 190px;
    }

    .register-form {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .error-page {
        min-height: 0;
        padding-top: calc(var(--header-height) + 48px);
        padding-bottom: 64px;
    }

    .error-page__mark {
        width: 72px;
        height: 72px;
    }

    .legal {
        padding-top: calc(var(--header-height) + 40px);
    }

    .legal__disclaimer {
        padding: 16px 18px;
        margin-bottom: 32px;
    }

    /* Кабинет: боковое меню превращается в горизонтальную ленту */
    .account {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .account__sidebar {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 14px 16px;
        overflow-x: auto;
    }

    .account__logo {
        flex-shrink: 0;
    }

    .account__logo img {
        width: 130px;
    }

    .account-nav__list {
        flex-direction: row;
        gap: 6px;
    }

    .account-nav__link {
        padding: 10px 14px;
        font-size: 14px;
        white-space: nowrap;
    }

    .account__logout {
        flex-shrink: 0;
        padding: 10px 14px;
        white-space: nowrap;
    }

    .account__main {
        padding: 32px 16px 48px;
    }

    .stat-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .next-lesson {
        grid-template-columns: 1fr;
    }

    .next-lesson__when {
        flex-direction: row;
        gap: 14px;
        padding: 18px;
    }

    .next-lesson__body {
        padding: 22px 18px;
    }

    /* Таблица превращается в карточки */
    .table thead {
        display: none;
    }

    .table,
    .table tbody,
    .table tr,
    .table td {
        display: block;
        width: 100%;
    }

    .table tr {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(199, 154, 91, 0.2);
    }

    .table tr:last-child {
        border-bottom: 0;
    }

    .table tbody tr + tr td {
        border-top: 0;
    }

    .table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 6px 0;
        white-space: normal;
    }

    .table td::before {
        content: attr(data-label);
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-text-muted);
    }

    .horses__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* характеристики лошади в одну колонку: длинные значения помещаются */
    .specs {
        grid-template-columns: 1fr;
    }

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

    .cabinet-card {
        padding: 22px;
    }

    .review-card {
        width: 82vw;
        height: 280px;
        padding: 22px;
    }


    .calendar,
    .daysheet {
        padding: 20px 16px;
    }

    .calendar__grid,
    .calendar__weekdays {
        gap: 4px;
    }

    .calendar__day {
        font-size: 14px;
    }

    .slots {
        grid-template-columns: repeat(2, 1fr);
    }

    .booking-form {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px 18px;
    }

    .contact-item {
        padding: 14px 16px;
        gap: 12px;
    }

    .breadcrumbs {
        padding-top: calc(var(--header-height) + 20px);
    }

    .specs {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .spec {
        padding: 12px;
    }

    /* Галерея: 2 в ряд */
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .lightbox {
        padding: 16px;
    }

    .lightbox__close {
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
    }

    .hours-card {
        padding: 24px 20px;
    }

    .map-frame__img,
    .map-frame__map {
        height: 260px;
    }

    .choice__box {
        width: 100%;
        justify-content: center;
    }

    .choice {
        flex: 1 1 100%;
    }

    .filters {
        margin-bottom: 32px;
    }

    .filters__btn {
        flex: 1 1 calc(50% - 6px);
        padding: 10px 12px;
    }

    .featured {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .page-hero {
        min-height: 360px;
        padding-top: calc(var(--header-height) + 40px);
    }

    .page-hero__title br {
        display: none;
    }

    .stats {
        gap: 24px;
    }

    .cta {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .section-head {
        margin-bottom: 32px;
    }

    .service-card__img {
        height: 190px;
    }

    .about__title {
        font-size: clamp(26px, 7vw, 32px);
    }

    .about__text {
        max-width: none;
    }

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

    .about__stats {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 32px;
    }

    .about__quote {
        font-size: 18px;
    }

    .about__card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 16px;
        gap: 12px;
    }

    .about__card-number {
        font-size: 30px;
    }

    .about__card-text {
        font-size: 12px;
    }

    .features {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 8px 14px;
    }

    .features__item {
        padding: 14px 4px;
        border-left: 0;
        border-top: 1px solid rgba(199, 154, 91, 0.2);
    }

    .features__item:first-child {
        border-top: 0;
    }

    .btn {
        width: 100%;
        min-height: 52px;
    }
}

/* ============ «О клубе» на узких экранах ============ */
@media (max-width: 900px) {
    .page-hero--about {
        min-height: 440px;
    }

    .stats--icons .stats__item {
        padding: 4px 20px;
    }

    .cta-panel {
        padding: 32px 26px;
    }

    .cta-panel__photo {
        opacity: 0.3;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (max-width: 767px) {
    .stats--icons {
        flex-direction: column;
        gap: 18px;
        align-items: flex-start;
    }

    .stats--icons .stats__item {
        padding: 0;
        border-left: 0;
    }

    .page-hero__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============ Кабинет на узких экранах ============ */
@media (max-width: 1199px) {
    .cab-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .cab__row--split,
    .cab__row--wide {
        grid-template-columns: 1fr;
    }

    .cab-gift__body {
        max-width: 70%;
    }
}

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

    .cab__main {
        padding: 24px 20px;
        background-size: 180px auto;
    }

    .cab-lesson {
        grid-template-columns: 1fr;
    }

    .cab-lesson__photo {
        max-height: 200px;
    }
}

@media (max-width: 767px) {
    .cab-stats {
        grid-template-columns: 1fr;
    }

    .cab-profile__grid {
        grid-template-columns: 1fr;
    }

    .cab-profile__photo {
        flex-direction: column;
        align-items: flex-start;
    }

    .cab__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .cab-gift__body {
        max-width: 100%;
    }

    .cab-gift__photo {
        opacity: 0.35;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* таблица бронирований превращается в карточки */
    .cab-table thead {
        display: none;
    }

    .cab-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 14px 0;
        border-bottom: 1px solid rgba(199, 154, 91, 0.16);
    }

    .cab-table td {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 0;
        border: 0;
    }

    .cab-table td::before {
        content: attr(data-label);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-muted);
    }
}

/* ============ Бронирование на узких экранах ============ */
@media (max-width: 1199px) {
    .book-grid {
        grid-template-columns: 300px 1fr;
    }

    .book-choice {
        grid-column: 1 / -1;
    }

    .book-choice__inner {
        position: static;
    }
}

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

    .book-slot {
        grid-template-columns: 74px 1fr;
        row-gap: 12px;
    }

    .book-slot__side {
        text-align: left;
    }

    .book-slot__free {
        justify-content: flex-start;
    }

    .book-slot__btn {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .book-periods {
        flex-wrap: wrap;
    }
}

/* =========================================================
   РАБОЧЕЕ МЕСТО ВЛАДЕЛЬЦА
   Раздел «Заявки клуба» в личном кабинете: сводка, фильтры
   и карточки записей с кнопками действий.
   ========================================================= */

#adminLive {
    transition: opacity 0.2s ease;
}

#adminLive.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

/* плитка со счётчиком, который требует внимания */
.cab-stat--alert {
    border-color: rgba(199, 154, 91, 0.6);
    box-shadow: 0 6px 20px rgba(199, 154, 91, 0.16);
}

.cab-stat--alert .cab-stat__icon {
    background-color: var(--color-gold);
}

.cab-stat__note a {
    color: var(--color-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cab-tag--off {
    background-color: rgba(160, 76, 62, 0.14);
    color: #93493c;
}

/* фильтры */
.admin-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(199, 154, 91, 0.24);
}

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

.admin-chip {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid rgba(199, 154, 91, 0.4);
    border-radius: var(--radius-pill);
    font-size: 14px;
    color: var(--color-text);
    background-color: transparent;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.admin-chip:hover {
    border-color: var(--color-gold);
    background-color: rgba(199, 154, 91, 0.12);
}

.admin-chip.is-active {
    border-color: var(--color-brown);
    background-color: var(--color-brown);
    color: var(--color-cream);
}

.admin-chip--status {
    font-size: 13px;
    padding: 6px 14px;
}

.admin-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.admin-search .field__input {
    flex: 1 1 220px;
    max-width: 320px;
}

.admin-search__reset {
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.admin-count {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* список заявок */
.admin-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-card {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-left: 4px solid rgba(58, 42, 29, 0.2);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.admin-card--wait {
    border-left-color: var(--color-gold);
}

.admin-card--ok {
    border-left-color: #6a8f5c;
}

.admin-card--done {
    border-left-color: rgba(58, 42, 29, 0.3);
}

.admin-card--off {
    border-left-color: #a04c3e;
    opacity: 0.72;
}

.admin-card__when {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-card__day {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 600;
    color: var(--color-brown);
}

.admin-card__time {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-gold);
}

.admin-card__weekday {
    font-size: 12px;
    color: var(--color-text-muted);
}

.admin-card__title {
    margin: 0 0 8px;
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--color-brown);
}

.admin-card__person {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 8px;
    font-size: 15px;
}

.admin-card__person a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.admin-card__person a:hover {
    color: var(--color-gold);
}

.admin-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--color-text-muted);
}

.admin-card__comment {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background-color: rgba(233, 216, 193, 0.4);
    font-size: 14px;
}

.admin-card__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    min-width: 170px;
}

.admin-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.admin-card__actions form {
    margin: 0;
}

.admin-btn {
    padding: 8px 14px;
    border: 1px solid rgba(199, 154, 91, 0.5);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text);
    background-color: transparent;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.admin-btn:hover {
    border-color: var(--color-gold);
    background-color: rgba(199, 154, 91, 0.14);
}

.admin-btn--confirm {
    border-color: #6a8f5c;
    color: #4d6b42;
}

.admin-btn--confirm:hover {
    background-color: rgba(106, 143, 92, 0.16);
    border-color: #6a8f5c;
}

.admin-btn--cancel {
    border-color: rgba(160, 76, 62, 0.5);
    color: #93493c;
}

.admin-btn--cancel:hover {
    background-color: rgba(160, 76, 62, 0.12);
    border-color: #a04c3e;
}

@media (max-width: 900px) {

    .admin-card {
        grid-template-columns: 100px 1fr;
    }

    .admin-card__side {
        grid-column: 1 / -1;
        align-items: flex-start;
        min-width: 0;
    }

    .admin-card__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {

    .admin-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .admin-card__when {
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
    }

    .admin-search .field__input {
        max-width: none;
    }
}


/* =========================================================
   ПАСХАЛКА
   Отдельная страница с роликом. Ссылок на неё нет,
   попасть можно только по скрытой кнопке в кабинете.
   ========================================================= */

.egg-page {
    background-color: var(--color-dark);
}

.egg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 24px;
}

.egg__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 900px;
    text-align: center;
}

.egg__eyebrow {
    margin: 0;
    font-family: var(--font-nav);
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.egg__title {
    margin: 0 0 14px;
    font-family: var(--font-serif);
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 500;
    color: var(--color-cream);
}

.egg__frame {
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #000;
}

.egg__video {
    display: block;
    width: 100%;
    max-height: 76vh;
}

.egg__hint {
    margin: 0;
    font-size: 13px;
    color: rgba(233, 216, 193, 0.6);
}

.egg__back {
    margin-top: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(199, 154, 91, 0.5);
    font-size: 14px;
    color: var(--color-gold-light);
    transition: color var(--transition), border-color var(--transition);
}

.egg__back:hover {
    color: var(--color-white);
    border-color: var(--color-gold);
}

/* скрытая кнопка в кабинете: заметить можно, только если искать.
   Сама точка размером в пиксель, но область нажатия вокруг неё шире,
   иначе попасть в неё мышью было бы почти невозможно. При наведении
   точка расцветает золотом, и становится понятно, что это не пылинка. */
.cab__egg {
    /* стоит в углу поверх подвала и не сдвигает текст */
    position: absolute;
    left: 0;
    top: 12px;
    display: inline-block;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(199, 154, 91, 0.45);
    font-size: 0;
    line-height: 0;
    transition: width 0.25s ease, height 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.cab__egg::after {
    content: '';
    position: absolute;
    inset: -10px;
}

.cab__egg:hover,
.cab__egg:focus-visible {
    width: 9px;
    height: 9px;
    background-color: var(--color-gold);
    box-shadow: 0 0 14px rgba(199, 154, 91, 0.85);
    cursor: pointer;
}

/* =========================================================
   РАСПИСАНИЕ В КАБИНЕТЕ
   Неделя днями, занятие раскрывается формой правки.
   ========================================================= */

#scheduleLive {
    transition: opacity 0.2s ease;
}

#scheduleLive.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

.sched-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.sched-head .cab-block__title {
    margin: 0;
}

.sched-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sched-range {
    padding: 0 8px;
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--color-brown);
}

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

.sched-day {
    padding: 16px 18px;
    border: 1px solid rgba(199, 154, 91, 0.24);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.sched-day.is-today {
    border-color: var(--color-gold);
    box-shadow: 0 4px 18px rgba(199, 154, 91, 0.14);
}

.sched-day__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 15px;
}

.sched-day__num {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-brown);
}

.sched-day__name {
    color: var(--color-text);
}

.sched-day__count {
    margin-left: auto;
    font-size: 12px;
    color: var(--color-text-muted);
}

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

.sched-slot {
    border: 1px solid rgba(199, 154, 91, 0.2);
    border-left: 3px solid rgba(199, 154, 91, 0.5);
    border-radius: var(--radius-sm);
    background-color: rgba(244, 235, 221, 0.35);
}

.sched-slot.is-booked {
    border-left-color: #6a8f5c;
}

.sched-slot__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
}

.sched-slot__row::-webkit-details-marker {
    display: none;
}

.sched-slot__time {
    min-width: 52px;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-gold);
}

.sched-slot__name {
    font-weight: 600;
    color: var(--color-brown);
}

.sched-slot__meta {
    font-size: 13px;
    color: var(--color-text-muted);
}

.sched-slot__places {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background-color: rgba(106, 143, 92, 0.16);
    font-size: 12px;
    font-weight: 600;
    color: #4d6b42;
    white-space: nowrap;
}

.sched-slot__places.is-full {
    background-color: rgba(160, 76, 62, 0.14);
    color: #93493c;
}

.sched-empty {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* форма занятия */
.sched-form {
    padding: 14px;
    border-top: 1px solid rgba(199, 154, 91, 0.24);
}

.sched-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.sched-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.sched-field--wide {
    grid-column: 1 / -1;
}

.sched-field .field__input {
    padding: 9px 12px;
    font-size: 14px;
}

.sched-horses {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid rgba(199, 154, 91, 0.24);
    border-radius: var(--radius-sm);
}

.sched-horses legend {
    padding: 0 6px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.sched-horse {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    cursor: pointer;
}

.sched-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sched-hint {
    font-size: 12px;
    color: var(--color-text-muted);
}

.sched-add__btn {
    display: inline-block;
    padding: 7px 14px;
    border: 1px dashed rgba(199, 154, 91, 0.55);
    border-radius: var(--radius-pill);
    font-size: 13px;
    color: var(--color-gold);
    cursor: pointer;
    list-style: none;
}

.sched-add__btn::-webkit-details-marker {
    display: none;
}

.sched-add__btn:hover {
    border-style: solid;
    background-color: rgba(199, 154, 91, 0.1);
}

.sched-add .sched-form {
    margin-top: 12px;
    border: 1px solid rgba(199, 154, 91, 0.24);
    border-radius: var(--radius-sm);
}

@media (max-width: 767px) {

    .sched-slot__places {
        margin-left: 0;
    }

    .sched-range {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   НЕДЕЛЬНАЯ ТАБЛИЦА ЗАНЯТИЙ
   По вертикали часы, по горизонтали дни. Занятие рисуется
   блоком нужной высоты, цвет берётся из карточки услуги.
   ========================================================= */

#gridLive {
    transition: opacity 0.2s ease;
}

#gridLive.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

.grid-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--color-text-muted);
}

.grid-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.grid-legend__dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.grid-wrap {
    overflow-x: auto;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
}

.grid-table {
    display: grid;
    grid-template-columns: 64px repeat(7, minmax(150px, 1fr));
    grid-template-rows: 56px auto;
    min-width: 1120px;

    /*
     * Цифры в этой таблице набираются рубленым шрифтом с прямыми
     * знаками одинаковой ширины. Заголовочный Cormorant рисует
     * минускульные цифры, они прыгают по высоте и в сетке читаются плохо.
     * Правило действует только внутри таблицы.
     */
    font-family: var(--font-sans);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: 'lnum' 1, 'tnum' 1;
}

.grid-corner {
    border-right: 1px solid rgba(199, 154, 91, 0.24);
    border-bottom: 1px solid rgba(199, 154, 91, 0.24);
    background-color: var(--color-cream);
}

.grid-dayhead {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-bottom: 1px solid rgba(199, 154, 91, 0.24);
    border-right: 1px solid rgba(199, 154, 91, 0.16);
    background-color: var(--color-cream);
    font-size: 13px;
    color: var(--color-text-muted);
}

.grid-dayhead:last-child {
    border-right: 0;
}

.grid-dayhead.is-today {
    background-color: rgba(199, 154, 91, 0.22);
    color: var(--color-brown);
}

.grid-dayhead__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-brown);
}

.grid-dayhead__num {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* колонка часов */
.grid-hours {
    display: grid;
    grid-template-rows: repeat(var(--grid-rows), 22px);
    border-right: 1px solid rgba(199, 154, 91, 0.24);
    background-color: rgba(244, 235, 221, 0.5);
}

.grid-hour {
    grid-row: span 2;
    padding: 2px 8px 0 0;
    text-align: right;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* колонка дня */
.grid-day {
    position: relative;
    display: grid;
    grid-template-rows: repeat(var(--grid-rows), 22px);
    grid-template-columns: 1fr;
    border-right: 1px solid rgba(199, 154, 91, 0.16);
}

.grid-day:last-child {
    border-right: 0;
}

.grid-day.is-today {
    background-color: rgba(199, 154, 91, 0.06);
}

.grid-cell {
    grid-column: 1;
    border-bottom: 1px solid rgba(199, 154, 91, 0.12);
}

.grid-cell.is-half {
    border-bottom-color: rgba(199, 154, 91, 0.24);
}

/* занятие */
.grid-event {
    grid-column: 1;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    margin: 1px 3px;
    padding: 4px 7px;
    border-radius: 5px;
    color: var(--color-white);
    line-height: 1.2;
    transition: filter var(--transition), transform 0.2s ease;
}

.grid-event:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.grid-event__time {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.9;
}

.grid-event__name {
    font-size: 12px;
    font-weight: 600;
}

.grid-event__count {
    align-self: flex-start;
    margin-top: auto;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background-color: rgba(255, 253, 248, 0.9);
    font-size: 10px;
    font-weight: 700;
    color: var(--color-brown);
}

.grid-export {
    margin-left: auto;
}

@media (max-width: 767px) {

    .grid-export {
        margin-left: 0;
    }
}

/* ---------- деньги в карточке заявки ---------- */
.cab-stat__value--money {
    font-size: 26px;
}

.cab-tag--part {
    background-color: rgba(199, 154, 91, 0.28);
    color: #7a5418;
}

.admin-money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px dashed rgba(199, 154, 91, 0.4);
    text-align: right;
}

.admin-money__sum {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-brown);
    font-variant-numeric: lining-nums tabular-nums;
}

.admin-money__note {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

.admin-money__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.admin-money form {
    margin: 0;
}

@media (max-width: 900px) {

    .admin-money {
        align-items: flex-start;
        text-align: left;
    }

    .admin-money__actions {
        justify-content: flex-start;
    }
}

/* =========================================================
   ШИРИНЫ ЭКРАНОВ
   Шапка перестаёт помещаться раньше, чем начинается телефон:
   в меню семь пунктов плюс язык и кабинет. Поэтому до 1023
   включительно меню выпадающее, а не в строку. Ниже собраны
   правила для узких окон, вертикальных мониторов и больших
   экранов 2K и 4K.
   ========================================================= */

@media (max-width: 1023px) {

    /* меню прячется под кнопку */
    .burger {
        display: flex;
        grid-column: 2;
    }

    .header__inner,
    .header.is-scrolled .header__inner {
        grid-template-columns: auto 1fr;
        column-gap: 12px;
        height: var(--header-height);
    }

    .logo {
        grid-column: 1;
        justify-self: start;
        width: auto;
        margin-left: 0;
    }

    .logo__img {
        height: 46px;
    }

    .header__utils {
        display: none;
    }

    .header .nav {
        justify-self: stretch;
        grid-column: 1 / -1;
        padding: 28px 32px 36px;
    }

    .nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        z-index: 45;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        background-color: var(--color-brown);
        border-top: 1px solid var(--color-line);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    }

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

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin: 0;
    }

    .nav__item {
        display: block;
    }

    .nav__item:not(:last-child)::after {
        display: none;
    }

    .nav__link {
        display: block;
        padding: 14px 0;
        font-size: 18px;
        border-bottom: 1px solid rgba(199, 154, 91, 0.18);
    }

    .nav__link.is-active::after {
        display: none;
    }

    /* язык и кабинет переезжают внутрь меню */
    .nav__utils {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .nav__utils .lang {
        align-self: flex-start;
    }

    .nav__utils .nav__account {
        width: 100%;
        height: auto;
        min-height: 52px;
        padding: 12px 20px;
        gap: 10px;
        font-size: 15px;
        justify-content: center;
    }

    /* выпадающее меню всегда тёмное */
    .header.is-scrolled .nav__link {
        color: rgba(233, 216, 193, 0.85);
    }

    .header.is-scrolled .nav__link:hover,
    .header.is-scrolled .nav__link--current {
        color: var(--color-gold-light);
    }

    .header.is-scrolled .lang {
        background-color: rgba(23, 16, 11, 0.45);
    }

    .header.is-scrolled .lang__btn {
        color: var(--color-beige);
    }
}

/* узкая полоса между планшетом и обычным экраном:
   меню ещё в строку, но всё уже поджато */
@media (min-width: 1024px) and (max-width: 1279px) {

    .logo {
        width: 200px;
    }

    .logo__img {
        height: 46px;
    }

    .nav {
        gap: 12px;
    }

    .nav__link {
        font-size: 14px;
    }

    .nav__item:not(:last-child)::after {
        margin: 0 8px;
    }

    .header__utils {
        gap: 10px;
    }

    /* у переключателя языка остаются только флаги */
    .lang__btn {
        padding: 6px;
        font-size: 0;
        gap: 0;
    }
}

/* большие экраны: контент не должен теряться посреди пустоты */
@media (min-width: 1800px) {
    :root {
        --container-width: 1440px;
        --section-space: 140px;
    }
}

@media (min-width: 2400px) {
    :root {
        --container-width: 1600px;
    }

    body {
        font-size: 17px;
    }
}

/* очень узкие телефоны */
@media (max-width: 380px) {
    :root {
        --container-gap: 24px;
    }

    .btn {
        padding: 12px 18px;
        font-size: 14px;
    }
}

/* невысокие окна: вертикальный монитор в альбомном режиме,
   ноутбуки 1366 на 768 и телефоны боком */
@media (max-height: 700px) and (min-width: 1024px) {
    .hero {
        min-height: 560px;
    }
}

/* Рабочее место на узком экране: таблица недели ужимается, чтобы её было
   видно целиком. Порог 1500, а не 1400: при 1440 на колонку кабинета
   остаётся около 1040 точек, и широкий вариант таблицы в неё не помещался. */
@media (max-width: 1500px) {

    .grid-table {
        grid-template-columns: 56px repeat(7, minmax(118px, 1fr));
        min-width: 890px;
    }
}

@media (max-width: 900px) {

    .grid-table {
        grid-template-columns: 48px repeat(7, minmax(104px, 1fr));
        min-width: 776px;
    }

    .sched-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   ГЛАВНАЯ: УСЛУГИ, ОТЗЫВЫ, БРОНИРОВАНИЕ
   Три блока по присланному макету. Остальные секции
   главной и другие страницы не затронуты.
   ========================================================= */

/* общий заголовок по центру с росчерком */
.section-head--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-head__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
}

.section-head__ornament::before,
.section-head__ornament::after {
    content: '';
    width: 54px;
    height: 1px;
    background-color: rgba(199, 154, 91, 0.55);
}

.section-head__ornament img {
    opacity: 0.85;
}

/* ---------- услуги на тёмном фоне ---------- */
.services--dark {
    position: relative;
    background-color: var(--color-brown);
    background-position: center;
    background-size: cover;
}

/* фон уводим глубже: чем он спокойнее, тем отчётливее передний план */
.services__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 16, 11, 0.9), rgba(23, 16, 11, 0.84) 45%, rgba(23, 16, 11, 0.93));
}

.services__inner {
    position: relative;
}

.services--dark .section-head__title {
    color: var(--color-white);
}

.services--dark .eyebrow {
    color: var(--color-gold-light);
}

.services--dark .services__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.services--dark .service-card {
    border-color: transparent;
    background-color: var(--color-cream);
}

.services--dark .service-card__media {
    border-radius: 0;
}

/* светлая кнопка на тёмном фоне */
.btn--light {
    background-color: var(--color-cream);
    border: 1px solid var(--color-cream);
    color: var(--color-brown);
}

.btn--light:hover {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-brown);
}

/* ---------- отзывы: стрелки по краям и точки ---------- */
.reviews__stage {
    position: relative;
    display: flex;
    align-items: center;
}

.reviews__stage .reviews__viewport {
    flex: 1 1 auto;
    min-width: 0;
}

.reviews__nav--prev,
.reviews__nav--next {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    background-color: var(--color-white);
}

.reviews__nav--prev {
    left: -21px;
}

.reviews__nav--next {
    right: -21px;
}

.review-card {
    position: relative;
}

.review-card__mark {
    position: absolute;
    top: 14px;
    right: 20px;
    font-family: var(--font-serif);
    font-size: 46px;
    line-height: 1;
    color: rgba(199, 154, 91, 0.35);
}

.reviews__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.reviews__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(58, 42, 29, 0.22);
    cursor: pointer;
    transition: background-color var(--transition), transform var(--transition);
}

.reviews__dot:hover {
    background-color: rgba(199, 154, 91, 0.7);
}

.reviews__dot.is-active {
    background-color: var(--color-gold);
    transform: scale(1.3);
}

/* ---------- бронирование: тёмная плашка с фотографией справа ---------- */
.booking-band {
    background-color: var(--color-cream);
}

.booking {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    min-height: 420px;
}

.booking__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 54px 56px;
}

.booking__title {
    margin: 10px 0 14px;
    font-family: var(--font-serif);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    line-height: 1.15;
    color: var(--color-white);
}

.booking__text {
    margin: 0 0 22px;
    max-width: 44ch;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(233, 216, 193, 0.82);
}

.booking__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.booking__list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: rgba(233, 216, 193, 0.9);
}

.booking__media {
    position: relative;
    overflow: hidden;
}

/* фотография занимает правую половину плашки целиком */
.booking .booking__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 12%, #000 38%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 12%, #000 38%);
}

@media (max-width: 1199px) {

    .services--dark .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {

    .booking {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .booking__content {
        padding: 40px 32px;
        order: 2;
    }

    .booking__media {
        order: 1;
        height: 260px;
    }

    .booking .booking__photo {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (max-width: 767px) {

    .services--dark .services__grid {
        grid-template-columns: 1fr;
    }

    .reviews__stage {
        gap: 10px;
    }

    .reviews__nav--prev,
    .reviews__nav--next {
        display: none;
    }

    .booking__content {
        padding: 32px 22px;
    }
}

/* в макете четыре отзыва в ряд.
   Ширину считаем сеткой: в ней проценты берутся от ширины окна
   просмотра, а не от ленты, которая сама растёт вслед за карточками */
@media (min-width: 1024px) {

    .reviews__track {
        display: grid;
        width: 100%;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 72px) / 4);
    }

    .reviews__track .review-card {
        width: auto;
        padding: 24px;
    }

    .reviews__track .review-card__text {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* правки после сверки с макетом */

/* 1. Карточка услуги на тёмном фоне.
   Прозрачная рамка показывала под собой кремовый фон карточки,
   и вокруг фотографии шла светлая линия. Возвращаем прежний
   золотистый тон, как было до переделки блока. */
.services--dark .service-card {
    border-color: rgba(199, 154, 91, 0.28);
}

/* 2. Расстояние перед отзывами.
   Раньше отзывы шли на том же кремовом фоне сразу за услугами,
   поэтому верхний отступ был снят. Теперь выше тёмная полоса,
   и блок упирался в неё вплотную. */
.reviews {
    padding-top: var(--section-space);
}

/* тёмная полоса услуг: сверху и снизу одинаково */
.services--dark {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}

/* =========================================================
   О КЛУБЕ. Оформление по присланному макету.
   Полосы идут вплотную друг к другу, отступ внутри каждой
   задаётся общим --section-space, поэтому ритм страницы
   совпадает с остальным сайтом.
   ========================================================= */

/* Шаг между блоками. В макете он заметно плотнее общего по сайту:
   светлые секции около 84 точек, тёмные полосы около 60, нижняя
   полоса с цифрами совсем узкая. Значение задаётся только для этой
   страницы, остальной сайт живёт на прежнем ритме. */
.page-about {
    --section-space: 84px;
    --section-space-sm: 64px;
}

.page-about .values--dark {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* ---------- Наша история: текст слева, фотография справа ---------- */
.split--story {
    grid-template-columns: 1fr 1.12fr;
    gap: 56px;
}

.split__photo--story {
    aspect-ratio: 1 / 1;
}

/* ---------- Ценности на тёмном фоне ---------- */
.values--dark {
    position: relative;
    background-color: var(--color-brown);
    background-position: center;
    background-size: cover;
}

.values__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 16, 11, 0.84), rgba(23, 16, 11, 0.74) 45%, rgba(23, 16, 11, 0.88));
}

.values__inner {
    position: relative;
}

.values--dark .section-head {
    margin-bottom: 44px;
    text-align: center;
}

.values--dark .section-head__title {
    color: var(--color-white);
}

.values--dark .eyebrow {
    color: var(--color-gold-light);
}

.values--dark .value-card {
    padding: 30px 26px;
    border-color: rgba(199, 154, 91, 0.3);
    background-color: var(--color-cream);
}

/* на тёмном фоне кружок иконки светлый, как в макете */
.values--dark .value-card__icon {
    border-color: rgba(199, 154, 91, 0.45);
    background-color: var(--color-white);
}

/* ---------- Наш путь ---------- */
.path {
    background-color: var(--color-cream);
}

.path__grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    align-items: center;
    gap: 48px;
}

.path__title {
    margin-bottom: 34px;
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.2;
}

.path__list {
    position: relative;
    margin: 0;
    padding: 0 0 0 26px;
    list-style: none;
}

/* вертикальная линия проходит через все годы */
.path__list::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background-color: rgba(199, 154, 91, 0.4);
}

.path__item {
    position: relative;
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: start;
    gap: 18px;
    padding-bottom: 24px;
}

.path__item:last-child {
    padding-bottom: 0;
}

.path__item::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--color-gold);
}

.path__year {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-brown);
}

.path__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* снимки лежат внахлёст и слегка повёрнуты, как разложенные на столе */
.path__gallery {
    position: relative;
    aspect-ratio: 4 / 3;
}

.path__frame {
    position: absolute;
    margin: 0;
    padding: 8px;
    border-radius: 4px;
    background-color: var(--color-white);
    box-shadow: 0 14px 30px rgba(36, 23, 15, 0.18);
}

.path__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--color-beige);
}

.path__frame--1 {
    top: 0;
    right: 8%;
    width: 46%;
    height: 48%;
    transform: rotate(-1.5deg);
    z-index: 1;
}

.path__frame--2 {
    top: 20%;
    left: 0;
    width: 46%;
    height: 47%;
    transform: rotate(1.5deg);
    z-index: 2;
}

.path__frame--3 {
    top: 38%;
    right: 0;
    width: 35%;
    height: 40%;
    transform: rotate(3deg);
    z-index: 3;
}

.path__frame--4 {
    bottom: 0;
    left: 36%;
    width: 40%;
    height: 40%;
    transform: rotate(-2deg);
    z-index: 4;
}

/* ---------- Тёмная полоса: цифры клуба и призыв ---------- */
.club-band {
    position: relative;
    overflow: hidden;
    padding-top: 34px;
    padding-bottom: 34px;
    background-color: var(--color-dark);
    background-position: center;
    background-size: cover;
    color: var(--color-cream);
}

.club-band__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(23, 16, 11, 0.9), rgba(23, 16, 11, 0.78) 55%, rgba(23, 16, 11, 0.6));
}

/* Лошадь на переднем плане: отдельная фотография поверх фона и поверх
   кремовой карточки, у правого края. Левый край растворяется, чтобы
   снимок не выглядел наклеенным прямоугольником. z-index выше, чем
   у содержимого полосы, иначе карточка перекрыла бы лошадь. */
.club-band__horse {
    position: absolute;
    top: 0;
    right: 0;
    width: 26%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 4;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

.club-band__inner {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 40px;
}

.club-band__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.club-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.club-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(199, 154, 91, 0.42);
    border-radius: var(--radius-sm);
}

.club-stat__value {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-gold-light);
}

.club-stat__label {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(244, 235, 221, 0.75);
}

/* кремовая карточка призыва, лошадь заходит на её правый край */
.club-band__cta {
    position: relative;
    padding: 30px 34px;
    border-radius: var(--radius-md);
    background-color: rgba(233, 216, 193, 0.94);
    color: var(--color-brown);
}

/* правую часть карточки занимает лошадь, поэтому заголовок и кнопка
   держатся левее и под снимок не заезжают */
.club-band__title {
    max-width: 62%;
    margin: 0 0 18px;
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.24;
    color: var(--color-brown);
}

/* ---------- Экраны поменьше ---------- */
@media (max-width: 1199px) {

    .split--story,
    .path__grid,
    .club-band__inner {
        gap: 36px;
    }

    .path__item {
        grid-template-columns: 74px 1fr;
        gap: 14px;
    }
}

@media (max-width: 1023px) {

    .split--story,
    .path__grid {
        grid-template-columns: 1fr;
    }

    .split__photo--story {
        aspect-ratio: 16 / 10;
    }

    .values--dark .values__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* на узком экране снимки перестают лежать внахлёст:
       так они не наезжают друг на друга и остаются читаемыми */
    .path__gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        aspect-ratio: auto;
    }

    .path__frame {
        position: static;
        width: auto;
        height: auto;
        transform: none;
    }

    .path__photo {
        aspect-ratio: 4 / 3;
    }

    .club-band__inner {
        grid-template-columns: 1fr;
    }

    .club-band__title {
        max-width: none;
    }

    .club-band__horse {
        width: 40%;
        z-index: 1;
        opacity: 0.4;
    }
}

@media (max-width: 767px) {

    .values--dark .values__grid {
        grid-template-columns: 1fr;
    }

    .path__item {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .club-band__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .club-band__cta {
        padding: 24px 22px;
    }

    .club-band__horse {
        display: none;
    }
}

/* =========================================================
   КАБИНЕТ: ширина колонки и таблица недели
   ========================================================= */

/* Колонка кабинета не должна растягиваться под широкую таблицу недели.
   У дорожки grid ширина min-width по умолчанию auto, поэтому таблица
   распирала всю страницу, и на телефоне кабинет уезжал вбок вместо
   того, чтобы таблица прокручивалась внутри своей рамки. */
.cab__main,
.cab-panel,
.cab-block {
    min-width: 0;
}

/* на узком экране навигация недели переносится по строкам,
   а кнопка выгрузки не растягивается на всю ширину */
@media (max-width: 767px) {

    .sched-nav {
        flex-wrap: wrap;
        gap: 10px;
    }

    .grid-legend {
        gap: 10px 16px;
    }
}

/* =========================================================
   БРОНИРОВАНИЕ. Оформление по присланному макету.
   ========================================================= */

.page-booking {
    --section-space: 84px;
    --section-space-sm: 64px;
}

/* ---------- заголовок раздела услуг и ссылка «Все услуги» ---------- */
.book-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.book-head__title {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 32px);
    color: var(--color-brown);
}

.book-head__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-muted);
    transition: color var(--transition);
}

.book-head__all:hover,
.book-head__all.is-active {
    color: var(--color-brown);
}

/* ---------- карточки услуг ---------- */
.book-services {
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-bottom: 48px;
}

.book-service__link {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
}

.book-service__media {
    position: relative;
    display: block;
}

.book-service__photo {
    height: 132px;
}

/* значок услуги лежит на нижнем крае фотографии */
.book-service__badge {
    position: absolute;
    left: 12px;
    bottom: -14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background-color: var(--color-brown);
}

.book-service__badge img {
    width: 16px;
    height: 16px;
}

.book-service__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px 16px 16px;
}

.book-service__name {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
}

.book-service__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gold);
}

.book-service.is-active .book-service__more {
    color: var(--color-brown);
}

/* ---------- тёмная полоса между услугами и расписанием ---------- */
.book-promo {
    position: relative;
    overflow: hidden;
    margin-bottom: 48px;
    padding: 42px 32px;
    border-radius: var(--radius-md);
    background-color: var(--color-dark);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: var(--color-cream);
}

.book-promo__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(23, 16, 11, 0.92), rgba(23, 16, 11, 0.72) 60%, rgba(23, 16, 11, 0.86));
}

.book-promo__inner {
    position: relative;
}

.book-promo__title {
    margin: 0 0 12px;
    font-size: clamp(22px, 2.2vw, 30px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-white);
}

.book-promo__text {
    max-width: 560px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(244, 235, 221, 0.85);
}

/* ---------- карточка «Ваш выбор» ---------- */
.book-choice__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.book-choice__photo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.book-choice__headbody {
    min-width: 0;
}

.book-choice__when {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.book-choice__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--color-line);
    font-size: 14px;
    color: var(--color-text-muted);
}

.book-choice__total strong {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-brown);
}

/* ---------- панель заявки: форма слева, фотография справа ---------- */
.book-formpanel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-cream);
}

/* фотография занимает правую половину панели и растворяется влево,
   поэтому текст формы читается на ровном фоне */
.book-formpanel__photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 52%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
}

.book-formpanel__body {
    position: relative;
    max-width: 620px;
    padding: 44px 40px;
}

.book-formpanel__body .section-head {
    margin-bottom: 24px;
}

.section-head__title--caps {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.book-formpanel__lead {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--color-text-muted);
}

.book-formpanel .booking-form {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    gap: 18px;
}

/* поле услуги заполняется само, руками его не правят */
.field__input--locked {
    background-color: rgba(233, 216, 193, 0.5);
    color: var(--color-text-muted);
    cursor: default;
}

/* ---------- экраны поменьше ---------- */
@media (max-width: 1199px) {

    .book-services {
        grid-template-columns: repeat(3, 1fr);
    }

    .book-formpanel__body {
        max-width: 560px;
        padding: 36px 32px;
    }

    .book-formpanel__photo {
        width: 44%;
    }
}

@media (max-width: 1023px) {

    .book-services {
        grid-template-columns: repeat(2, 1fr);
    }

    /* фотография уходит фоном: на планшете места на две колонки уже нет */
    .book-formpanel__photo {
        width: 100%;
        opacity: 0.18;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .book-formpanel__body {
        max-width: none;
    }
}

@media (max-width: 767px) {

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

    .book-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .book-promo {
        padding: 32px 20px;
    }

    .book-formpanel__body {
        padding: 28px 20px;
    }

    .book-formpanel .booking-form {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ФОРМЫ: заметные ошибки, подсветка полей, согласие
   ========================================================= */

/* Блок ошибки. Раньше сообщение о непройденной капче было обычной
   серой строчкой под кнопкой, его просто не замечали. */
.form-alert {
    display: none;
    grid-column: 1 / -1;
    margin: 4px 0 0;
    padding: 14px 16px;
    border: 1px solid rgba(164, 103, 74, 0.55);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background-color: rgba(164, 103, 74, 0.1);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    color: #8a4a30;
}

.form-alert.is-visible {
    display: block;
}

/* поле, которое посетитель пропустил */
.field__input.is-invalid,
.checkbox__input.is-invalid {
    border-color: #a4674a;
    box-shadow: 0 0 0 3px rgba(164, 103, 74, 0.16);
}

.checkbox__input.is-invalid {
    outline: 2px solid #a4674a;
    outline-offset: 2px;
}

/* ссылка на политику в галочке согласия */
.checkbox__link {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-brown);
}

.checkbox__link:hover {
    color: var(--color-gold);
}

/* обёртка живой части формы не должна ломать сетку полей */
.form-live {
    display: contents;
}

/* пояснение под карточкой выбора, когда лошадь выбирать не нужно */
.book-choice__note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* =========================================================
   ПОДВАЛ: подложка под картой
   ========================================================= */

.footer__map {
    position: relative;
    min-height: 160px;
    background-color: rgba(233, 216, 193, 0.14);
}

.footer__map-stub {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}

/* Рамка проявляется без плавного перехода. Переход здесь опасен:
   в фоновой вкладке браузер не рисует кадры, анимация не двигается,
   и карта могла бы остаться невидимой. */
.footer__map-frame {
    position: relative;
    opacity: 0;
}

.footer__map-frame.is-ready {
    opacity: 1;
}

/* =========================================================
   БРОНИРОВАНИЕ: сколько человек идёт на занятие
   ========================================================= */

.book-choice__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

/* сколько мест осталось, подсказка рядом с заголовком выбора */
.book-choice__free {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
}

.people-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.people-picker__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(199, 154, 91, 0.4);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 15px;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-text);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.people-picker__btn:hover {
    border-color: var(--color-gold);
    color: var(--color-brown);
}

.people-picker__btn.is-active {
    border-color: var(--color-gold);
    background-color: var(--color-gold-light);
    font-weight: 600;
    color: var(--color-dark);
}

/* строка «цена × количество» над итогом */
.book-choice__perone {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.book-choice__perone + .book-choice__total {
    margin-top: 6px;
    padding-top: 0;
    border-top: 0;
}

/* предоплата: подпись слева, сумма справа, доли в процентах больше нет */
.book-choice__prepay {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 18px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.book-choice__prepay strong {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-brown);
}

/* =========================================================
   КОНТАКТЫ. Оформление по присланному макету.
   ========================================================= */

.page-contacts {
    --section-space: 84px;
    --section-space-sm: 64px;
}

/* подзаголовок в шапке, золотой курсивный */
.page-hero__lead {
    margin: 10px 0 0;
    font-family: var(--font-serif);
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.2;
    color: var(--color-gold-light);
}

.page-hero__lead + .page-hero__text {
    margin-top: 18px;
}

/* ---------- три колонки: связь, режим работы, фраза ---------- */
.page-contacts .contacts__grid {
    grid-template-columns: 1fr 1.1fr 0.95fr;
    align-items: stretch;
    gap: 22px;
}

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

.contact-card__link {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 14px 18px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    transition: border-color var(--transition), transform 0.25s ease;
}

.contact-card__link:hover {
    transform: translateX(3px);
    border-color: var(--color-gold);
}

.contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-brown);
}

.contact-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.contact-card__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.contact-card__value {
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-brown);
}

.contact-card__note {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* карточка режима работы: тёмная, как в макете */
.page-contacts .hours-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px 32px;
    border: 0;
    border-radius: var(--radius-md);
    background-color: var(--color-dark);
    color: var(--color-cream);
}

.page-contacts .hours-card__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-gold-light);
}

.page-contacts .hours-card__row {
    border-bottom-color: rgba(233, 216, 193, 0.18);
}

.page-contacts .hours-card__row dt {
    color: var(--color-cream);
}

.page-contacts .hours-card__row dd {
    color: var(--color-white);
}

.page-contacts .hours-card__note {
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(233, 216, 193, 0.18);
    color: rgba(244, 235, 221, 0.75);
}

.page-contacts .hours-card__btn {
    align-self: flex-start;
    margin-top: 20px;
}

/* правая колонка: фотография и фраза о клубе */
.contacts__side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.contacts__photo {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 190px;
    object-fit: cover;
    border-radius: var(--radius-md);
    background-color: var(--color-beige);
}

.contacts__quote {
    position: relative;
    margin: 0;
    padding: 26px 24px 24px;
    border-radius: var(--radius-md);
    background-color: #2f3a2c;
    color: var(--color-cream);
}

.contacts__quote-mark {
    position: absolute;
    left: 22px;
    top: 10px;
    font-family: var(--font-serif);
    font-size: 40px;
    line-height: 1;
    color: rgba(199, 154, 91, 0.6);
}

.contacts__quote blockquote {
    margin: 0;
    padding-top: 16px;
    font-size: 15px;
    line-height: 1.5;
}

/* ---------- адрес и карта ---------- */
.page-contacts .address {
    padding-top: var(--section-space);
    background-color: var(--color-beige);
}

.page-contacts .address__facts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 0;
}

.page-contacts .address__facts li::before {
    content: none;
}

.address__facts-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.address__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
}

.address__coords {
    margin: 0;
    font-size: 13px;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-text-muted);
}

/* подложка под картой, пока грузится виджет */
.map-frame__stub {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
}

.map-frame__map {
    position: relative;
    opacity: 0;
}

.map-frame__map.is-ready {
    opacity: 1;
}

/* ---------- как добраться ---------- */
.route__warning {
    max-width: 640px;
    margin: 0 auto 32px;
    padding: 14px 20px;
    border: 1px solid rgba(164, 103, 74, 0.5);
    border-radius: var(--radius-sm);
    background-color: rgba(164, 103, 74, 0.1);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #8a4a30;
}

.route__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.route-card {
    padding: 28px 26px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.route-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    background-color: rgba(199, 154, 91, 0.16);
}

.route-card__title {
    margin-bottom: 12px;
    font-size: 20px;
}

.route-card__text p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.route-card__text p:last-child {
    margin-bottom: 0;
}

/* ---------- условия записи и оплаты ---------- */
.terms {
    background-color: var(--color-cream);
}

.terms__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.3fr;
    align-items: start;
    gap: 48px;
}

.terms__title {
    margin-bottom: 14px;
    font-size: clamp(24px, 2.4vw, 32px);
}

.terms__note {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-muted);
}

.terms__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.terms__item {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(199, 154, 91, 0.28);
}

.terms__item:last-child {
    border-bottom: 0;
}

.terms__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(199, 154, 91, 0.18);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-brown);
}

.terms__text {
    padding-top: 6px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
}

/* ---------- обратная связь на тёмном фоне ---------- */
.feedback {
    position: relative;
    overflow: hidden;
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
    background-color: var(--color-dark);
    background-position: center;
    background-size: cover;
    color: var(--color-cream);
}

.feedback__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(23, 16, 11, 0.92), rgba(23, 16, 11, 0.8) 55%, rgba(23, 16, 11, 0.66));
}

.feedback__grid {
    position: relative;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 48px;
}

.feedback__eyebrow {
    color: var(--color-gold-light);
}

.feedback__title {
    margin-bottom: 16px;
    font-size: clamp(26px, 2.8vw, 40px);
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-white);
}

.feedback__text {
    max-width: 340px;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(244, 235, 221, 0.8);
}

.feedback__mark {
    display: block;
    margin-top: 32px;
    opacity: 0.5;
}

.feedback__panel {
    padding: 34px 36px;
    border-radius: var(--radius-lg);
    background-color: var(--color-cream);
    color: var(--color-text);
}

.feedback__panel .booking-form {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    gap: 18px;
}

.feedback__panel .booking-form__footer {
    justify-content: flex-end;
}

/* ---------- экраны поменьше ---------- */
@media (max-width: 1199px) {

    .page-contacts .contacts__grid {
        grid-template-columns: 1fr 1fr;
    }

    /* фраза о клубе уходит под две первые колонки во всю ширину */
    .contacts__side {
        grid-column: 1 / -1;
        flex-direction: row;
    }

    .contacts__photo,
    .contacts__quote {
        flex: 1 1 50%;
    }

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

    .terms__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .feedback__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .feedback__mark {
        display: none;
    }
}

@media (max-width: 1023px) {

    .page-contacts .contacts__grid,
    .page-contacts .address__grid {
        grid-template-columns: 1fr;
    }

    .contacts__side {
        flex-direction: column;
    }

    .map-frame__map {
        height: 340px;
    }
}

@media (max-width: 767px) {

    .page-contacts .hours-card,
    .feedback__panel {
        padding: 24px 20px;
    }

    .feedback__panel .booking-form {
        grid-template-columns: 1fr;
    }

    .feedback__panel .booking-form__footer .btn {
        width: 100%;
        justify-content: center;
    }

    .terms__item {
        grid-template-columns: 28px 1fr;
        gap: 12px;
    }

    .map-frame__map {
        height: 280px;
    }
}

/* =========================================================
   ДОКУМЕНТЫ: оглавление и нумерация разделов
   ========================================================= */

.legal__toc {
    margin-bottom: 40px;
    padding: 24px 28px;
    border: 1px solid rgba(199, 154, 91, 0.3);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.legal__toc-title {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.legal__toc-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.legal__toc-list li {
    counter-increment: toc;
    font-size: 14px;
    line-height: 1.5;
}

.legal__toc-list li::before {
    content: counter(toc) ". ";
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-gold);
}

.legal__toc-list a {
    color: var(--color-text);
    transition: color var(--transition);
}

.legal__toc-list a:hover {
    color: var(--color-gold);
}

/* заголовок раздела не должен прятаться под зафиксированной шапкой,
   когда переход идёт по ссылке из оглавления */
.legal__body h2 {
    scroll-margin-top: calc(var(--header-height) + 20px);
}

@media (max-width: 767px) {

    .legal__toc {
        padding: 20px;
    }

    .legal__toc-list {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ОКНО О ФАЙЛАХ COOKIE
   Панель внизу экрана поверх сайта, за ней лёгкое затемнение.
   Пока выбор не сделан, страница заблокирована.
   ========================================================= */

.cookie {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: flex-end;
}

.cookie[hidden] {
    display: none;
}

/* Затемнение заметное, но не глухое: акцент на окне, при этом видно,
   что за ним сайт, а не пустая заглушка. */
.cookie__veil {
    position: absolute;
    inset: 0;
    background-color: rgba(23, 16, 11, 0.45);
}

/* прокрутка страницы под окном заблокирована: пользоваться сайтом
   до выбора нельзя, это требование заказчика */
.has-cookie-notice,
.has-cookie-notice body {
    overflow: hidden;
}

.has-cookie-notice .to-top {
    display: none;
}

.cookie__panel {
    position: relative;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    border-top: 1px solid rgba(199, 154, 91, 0.4);
    background-color: var(--color-cream);
    box-shadow: 0 -16px 40px rgba(23, 16, 11, 0.22);
}

.cookie__inner {
    padding-top: 24px;
    padding-bottom: 24px;
}

.cookie__title {
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 600;
    color: var(--color-brown);
}

.cookie__text {
    max-width: 820px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.cookie__link {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-brown);
}

.cookie__link:hover {
    color: var(--color-gold);
}

/*
 * Скрытый экран обязан прятаться. Правило display у вида перебивало
 * атрибут hidden, и кнопки первого экрана оставались видны поверх
 * настроек. Поэтому hidden прописан отдельно и стоит после.
 */
[data-cookie-view] {
    display: block;
}

[data-cookie-view][hidden] {
    display: none;
}

/* первый экран: текст сверху, кнопки под ним */
[data-cookie-view="intro"] .cookie__body {
    text-align: center;
}

[data-cookie-view="intro"] .cookie__text {
    margin-left: auto;
    margin-right: auto;
}

/* кнопки всегда идут в ряд по центру, в самом низу окна */
.cookie__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.cookie__btn {
    padding: 12px 20px;
    font-size: 14px;
}

/* экран настроек */
.cookie__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.cookie__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(199, 154, 91, 0.4);
    border-radius: var(--radius-pill);
    background-color: transparent;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-brown);
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}

.cookie__back:hover {
    border-color: var(--color-gold);
    background-color: rgba(199, 154, 91, 0.12);
}

/* стрелка «назад» это та же иконка, развёрнутая зеркально */
.cookie__back img {
    transform: scaleX(-1);
}

.cookie__groups {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(199, 154, 91, 0.28);
}

.cookie-group {
    padding: 16px 0;
    border-bottom: 1px solid rgba(199, 154, 91, 0.28);
}

.cookie-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cookie-group__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-brown);
}

.cookie-group__always {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--color-gold);
}

/* кнопка раскрытия описания */
.cookie-group__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition);
}

.cookie-group__more:hover {
    color: var(--color-brown);
}

/* значок раскрытия: уголок вниз, при открытии разворачивается вверх */
.cookie-group__chevron {
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s ease;
}

.cookie-group.is-open .cookie-group__chevron {
    transform: translateY(1px) rotate(-135deg);
}

/*
 * Раскрытие описания. Строка сетки растёт от 0fr до 1fr, поэтому высота
 * анимируется по настоящему содержимому и её не нужно задавать числом.
 */
.cookie-group__reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}

.cookie-group.is-open .cookie-group__reveal {
    grid-template-rows: 1fr;
}

.cookie-group__reveal > div {
    overflow: hidden;
}

.cookie-group__text {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--color-text-muted);
}

/* тумблер */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    cursor: pointer;
}

.switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.switch__track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    border-radius: var(--radius-pill);
    background-color: rgba(58, 42, 29, 0.25);
    transition: background-color var(--transition);
}

.switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--color-white);
    transition: transform 0.22s ease;
}

.switch__input:checked + .switch__track {
    background-color: var(--color-gold);
}

.switch__input:checked + .switch__track::after {
    transform: translateX(20px);
}

.switch__input:focus-visible + .switch__track {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.switch__label {
    min-width: 76px;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* ---------- экраны поменьше ---------- */
@media (max-width: 1023px) {

    .cookie__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767px) {

    .cookie__panel {
        max-height: 92vh;
    }

    .cookie__inner {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .cookie__title {
        font-size: 18px;
    }

    .cookie-group__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* если посетитель попросил ограничить анимацию, описание раскрывается сразу */
@media (prefers-reduced-motion: reduce) {

    .cookie-group__reveal,
    .cookie-group__chevron,
    .switch__track,
    .switch__track::after {
        transition: none;
    }
}

/* =========================================================
   ГЛАВНАЯ: ПЕРЕДЕЛКА ТРЁХ БЛОКОВ ПО МАКЕТУ
   Цветовая схема прежняя: коричневый, кремовый, золото.
   ========================================================= */

/* ---------- услуги: плитки поверх фотографий ---------- */
/* блок был слишком высоким: ужимаем отступы полосы и ряды мозаики */
.services--dark {
    padding-top: 84px;
    padding-bottom: 84px;
}

.services--dark .section-head {
    margin-bottom: 32px;
}

.services--dark .section-actions {
    margin-top: 28px;
}

/* селектор с .services--dark: у прежней сетки карточек он такой же,
   и без него старое правило в четыре колонки перебивало мозаику */
.services--dark .services__grid--tiles,
.services__grid--tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 165px;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* мозаика как в макете: первая плитка высокая, последняя широкая */
.services--dark .services__grid--tiles .service-tile:first-child,
.services__grid--tiles .service-tile:first-child {
    grid-row: span 2;
}

.services--dark .services__grid--tiles .service-tile:nth-child(4),
.services__grid--tiles .service-tile:nth-child(4) {
    grid-column: span 2;
}

/*
 * Плитки лежат на фотографии похожего тона и сливались с ней.
 * Отделяем тремя средствами сразу: заметнее обводка, глубокая тень
 * под плиткой и светлая линия по верхнему краю. Тень тут не украшение,
 * именно она отрывает плитку от фона.
 */
.service-tile {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(199, 154, 91, 0.5);
    border-radius: var(--radius-md);
    background-color: var(--color-brown);
    box-shadow: 0 18px 40px rgba(8, 5, 3, 0.55),
                inset 0 1px 0 rgba(244, 235, 221, 0.14);
    transition: border-color var(--transition), box-shadow 0.3s ease, transform 0.3s ease;
}

.service-tile:hover {
    transform: translateY(-3px);
    border-color: var(--color-gold);
    box-shadow: 0 22px 48px rgba(8, 5, 3, 0.6),
                inset 0 1px 0 rgba(244, 235, 221, 0.2);
}

.service-tile__link {
    display: block;
    height: 100%;
}

.service-tile__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-tile__link:hover .service-tile__img {
    transform: scale(1.04);
}

/* затемнение снизу, чтобы подпись читалась на любой фотографии */
.service-tile__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 16, 11, 0) 35%, rgba(23, 16, 11, 0.82));
}

.service-tile__body {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.service-tile__title {
    font-family: var(--font-serif);
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-white);
}

.service-tile__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--color-gold-light);
    transition: gap var(--transition);
}

.service-tile__link:hover .service-tile__more {
    gap: 12px;
}

/* ---------- отзывы: один отзыв на экран и коллаж справа ---------- */
/* Блок был заметно выше остальных: пустое место набиралось из отступов
   секции, запаса высоты карточки и зазоров вокруг точек и кнопки. */
.reviews {
    padding-top: 48px;
    padding-bottom: 48px;
}

/* Блок был длинноват. Ограничиваем ширину раскладки и убираем лишний
   воздух: отзыв читается лучше в узкой колонке, чем во всю страницу. */
.reviews__layout {
    max-width: 1080px;
    margin: 0 auto;
}

/* Без коллажа отзыв идёт одной колонкой по центру.
   Селектор из двух классов намеренно: основное правило раскладки
   стоит ниже по файлу и с одним классом перебивало это. */
.reviews__layout.reviews__layout--single {
    grid-template-columns: 1fr;
    max-width: 720px;
}

.reviews .section-head {
    margin-bottom: 18px;
}

/* росчерк под заголовком в этом блоке не нужен: он добавлял высоты */
.reviews .section-head__ornament {
    display: none;
}

.reviews .section-actions {
    margin-top: 18px;
}

.reviews__layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 32px;
}

/* Колонки обязаны уметь сжиматься. По умолчанию у дорожки grid ширина
   не меньше содержимого, а внутри лежит лента отзывов во всю ширину:
   без этого на узком экране блок распирал страницу вбок. */
.reviews__layout > * {
    min-width: 0;
}

/* Отзыв показывается по одному. Раньше в ленту помещались сразу четыре
   карточки, прокручивать было почти нечего, и из пяти точек работали две. */
.reviews__layout .review-card {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 24px;
    border: 0;
    background-color: transparent;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.reviews__layout .reviews__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
}

/* кавычки идут в строке с текстом, перед ним и после него */
.review-card__quote {
    font-family: var(--font-serif);
    font-size: 1.5em;
    line-height: 0;
    vertical-align: -0.12em;
    color: rgba(199, 154, 91, 0.85);
}

.reviews__layout .review-card__text {
    max-width: 460px;
    margin: 0 auto 14px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
}

.reviews__layout .review-card__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.review-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--color-brown);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-cream);
}

.reviews__layout .review-card__author {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-brown);
}

.reviews__layout .review-card__stars {
    margin: 0;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--color-gold);
}

.reviews__layout .reviews__nav--prev {
    left: -18px;
}

.reviews__layout .reviews__nav--next {
    right: -18px;
}

/* коллаж: снимки лежат внахлёст и слегка повёрнуты */
.reviews__shots {
    position: relative;
    aspect-ratio: 5 / 3;
}

.reviews__shot {
    position: absolute;
    margin: 0;
    padding: 8px;
    border-radius: 4px;
    background-color: var(--color-white);
    box-shadow: 0 14px 30px rgba(36, 23, 15, 0.18);
}

.reviews__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--color-beige);
}

.reviews__shot--1 {
    left: 0;
    top: 16%;
    width: 46%;
    height: 60%;
    transform: rotate(-3deg);
    z-index: 1;
}

.reviews__shot--2 {
    left: 30%;
    top: 0;
    width: 42%;
    height: 62%;
    transform: rotate(2deg);
    z-index: 2;
}

.reviews__shot--3 {
    right: 0;
    bottom: 4%;
    width: 44%;
    height: 58%;
    transform: rotate(-1.5deg);
    z-index: 3;
}

/* ---------- «Готовы попробовать?» вместо блока брони ---------- */
.ready-band {
    padding-top: 72px;
    padding-bottom: 72px;
    background-color: var(--color-cream);
}

.ready {
    position: relative;
    overflow: hidden;
    padding: 42px 46px;
    border-radius: var(--radius-lg);
    background-color: var(--color-dark);
    background-position: center;
    background-size: cover;
    color: var(--color-cream);
}

/* Тон полосы наш, коричневый, а не зелёный из макета:
   цветовая схема сайта не меняется. */
.ready__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(23, 16, 11, 0.94), rgba(23, 16, 11, 0.8) 60%, rgba(23, 16, 11, 0.9));
}

/* Слева заголовок и подпись, справа кнопка, под ней короткие обещания:
   расположение как в макете. */
.ready__inner {
    position: relative;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: 32px 40px;
}

.ready__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 26px;
}

.ready__title {
    margin: 0 0 10px;
    font-size: clamp(26px, 2.8vw, 38px);
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-white);
}

.ready__lead {
    max-width: 460px;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(244, 235, 221, 0.82);
}

.ready__btn {
    flex-shrink: 0;
    padding: 16px 30px;
}

.ready__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ready__fact {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(244, 235, 221, 0.8);
}

.ready__fact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid rgba(199, 154, 91, 0.42);
    border-radius: var(--radius-sm);
}

/* ---------- экраны поменьше ---------- */
@media (max-width: 1199px) {

    .reviews__layout {
        gap: 28px;
    }

    .services--dark .services__grid--tiles,
    .services__grid--tiles {
        grid-auto-rows: 175px;
    }
}

@media (max-width: 1023px) {

    /* мозаика распадается на две колонки, высокая и широкая плитки
       становятся обычными: иначе на планшете они наезжают друг на друга */
    .services--dark .services__grid--tiles,
    .services__grid--tiles {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 190px;
    }

    /*
     * Селектор обязан повторять .services--dark: базовое правило мозаики
     * записано и с этим классом, у него на один класс больше, и версия
     * без него мобильную растяжку не отменяла. Из-за этого на телефоне
     * у четвёртой плитки оставалось grid-column: span 2, сетка добирала
     * вторую колонку по содержимому, и две плитки сжимались до двух
     * пикселей: «Детские занятия» и «Фотосессии» просто пропадали.
     */
    .services--dark .services__grid--tiles .service-tile:first-child,
    .services--dark .services__grid--tiles .service-tile:nth-child(4),
    .services__grid--tiles .service-tile:first-child,
    .services__grid--tiles .service-tile:nth-child(4) {
        grid-row: auto;
        grid-column: auto;
    }

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

    .reviews__shots {
        max-width: 520px;
        margin: 0 auto;
    }

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

    .ready__side {
        align-items: stretch;
    }

    .ready__facts {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

@media (max-width: 767px) {

    .services--dark .services__grid--tiles,
    .services__grid--tiles {
        grid-template-columns: 1fr;
        grid-auto-rows: 200px;
    }

    .reviews__layout .review-card {
        padding: 24px 8px 20px;
    }

    .reviews__layout .reviews__nav--prev {
        left: -10px;
    }

    .reviews__layout .reviews__nav--next {
        right: -10px;
    }

    .ready {
        padding: 28px 20px;
    }

    .ready__btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   АБОНЕМЕНТЫ. Оформление по присланному макету.
   ========================================================= */

.page-passes {
    --section-space: 84px;
    --section-space-sm: 64px;
}


/* ---------- заголовок каталога и плашка со сроком ---------- */
.passes__head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    margin-bottom: 40px;
}

.passes__head-main {
    margin-bottom: 0;
}

.passes__note {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 240px;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid rgba(199, 154, 91, 0.35);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.passes__note img {
    flex-shrink: 0;
}

/* ---------- карточки абонементов ---------- */
.pass-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pass-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.pass-card--featured {
    border-color: var(--color-gold);
    box-shadow: 0 16px 40px rgba(36, 23, 15, 0.12);
}

.pass-card__media {
    position: relative;
}

/* Пока фотография не загружена, вместо пустого прямоугольника
   остаётся только полоса со значком: карточка выглядит собранной. */
.pass-card__media:not(:has(.pass-card__photo)) {
    height: 56px;
    border-bottom: 1px solid rgba(199, 154, 91, 0.28);
    background-color: var(--color-beige);
}

.pass-card__photo {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    background-color: var(--color-beige);
}

/* лента «Популярно» в левом верхнем углу снимка */
.pass-card__label {
    position: absolute;
    left: 0;
    top: 18px;
    padding: 7px 16px;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    background-color: var(--color-gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-dark);
}

/* кружок со значком лошади заходит на нижний край снимка */
.pass-card__badge {
    position: absolute;
    left: 26px;
    bottom: -22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(199, 154, 91, 0.45);
    border-radius: 50%;
    background-color: var(--color-white);
}

.pass-card--featured .pass-card__badge {
    border-color: var(--color-gold);
    background-color: var(--color-gold);
}

.pass-card__badge img,
.passes__note img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.passes__note img {
    width: 22px;
    height: 22px;
}

.pass-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 38px 26px 26px;
}

.pass-card__title {
    margin-bottom: 10px;
    font-size: clamp(20px, 1.8vw, 24px);
}

.pass-card__price {
    margin: 0 0 4px;
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-brown);
}

.pass-card__per {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--color-gold);
}

/* Над списком проходит золотистая линия, она приходит из прежнего
   правила карточки. Без отступа первая строка «Занятий» ложилась
   вплотную к ней. */
.pass-card__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 24px;
    padding: 16px 0 0;
    list-style: none;
}

.pass-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text);
}

.pass-card__list img {
    flex-shrink: 0;
    margin-top: 2px;
}

.pass-card__btn {
    align-self: flex-start;
    margin-top: auto;
}

/* ---------- тёмная полоса с выгодами ---------- */
.perks-band {
    padding-top: 0;
    background-color: var(--color-cream);
}

.perks {
    position: relative;
    overflow: hidden;
    padding: 40px 44px;
    border-radius: var(--radius-md);
    background-color: var(--color-dark);
    background-position: center;
    background-size: cover;
    color: var(--color-cream);
}

.perks__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(23, 16, 11, 0.95), rgba(23, 16, 11, 0.86) 55%, rgba(23, 16, 11, 0.7));
}

.perks__inner {
    position: relative;
    display: grid;
    grid-template-columns: 0.75fr 2.25fr;
    align-items: center;
    gap: 40px;
}

.perks__eyebrow {
    color: var(--color-gold-light);
}

.perks__title {
    margin: 0;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.2;
    color: var(--color-white);
}

.perks__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.perk {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perk__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
    border: 1px solid rgba(199, 154, 91, 0.42);
    border-radius: 50%;
}

.perk__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-white);
}

.perk__text {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(244, 235, 221, 0.75);
}

/* ---------- заявка на абонемент ---------- */
.pass-form-section {
    position: relative;
    overflow: hidden;
    background-color: var(--color-beige);
}

.pass-form__grid {
    position: relative;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 48px;
}

.pass-form__title {
    margin-bottom: 14px;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.2;
}

.pass-form__lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.pass-form__panel {
    padding: 32px 34px;
    border: 1px solid rgba(199, 154, 91, 0.3);
    border-radius: var(--radius-lg);
    background-color: var(--color-cream);
}

.pass-form__panel .booking-form {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    gap: 18px;
}

/* ---------- строка с замочком под кнопкой отправки ---------- */
.form-safe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    grid-column: 1 / -1;
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.form-safe img {
    flex-shrink: 0;
    opacity: 0.8;
}

/* ---------- экраны поменьше ---------- */
@media (max-width: 1199px) {

    .passes__note {
        position: static;
        max-width: none;
    }

    .passes__head {
        flex-direction: column;
        align-items: center;
    }

    .perks__inner {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .perks__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1023px) {

    .pass-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pass-form__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

}

@media (max-width: 767px) {

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

    .perks {
        padding: 28px 20px;
    }

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

    .pass-form__panel {
        padding: 24px 20px;
    }

    .pass-form__panel .booking-form {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   СООБЩЕНИЕ СОТРУДНИКУ КЛУБА

   Раньше на месте формы стоял обычный заголовок секции
   с абзацем и кнопкой: выглядело так, будто страница
   недогрузилась. Теперь это спокойная карточка-уведомление.
   ========================================================= */

.staff-section {
    padding-top: 0;
}

.staff-card {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
    padding: 26px 30px;
    border: 1px solid rgba(199, 154, 91, 0.35);
    border-left: 3px solid var(--color-gold);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.staff-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: rgba(199, 154, 91, 0.16);
}

.staff-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.staff-card__title {
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-brown);
}

.staff-card__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.staff-card__btn {
    flex-shrink: 0;
}

@media (max-width: 767px) {

    .staff-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 20px;
    }

    .staff-card__btn {
        width: 100%;
        justify-content: center;
    }
}

/* небольшой отступ сверху у блока заявки на абонемент */
.pass-form-section {
    padding-top: 40px;
}

/* =========================================================
   УСЛУГИ: каталог широкими карточками
   Шапка и подвал страницы не затронуты, меняется только
   блок «Что мы предлагаем».
   ========================================================= */

.services--list .section-head {
    margin-bottom: 44px;
}

.srv-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.srv {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    transition: border-color var(--transition), box-shadow 0.3s ease;
}

.srv:hover {
    border-color: rgba(199, 154, 91, 0.6);
    box-shadow: 0 14px 34px rgba(36, 23, 15, 0.1);
}

/* чётные карточки зеркалим: фотография уходит вправо */
.srv--mirror .srv__media {
    order: 2;
}

.srv__media {
    position: relative;
    min-height: 280px;
    background-color: var(--color-beige);
}

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

/* значок услуги лежит на углу фотографии */
.srv__badge {
    position: absolute;
    left: 20px;
    top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(23, 16, 11, 0.72);
}

.srv--mirror .srv__badge {
    left: auto;
    right: 20px;
}

.srv__body {
    display: flex;
    flex-direction: column;
    padding: 34px 38px;
}

.srv__title {
    margin-bottom: 10px;
    font-size: clamp(22px, 2.1vw, 28px);
}

.srv__text {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-text-muted);
}

/* факты об услуге: цена, длительность, формат, уровень */
.srv__facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 22px;
    margin: 0 0 26px;
    padding: 20px 0 0;
    border-top: 1px solid rgba(199, 154, 91, 0.28);
    list-style: none;
}

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

.srv-fact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: rgba(199, 154, 91, 0.14);
}

.srv-fact__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.srv-fact__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.srv-fact__value {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-brown);
}

.srv__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.srv__offline {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* ---------- экраны поменьше ---------- */
@media (max-width: 1023px) {

    .srv,
    .srv--mirror {
        grid-template-columns: 1fr;
    }

    /* при одной колонке фотография всегда сверху, зеркальность не нужна */
    .srv--mirror .srv__media {
        order: 0;
    }

    .srv--mirror .srv__badge {
        left: 20px;
        right: auto;
    }

    .srv__media {
        min-height: 240px;
    }
}

@media (max-width: 767px) {

    .srv__body {
        padding: 24px 20px;
    }

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

    .srv__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   УСЛУГИ: фотография в блоке «Не знаете, с чего начать?»
   ========================================================= */

.cta--photo {
    position: relative;
    background-position: center;
    background-size: cover;
}

/* вуаль нужна, чтобы текст читался на любом снимке */
.cta--photo .cta__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 16, 11, 0.86), rgba(23, 16, 11, 0.78));
}

.cta--photo .cta__inner {
    position: relative;
}

/* =========================================================
   КАТАЛОГ ЛОШАДЕЙ: новые карточки
   Фильтр по назначению и кнопка «Показать ещё» работают
   на прежних классах, скрипт не менялся.
   ========================================================= */

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

.horse-card {
    overflow: hidden;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    transition: border-color var(--transition), transform 0.3s ease, box-shadow 0.3s ease;
}

.horse-card:hover {
    transform: translateY(-4px);
    border-color: rgba(199, 154, 91, 0.6);
    box-shadow: 0 16px 36px rgba(36, 23, 15, 0.12);
}

/*
 * Вся карточка это одна ссылка, поэтому внутри только строчные элементы.
 * Свойства ниже перекрывают прежнее правило .horse-card__link, где ссылка
 * была маленькой подписью «Подробнее»: там стоят align-items: center
 * и align-self: flex-start, из-за них блок с фотографией не растягивался
 * и схлопывался в нулевую ширину.
 */
.horse-card__link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: auto;
    gap: 0;
    height: 100%;
    margin-top: 0;
    padding-bottom: 0;
    border: 0;
    font-size: inherit;
    font-weight: 400;
    color: inherit;
}

.horse-card__link:hover {
    color: inherit;
    border-bottom-color: transparent;
}

.horse-card__media {
    position: relative;
    display: block;
    aspect-ratio: 5 / 4;
    background-color: var(--color-brown);
}

.horse-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.horse-card__link:hover .horse-card__img {
    transform: scale(1.04);
}

/* заглушка вместо фотографии: знак клуба на тёмном поле */
.horse-card__blank {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
}

/* назначение лошади подписью на снимке */
.horse-card__tag {
    position: absolute;
    left: 14px;
    top: 14px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background-color: rgba(23, 16, 11, 0.72);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-cream);
}

.horse-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 24px 24px;
}

.horse-card__head {
    display: block;
    margin-bottom: 12px;
}

.horse-card__name {
    display: block;
    margin-bottom: 3px;
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-brown);
}

.horse-card__breed {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.horse-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.horse-chip {
    padding: 5px 12px;
    border: 1px solid rgba(199, 154, 91, 0.4);
    border-radius: var(--radius-pill);
    font-size: 12px;
    color: var(--color-text);
}

.horse-card__text {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 18px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.horse-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gold);
    transition: gap var(--transition);
}

.horse-card__link:hover .horse-card__more {
    gap: 13px;
}

/* ---------- экраны поменьше ---------- */
@media (max-width: 1023px) {

    .horses__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 767px) {

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

    .horse-card__body {
        padding: 20px;
    }
}

/* =========================================================
   КАТАЛОГ ЛОШАДЕЙ: раздел целиком
   Шапка приведена к общему виду страниц сайта, фильтры
   и нижняя часть переоформлены. Подвал не затронут.
   ========================================================= */

.horses .section-head {
    margin-bottom: 32px;
}

/* фильтры: ряд по центру, выбранный залит золотом */
.filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.filters__btn {
    padding: 11px 24px;
    border: 1px solid rgba(199, 154, 91, 0.4);
    border-radius: var(--radius-pill);
    background-color: var(--color-white);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}

.filters__btn:hover {
    border-color: var(--color-gold);
    color: var(--color-brown);
}

.filters__btn.is-active {
    border-color: var(--color-gold);
    background-color: var(--color-gold);
    font-weight: 600;
    color: var(--color-dark);
}

/*
 * Каталог прижат к шапке и подвалу плотнее остальных секций: карточки
 * раскрываются по три, и общий шаг в 120 точек оставлял слишком много
 * воздуха сверху и снизу.
 */
.section.horses {
    padding-top: 72px;
    padding-bottom: 72px;
}

/* нижняя часть: кнопка и счётчик по центру, с разделительной линией */
.horses__more {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(199, 154, 91, 0.28);
}

/*
 * Правило display перебивает атрибут hidden, и спрятанный блок продолжает
 * занимать место. На каталоге лошадей это давало пустую полосу больше ста
 * точек между последней карточкой и подвалом.
 */
.horses__more[hidden],
.horses__empty[hidden],
.horses__more .btn[hidden] {
    display: none;
}

/* у кнопки «Свернуть» та же стрелка, только смотрит вверх */
.horses__less-icon {
    transform: rotate(-90deg);
}

/* Карточки, показанные нажатием на кнопку, проявляются по очереди */
@keyframes horse-card-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.horse-card.is-fresh {
    animation: horse-card-in 0.45s ease both;
}

@media (prefers-reduced-motion: reduce) {

    .horse-card.is-fresh {
        animation: none;
    }
}

.horses__counter {
    margin: 14px 0 0;
    font-size: 13px;
    text-align: center;
    color: var(--color-text-muted);
}

.horses__empty {
    margin: 32px 0 0;
    padding: 26px;
    border: 1px dashed rgba(199, 154, 91, 0.45);
    border-radius: var(--radius-md);
    font-size: 15px;
    text-align: center;
    color: var(--color-text-muted);
}

@media (max-width: 767px) {

    .section.horses {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .filters {
        gap: 8px;
        margin-bottom: 28px;
    }

    .filters__btn {
        padding: 9px 18px;
        font-size: 13px;
    }
}

/* ==========================================================================
   Контакты: визуальное обновление
   Коробки заменены линиями, у карточек дороги появились номера,
   карточка адреса приподнята над картой.
   ========================================================================== */

/* ---------- связь одной визиткой ---------- */

/* Пять отдельных белых коробок дробили колонку. Теперь это одна
   карточка, строки в ней разделены волосяной золотой линией. */
.page-contacts .contact-cards {
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(199, 154, 91, 0.35);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    box-shadow: var(--shadow-soft);
}

.page-contacts .contact-card + .contact-card {
    border-top: 1px solid rgba(199, 154, 91, 0.22);
}

.page-contacts .contact-card__link {
    position: relative;
    padding: 15px 40px 15px 22px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    transition: background-color var(--transition);
}

/* золотая полоска у левого края, растёт снизу вверх */
.page-contacts .contact-card__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--color-gold);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.25s ease;
}

/* уголок справа, подсказывает, что строка кликается */
.page-contacts .contact-card__link::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid rgba(199, 154, 91, 0.75);
    border-right: 1.5px solid rgba(199, 154, 91, 0.75);
    transform: translate(0, -50%) rotate(45deg);
    transition: transform 0.25s ease;
}

.page-contacts .contact-card__link:hover {
    transform: none;
    background-color: rgba(199, 154, 91, 0.09);
}

.page-contacts .contact-card__link:hover::before {
    transform: scaleY(1);
}

.page-contacts .contact-card__link:hover::after {
    transform: translate(4px, -50%) rotate(45deg);
}

.page-contacts .contact-card__icon {
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    transition: border-color var(--transition);
}

.page-contacts .contact-card__link:hover .contact-card__icon {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(199, 154, 91, 0.18);
}

.page-contacts .contact-card__value {
    font-size: 17px;
    letter-spacing: 0.01em;
}

/* ---------- цитата в тон палитре ---------- */

/* Была болотно-зелёная подложка, чужая для коричнево-золотой схемы. */
.page-contacts .contacts__quote {
    padding: 30px 26px 26px;
    border: 1px solid rgba(199, 154, 91, 0.3);
    background-color: var(--color-brown);
}

.page-contacts .contacts__quote-mark {
    left: 24px;
    top: 12px;
    font-size: 52px;
    color: rgba(199, 154, 91, 0.45);
}

.page-contacts .contacts__quote blockquote {
    padding-top: 20px;
    font-family: var(--font-serif);
    font-size: 19px;
    line-height: 1.45;
}

.page-contacts .contacts__photo {
    box-shadow: var(--shadow-soft);
}

/* ---------- адрес поверх карты ---------- */

/* Две колонки только там, где они помещаются. Правило дописано в конец
   файла и без этой рамки перебивало мобильное «в одну колонку»,
   из-за чего карта на телефоне сжималась до сотни точек. */
@media (min-width: 768px) {

    .page-contacts .address__grid {
        grid-template-columns: 0.95fr 1.25fr;
        align-items: center;
        gap: 0 40px;
    }
}

.page-contacts .address__content {
    position: relative;
    z-index: 1;
    padding: 38px 36px;
    border: 1px solid rgba(199, 154, 91, 0.32);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    box-shadow: var(--shadow-soft);
}

.page-contacts .address__actions {
    margin-top: 4px;
}

.page-contacts .map-frame {
    border-color: rgba(199, 154, 91, 0.32);
    box-shadow: var(--shadow-soft);
}

.page-contacts .map-frame__map {
    height: 480px;
}

/* Наложение включается только там, где для него есть ширина.
   Ниже 1200 колонки и так узкие, карточка налезла бы на карту. */
@media (min-width: 1200px) {

    .page-contacts .address__content {
        margin-right: -56px;
    }
}

/* ---------- как добраться: номера вместо повторяющейся булавки ---------- */

/* На всех трёх карточках стояла одна и та же булавка, она ничего
   не сообщала. Номер читается быстрее и задаёт порядок. */
.page-contacts .route-card {
    position: relative;
    overflow: hidden;
    padding: 32px 28px 28px;
    border-color: rgba(199, 154, 91, 0.32);
    transition: transform 0.25s ease, border-color var(--transition), box-shadow 0.25s ease;
}

.page-contacts .route-card::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 0;
    height: 2px;
    background-color: var(--color-gold);
}

.page-contacts .route-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-gold);
    box-shadow: var(--shadow-soft);
}

.route-card__num {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-serif);
    font-size: 46px;
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
    color: rgba(199, 154, 91, 0.55);
}

.page-contacts .route-card__title {
    margin-bottom: 14px;
    font-size: 21px;
}

@media (max-width: 900px) {

    .page-contacts .address__content {
        margin-right: 0;
        padding: 28px 24px;
    }

    .page-contacts .map-frame__map {
        height: 360px;
    }

    .page-contacts .contact-card__link {
        padding-right: 34px;
    }

    .route-card__num {
        font-size: 38px;
    }
}

/* ==========================================================================
   Кабинет: меню на узких экранах
   Раньше боковая панель просто становилась первым блоком страницы:
   логотип, пункты вперемешку в две строки и кнопка выхода занимали
   почти весь первый экран, а до содержимого надо было прокручивать.
   Теперь наверху узкая полоса с названием раздела и кнопкой, само меню
   выезжает панелью слева.
   ========================================================================== */

/* На широких экранах ничего этого нет */
.cab__bar,
.cab__scrim,
.cab__close {
    display: none;
}

@media (max-width: 900px) {

    /* --- полоса наверху --- */
    .cab__bar {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 14px;
        border-bottom: 1px solid rgba(199, 154, 91, 0.3);
        background-color: var(--color-dark);
    }

    .cab__bar-logo {
        display: block;
        flex-shrink: 0;
    }

    .cab__bar-logo img {
        display: block;
        width: auto;
        height: 34px;
    }

    /* название открытого раздела, обновляется при переключении */
    .cab__bar-title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        font-family: var(--font-nav);
        font-size: 13px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(233, 216, 193, 0.75);
    }

    .cab__burger {
        display: flex;
        flex-shrink: 0;
        border-color: rgba(233, 216, 193, 0.35);
    }

    /* --- сама панель --- */
    .cab__side {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 60;
        width: min(320px, 86vw);
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        box-shadow: 0 0 40px rgba(8, 5, 3, 0.5);
    }

    .cab.is-menu-open .cab__side {
        transform: translateX(0);
    }

    /* position: relative обязателен. При static затемняющая подложка
       .cab__side-overlay, которая лежит в разметке выше и позиционирована
       абсолютно, рисуется поверх меню, и оно пропадало целиком */
    .cab__side-inner {
        position: relative;
        z-index: 1;
        min-height: 100%;
        padding: 22px 20px 24px;
    }

    .cab__close {
        position: absolute;
        right: 14px;
        top: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(233, 216, 193, 0.3);
        border-radius: var(--radius-sm);
    }

    .cab__close img {
        width: 16px;
        height: 16px;
    }

    .cab__logo {
        margin-bottom: 28px;
    }

    .cab__logo img {
        max-width: 150px;
    }

    /* Пункты идут столбиком. В прежней раскладке они переносились
       в несколько строк и читались как набор кнопок, а не как меню. */
    .cab-nav__list {
        flex-direction: column;
        gap: 4px;
    }

    .cab-nav__link {
        padding: 13px 14px;
        font-size: 16px;
    }

    .cab__logout {
        margin-top: 24px;
    }

    /* --- затемнение --- */
    .cab__scrim {
        position: fixed;
        inset: 0;
        z-index: 50;
        display: block;
        background-color: rgba(8, 5, 3, 0.55);
        opacity: 0;
        transition: opacity 0.28s ease;
    }

    .cab__scrim[hidden] {
        display: none;
    }

    .cab.is-menu-open .cab__scrim {
        opacity: 1;
    }
}

/* пока панель открыта, страница под ней не прокручивается */
body.is-cab-menu-open {
    overflow: hidden;
}

/* ==========================================================================
   Переключатель языка в выпадающем меню
   В строке шапки он остаётся прежней компактной пилюлей. Здесь, среди
   пунктов меню и широкой кнопки кабинета, маленькая пилюля у левого края
   выглядела случайной, поэтому в меню это отдельный блок во всю ширину.
   ========================================================================== */

/* полные названия нужны только в меню */
.lang__full {
    display: none;
}

@media (max-width: 1023px) {

    .nav__lang {
        padding-top: 18px;
        border-top: 1px solid rgba(199, 154, 91, 0.28);
    }

    .nav__lang-label {
        display: block;
        margin-bottom: 10px;
        font-family: var(--font-nav);
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(233, 216, 193, 0.6);
    }

    /* две равные половины во всю ширину меню */
    .nav__utils .lang--wide {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
        align-self: stretch;
        padding: 5px;
        border-radius: var(--radius-md);
    }

    .nav__utils .lang--wide .lang__btn {
        justify-content: center;
        gap: 9px;
        padding: 12px 8px;
        border-radius: var(--radius-sm);
        font-size: 14px;
    }

    .nav__utils .lang--wide .lang__short {
        display: none;
    }

    .nav__utils .lang--wide .lang__full {
        display: inline;
    }

    .nav__utils .lang--wide .lang__btn img {
        width: 22px;
    }
}

/* ==========================================================================
   Кабинет: переключатель языка на узких экранах
   В шапке рабочей области он оставался тёмной стеклянной пилюлей,
   рассчитанной на фотографию под ней, и на кремовом фоне рядом с широкой
   карточкой «Мы на карте» смотрелся чужеродно. На телефоне он переезжает
   в выдвижное меню, к остальным настройкам.
   ========================================================================== */

.cab__lang {
    display: none;
}

@media (max-width: 900px) {

    /* в шапке рабочей области его больше нет */
    .cab__top-actions .lang {
        display: none;
    }

    .cab__lang {
        display: block;

        /* прижимает блок вниз панели, а не кнопку выхода:
           у .cab__logout margin-top: auto перешёл сюда */
        margin-top: auto;
        padding-top: 22px;
        border-top: 1px solid rgba(233, 216, 193, 0.22);
    }

    .cab__lang-label {
        display: block;
        margin-bottom: 10px;
        font-family: var(--font-nav);
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(233, 216, 193, 0.6);
    }

    .cab__lang .lang--wide {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
        padding: 5px;
        border-radius: var(--radius-md);
    }

    .cab__lang .lang--wide .lang__btn {
        justify-content: center;
        gap: 9px;
        padding: 12px 8px;
        border-radius: var(--radius-sm);
        font-size: 14px;
    }

    .cab__lang .lang--wide .lang__short {
        display: none;
    }

    .cab__lang .lang--wide .lang__full {
        display: inline;
    }

    .cab__lang .lang--wide .lang__btn img {
        width: 22px;
    }

    .cab__logout {
        margin-top: 16px;
    }
}

/* ==========================================================================
   Вход и регистрация на телефоне
   Фотография превращалась в узкую полосу сверху, кадр в ней обрезался
   как попало, и до полей приходилось прокручивать. На узком экране
   она больше не показывается: остаются логотип, заголовок и форма.
   ========================================================================== */

@media (max-width: 767px) {

    .login__media {
        display: none;
    }

    .login {
        grid-template-columns: 1fr;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .login__panel {
        align-items: flex-start;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 34px 20px 40px;
    }

    /* форма регистрации на телефоне такой же ширины, как форма входа */
    .login__inner,
    .login__inner--wide {
        max-width: 440px;
        margin: 0 auto;
    }

    .login__logo {
        margin-bottom: 24px;
    }

    .login__logo img {
        width: 170px;
    }

    .login__title {
        font-size: 27px;
    }

    .login__text {
        margin-bottom: 22px;
        font-size: 15px;
    }
}

/* ==========================================================================
   Главная на телефоне: фотография «О клубе» и лента отзывов
   ========================================================================== */

/* ---------- лента отзывов ----------

   Карточка вылезала за экран: ширина дорожки задана процентами,
   а сама дорожка лежит внутри flex-контейнера и без явной ширины
   растёт по содержимому. Проценты в таком случае не от чего считать,
   и карточка получала свою «естественную» ширину около 670 точек.
   На широких экранах это не замечалось: там ширину дорожке задаёт
   отдельное правило в блоке от 1024 точек. */
.reviews__layout .reviews__track {
    width: 100%;
    min-width: 0;
}

.reviews__layout .reviews__viewport {
    width: 100%;
}

/* ---------- фотография в блоке «О клубе» ---------- */

@media (max-width: 900px) {

    /* На широком экране снимок сужен до 81 процента: справа от него
       лежит карточка с годом основания. В одну колонку эта хитрость
       уже не нужна, а выглядела она как случайно съехавшее фото. */
    .about__photo {
        width: 100%;
    }
}

@media (max-width: 767px) {

    /* Снимки в админке вертикальные, а рамка требовала 4 к 3,
       и от фотографии оставалась узкая полоса. На телефоне
       показываем кадр целиком, как он загружен. */
    .about__photo {
        aspect-ratio: auto;
        height: auto;
    }

    /* Карточка с годом основания перестаёт лежать поверх снимка:
       на узком экране она закрывала его нижнюю треть. */
    .about__card {
        position: static;
        max-width: none;
        margin-top: 14px;
    }
}

/* ==========================================================================
   Иллюстрация за формой заявки на абонемент
   Гравюра прислана владельцем и лежит в поле страницы, а не в CSS,
   поэтому её можно заменить из админки.
   ========================================================================== */

.pass-form__art {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: min(1180px, 94%);
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    /* Было 0.17, рисунок почти не читался. Текст поверх остаётся
       разборчивым: он тёмно-коричневый, а самые плотные места рисунка
       на кремовом фоне не темнее середины тона. */
    opacity: 0.3;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* содержимое обязано лежать выше рисунка */
.pass-form-section > .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 1199px) {

    .pass-form__art {
        width: 100%;
        opacity: 0.24;
    }
}

/* На узком экране колонки складываются друг под друга,
   и рисунок оказался бы прямо под полями формы. */
@media (max-width: 900px) {

    .pass-form__art {
        display: none;
    }
}

/* ==========================================================================
   Уведомления в кабинете
   ========================================================================== */

/* счётчик непрочитанных в пункте меню */
.cab-nav__count {
    margin-left: auto;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background-color: var(--color-gold-light);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: lining-nums tabular-nums;
    text-align: center;
    color: var(--color-dark);
}

.cab-nav__count[hidden] {
    display: none;
}

/* у выбранного пункта фон уже золотой, счётчик делаем тёмным */
.cab-nav__link.is-active .cab-nav__count {
    background-color: var(--color-dark);
    color: var(--color-gold-light);
}

.cab-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.cab-block__head .cab-block__title {
    margin-bottom: 0;
}

.btn--small {
    padding: 9px 16px;
    font-size: 13px;
}

.cab-notify {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cab-notify__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

/* непрочитанное выделяем полосой слева и тёплой подложкой */
.cab-notify__item.is-unread {
    border-color: rgba(199, 154, 91, 0.55);
    background-color: rgba(199, 154, 91, 0.09);
}

/* цветная метка вида уведомления */
.cab-notify__mark {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background-color: var(--color-gold);
}

.cab-notify__mark--payment {
    background-color: #6f8f5a;
}

.cab-notify__mark--pass {
    background-color: #a4674a;
}

.cab-notify__mark--system {
    background-color: var(--color-text-muted);
}

.cab-notify__body {
    flex: 1 1 auto;
    min-width: 0;
}

.cab-notify__text {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text);
}

.cab-notify__item.is-unread .cab-notify__text {
    font-weight: 600;
    color: var(--color-brown);
}

.cab-notify__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.cab-notify__link {
    font-weight: 600;
    color: var(--color-brown);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cab-notify__link:hover {
    color: var(--color-gold);
}

.cab-notify__read {
    flex-shrink: 0;
}

/* кружок «прочитано»: заливается при наведении */
.cab-notify__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(199, 154, 91, 0.5);
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
}

.cab-notify__btn:hover {
    border-color: var(--color-gold);
    background-color: rgba(199, 154, 91, 0.2);
}

.cab-notify__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-gold);
}

/* пока область обновляется, слегка гасим её */
#notifyLive.is-loading {
    opacity: 0.6;
}

@media (max-width: 767px) {

    .cab-block__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cab-notify__item {
        padding: 14px;
        gap: 10px;
    }
}

/* пояснение под заголовком блока в кабинете */
.cab-hint {
    max-width: 640px;
    margin: -6px 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Карточка действующего абонемента в кабинете
   ========================================================================== */

.cab-pass {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 26px 30px;
    border: 1px solid rgba(199, 154, 91, 0.4);
    border-radius: var(--radius-lg);
    background-color: var(--color-dark);
    color: var(--color-cream);
}

.cab-pass__head {
    margin-bottom: 16px;
}

.cab-pass__eyebrow {
    margin-bottom: 6px;
    color: var(--color-gold-light);
}

.cab-pass__title {
    margin: 0;
    font-size: clamp(20px, 2vw, 26px);
    color: var(--color-white);
}

.cab-pass__count {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}

.cab-pass__number {
    font-family: var(--font-serif);
    font-size: 52px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-gold-light);
}

.cab-pass__word {
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(233, 216, 193, 0.75);
}

/* полоса показывает, сколько занятий уже использовано */
.cab-pass__bar {
    height: 6px;
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background-color: rgba(233, 216, 193, 0.2);
}

.cab-pass__bar-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background-color: var(--color-gold);
}

.cab-pass__of,
.cab-pass__until {
    margin: 0 0 4px;
    font-size: 13px;
    font-variant-numeric: lining-nums tabular-nums;
    color: rgba(233, 216, 193, 0.7);
}

.cab-pass__warn {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(233, 216, 193, 0.2);
    font-size: 14px;
    color: var(--color-gold-light);
}

/* когда занятий почти не осталось, рамка становится заметнее */
.cab-pass.is-low {
    border-color: var(--color-gold);
}

@media (max-width: 767px) {

    .cab-pass {
        padding: 20px;
    }

    .cab-pass__number {
        font-size: 42px;
    }
}

/* ==========================================================================
   Подарочный абонемент: кнопка, окно и экран получения
   ========================================================================== */

.pass-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.pass-card__actions .pass-card__btn {
    flex: 1 1 auto;
    margin-top: 0;
}

/* «Подарить» рядом с «Оформить»: тише основной кнопки, но заметно */
.btn--gift {
    flex: 0 0 auto;
    border: 1px solid rgba(199, 154, 91, 0.6);
    background-color: transparent;
    color: var(--color-brown);
}

.btn--gift:hover {
    border-color: var(--color-gold);
    background-color: rgba(199, 154, 91, 0.14);
}

/*
 * У выделенной карточки фон такой же светлый, как у остальных, поэтому
 * никаких отдельных цветов кнопке не нужно. Раньше здесь стоял кремовый
 * текст, рассчитанный на тёмную подложку, и кнопка выглядела выцветшей,
 * будто её нельзя нажать.
 */

.btn--gift .btn__icon {
    width: 18px;
    height: 18px;
}

/* ---------- окно ---------- */

.gift-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gift-modal[hidden] {
    display: none;
}

.gift-modal.is-open {
    opacity: 1;
}

.gift-modal__scrim {
    position: fixed;
    inset: 0;
    background-color: rgba(8, 5, 3, 0.65);
}

.gift-modal__window {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 620px;
    margin: auto;
    padding: 34px 36px 30px;
    border: 1px solid rgba(199, 154, 91, 0.4);
    border-radius: var(--radius-lg);
    background-color: var(--color-cream);
    box-shadow: 0 30px 70px rgba(8, 5, 3, 0.5);
    transform: translateY(12px);
    transition: transform 0.25s ease;
}

.gift-modal.is-open .gift-modal__window {
    transform: translateY(0);
}

.gift-modal__close {
    position: absolute;
    right: 16px;
    top: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(199, 154, 91, 0.4);
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}

.gift-modal__close:hover {
    border-color: var(--color-gold);
    background-color: rgba(199, 154, 91, 0.15);
}

.gift-modal__close img {
    width: 16px;
    height: 16px;
}

/* На телефоне окно занимает почти весь экран, и кнопка закрытия
   становится основным способом из него выйти: делаем её заметнее. */
@media (max-width: 767px) {

    .gift-modal__close {
        right: 12px;
        top: 12px;
        width: 42px;
        height: 42px;
        border-color: rgba(199, 154, 91, 0.7);
        background-color: var(--color-white);
    }

    .gift-modal__close img {
        width: 18px;
        height: 18px;
    }
}

.gift-modal__eyebrow {
    margin-bottom: 6px;
}

.gift-modal__title {
    margin: 0 0 10px;
    font-size: clamp(22px, 2.4vw, 28px);
}

.gift-modal__lead {
    margin: 0 0 22px;
    max-width: 92%;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* подпись над группой полей: кому, от кого */
.gift-form__group {
    grid-column: 1 / -1;
    margin: 6px 0 -6px;
    font-family: var(--font-nav);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.gift-form__group:first-of-type {
    margin-top: 0;
}

.field__hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* пока окно открыто, страница под ним не прокручивается */
body.is-gift-open {
    overflow: hidden;
}

/* ---------- экран получения подарка ---------- */

.gift-screen {
    padding-bottom: 0;
}

.gift-card {
    max-width: 680px;
    margin: 0 auto;
    padding: 40px 44px;
    border: 1px solid rgba(199, 154, 91, 0.45);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

/* полученный подарок оформляем празднично, тёмным */
.gift-card--got {
    border-color: var(--color-gold);
    background-color: var(--color-dark);
    color: var(--color-cream);
}

.gift-card__eyebrow {
    margin-bottom: 8px;
}

.gift-card--got .gift-card__eyebrow {
    color: var(--color-gold-light);
}

.gift-card__title {
    margin: 0 0 12px;
    font-size: clamp(24px, 2.6vw, 32px);
}

.gift-card--got .gift-card__title {
    color: var(--color-white);
}

.gift-card__lesson {
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--color-gold-light);
}

.gift-card__meta {
    margin: 0 0 18px;
    font-size: 15px;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-text-muted);
}

.gift-card--got .gift-card__meta {
    color: rgba(233, 216, 193, 0.75);
}

.gift-card__text {
    max-width: 46ch;
    margin: 0 auto 24px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.gift-card--got .gift-card__text {
    color: rgba(233, 216, 193, 0.85);
}

.gift-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 767px) {

    .gift-modal {
        padding: 12px;
    }

    .gift-modal__window {
        padding: 28px 20px 24px;
    }

    .gift-card {
        padding: 28px 22px;
    }

    .pass-card__actions {
        flex-direction: column;
    }

    .pass-card__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ссылка «Забыли пароль» под полем пароля */
.login-form__forgot-line {
    margin: -6px 0 4px;
    text-align: right;
}

.login-form__forgot-line .login-form__forgot {
    font-size: 13px;
}

/* Переход к календарю после выбора услуги: заголовок не должен
   уезжать под прилипшую шапку. */
#bookCalendar {
    scroll-margin-top: calc(var(--header-height) + 24px);
}

@media (max-width: 1023px) {

    #bookCalendar {
        scroll-margin-top: 92px;
    }
}

/* Переход к форме заявки на абонемент: не даём заголовку уехать под шапку.
   Подсветка выбранной карточки лежит ниже, вместе с самими карточками. */
.pass-form-section {
    scroll-margin-top: calc(var(--header-height) + 24px);
}

@media (max-width: 1023px) {

    .pass-form-section {
        scroll-margin-top: 92px;
    }
}

/* ==========================================================================
   Абонементы: переключатель «для одного, для двоих» и карточки
   ========================================================================== */

.pass-switch {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 26px;
    padding: 4px;
    border: 1px solid rgba(199, 154, 91, 0.5);
    border-radius: var(--radius-pill);
    background-color: rgba(23, 16, 11, 0.05);
}

.pass-switch__btn {
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    transition: background-color var(--transition), color var(--transition);
}

.pass-switch__btn:hover {
    color: var(--color-brown);
}

.pass-switch__btn.is-on {
    background-color: var(--color-gold);
    color: var(--color-dark);
}

/*
 * Ширина карточки подобрана под самое длинное название: «Абонемент
 * на 8 занятий» требует 257 точек, плюс отступы по 24. При 250 точках
 * колонка получалась узкой, и название разрывалось на две строки.
 */
.pass-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Четыре в ряд только там, где на каждую карточку хватает ширины.
   Раньше порог стоял ниже, и на промежуточных экранах колонки
   ужимались до 262 точек. */
@media (min-width: 1380px) {

    .pass-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pass-item {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    border: 1px solid rgba(199, 154, 91, 0.32);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
}

.pass-item[hidden] {
    display: none;
}

/* самый ходовой выделяем рамкой, а не заливкой: карточек несколько,
   и тёмное пятно посередине перетягивает на себя всю страницу */
.pass-item--top {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 1px var(--color-gold) inset;
}

.pass-item__tag {
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background-color: var(--color-gold-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-dark);
}

.pass-item__name {
    margin: 0 0 4px;
    font-size: 20px;
    line-height: 1.25;
}

.pass-item__cond {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.pass-item__price {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 34px;
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-brown);
}

.pass-item__per,
.pass-item__note {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.pass-item__note[hidden] {
    display: none;
}

/*
 * margin-top: auto прижимает кнопки к низу карточки.
 * Без него ряд кнопок висел сразу под ценой, а над ним оставался разный
 * запас: у карточек с длинным названием или с подписью про двоих текста
 * больше, и кнопки в соседних карточках стояли на разной высоте.
 */
.pass-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
}

.pass-item__actions .btn {
    padding: 10px 16px;
    font-size: 14px;
    white-space: nowrap;
}

.pass-item__actions .pass-item__order {
    flex: 1 1 auto;
    justify-content: center;
}

/*
 * На компьютере кнопки идут строго в ряд.
 * Раньше ряду было разрешено переноситься, и на широких экранах, где
 * колонок становится больше, а карточки уже, «Подарить» уезжала под
 * «Оформить». Теперь обе ужимаются, но остаются рядом.
 */
@media (min-width: 768px) {

    .pass-item__actions {
        flex-wrap: nowrap;
    }

    .pass-item__actions .btn {
        min-width: 0;
    }

    /* «Оформить» занимает всё свободное место, «Подарить» своей ширины */
    .pass-item__actions .pass-item__gift {
        flex: 0 0 auto;
    }
}

/* выбранный абонемент подсвечивается после нажатия «Оформить» */
.pass-item.is-chosen {
    border-color: var(--color-gold);
    background-color: rgba(199, 154, 91, 0.08);
}

.pass-cards__empty {
    margin: 18px 0 0;
    font-size: 15px;
    color: var(--color-text-muted);
}

.pass-cards__empty[hidden] {
    display: none;
}

@media (max-width: 767px) {

    .pass-switch {
        display: flex;
        width: 100%;
    }

    .pass-switch__btn {
        flex: 1 1 0;
        padding: 11px 12px;
        text-align: center;
    }

    .pass-item {
        padding: 22px 20px;
    }

    .pass-item__price {
        font-size: 30px;
    }

    /* на телефоне кнопки нарочно идут друг под другом во всю ширину:
       так проще попасть пальцем */
    .pass-item__actions .btn {
        flex: 1 1 100%;
        justify-content: center;
        padding: 12px 14px;
        font-size: 14px;
    }
}

/* ==========================================================================
   Заявка на бронирование: тот же блок, что и у абонементов
   ========================================================================== */

/* У бронирования блок идёт последним на странице, поэтому отступ сверху
   ему нужен, а у абонементов он уже задан. */
.booking-form-section {
    padding-top: var(--section-space);
}



/* ==========================================================================
   Страница «О клубе»: цифры и ценности
   ========================================================================== */

/*
 * Цифры «2009», «15+», «100+».
 *
 * Раскладку оставляем прежней: значок, число, подпись, между плитками
 * тонкая линия. Меняем только цвет числа: золотое по кремовому давало
 * контраст около двух, и цифры сливались со страницей.
 */
.stats--icons .stats__value,
.stats__value {
    color: var(--color-brown);
}

/*
 * Ценности на фотографии.
 *
 * Раньше это были четыре светлых прямоугольника поверх тёмного снимка:
 * они забивали фотографию и читались как заплатки. Теперь карточки
 * тёмные и полупрозрачные, снимок виден сквозь них.
 */
.values--dark .value-card {
    padding: 30px 26px;
    border-color: rgba(233, 216, 193, 0.22);
    background-color: rgba(23, 16, 11, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: background-color var(--transition), border-color var(--transition);
}

.values--dark .value-card:hover {
    border-color: rgba(199, 154, 91, 0.55);
    background-color: rgba(23, 16, 11, 0.55);
}

.values--dark .value-card__title {
    color: var(--color-white);
}

.values--dark .value-card__text {
    color: rgba(233, 216, 193, 0.82);
}

/* кружок значка золотой, а не белый: белый спорил с текстом */
.values--dark .value-card__icon {
    border-color: rgba(199, 154, 91, 0.5);
    background-color: rgba(199, 154, 91, 0.2);
}



/* ==========================================================================
   Листание внутри лайтбокса
   ========================================================================== */

.lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(233, 216, 193, 0.35);
    border-radius: 50%;
    background-color: rgba(23, 16, 11, 0.55);
    font-family: var(--font-serif);
    font-size: 30px;
    line-height: 1;
    color: var(--color-cream);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color var(--transition), border-color var(--transition);
}

.lightbox__nav:hover {
    border-color: var(--color-gold);
    background-color: rgba(23, 16, 11, 0.8);
}

.lightbox__nav--prev {
    left: 24px;
    padding-right: 3px;
}

.lightbox__nav--next {
    right: 24px;
    padding-left: 3px;
}

/* счётчик снимков внизу */
.lightbox__count {
    position: absolute;
    left: 50%;
    bottom: 24px;
    z-index: 2;
    margin: 0;
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    background-color: rgba(23, 16, 11, 0.6);
    font-size: 13px;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-cream);
    transform: translateX(-50%);
}

@media (max-width: 767px) {

    /* На телефоне листают пальцем, поэтому стрелки делаем меньше
       и уводим к самым краям, чтобы не закрывали снимок. */
    .lightbox__nav {
        width: 42px;
        height: 42px;
        font-size: 24px;
    }

    .lightbox__nav--prev {
        left: 8px;
    }

    .lightbox__nav--next {
        right: 8px;
    }

    .lightbox__count {
        bottom: 16px;
    }
}

/* ============ 12.4. Карточка лошади: плотнее блоки ============ */
/*
 * На странице одной лошади три секции подряд, и общий шаг в 120 точек
 * оставлял между ними слишком много воздуха: до «О характере и работе»
 * и до «Фотогалереи» получалась пустая полоса в целый экран на телефоне.
 * Классы используются только здесь, на другие страницы правило не влияет.
 */
.section.horse-hero,
.section.horse-about,
.section.gallery-section {
    padding-bottom: 72px;
}

@media (max-width: 767px) {

    .section.horse-hero,
    .section.horse-about,
    .section.gallery-section {
        padding-bottom: 48px;
    }
}

/* ============ 12.5. Списки внутри описаний ============ */
/*
 * Перечисления, набранные в админке строками с точкой в начале, шаблон
 * собирает в настоящий список. Маркер рисуем сами золотой точкой: свой
 * список у браузера выглядит чужеродно на кремовом фоне.
 */
.text-list,
.service-about__content ul,
.horse-about__inner ul,
.news-article__body ul {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.text-list li,
.service-about__content ul li,
.horse-about__inner ul li,
.news-article__body ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    line-height: 1.75;
    color: var(--color-text);
}

.text-list li::before,
.service-about__content ul li::before,
.horse-about__inner ul li::before,
.news-article__body ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-gold);
}

.text-list li:last-child,
.service-about__content ul li:last-child,
.horse-about__inner ul li:last-child {
    margin-bottom: 0;
}

/* нумерованный список редактора маркер не получает, у него свои цифры */
.service-about__content ol,
.horse-about__inner ol,
.news-article__body ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.service-about__content ol li,
.horse-about__inner ol li {
    margin-bottom: 10px;
    line-height: 1.75;
}

.service-about__content strong,
.horse-about__inner strong,
.news-article__body strong {
    color: var(--color-brown);
}

.service-about__content a,
.horse-about__inner a,
.news-article__body a {
    color: var(--color-brown);
    border-bottom: 1px solid var(--color-gold);
}

.service-about__content a:hover,
.horse-about__inner a:hover,
.news-article__body a:hover {
    color: var(--color-gold);
}

/* ============ 12.6. Страница услуги: плотнее блоки ============ */
/* Тот же шаг, что и в каталоге лошадей: 120 точек оставляли пустые полосы. */
.section.service-about {
    padding-top: 72px;
    padding-bottom: 72px;
}

@media (max-width: 767px) {

    .section.service-about {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

/* Код подключения телеграм-бота: его набирают руками, поэтому моноширинный */
.cab-code {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 10px;
    border: 1px solid rgba(199, 154, 91, 0.45);
    border-radius: var(--radius-sm, 6px);
    background-color: var(--color-cream);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 15px;
    letter-spacing: 0.12em;
    color: var(--color-brown);
}

/* Заявка, к которой привела ссылка из уведомления */
.cab-table tr.is-target > td,
.admin-card.is-target {
    background-color: rgba(199, 154, 91, 0.16);
    box-shadow: inset 3px 0 0 var(--color-gold);
}

/*
 * Итоговая сумма и кнопка «Продолжить».
 *
 * Раньше между ними стояла строка предоплаты, она и держала отступ.
 * Предоплату убрали, сумма прижалась к кнопке вплотную, поэтому
 * отступ задаём явно.
 */
.book-choice__total {
    margin-bottom: 18px;
}

.book-choice__btn {
    margin-top: 4px;
}

/*
 * Плитки сводки в состоянии «требует внимания».
 *
 * Раньше кружок под иконкой становился золотым, а сами иконки нарисованы
 * золотым контуром: получалось золото по золоту, и значка не было видно.
 * Кружок оставляем тёмным, а внимание обозначаем золотым кольцом вокруг.
 */
.cab-stat--alert .cab-stat__icon {
    background-color: var(--color-brown);
    box-shadow: 0 0 0 3px rgba(199, 154, 91, 0.45);
}

/* ============ 12.7. Новости ============ */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-card {
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    transition: border-color var(--transition), transform 0.25s ease, box-shadow 0.25s ease;
}

.news-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(36, 23, 15, 0.1);
}

.news-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.news-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--color-beige);
}

.news-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-card__img {
    transform: scale(1.04);
}

/* снимка нет: вместо пустоты знак клуба */
.news-card__blank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 2;
    background-color: var(--color-brown);
}

.news-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    padding: 22px 24px 24px;
}

.news-card__date {
    font-family: var(--font-nav);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.news-card__name {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-brown);
}

.news-card__text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.news-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    font-family: var(--font-nav);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--color-gold);
}

.news-empty {
    padding: 30px;
    border: 1px dashed rgba(199, 154, 91, 0.45);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--color-text-muted);
}

.section-foot {
    margin-top: 36px;
    text-align: center;
}

/* Страница одной новости */
.news-article__inner {
    max-width: 820px;
}

.news-article__date {
    font-family: var(--font-nav);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 0 0 10px;
}

.news-article__title {
    font-family: var(--font-serif);
    font-size: clamp(32px, 4.4vw, 52px);
    font-weight: 600;
    line-height: 1.08;
    color: var(--color-brown);
    margin: 0;
}

.news-article__lead {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.8;
    color: var(--color-brown);
    margin: 0 0 26px;
}

.news-article__cover {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 0 0 30px;
}

.news-article__body p {
    line-height: 1.85;
    margin: 0 0 20px;
}

.news-grid--small {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.news-grid--small .news-card__name {
    font-size: 18px;
}

.news-grid--small .news-card__text {
    display: none;
}

@media (max-width: 1023px) {

    .news-grid,
    .news-grid--small {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {

    .news-grid,
    .news-grid--small {
        grid-template-columns: minmax(0, 1fr);
    }

    .section.news-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

/* Страница новости: свои отступы и линия вместо заимствованных у лошадей */
.section.news-article {
    padding-top: 56px;
    padding-bottom: 72px;
}

.news-article__rule {
    display: block;
    width: 72px;
    height: 2px;
    margin: 22px 0 24px;
    background-color: var(--color-gold);
}

.news-band {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 56px 0 22px;
    font-family: var(--font-nav);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-brown);
}

.news-band::before,
.news-band::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: rgba(199, 154, 91, 0.55);
}

@media (max-width: 767px) {

    .section.news-article {
        padding-top: 36px;
        padding-bottom: 48px;
    }

    .news-band {
        gap: 12px;
        margin-top: 40px;
        font-size: 12px;
        letter-spacing: 0.12em;
    }
}

/*
 * Дата новости.
 *
 * Была золотой: на кремовом фоне мелкий текст в разрядку с таким цветом
 * почти не читается, контраста не хватает. Берём тот же тёплый тон,
 * но заметно темнее, и добавляем насыщенности начертанию.
 */
.news-article__date,
.news-card__date {
    color: #7d5a2c;
    font-weight: 600;
}

/*
 * Блок новостей на главной и в разделе.
 *
 * Стоял общий шаг в 120 точек, а соседние блоки на главной давно
 * поджаты до 72. Из-за этого новости отбивались от остальной страницы
 * заметно сильнее, чем нужно.
 */
.section.news-section {
    padding-top: 72px;
    padding-bottom: 72px;
}

/* ============ 12.8. Полоса навигации над статьёй ============ */
/*
 * Используется на странице новости. Без этих правил полоса начинается
 * от самого верха документа и уезжает под зафиксированную шапку:
 * снаружи остаётся торчать только последний элемент пути.
 */
.crumbs-bar {
    padding-top: calc(var(--header-height) + 22px);
    padding-bottom: 18px;
    background-color: var(--color-cream);
    border-bottom: 1px solid rgba(199, 154, 91, 0.3);
}

.crumbs-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
}

.crumbs-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px 9px 14px;
    border: 1px solid rgba(199, 154, 91, 0.45);
    border-radius: var(--radius-pill);
    background-color: var(--color-white);
    font-family: var(--font-nav);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-brown);
    text-decoration: none;
    transition: border-color var(--transition), background-color var(--transition);
}

.crumbs-back:hover {
    border-color: var(--color-gold);
    background-color: var(--color-beige);
    color: var(--color-brown);
}

/* стрелка в наборе смотрит вправо, здесь нужна влево */
.crumbs-back__icon {
    transform: scaleX(-1);
}

.crumbs-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 9px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    color: rgba(58, 42, 29, 0.75);
}

.crumbs-trail a {
    color: rgba(58, 42, 29, 0.75);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.crumbs-trail a:hover {
    color: var(--color-brown);
    border-bottom-color: var(--color-gold);
}

.crumbs-trail li[aria-current] {
    font-weight: 600;
    color: var(--color-brown);
}

.crumbs-trail li + li::before {
    content: "›";
    margin-right: 9px;
    color: var(--color-gold);
}

@media (max-width: 767px) {

    .crumbs-bar {
        padding-bottom: 14px;
    }

    .crumbs-bar__inner {
        gap: 12px;
    }

    .crumbs-trail {
        font-size: 12px;
    }
}

/*
 * Блок новостей на главной.
 *
 * Карточки белые, фон страницы кремовый, разница между ними почти
 * незаметна, и блок терялся среди соседних. Кладём его на бежевую
 * полосу с волосяными линиями по краям: белые карточки на ней
 * читаются как карточки, а не как продолжение фона. Тёмную полосу
 * не берём, она уже занята услугами, два тёмных блока подряд
 * перегрузили бы страницу.
 */
.news-section#news {
    background-color: var(--color-beige);
    border-top: 1px solid rgba(199, 154, 91, 0.35);
    border-bottom: 1px solid rgba(199, 154, 91, 0.35);
}

.news-section#news .news-card {
    border-color: rgba(199, 154, 91, 0.4);
    box-shadow: 0 10px 30px rgba(36, 23, 15, 0.07);
}

.news-section#news .news-card:hover {
    box-shadow: 0 20px 44px rgba(36, 23, 15, 0.13);
}

/* ============ 12.9. Новости на главной: оформление по макету ============ */

.news-section#news {
    position: relative;
    overflow: hidden;
}

.news-head-wrap {
    position: relative;
    z-index: 1;
    text-align: center;
}

.news-mark {
    display: inline-flex;
    margin-bottom: 14px;
    opacity: 0.75;
}

/* Надзаголовок с линиями по бокам */
.news-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0 0 10px;
    font-family: var(--font-nav);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-brown);
}

.news-eyebrow::before,
.news-eyebrow::after {
    content: "";
    width: clamp(60px, 12vw, 150px);
    height: 1px;
    background-color: rgba(199, 154, 91, 0.6);
}

.news-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(30px, 4.2vw, 54px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-brown);
}

/* Разделитель: линия с ромбом посередине */
.news-divider {
    position: relative;
    display: block;
    width: min(280px, 60%);
    height: 1px;
    margin: 22px auto 0;
    background-color: rgba(199, 154, 91, 0.5);
}

.news-divider::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    background-color: var(--color-gold);
    transform: translate(-50%, -50%) rotate(45deg);
}

.news-divider--foot {
    margin-top: 36px;
}

.news-lead {
    max-width: 620px;
    margin: 22px auto 0;
    font-family: var(--font-serif);
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.7;
    color: var(--color-text);
}

.news-section#news .news-grid {
    margin-top: 44px;
    text-align: left;
}

/* Метка и дата поверх снимка */
.news-card__media {
    position: relative;
}

.news-card__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 14px;
    border-radius: 3px;
    background-color: rgba(23, 16, 11, 0.86);
    font-family: var(--font-nav);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-cream);
}

.news-card__stamp {
    position: absolute;
    top: 16px;
    right: 14px;
    font-family: var(--font-nav);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-white);
    text-shadow: 0 1px 6px rgba(23, 16, 11, 0.7);
}

.news-card__icon {
    display: inline-flex;
    opacity: 0.85;
}

.news-card__name {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 19px;
}

/* Черта над ссылкой «Читать далее», как в макете */
.news-card__more {
    border-top: 1px solid rgba(199, 154, 91, 0.35);
    margin-top: 16px;
    padding-top: 14px;
    text-transform: none;
    font-size: 14px;
    letter-spacing: 0.04em;
}

/* Кнопка «Все новости» с линиями по бокам */
.news-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 40px 0 0;
}

.news-all::before,
.news-all::after {
    content: "";
    width: clamp(50px, 14vw, 200px);
    height: 1px;
    background-color: rgba(199, 154, 91, 0.55);
}

.news-all__btn {
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

@media (max-width: 767px) {

    .news-eyebrow {
        gap: 10px;
        font-size: 11px;
        letter-spacing: 0.18em;
    }

    .news-eyebrow::before,
    .news-eyebrow::after {
        width: 34px;
    }

    .news-all::before,
    .news-all::after {
        width: 24px;
    }
}

/* ============ 12.10. Новости: правка под макет ============ */

/*
 * Фон. В макете блок стоит на том же светлом фоне, что и страница,
 * а выделяется не полосой, а орнаментом в шапке, гравюрами по краям
 * и тенью под карточками. Бежевую полосу, которую я сделал раньше,
 * отменяем.
 */
.news-section#news {
    background-color: transparent;
    border-top: 0;
    border-bottom: 0;
}

.news-section#news .news-card {
    border-color: rgba(199, 154, 91, 0.3);
    border-radius: 10px;
    background-color: var(--color-white);
    box-shadow: 0 14px 34px rgba(36, 23, 15, 0.09);
}

.news-section#news .news-card:hover {
    box-shadow: 0 24px 50px rgba(36, 23, 15, 0.15);
}

/*
 * Дата поверх снимка. Белый текст читается только на тёмном участке,
 * а снимки бывают любые, в том числе выбеленные на солнце. Кладём
 * под верх снимка мягкое затемнение: метка и дата всегда читаются,
 * а сам кадр почти не темнеет.
 */
.news-card__media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 96px;
    background: linear-gradient(180deg, rgba(23, 16, 11, 0.55) 0%, rgba(23, 16, 11, 0) 100%);
    pointer-events: none;
}

.news-card__tag,
.news-card__stamp {
    z-index: 1;
}

.news-card__stamp {
    font-weight: 600;
    color: var(--color-cream);
    text-shadow: none;
}

/*
 * Кнопка «Все новости». В макете это тёмный прямоугольник с кремовой
 * надписью, а не золотая скруглённая кнопка сайта.
 */
.news-all__btn.btn--primary {
    border-radius: 3px;
    background-color: var(--color-brown);
    border-color: var(--color-brown);
    color: var(--color-cream);
    padding-left: 34px;
    padding-right: 34px;
}

.news-all__btn.btn--primary:hover {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}

/* стрелка в кнопке тёмная, на тёмном фоне её не видно */
.news-all__btn .btn__icon {
    filter: invert(1) brightness(1.6);
}

/* Линии по краям надзаголовка заканчиваются ромбиком, как в макете */
.news-eyebrow {
    position: relative;
}

.news-eyebrow span {
    position: relative;
}

.news-eyebrow span::before,
.news-eyebrow span::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    background-color: var(--color-gold);
    transform: translateY(-50%) rotate(45deg);
}

.news-eyebrow span::before {
    left: calc(-18px - clamp(60px, 12vw, 150px));
}

.news-eyebrow span::after {
    right: calc(-18px - clamp(60px, 12vw, 150px));
}

/* ============ 12.11. Новости: фон снимком, как у услуг ============ */

.news-section--dark {
    position: relative;
    background-color: var(--color-brown);
    background-position: center;
    background-size: cover;
}

/* фон уводим глубже, чтобы передний план читался */
.news-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 16, 11, 0.9), rgba(23, 16, 11, 0.84) 45%, rgba(23, 16, 11, 0.93));
}

/* на тёмном фоне подписи шапки становятся светлыми */
.news-section--dark .news-eyebrow {
    color: var(--color-gold-light);
}

.news-section--dark .news-title {
    color: var(--color-white);
}

.news-section--dark .news-lead {
    color: rgba(244, 235, 221, 0.88);
}

.news-section--dark .news-mark img {
    filter: brightness(0) invert(1);
    opacity: 0.75;
}

.news-section--dark .news-eyebrow::before,
.news-section--dark .news-eyebrow::after,
.news-section--dark .news-divider,
.news-section--dark .news-all::before,
.news-section--dark .news-all::after {
    background-color: rgba(199, 154, 91, 0.7);
}

/* кнопка на тёмном фоне становится золотой, тёмная там потерялась бы */
.news-section--dark .news-all__btn.btn--primary {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold-light);
    color: var(--color-dark);
}

.news-section--dark .news-all__btn.btn--primary:hover {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
}

.news-section--dark .news-all__btn .btn__icon {
    filter: none;
}

/* карточки на тёмном фоне держатся сами, тень им больше не нужна */
.news-section--dark .news-card {
    border-color: rgba(199, 154, 91, 0.35);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.news-section--dark .news-card:hover {
    box-shadow: 0 26px 54px rgba(0, 0, 0, 0.38);
}

/* ============ 12.12. Новости: карточки под стиль плиток услуг ============ */

/*
 * Обводка и скругление такие же, как у плиток услуг, чтобы блоки
 * читались как части одной страницы. Фон не чисто белый: на тёмной
 * подложке он бил в глаза. Берём кремовый тон сайта, он мягче
 * и держит ту же гамму.
 */
.news-section--dark .news-card {
    border: 1px solid rgba(199, 154, 91, 0.5);
    border-radius: var(--radius-md);
    background-color: var(--color-cream);
    box-shadow: 0 18px 40px rgba(8, 5, 3, 0.45);
    transition: border-color var(--transition), box-shadow 0.3s ease, transform 0.3s ease;
}

.news-section--dark .news-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-3px);
    box-shadow: 0 26px 54px rgba(8, 5, 3, 0.55);
}

/* черта над «Читать далее» на кремовом фоне заметнее, приглушаем */
.news-section--dark .news-card__more {
    border-top-color: rgba(199, 154, 91, 0.4);
}

/*
 * Размытие фона у блока новостей.
 *
 * Размывать саму секцию нельзя, вместе с фоном размылись бы карточки
 * и текст. Поэтому фон переносим на подложку и размываем только её.
 * Подложка вылезает за края на двадцать точек: без этого по краям
 * появлялась бы светлая кайма, размытие «съедает» границы картинки.
 */
.news-section--dark::before {
    content: "";
    position: absolute;
    inset: -20px;
    z-index: 0;
    background-image: inherit;
    background-position: center;
    background-size: cover;
    filter: blur(7px);
}

.news-veil {
    z-index: 0;
}

/* Фильтры новостей: два ряда кнопок, тема и год */
.news-filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
}

.news-filters .filters {
    margin-bottom: 0;
}

.news-card.is-hidden {
    display: none;
}

/* на тёмном фоне кнопки фильтра светлеют */
.news-section--dark .filters__btn {
    border-color: rgba(199, 154, 91, 0.45);
    color: var(--color-cream);
}

/*
 * Кнопки фильтра и список новостей.
 *
 * Кнопки стояли вплотную к первой строке карточек, из-за чего читались
 * как их часть. Отбиваем список от фильтров и заодно даём самим рядам
 * кнопок больше воздуха между собой.
 */
.news-filters {
    gap: 14px;
    margin-top: 36px;
    margin-bottom: 40px;
}

.news-filters + .news-grid,
.news-filters + .news-grid#newsGrid {
    margin-top: 0;
}

/*
 * «Читать далее» в карточке новости.
 *
 * Была золотой на кремовом фоне карточки: контраста не хватало,
 * ссылка терялась и не читалась как кнопка. Делаем тёмный текст
 * с золотым подчёркиванием, при наведении подчёркивание уходит
 * в заливку, и ссылка становится похожа на кнопку.
 */
.news-card__more {
    align-self: flex-start;
    padding: 10px 0 0;
    font-weight: 600;
    color: var(--color-brown);
}

.news-card__more span,
.news-card__more {
    border-bottom: 0;
}

.news-card__more::after {
    content: none;
}

.news-card__link .news-card__more {
    position: relative;
}

.news-card__link .news-card__more::before {
    content: "";
    position: absolute;
    left: 0;
    right: 26px;
    bottom: -2px;
    height: 2px;
    background-color: var(--color-gold);
    transition: right 0.25s ease, background-color var(--transition);
}

.news-card:hover .news-card__more::before {
    right: 0;
    background-color: var(--color-brown);
}

/* стрелка тоже темнеет, золотая на кремовом почти не видна */
.news-card__more img {
    filter: brightness(0.55) saturate(0.7);
}

/*
 * Верхняя полоса на снимке новости.
 *
 * Раньше тёмная подложка была только под меткой, а дата справа висела
 * прямо на фотографии. Теперь это одна полупрозрачная полоса во всю
 * ширину: она держит и метку, и дату, читается на любом кадре
 * и не спорит со снимком.
 */
.news-card__media::after {
    top: 0;
    left: 0;
    right: 0;
    height: 42px;
    background: rgba(23, 16, 11, 0.55);
}

.news-card__tag,
.news-card__stamp {
    top: 0;
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 16px;
    background: none;
    border-radius: 0;
}

.news-card__tag {
    left: 0;
}

.news-card__stamp {
    right: 0;
}

/*
 * Метка и дата в полосе на снимке: метку делаем крупнее и отводим
 * от края, вплотную к границе она смотрелась приклеенной.
 */
.news-card__tag {
    padding-left: 20px;
    font-size: 12px;
    letter-spacing: 0.12em;
}

.news-card__stamp {
    padding-right: 20px;
}

/* метку вернули к прежнему размеру, отступ от края остаётся увеличенным */
.news-card__tag {
    font-size: 10px;
    letter-spacing: 0.16em;
}

/*
 * «Другие новости» под статьёй.
 *
 * Колонка статьи узкая, 820 точек, и три карточки в ней получались
 * совсем тесными. Выпускаем подборку за пределы колонки по центру:
 * текст читать удобно в узкой мере, а карточкам нужна ширина.
 */
.news-article__inner .news-grid--small {
    width: min(1100px, calc(100vw - 2 * var(--container-gap)));
    margin-left: 50%;
    transform: translateX(-50%);
    gap: 22px;
}

.news-article__inner .news-grid--small .news-card__name {
    font-size: 19px;
}

.news-article__inner .news-grid--small .news-card__text {
    display: block;
}

/* Кнопка удаления заявки: приглушённая, чтобы не звать нажать случайно */
.admin-btn--delete {
    border-color: rgba(160, 76, 62, 0.45);
    color: #93493c;
}

.admin-btn--delete:hover {
    border-color: #93493c;
    background-color: rgba(160, 76, 62, 0.12);
    color: #7d3b30;
}

/* ============ 12.13. Статистика по лошадям в кабинете ============ */

.hs-empty {
    margin: 18px 0 0;
    padding: 26px;
    border: 1px dashed rgba(199, 154, 91, 0.45);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--color-text-muted);
}

/* Верхние числа */
.hs-totals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 20px 0 26px;
    padding: 0;
    list-style: none;
}

.hs-total {
    padding: 18px 16px;
    border: 1px solid rgba(199, 154, 91, 0.3);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    text-align: center;
}

.hs-total__value {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-brown);
    font-variant-numeric: lining-nums tabular-nums;
}

.hs-total__label {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* Строки по лошадям */
.hs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hs-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(199, 154, 91, 0.28);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    transition: border-color var(--transition), box-shadow 0.25s ease;
}

.hs-row:hover {
    border-color: var(--color-gold);
    box-shadow: 0 10px 26px rgba(36, 23, 15, 0.08);
}

.hs-row__face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--color-brown);
}

.hs-row__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* у знака клуба вместо снимка своя мера */
.hs-row__face img[width="26"] {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.hs-row__body {
    flex: 1;
    min-width: 0;
}

.hs-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.hs-row__name {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 600;
    color: var(--color-brown);
}

.hs-row__done {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gold);
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
}

/* Полоса доли занятий */
.hs-bar {
    display: block;
    height: 8px;
    margin: 10px 0;
    overflow: hidden;
    border-radius: 999px;
    background-color: rgba(199, 154, 91, 0.18);
}

.hs-bar__fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
    transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hs-row__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.hs-row__facts b {
    color: var(--color-brown);
    font-variant-numeric: lining-nums tabular-nums;
}

.hs-row__last {
    color: rgba(58, 42, 29, 0.55);
}

.hs-note {
    margin-top: 16px;
}

@media (max-width: 900px) {

    .hs-totals {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .hs-row {
        gap: 12px;
        padding: 14px;
    }

    .hs-row__face {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
    }

    .hs-row__head {
        flex-direction: column;
        gap: 2px;
    }

    .hs-row__name {
        font-size: 17px;
    }

    .hs-row__facts {
        gap: 4px 14px;
        font-size: 12px;
    }
}

/* тем, кто просил не анимировать, показываем сразу готовое */
@media (prefers-reduced-motion: reduce) {

    .hs-bar__fill {
        transition: none;
    }
}

/* ============ 12.14. Достижения в кабинете ============ */

/*
 * Оформление по макету заказчика: чертёжный стиль. Прямые углы, тонкие
 * линии, засечки по углам рамок, штриховка на плитке значка. Палитра
 * при этом наша, коричнево-золотая, а не синяя из макета.
 *
 * Картинку каждому достижению загружает владелец. Пока её нет, на плитке
 * остаётся штриховка с номером: это лучше чужого случайного значка.
 */

.ach {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Рамка с засечками по углам. Общая деталь всего раздела */
.blueprint {
    position: relative;
    border: 1px solid rgba(199, 154, 91, 0.38);
    border-radius: 0;
}

.blueprint__corner {
    position: absolute;
    width: 11px;
    height: 11px;
    color: rgba(58, 42, 29, 0.55);
}

.blueprint__corner::before,
.blueprint__corner::after {
    content: "";
    position: absolute;
    background: currentColor;
}

.blueprint__corner::before {
    left: 5px;
    top: 0;
    width: 1px;
    height: 100%;
}

.blueprint__corner::after {
    top: 5px;
    left: 0;
    width: 100%;
    height: 1px;
}

.blueprint__corner--tl { top: -6px; left: -6px; }
.blueprint__corner--tr { top: -6px; right: -6px; }
.blueprint__corner--bl { bottom: -6px; left: -6px; }
.blueprint__corner--br { bottom: -6px; right: -6px; }

/* ---- Шапка раздела ---- */

.ach-head {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-end;
    justify-content: space-between;
}

.ach-head__text {
    max-width: 660px;
}

.ach-head__kicker {
    display: block;
    font-family: var(--font-nav);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 10px;
}

.ach-head__title {
    font-family: var(--font-serif);
    font-size: clamp(34px, 4vw, 52px);
    line-height: 0.98;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 12px;
    color: var(--color-brown);
}

.ach-head__lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    max-width: 54ch;
    color: rgba(58, 42, 29, 0.7);
}

/* Счёт и ранг */
.ach-score {
    display: flex;
    gap: 32px;
    align-items: center;
    padding: 20px 26px;
    background: var(--color-white);
}

.ach-score__value {
    display: block;
    font-family: var(--font-serif);
    font-size: 46px;
    line-height: 1;
    color: var(--color-brown);
    font-variant-numeric: lining-nums tabular-nums;
}

.ach-score__total {
    font-size: 22px;
    color: rgba(58, 42, 29, 0.45);
}

.ach-score__label,
.ach-score__rank {
    display: block;
    font-family: var(--font-nav);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(58, 42, 29, 0.55);
}

.ach-score__label {
    margin-top: 4px;
}

.ach-score__side {
    width: 190px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ach-score__bar {
    display: block;
    height: 9px;
    border: 1px solid rgba(58, 42, 29, 0.2);
    background: rgba(58, 42, 29, 0.06);
}

.ach-score__fill {
    display: block;
    height: 100%;
    background: var(--color-gold);
    transition: width 0.6s ease;
}

/* ---- Фильтры ---- */

.ach-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

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

.ach-filter,
.ach-toggle {
    font-family: var(--font-nav);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 7px 13px;
    border: 1px solid rgba(58, 42, 29, 0.2);
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ach-filter:hover,
.ach-toggle:hover {
    border-color: var(--color-gold);
    color: var(--color-brown);
}

.ach-filter.is-active {
    background: var(--color-brown);
    border-color: var(--color-brown);
    color: var(--color-cream);
}

.ach-filter__num {
    opacity: 0.6;
    margin-left: 4px;
}

.ach-toggle[aria-pressed="true"] {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-brown);
}

/* ---- Карточки ---- */

.ach-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 22px;
}

.ach-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    min-height: 214px;
    background: var(--color-white);
}

/* редкость задаёт только цвет рамки, как в макете */
.ach-card--r1 { border-color: rgba(58, 42, 29, 0.22); }
.ach-card--r2 { border-color: rgba(199, 154, 91, 0.55); }
.ach-card--r3 { border-color: rgba(150, 96, 48, 0.65); }
.ach-card--r4 { border-color: rgba(36, 23, 15, 0.75); }

/* закрытое достижение приглушено, но остаётся читаемым */
.ach-card:not(.is-done) {
    background: rgba(255, 253, 248, 0.5);
}

.ach-card:not(.is-done) .ach-card__title,
.ach-card:not(.is-done) .ach-card__desc {
    color: rgba(58, 42, 29, 0.55);
}

.ach-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ach-card__tile {
    position: relative;
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(199, 154, 91, 0.55);
    background:
        repeating-linear-gradient(45deg,
            rgba(199, 154, 91, 0.5) 0, rgba(199, 154, 91, 0.5) 1px,
            transparent 1px, transparent 7px),
        rgba(199, 154, 91, 0.16);
}

/* вторая рамка внутри плитки, как на чертеже */
.ach-card__tile::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(199, 154, 91, 0.55);
    background: rgba(255, 253, 248, 0.92);
}

.ach-card__img {
    position: relative;
    width: 66px;
    height: 66px;
    object-fit: contain;
    margin-bottom: 8px;
    /*
     * Главное правило раздела: пока достижение не получено, картинка
     * серая. Отдельную серую версию грузить не нужно, обесцвечивает CSS.
     */
    filter: grayscale(1) opacity(0.45);
    transition: filter 0.4s ease;
}

.ach-card.is-done .ach-card__img {
    filter: none;
}

.ach-card__mask {
    position: relative;
    font-family: var(--font-serif);
    font-size: 34px;
    line-height: 1;
    margin-bottom: 8px;
    color: rgba(199, 154, 91, 0.85);
}

.ach-card__rank {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9px;
    text-align: center;
    font-family: var(--font-nav);
    font-size: 12px;
    letter-spacing: 0.34em;
    line-height: 1;
    color: rgba(199, 154, 91, 0.75);
}

.ach-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    text-align: right;
}

.ach-card__rarity {
    font-family: var(--font-nav);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid rgba(199, 154, 91, 0.45);
    background: rgba(199, 154, 91, 0.1);
    color: var(--color-gold);
}

.ach-card__num {
    font-family: var(--font-nav);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(58, 42, 29, 0.4);
    font-variant-numeric: lining-nums tabular-nums;
}

.ach-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ach-card__group {
    font-family: var(--font-nav);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.ach-card__title {
    font-family: var(--font-serif);
    font-size: 23px;
    line-height: 1.05;
    color: var(--color-brown);
}

.ach-card__desc {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(58, 42, 29, 0.62);
}

.ach-card__date {
    font-family: var(--font-nav);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-top: 2px;
}

.ach-card__progress {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 4px;
}

.ach-card__track {
    flex: 1;
    height: 7px;
    border: 1px solid rgba(58, 42, 29, 0.2);
    background: rgba(58, 42, 29, 0.06);
}

.ach-card__fill {
    display: block;
    height: 100%;
    background: rgba(199, 154, 91, 0.8);
}

.ach-card__count {
    font-family: var(--font-nav);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: rgba(58, 42, 29, 0.5);
    font-variant-numeric: lining-nums tabular-nums;
}

.ach-card[hidden] {
    display: none;
}

.ach-none {
    margin: 0;
    padding: 24px 0;
    text-align: center;
    color: rgba(58, 42, 29, 0.6);
}

/* ---- Уведомление о новом достижении ---- */

/*
 * Всплывает внизу справа, живёт несколько секунд и уходит. Показывается
 * один раз: полученные достижения запоминаются в сеансе и сразу оттуда
 * стираются, поэтому при обновлении страницы окно не появится снова.
 */
.ach-toast {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 40;
    display: flex;
    gap: 16px;
    align-items: center;
    max-width: 390px;
    padding: 18px 22px;
    background: var(--color-white);
    box-shadow: 0 12px 32px rgba(36, 23, 15, 0.22);
    animation: achToastIn 0.28s ease-out;
}

.ach-toast.is-hiding {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes achToastIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.ach-toast__tile {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gold);
    background: var(--color-gold);
    color: var(--color-white);
}

.ach-toast__img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.ach-toast__mark {
    font-family: var(--font-serif);
    font-size: 26px;
    line-height: 1;
}

.ach-toast__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ach-toast__kicker {
    font-family: var(--font-nav);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.ach-toast__title {
    font-family: var(--font-serif);
    font-size: 22px;
    line-height: 1.05;
    color: var(--color-brown);
}

.ach-toast__desc {
    font-size: 12.5px;
    line-height: 1.35;
    color: rgba(58, 42, 29, 0.62);
}

.ach-toast__close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: 0;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: rgba(58, 42, 29, 0.45);
    cursor: pointer;
}

@media (max-width: 767px) {

    .ach-score {
        width: 100%;
        gap: 20px;
        padding: 16px 18px;
    }

    .ach-score__side {
        width: auto;
        flex: 1;
    }

    .ach-list {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ach-toast {
        right: 14px;
        left: 14px;
        bottom: 14px;
        max-width: none;
    }
}

/* ============ 12.15. Цена для компании в блоке выбора ============ */

/*
 * Когда у услуги есть цена для двоих, она меньше двух обычных. В строке
 * над итогом показывается прежняя сумма зачёркнутой, чтобы видно было,
 * что скидка учтена, а не что цена посчитана неверно.
 */
.book-choice__was {
    text-decoration: line-through;
    opacity: 0.65;
    margin-left: 4px;
}

/* ============ 12.16. Кнопки каталога лошадей ============ */

/*
 * Прежде обе кнопки были призрачными: тонкая линия и тёмный текст.
 * На светлом фоне каталога такая кнопка почти не читалась, её просто
 * не замечали. Теперь «Показать ещё» золотая и заметная, «Свернуть»
 * остаётся спокойной, но с внятной рамкой и подложкой.
 */
.horses__btn {
    min-width: 210px;
    justify-content: center;
}

.horses__btn--less {
    border-color: rgba(58, 42, 29, 0.35);
    background-color: var(--color-white);
    color: var(--color-brown);
}

.horses__btn--less:hover {
    border-color: var(--color-gold);
    background-color: var(--color-cream);
    color: var(--color-brown);
}