/* ========================================
   BATTLES OVERVIEW PAGE STYLES
   Prefix: bo-
   ======================================== */

/* Шапка раздела — той же высоты и того же ритма, что у «Турниров» и
   страниц категорий: разделы соседние, и шапки должны читаться одинаково.
   Высота была в vh, поэтому на широком мониторе раздувалась, а на ноутбуке
   сжималась — теперь фиксированная, как у соседей */
.bo-hero {
    position: relative;
    padding: var(--section-y) var(--pad-x) var(--section-y);
    text-align: center;
    /* ПОЛ ОБЛОЖКИ — ОБЩИЙ ТОКЕН, А НЕ ОДИННАДЦАТОЕ ЧИСЛО. Его зовут корты,
       тренеры, игроки, новости, цены, услуги, партнёры, «Инфо» — десять
       файлов. Баттлы держали свои 460 / 275 / 340. */
    min-height: var(--oblozhka-pol);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 24px;
}

.bo-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bo-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bo-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        var(--alpha-black-50) 0%,
        var(--alpha-black-85) 100%
    );
    z-index: 1;
}

.bo-hero-content {
    position: relative;
    z-index: 2;
}

.bo-hero h1 {
    /* ЛЕСТНИЦА ОБЛОЖКИ УЖЕ ЗАВЕДЕНА В ТОКЕНАХ: 40 / 32 / 26 по ступеням
       992 и 640 (tokens.css:171, 578, 588). Здесь стоял свой clamp, и он
       давал 50 / 45 / 37 — ни одного кегля из девяти (замер 13.10). */
    font-size: var(--fs-hero);
    font-weight: 800;
    line-height: var(--lh-tight);
    color: var(--text-primary);
    margin-bottom: 18px;
}

/* Лозунг раздела. Цвет приглушённый и вес меньше, чем у заголовка:
   белым и жирным он сливался с названием в одну массу */
.bo-hero-sub {
    font-size: var(--fs-hero-sub);
    font-weight: 600;
    color: var(--text-secondary);
    max-width: 720px;
    margin: 0 auto var(--space-lg);
    line-height: var(--lh-normal);
}

.bo-hero-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.bo-hero-stat {
    text-align: center;
}

.bo-hero-stat-value {
    display: block;
    font-size: var(--fs-3xl);
    font-weight: 800;
    color: var(--accent);
}

.bo-hero-stat-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Section blocks */
/* Тот же вертикальный ритм, шапка блока и сетка, что на страницах
   категорий турниров: раздел соседний, стилистика общая. Блоки здесь —
   обычные div, поэтому контейнер задаём вручную: иначе они шли по краю
   окна, а полоса фильтров над ними — по сетке страницы */
.bo-section {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--section-y-sm) var(--gutter);
    box-sizing: border-box;
}

.bo-section:nth-child(odd) {
    background: var(--bg-primary);
}

.bo-section:nth-child(even) {
    background: var(--bg-secondary);
}

/* Card grid: uniform 2-column grid */
.bo-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    align-items: stretch;
}

/* ========================================
   FEATURED CARD (big VS card)
   ======================================== */
/* Радиус 16 — по компоненту `Card 29:65`; было 24. */
.bo-featured {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: var(--bw-hair) solid var(--border-subtle);
    cursor: pointer;
    background: var(--bg-card);
}

.bo-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px var(--alpha-black-30);
}

/* ═══ СЛОЙ-ССЫЛКА КРУПНОЙ КАРТОЧКИ ═══════════════════════════════════════
   13.10, вечер. Карточка была `div[data-href]` с обработчиком: в новой
   вкладке открывалась только надпись «Подробнее». Теперь прямым ребёнком
   лежит растянутая ссылка (js/kslt-sloy.js), порядок слоёв — тот же, что на
   полосе турнира 04.10 и на карточке игрока:

     фон                    z-index 1
     содержимое             БЕЗ z-index  — см. ниже, это важно
     слой-ссылка            z-index 2   — ВЫШЕ содержимого
     кнопки голоса, место   z-index 3   — своё действие выше ссылки

   ПОЧЕМУ У СОДЕРЖИМОГО НЕТ z-index. С ним содержимое заводит СВОЙ слой
   наложения, и `z-index: 3` у места считается ВНУТРИ него: место стоит
   третьим среди своих, а весь короб содержимого остаётся под слоем —
   место перестаёт нажиматься, карта не открывается. Поймала проба
   `86-battly` 17.10: «<a class="bo-featured-cover"> intercepts pointer
   events». До этого `.bo-featured-content` был объявлен ДВАЖДЫ — здесь
   с z-index 1 и ниже с z-index 2, — и побеждало это правило, потому что
   оно точнее. БЕДА РОДИЛАСЬ РОВНО НА ШВЕ ДВУХ ОПРЕДЕЛЕНИЙ. */
