/* Матч&мяч v88 — страница результата матча (/match/…).
 *
 * Отдельный файл, потому что страница живёт в SEO-шелле, а собрана из другого
 * материала: тут не текстовая статья, а табло со счётом. Классы в своём
 * неймспейсе .mr-* (match result), чтобы ничего не пересекалось ни с .seo-*,
 * ни с кабинетом.
 *
 * Почему не переиспользовал .seo-facts и .seo-reference-warning-actions, как
 * было в первой версии: первый рисует партии одинаковыми лаймовыми числами и
 * не показывает, кто из двоих их взял, а второй — вспомогательный грид-элемент
 * предупреждения о справочных данных (`grid-column:2`), который вне своего
 * родителя терял отступы, из-за чего кнопки слипались с CTA-блоком. Плюс
 * .seo-section-note на телефоне спрятан через display:none, так что подпись
 * «Профили участников матча» на мобильном просто исчезала.
 */

.seo-match .mr-hero { margin-bottom: 0 !important; }

/* Заголовок матча длиннее заголовка раздела: «Иван Петров — Пётр Иванов» плюс
   пара 2×2 — это до четырёх имён. Даём перенос и чуть меньший кегль, иначе
   строка вылезает из светлой плашки. */
.seo-match .mr-hero h1 {
    font-size: clamp(30px, 3.4vw, 50px) !important;
    overflow-wrap: break-word;
}
.seo-match .mr-hero-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 14px 0 0 !important;
    max-width: none !important;
}
.seo-match .mr-hero-sub span { white-space: nowrap; }

/* ---------- Табло ---------- */

.mr-board {
    margin-top: 28px;
    border: 1px solid var(--border, rgba(255, 255, 255, .08));
    border-radius: 20px;
    background: rgba(255, 255, 255, .02);
    overflow: hidden;
}

.mr-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
}
.mr-row + .mr-row { border-top: 1px solid var(--border, rgba(255, 255, 255, .08)); }

/* Победителя отмечаем полосой слева и лаймовой подписью. Жирного шрифта мало:
   в парном матче обе строки — по два имени, и на глаз они неотличимы. */
.mr-row-winner {
    position: relative;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent, #C6F24E) 9%, transparent),
        transparent 62%);
}
.mr-row-winner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent, #C6F24E);
}

.mr-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mr-side-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted, #969C94);
}
.mr-row-winner .mr-side-label { color: var(--accent, #C6F24E); }
.mr-side-name {
    font-size: clamp(17px, 2.2vw, 22px);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.mr-sets { display: flex; gap: 8px; }
.mr-set {
    display: grid;
    place-items: center;
    min-width: 52px;
    height: 52px;
    padding: 0 8px;
    border: 1px solid var(--border, rgba(255, 255, 255, .08));
    border-radius: 14px;
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, #969C94);
}
/* Взятая партия — лаймовая. Так со счёта читается ход матча, а не только
   итог: видно, что вторую партию проигравший всё-таки взял. */
.mr-set-won {
    border-color: color-mix(in srgb, var(--accent, #C6F24E) 40%, transparent);
    background: color-mix(in srgb, var(--accent, #C6F24E) 12%, transparent);
    color: var(--accent, #C6F24E);
}

.mr-legend {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 22px 16px;
    color: var(--text-muted, #969C94);
    font-size: 12px;
}
.mr-legend span {
    min-width: 52px;
    padding: 0 8px;
    text-align: center;
}

.mr-noscore {
    margin: 0;
    padding: 0 22px 20px;
    color: var(--text-muted, #969C94);
    font-size: 14px;
}

/* ---------- Участники ---------- */

.mr-players { margin-top: 32px; }
.mr-players-label {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted, #969C94);
}
.mr-players-list { display: flex; flex-wrap: wrap; gap: 10px; }

.mr-cta { margin-top: 32px; }

@media (max-width: 700px) {
    .mr-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px 18px;
    }
    .mr-sets { flex-wrap: wrap; }
    .mr-set { min-width: 46px; height: 46px; font-size: 19px; border-radius: 12px; }
    /* Подписи «партия 1 / 2 / 3» выравнивались по правому краю под колонками
       счёта. На узком экране счёт уехал под имя, и выравнивать больше не по
       чему. */
    .mr-legend { justify-content: flex-start; padding: 0 18px 14px; }
    .mr-legend span { min-width: 46px; }
}