/* ========================================
   COACHES — List & Detail Pages
   Styles with co- prefix
   ======================================== */

/* ---- HERO ---- */
/* Высота общая для всех карточек: игрок, тренер, корт, турнир. Было 340,
   380 и 420 — на соседних страницах баннер прыгал по высоте */
/* Высота, кегли и отступы — те же, что у «Турниров» и категорий:
   один сайт, шапки разделов должны читаться одинаково */
/* ОБЛОЖКА СТОИТ НА ОБЩИХ КРУТИЛКАХ РАЗДЕЛА — решение Кости 04.10,
   доска 482:9 блок N. Замер 07.10: пол 460 при 360 у остальных, воздух
   снизу 37.4 на десктопе и 26.6 на 1024 — мимо шкалы. Компонент один на
   ДВЕ страницы: список тренеров и страницу тренера. */
.co-hero {
    position: relative;
    min-height: var(--oblozhka-pol);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--oblozhka-vozduh) var(--pad-x) var(--oblozhka-vozduh-niz);
    overflow: hidden;
}

.co-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--modal-bg-heavy) 0%, var(--alpha-black-85) 60%, var(--bg-primary) 100%);
    z-index: 1;
}

.co-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* Было 0.35 — снимок превращался в тёмное пятно. Читаемость текста
       держит затемнение поверх, а не убитая насмерть фотография */
    opacity: 0.75;
}

.co-hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

/* Кегль — ступень шкалы, а не доля ширины. Было 22.6 · 33.8 · 37.1 ·
   45.1 · 49.6 — ни одного числа со шкалы. */
.co-hero-title {
    font-size: var(--fs-hero);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
}

.co-hero-title span {
    color: var(--accent);
}

.co-hero-subtitle {
    font-size: var(--fs-hero-sub);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    max-width: 720px;
    margin: 0 auto;
    line-height: var(--lh-normal);
}

/* ---- CONTAINER ---- */
/* ВИТРИНА ИДЁТ ПО ШИРОКОЙ КОРОБКЕ, ТАБЛИЦА — ПО УЗКОЙ (правило 07.10) */
.co-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--section-y) var(--pad-x) var(--section-y);
}


/* ---- COACHES GRID ---- */
/* ЧИСЛО КОЛОНОК — СЛЕДСТВИЕ ШИРИНЫ КАРТОЧКИ, А НЕ ГРАНИЦЫ ЭКРАНА, и
   рядов на странице четыре на широких, три на узких. Оба правила
   выведены на «Услугах» и «Кортах» 07.10 и применяются без нового
   разбора. */
.co-grid {
    --co-ryadov: 4;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-6);
}

@media (max-width: 992px) {
    .co-grid { --co-ryadov: 3; }
}

/* ДВЕ В РЯД НА ТЕЛЕФОНЕ — своим минимумом: при 300 экран 390 давал бы
   одну колонку. Граница 640: ширин в медиа две. */
@media (max-width: 640px) {
    .co-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }

    /* Правится только то, что зависит от узости колонки */
    .co-card-cta {
        width: 100%;
        font-size: var(--fs-xs);
        justify-content: center;
        text-align: center;
        white-space: nowrap;
    }
}

/* КАРТОЧКА ТРЕНЕРА — ТА ЖЕ ФОРМА, ЧТО У КОРТА. Так же устроена и
   витрина лендинга (css/style.css:3733): фотография сверху, текст слева.
   Поля 32 × 24 и выравнивание по центру ушли: плотность Dense 12 по
   описанию `Card 29:65`, ритм задаёт один `gap`. */
.co-card {
    background: var(--surface-glass);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-base), transform var(--transition-base);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.co-card-img-wrap {
    position: relative;
    overflow: hidden;
}

/* Тело карточки — та же плотность, что у кортов и у лендинга */
.co-card-body {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-grow: 1;
}

.co-card:hover {
    border-color: var(--alpha-lime-20);
    transform: translateY(-4px);
}

/* ОТНОШЕНИЕ СТОРОН — СВОЙСТВО КАРТОЧКИ, А НЕ ЧИСЛО. Круг 100 был шестой
   ступенью мимо `Avatar 29:82` (24 · 32 · 40 · 56 · 80), а портрет по
   центру не оставлял свободного угла — ровно та же причина записана у
   витрины лендинга (css/style.css:3733). Кадрируем от верха: снимки у
   тренеров вертикальные и лицо стоит в верхней трети. */