.bo-featured > .bo-featured-bg {
    position: relative;
    z-index: 1;
}

.bo-featured > .bo-featured-content {
    position: relative;
}

.bo-featured > .bo-featured-cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    text-decoration: none;
}

.bo-featured > .bo-featured-cover:focus-visible {
    outline: var(--bw-thick) solid var(--accent);
    outline-offset: -4px;
}

/* Своё действие — выше слоя. Иначе слой съел бы голос и карту */
.bo-featured .bo-vote-btn,
.bo-featured .bo-meta-venue {
    position: relative;
    z-index: 3;
}

.bo-featured-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bo-featured-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bo-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--alpha-black-85) 0%, var(--alpha-black-50) 50%, var(--alpha-black-20) 100%);
    z-index: 1;
}

/* ОДНО ОПРЕДЕЛЕНИЕ: позиционирование содержимого живёт выше, здесь
   остаётся только его собственный отступ. */
.bo-featured-content {
    padding: var(--space-lg);
}

/* VS Row */
.bo-vs-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.bo-player-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.bo-player-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: var(--bw-heavy) solid transparent;
}

/* ЗАГЛУШКА НОСИТ ТОТ ЖЕ КЛАСС, ЧТО ФОТОГРАФИЯ, — размер и скругление у них
   общие, второго объявления не появляется (Avatar 29:82). Свой здесь только
   кегль: умолчальные 11 в круге 80 читаются точкой. */
.bo-player-img.avatar-initials {
    border: var(--bw-heavy) solid transparent;
    font-size: var(--fs-2xl);
}

.bo-player-side:first-child .bo-player-img {
    border-color: var(--player-1);
}

.bo-player-side:last-child .bo-player-img {
    border-color: var(--player-2);
}

/* Имя переносится, а не обрезается многоточием: «Айсулуу Чокоева»
   превращалась в «Айсулуу Чоко…», и карточка переставала отвечать на
   вопрос, кто играет */
.bo-player-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    line-height: var(--lh-snug);
    max-width: 150px;
    overflow-wrap: break-word;
}

.bo-player-cat {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   ПОЛОСЫ: завершённые и неглавные предстоящие
   ============================================
   Разметка взята у турниров — .to-compact и .to-side-stack. Не похожая,
   а та же самая: правило «актуальное крупно, история строкой» должно
   работать одинаково на обеих страницах, и правится оно в одном месте.

   Раньше оба раздела рисовались крупными карточками, и завершённые
   утапливали предстоящие. */
.bo-strip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

/* Афиша на фоне полосы приглушается сильнее, чем у турниров: постеры
   бывают светлыми, и подпись под названием по ним не читалась.

   Затемнения мало — светлое пятно всё равно проступает под мелким текстом,
   поэтому подписи получают ещё и тень. */
.bo-strip[style*="background-image"]::before {
    background: rgba(10, 10, 10, 0.9);
}

.bo-strip h4,
.bo-strip .bo-strip-sub,
.bo-strip .to-compact-date {
    text-shadow: 0 1px 3px var(--alpha-black-90);
}

.bo-strip-sub {
    font-size: var(--fs-xs);
    /* Контраст 3.21 при норме 4.5 — мерено по фактической краске 13.10 */
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-strip-right { text-align: right; }

/* ГЕОМЕТРИЯ ЗНАЧКА — ИЗ КОМПОНЕНТА `Badge 27:53`: высота 24, поля 8,
   радиус full, 11-й кегль средним весом, разрядка 0.5. */
.bo-strip-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding-inline: 8px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0.5px;
    line-height: var(--lh-none);
    text-transform: uppercase;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.bo-strip-live {
    background: var(--alpha-lime-12);
    color: var(--accent);
    border: var(--bw-hair) solid var(--alpha-lime-50);
}

/* У прошедшего матча цвета спокойные: тревожный оттенок тут ни к чему */
.bo-strip-done {
    background: var(--alpha-white-08);
    color: var(--text-muted);
    border: var(--bw-hair) solid var(--border-subtle);
}

.bo-strip-past .to-compact-date .to-day { color: var(--text-secondary); }

.bo-strip-fmt {
    font-size: var(--fs-2xs);
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: var(--info-subtle);
    color: var(--info);
    margin-left: 6px;
    vertical-align: middle;
}

/* Пустой раздел занимал пол-экрана. Достаточно строки */
.bo-empty-slim {
    padding: 26px 20px;
    text-align: center;
    color: var(--text-muted);
    border: var(--bw-hair) dashed var(--border-subtle);
    border-radius: var(--radius-lg);
}

.bo-more-wrap { text-align: center; margin-top: var(--space-md); }

.bo-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-h-sm);
    padding-inline: 24px;
    border-radius: var(--radius-full);
    border: var(--bw-hair) solid var(--border-subtle);
    background: var(--alpha-white-04);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: var(--lh-none);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.bo-more:hover { border-color: var(--accent); color: var(--accent); }

/* Полосы в одну колонку — на домашней границе. Было 860: третья точка
   останова при двух разрешённых. */
@media (max-width: 992px) {
    .bo-strip-grid { grid-template-columns: 1fr; }
}

/* Пара в крупной карточке: фотографии внахлёст, имена в две строки.
   Разметка одиночного баттла остаётся нетронутой — у него одно фото и одна
   строка, как было */
.bo-player-photos { display: flex; justify-content: center; }
.bo-player-photos.bo-pair .bo-player-img { width: 62px; height: 62px; }
.bo-player-photos.bo-pair .bo-player-img + .bo-player-img { margin-left: -18px; }
.bo-player-name.bo-pair-names {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: var(--lh-snug);
}
.bo-player-name.bo-pair-names span { font-size: var(--fs-sm); }

/* Имя в паре переносится на вторую строку, а не режется многоточием:
   «Василий Просто Василий» превращался в «Василий Просто …» */
.bo-player-name.bo-pair-names span {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Состав словами: мужские пары, женские пары, микст. Пол участников база
   знает, значит подпись собирается сама */
.bo-format {
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--info);
    margin-bottom: 10px;
}

.bo-vs-badge {
    /* Строго мельче названия карточки (18): перебивка не спорит с именем
       баттла. Было 21 против 18 — замер 13.10. */
    font-size: var(--fs-base);
    font-weight: 900;
    color: var(--accent);
    flex-shrink: 0;
    text-shadow: 0 0 20px var(--accent-glow);
}

/* Vote bar */
.bo-vote-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
    background: var(--alpha-white-08);
}

.bo-bar-p1 {
    background: var(--player-1);
    transition: width 0.5s ease;
    border-radius: 3px 0 0 3px;
}

.bo-bar-p2 {
    background: var(--player-2);
    transition: width 0.5s ease;
    border-radius: 0 3px 3px 0;
}

.bo-vote-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-xs);
    margin-bottom: var(--space-sm);
}

.bo-pct-p1 {
    color: var(--player-1);
    font-weight: 700;
}

.bo-pct-p2 {
    color: var(--player-2);
    font-weight: 700;
}

.bo-total-votes {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

/* Vote buttons */
.bo-vote-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: var(--space-sm);
}

.bo-vote-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-h-sm);
    padding-inline: 12px;
    border: var(--bw-hair) solid rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    background: var(--alpha-white-08);
    color: var(--text-primary);
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    /* Длинные фамилии распирали кнопку, и пара кнопок вылезала за край
       карточки: по умолчанию элемент в строке не сжимается меньше своего
       содержимого. Теперь имя обрезается многоточием */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-vote-btn:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--alpha-lime-06);
}

.bo-vote-btn.bo-vote-btn-p1:hover:not(:disabled) {
    border-color: var(--player-1);
    background: rgba(79, 195, 247, 0.12);
}

.bo-vote-btn.bo-vote-btn-p2:hover:not(:disabled) {
    border-color: var(--player-2);
    background: rgba(208, 80, 247, 0.12);
}

.bo-vote-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.bo-vote-btn.bo-vote-selected {
    border-color: var(--accent);
    background: var(--alpha-lime-12);
    color: var(--accent);
}

.bo-vote-locked {
    opacity: 0.7;
    cursor: default;
}

.bo-vote-status {
    font-size: var(--fs-xs);
    color: var(--accent);
    margin-bottom: 4px;
}