.co-card-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% top;
    border: 0;
    border-radius: 0;
    transition: border-color var(--transition-base);
}

.co-card:hover .co-card-photo {
    border-color: var(--accent);
}

/* ИМЯ — СТУПЕНЬ `card title` 16, две строки с многоточием: ряд не должен
   разъезжаться по высоте от длины имени. Было 18 — на ступень крупнее
   эталонной карточки. */
.co-card-name {
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Мета — 12 с межстрочным 1.4, один уровень на все виды. ВНУТРИ ВИТРИНЫ
   ЛАЙМА НЕТ: он принадлежит одному главному действию в поле зрения
   (правило 109:370), а это «Скидка KSLT». */
.co-card-spec {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.3;
    font-weight: 600;
}

/* ПРЕДПОЛОЖЕНИЕ, ПОМЕЧЕНО КАК ДОГАДКА: описание уходит из карточки на
   всех видах — то же решение, что на кортах. При карточке 332 оно
   занимало больше трети тела, а карточка сама ссылка на страницу
   тренера, где описание и живёт. */
.co-card-desc {
    display: none;
}

.co-card-stats {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.co-card-stat {
    text-align: center;
}

/* Число — ступень 16, вровень с именем; лайм снят по правилу 109:370 */
.co-card-stat-num {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text-primary);
    line-height: var(--lh-none);
}

.co-card-stat-label {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.co-card-price {
    font-size: var(--fs-xs);
    line-height: 1.3;
    color: var(--text-secondary);
}

.co-card-price strong {
    color: var(--text-primary);
    font-weight: 700;
}

.co-card-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: auto;
    width: 100%;
}

/* `.co-card-btn` («Подробнее →») снята вместе со своей разметкой:
   карточка сама ссылка, и кнопка была нажимаемым внутри нажимаемого. */
.co-card-cta {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* ЦЕЛЬ НАЖАТИЯ — СТУПЕНЬ 44, А НЕ СЛЕДСТВИЕ ПОЛЕЙ. Было 43 (замер). */
    min-height: var(--btn-h-md);
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.co-card-cta {
    background: var(--accent);
    color: var(--bg-primary);
    font-weight: 700;
    border: none;
}

.co-card-cta:hover {
    opacity: 0.85;
}

/* ---- DETAIL PAGE ---- */
.co-detail-header {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 48px;
}

.co-detail-photo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    /* ПРАВИЛО СТРАНИЦЫ ИГРОКА, ПРИМЕНЁННОЕ БЕЗ НОВОГО РАЗБОРА
       (`player.css:85-88`, решение Кости 09.10): лайм принадлежит одному
       главному действию на экране, а портрет не действие. Там кольцо 4px
       лаймом уже сняли — здесь оно осталось единственной копией. Толщина
       встаёт на тяжёлую ступень (3), цвет — та же белая восьмёрка. */
    border: var(--bw-heavy) solid var(--alpha-white-08);
    flex-shrink: 0;
}

/* ИМЯ В КАРТОЧКЕ — КЛАСС, А НЕ ТЕГ. Та же правка, что на странице корта
   13.10: второй `h1` страницы снят, имя осталось тем же текстом. */
.co-detail-name {
    font-size: var(--fs-2xl);
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.co-detail-spec {
    color: var(--accent);
    font-size: var(--fs-base);
    font-weight: 600;
    margin-bottom: 8px;
}

.co-detail-court {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.co-map-links {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-left: 4px;
}
.co-map-link {
    color: var(--accent);
    text-decoration: none;
    font-size: var(--fs-xs);
    font-weight: 600;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.co-map-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}

.co-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

/* На широких видах плитка держит СВОЮ ширину, а не делит колонку поровну:
   двум плиткам сетка отдавала по 310. Сколько влезет в строку — столько и
   встанет, остальные переносятся. */
@media (min-width: 993px) {
    .co-detail-stats {
        grid-template-columns: repeat(auto-fill, 220px);
        justify-content: start;
    }
}

/* ПЛИТКА ПО КОМПОНЕНТУ `Stat tile 39:57`: «Default: 220 wide, padding 20/24,
   value 32 Bold». Замер 13.10 дал 310 x 109 — шире компонента на 90, потому
   что плитки растягивала сетка на четыре равные колонки при двух плитках.
   Глаза Кости: «карточки большие какие-то». Компонент был прав раньше нас. */
.co-detail-stat {
    background: var(--surface-glass);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    text-align: center;
}

.co-detail-stat-num {
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 6px;
}

.co-detail-stat-label {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

/* Detail sections */
.co-section {
    margin-bottom: 48px;
}

.co-section-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: var(--bw-hair) solid var(--border-subtle);
}

.co-section-title span {
    color: var(--accent);
}

/* МЕРА АБЗАЦА И СТУПЕНЬ МЕЖСТРОЧНОГО — то же решение, что у `.ct-about-text`
   на странице корта: 1.8 мимо лестницы (1 · 1.1 · 1.3 · 1.5 · 1.65), потолка
   ширины не было вовсе. ОДНО ПОНЯТИЕ — абзац текста — жило в двух файлах
   двумя разными числами. */
.co-bio-text {
    color: var(--text-secondary);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    /* 62ch, А НЕ 72ch — ПОТОМУ ЧТО ЕДИНИЦА СЧИТАЕТ НОЛЬ, А НЕ БУКВУ.
       `ch` — это ширина знака «0», а кириллица у Inter уже него: при 72ch
       замер дал 85 знаков в строке, то есть мера молча уехала за норму
       45–75. Число подобрано ЗАМЕРОМ, а не формулой. */
    max-width: 62ch;
}

/* Achievements */
.co-achievements {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.co-achievement {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-glass);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.co-achievement::before {
    content: '✓';
    color: var(--accent);
    font-weight: 700;
    font-size: var(--fs-base);
    flex-shrink: 0;
}

/* Schedule */
.co-schedule {
    display: grid;
    gap: 8px;
}

.co-schedule-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--surface-glass);
    border: var(--bw-hair) solid var(--border-subtle);
}

.co-schedule-day {
    font-weight: 600;
    min-width: 40px;
}

.co-schedule-time {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.co-schedule-row.day-off .co-schedule-time {
    color: var(--text-muted);
    font-style: italic;
}

/* Reviews */
.co-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.co-review-card {
    background: var(--surface-glass);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
}

.co-review-stars {
    color: var(--accent);
    font-size: var(--fs-sm);
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.co-review-text {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    margin-bottom: 12px;
    font-style: italic;
}

.co-review-author {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* CTA */
.co-cta {
    background: var(--surface-glass);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 48px 40px;
    text-align: center;
    margin-top: 20px;
}

.co-cta h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    margin-bottom: 12px;
}

.co-cta h3 span {
    color: var(--accent);
}

.co-cta p {
    color: var(--text-secondary);
    max-width: 62ch;
    margin-inline: auto;
    margin-bottom: 24px;
}

.co-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: var(--neutral-black);
    font-size: var(--fs-base);
    font-weight: 700;
    /* ВЫСОТА СВОЙСТВОМ, А НЕ ПОЛЕМ — `Button 17:82`. Та же правка, что на
       странице корта 13.10: замер давал 41 при ступенях 28 · 36 · 44 · 52,
       а 44 названо там же минимальной целью нажатия на телефоне. У гостя
       эта кнопка — ЕДИНСТВЕННОЕ управление страницы: блок контактов ею и
       заменён, телефона гость не видит. */
    min-height: var(--btn-h-md);
    padding-inline: 32px;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.co-cta-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

/* Блок «назад» снесён целиком: возврат живёт внутри общей полосы
   фильтров (`trn-back`), и три класса здесь лежали мёртвыми. */

/* Scroll animations */
.co-fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.co-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 992px) {
    /* Правило `.co-grid` на две колонки снято: число колонок — следствие
       ширины карточки, `auto-fill` сам даёт 3 на 1024 и 2 на 768. */
    .co-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .co-detail-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ТОЛЬКО ТЕЛЕФОН: достижения в одну колонку. На планшете стоя их две —
   колонка в 350 пикселей держит название достижения в одну строку. */
@media (max-width: 640px) {
    /* Правило по идентификатору снято вместе с самим определением полосы:
       отступы держит общий компонент. Повод прежней записи — что
       `.trn-filters` проигрывало идентификатору — исчез вместе с ним. */

    /* ЗАПИСЬ ВЫШЕ ИСПОЛНЕНА 16.10, куском 75. Она говорила: «граница 768
       осталась только у страницы тренера — отдельный кусок, в этот заход
       не трогается». Это и есть тот кусок: граница разложена по двум
       домашним, и у страницы тренера её больше нет. */

    /* ГРАНИЦА 768 РАЗЛОЖЕНА ПО ДВУМ ДОМАШНИМ — 16.10, кусок 75.
       Правило уходит туда, где задано то же свойство соседней ступенью:
       есть на 992 — значит это ступень вниз, едет на 640; есть на 640 —
       ступень вверх, едет на 992. Остальное по смыслу, смысл назван. */
    .co-achievements {
        grid-template-columns: 1fr;
    }
}

/* ПЛАНШЕТ И УЖЕ. Портрет 120 и имя 26 — ступень между десктопной и
   телефонной (на 640 портрет 92, имя 21). Отзывы в одну колонку: на 992
   их было две, и на планшете колонка выходила 430 — для отзыва это
   полоска. Призыв: было 36/24, 36 не ступень шкалы. */
@media (max-width: 992px) {
    .co-detail-photo {
        width: 120px;
        height: 120px;
    }
    .co-detail-stat {
        /* было 10/14 — мимо шкалы отступов */
        padding: 12px 16px;
    }
    /* ЛЕСТНИЦА БЫЛА ПРОВАЛЕНА В СЕРЕДИНЕ: 32 на десктопе, 18 на 768 и
       снова 21 на телефоне — средняя ступень мельче нижней. Выправлено:
       32 · 26 · 21, каждая ступень шкалы и каждая мельче предыдущей. */
    .co-detail-stat-num {
        font-size: var(--fs-xl);
    }
    .co-detail-stat-label {
        font-size: var(--fs-xs);
    }
    .co-detail-spec {
        font-size: var(--fs-sm);
    }
    .co-bio-text {
        font-size: var(--fs-sm);
    }
    .co-detail-name {
        font-size: var(--fs-xl);
    }
    .co-reviews-grid {
        grid-template-columns: 1fr;
    }
    .co-cta {
        padding: 32px 24px;
    }
}

/* ТОЛЬКО ТЕЛЕФОН. Шапка тренера складывается в колонку и встаёт по
   центру. На планшете стоя портрет 120 и текст помещаются в ряд. */
@media (max-width: 640px) {
    .co-detail-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .co-detail-court {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .co-detail-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .co-detail-stat {
        padding: 16px 12px;
    }

    /* Кегль заголовка обложки отсюда убран: его держит `--fs-hero` в
       tokens.css, и своё объявление спорило бы с общей крутилкой. Замер
       07.10 показал 22.62 на телефоне вместо ступени 26 — ровно это
       правило и перебивало крутилку. Компонент обложки один на список
       тренеров и на страницу тренера. */

    .co-detail-photo {
        width: 92px;
        height: 92px;
    }

    .co-detail-name {
        font-size: var(--fs-lg);
    }

    .co-detail-stat-num {
        font-size: var(--fs-lg);
    }

    .co-cta {
        padding: 20px 16px;
    }

    .co-cta h3 {
        font-size: clamp(1.15rem, 5vw, 1.32rem);
    }

    .co-cta p {
        font-size: var(--fs-sm);
        line-height: var(--lh-snug);
    }

    .co-cta-btn {
        /* высоту держит min-height у самого правила — одно место на все виды */
        padding-inline: 20px;
        font-size: var(--fs-sm);
    }
}

/* ТРИ ОПРЕДЕЛЕНИЯ КЕГЛЯ ЧИСЛА СВЕДЕНЫ В ОДНО — 16.10. На 640 их стало три
   (fs-xl, fs-lg, fs-lg) после того, как круги 2 и 3 свели сюда границы 480
   и 375: каждая несла свою копию, и выигрывала последняя. Остался один
   fs-lg выше по файлу. */

/* === PAGINATION === */
/* ПОЛОСА СТРАНИЦ — ОБЩИЙ КОМПОНЕНТ в `css/style.css` и
   `js/polosa-stranic.js`. Своих кнопок у тренеров больше нет: они были
   40 × 40 мимо ступеней 28 · 36 · 44 · 52, без счётчика строк и без окна
   номеров. Остаётся обёртка секции — её ширина своя. */
.co-pagination-section {
    /* Полоса идёт по витрине, а не по умолчанию компонента */
    --polosa-shirina: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--pad-x) var(--space-xl);
}

.co-pagination-section:empty {
    padding: 0;
}

/* === DISCOUNT / VOUCHER === */
.co-discount-section {
    border: var(--bw-hair) solid var(--accent-subtle);
    border-radius: 16px;
    padding: 24px;
    background: var(--alpha-lime-06);
}
.co-discount-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.co-discount-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: var(--alpha-white-04);
    border-radius: 12px;
    border: var(--bw-hair) solid var(--alpha-white-08);
}
.co-discount-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}
.co-discount-name {
    font-size: var(--fs-base);
    color: var(--alpha-white-72);
}
.co-discount-percent {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}
.co-discount-btn {
    background: var(--accent);
    color: var(--neutral-black);
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.co-discount-btn:hover { opacity: 0.85; }
.co-discount-hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin: 0;
    text-align: right;
}

/* Membership Modal (guest/registered) */
.co-membership-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--modal-bg-heavy);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.co-membership-overlay.visible {
    opacity: 1;
}

.co-membership-overlay.visible .co-membership-modal {
    transform: translateY(0);
}

.co-membership-modal {
    background: var(--neutral-800);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.co-membership-close {
    position: absolute;
    top: 12px; right: 16px;
    background: none;
    border: none;
    color: var(--alpha-white-50);
    font-size: var(--fs-xl);
    cursor: pointer;
    transition: color 0.2s;
}

.co-membership-close:hover {
    color: var(--neutral-white);
}

.co-membership-icon {
    margin-bottom: 16px;
}

.co-membership-modal h3 {
    font-size: var(--fs-md);
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.co-membership-modal p {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    margin-bottom: 24px;
}

.co-membership-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: var(--neutral-black);
    font-weight: 700;
    font-size: var(--fs-base);
    padding: 12px 32px;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.co-membership-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

/* ВАУЧЕРНОЕ ОКНО, ВЫБОР УСЛУГИ И ИСТОРИЯ — ПЕРЕЕХАЛИ В
   `css/kslt-vaucher.css` куском 148. Здесь лежали 42 правила с приставкой
   `co-`, побайтово равные таким же в соседнем разделе: один вид, описанный
   дважды, плюс своя пара `@keyframes` — та же анимация под другим именем.
   Приставка снята совсем: имя класса теперь `kslt-`, и расходиться
   нечему. */


@media (max-width: 640px) {
    .co-discount-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .co-discount-btn {
        width: 100%;
        text-align: center;
    }
            }

/* === MAP SECTION (coach detail) === */
.co-map-links-section {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.co-map-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--alpha-lime-06);
    border: var(--bw-hair) solid var(--alpha-lime-20);
    color: var(--accent);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: all 0.2s;
}
.co-map-link-btn:hover {
    background: var(--accent-subtle);
    border-color: var(--alpha-lime-50);
}

@media (max-width: 640px) {
    .co-map-links-section {
        flex-wrap: wrap;
    }
}

/* === SPONSORS === */

/* Пусто: тренеров ещё не завели или поиск ничего не нашёл.
   Раньше при пустой базе подставлялись заготовки, и на странице висели
   выдуманные люди — теперь честно говорим, что списка пока нет */
.co-empty {
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    color: var(--text-muted);
}

.co-empty-icon {
    font-size: var(--fs-3xl);
    margin-bottom: 12px;
    opacity: 0.5;
}

.co-empty p {
    margin: 0;
    font-size: var(--fs-base);
}

/* ============================================
   СТРАНИЦА ТРЕНЕРА НА ТЕЛЕФОНЕ
   ============================================ */

/* Цифры «50 лет опыта» и «100000 сом/час» шли 20-м кеглем при весе 800 —
   те же цифры на странице корта теперь 18.4. Приводим к одному виду:
   карточка с полями 10×14, цифра 1.15rem, подпись 0.72rem, текст 0.82rem */

/* Пилюля и тексты страницы тренера переехали ВЫШЕ, в общий блок 992.
   ПОРЯДОК В ФАЙЛЕ РЕШАЕТ: блок 992 действует и на телефоне тоже, и если
   он лежит НИЖЕ блока 640, то перебивает телефонное значение при равной
   силе селектора. Поймано замером 16.10: число пилюли на 640 показывало
   26 вместо 21. Правило на будущее — широкое выше, узкое ниже. */

                                                                            
                                                                           
                                                                      
                                     
.co-cta-btn:focus-visible,
.co-card:focus-visible,
.kslt-back:focus-visible {
    outline: var(--bw-thick) solid var(--accent);
    outline-offset: 2px;
}