.bo-vote-login {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    text-align: center;
}

.bo-vote-closed-msg {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    text-align: center;
    font-style: italic;
}

/* Featured meta (date, time, venue) */
.bo-featured-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.bo-featured-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Featured title */
.bo-featured-title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    text-align: center;
}

/* Status badge */
.bo-status {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding-inline: 8px;
    border-radius: var(--radius-full);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    line-height: var(--lh-none);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bo-status.active {
    background: var(--alpha-black-60);
    border: var(--bw-hair) solid var(--alpha-lime-50);
    color: var(--accent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bo-status.completed {
    background: var(--alpha-black-60);
    border: var(--bw-hair) solid var(--alpha-white-12);
    color: var(--text-muted);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Featured link button */
/* ВЫСОТА СВОЙСТВОМ, А НЕ ПОЛЯМИ. Замер 13.10: 41 — мимо ступеней
   28 · 36 · 44 · 52. На телефоне ступень 44: это основной переход карточки. */
.bo-featured-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-h-sm);
    padding-inline: 24px;
    line-height: var(--lh-none);
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--fs-sm);
    font-weight: 700;
    border-radius: var(--radius-md);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    text-align: center;
}

.bo-featured-link:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* Empty state */
.bo-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    color: var(--text-muted);
    font-size: var(--fs-base);
}

.bo-empty svg {
    display: block;
    margin: 0 auto var(--space-sm);
    opacity: 0.3;
}

/* ========================================
   COUNTDOWN (reuse to-cd from tournaments-overview)
   ======================================== */
.bo-cd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* ОТСЧЁТ ДО НАЧАЛА — НЕ ТРЕВОГА, А ОЖИДАНИЕ, и красная плашка здесь
       была двумя бедами сразу. Первая: «срочно» (`-urgent`) отличалось от
       обычного на 1.39 — градация не работала, а белый на ярком красном
       давал 4.09 при норме 4.5, то есть САМОЕ СРОЧНОЕ читалось хуже
       обычного. Вторая: красный отсчёт стоял в 1.70 от эфира и схлопывался
       с ним — ровно то, что Костя отверг по снимку в 2б.
       Приём взят у страницы турнира (`.td-cd-box` + `.td-cd-num`), где он
       был с самого начала: нейтральная плашка, акцентные цифры, красный
       оставлен ТОЛЬКО для срочного. Померено: 14.19 против 5.69 у
       обычного, разница с срочным 2.84 против 1.39. */
    background: var(--alpha-white-08);
    border: var(--bw-hair) solid var(--alpha-white-12);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: var(--fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    line-height: var(--lh-none);
    position: relative;
    overflow: hidden;
    animation: boCdAppear 0.4s ease-out;
    box-shadow: none;
}

.bo-cd::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--alpha-white-12), transparent);
    animation: boCdShimmer 3s ease-in-out infinite;
}

@keyframes boCdShimmer {
    0%, 100% { left: -100%; }
    50% { left: 150%; }
}

@keyframes boCdAppear {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.bo-cd-unit {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    position: relative;
    z-index: 1;
}

.bo-cd-unit small {
    font-size: var(--fs-2xs);
    font-weight: 600;
    opacity: 0.75;
    margin-right: 3px;
}

.bo-cd-unit:last-child small {
    margin-right: 0;
}

.bo-cd-urgent {
    /* СРОЧНО — вот теперь это тревога, и она одна такая на карточке. */
    background: var(--danger-subtle);
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: 0 2px 16px rgba(255,71,87,0.25);
    animation: boCdAppear 0.4s ease-out, boCdUrgentPulse 2s ease-in-out infinite;
}

@keyframes boCdUrgentPulse {
    0%, 100% { box-shadow: 0 2px 12px var(--alpha-red-30); }
    50% { box-shadow: 0 2px 24px rgba(255,71,87,0.6); }
}

.bo-cd-label {
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.85;
    position: relative;
    z-index: 1;
    margin-right: 4px;
}

/* Map modal */
.bo-map-overlay {
    position: fixed;
    inset: 0;
    background: var(--modal-bg-heavy);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bo-map-modal {
    background: var(--bg-card);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 240px;
}

/* Имя окна — заголовок уровня, а не div: читалка берёт его по
   aria-labelledby, и уровень обязан существовать (правило куплено на окне
   контактов спонсоров 13.10). */
.bo-map-title {
    margin: 0 0 4px;
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--text-primary);
}

.bo-map-btn {
    display: block;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.bo-map-btn:hover { opacity: 0.85; }

.bo-map-2gis {
    background: #36b37e;
    color: var(--neutral-white);
}

.bo-map-google {
    background: #4285f4;
    color: var(--neutral-white);
}

.bo-map-cancel {
    background: var(--alpha-white-12);
    color: var(--text-secondary);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 992px) {
    .bo-card-grid {
        grid-template-columns: 1fr;
    }

    .bo-featured {
        min-height: 360px;
    }

    /* Обложка по общему стандарту: название вверху, цифры внизу — так же,
       как на страницах категорий турниров. Пол высоты даёт общий токен,
       своего числа здесь больше нет. */
    .bo-hero {
        padding: var(--section-y) var(--pad-x) var(--section-y-sm);
        align-items: stretch;
    }

    .bo-hero-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .bo-section {
        padding: var(--section-y-sm) var(--pad-x);
    }

    .bo-player-img {
        width: 64px;
        height: 64px;
    }

    /* Однострочная подпись полосы обрезалась почти вдвое: от «ТЕСТ второй
       категории — Tour мужской одиночный» оставалось меньше половины.
       Две строки, многоточие остаётся. Было в своём блоке на 1024. */
    .bo-strip-sub {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: var(--lh-snug);
    }
}

/* ГРАНИЦ ДВЕ, И ЭТО ВТОРАЯ. Было четыре своих — 860, 768, 480 и 375 — плюс
   1024. Кегли обложки ступают сами, из токенов `--fs-hero*`; здесь остаётся
   только то, что от них не зависит. Снимок игрока на 375 был 48: теперь 56,
   как на 390, — одна ступень на весь телефон. */
@media (max-width: 640px) {
    .bo-featured {
        min-height: 280px;
    }

    .bo-featured-content {
        padding: var(--space-md);
    }

    .bo-player-img {
        width: 56px;
        height: 56px;
    }

    .bo-player-name {
        font-size: var(--fs-xs);
        max-width: 100px;
    }
}

/* Заглушка пустого списка — пламя вместо листа бумаги из общего набора */
.bo-empty-icon {
    font-size: var(--fs-3xl);
    line-height: var(--lh-none);
    margin-bottom: var(--space-sm);
    opacity: 0.45;
}


/* ═══ КЛАССЫ ВМЕСТО АТРИБУТА style ═══════════════════════════════════════
   В js лежали два инлайновых набора: шапка карточки (значок и отсчёт в ряд)
   и подложка карточки без афиши. Оформление живёт в файле стилей. */
.bo-featured-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.bo-featured-plain {
    background: var(--bg-card);
}

/* ═══ МЕСТО — ЭТО КНОПКА, А НЕ ТЕКСТ ═════════════════════════════════════
   Нажатие открывает окно с картами, а замер 13.10 дал цель 20: самая мелкая
   цель обеих страниц была у того, что вообще не выглядит нажимаемым.
   Слой цели даётся псевдоэлементом — коробка остаётся в строке меты. */
.bo-meta-venue {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--btn-h-sm);
    cursor: pointer;
}

.bo-meta-venue::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--btn-h-md);
    transform: translateY(-50%);
}

/* ═══ ВИДИМЫЙ ФОКУС ══════════════════════════════════════════════════════
   В файле не было ни одного `:focus-visible`, при том что на странице
   ссылка карточки, две кнопки голоса, «показать ещё», место и полосы.
   Кольцо — то же, что требует компонент `Button 17:82`. */
/* `.bo-featured-link` из списка снят 13.10, вечер: он стал <span>, а span
   фокус не берёт — кольцо на нём мёртвое. Кольцо карточки несёт слой. */
.bo-vote-btn:focus-visible,
.bo-more:focus-visible,
.bo-meta-venue:focus-visible,
.bo-strip:focus-visible {
    outline: var(--bw-heavy) solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}


/* ═══ ЦЕЛЬ 44 НА ТЕЛЕФОНЕ ════════════════════════════════════════════════
   Ступень 36 остаётся мыши, пальцу — 44. Граница домашняя. */
@media (max-width: 640px) {
    .bo-featured-link,
    .bo-vote-btn,
    .bo-more,
    .bo-meta-venue {
        min-height: var(--btn-h-md);
    }
}