/* Стили страниц турниров (/events и /events/{id}).
   Токены и общие примитивы (.kg, .kg-panel, .kg-sec, .kg-badge, .kg-seg, .kg-tabs…)
   лежат в kg.css — он подключается на этих страницах первым. */

.kg-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--kg-bd);
    border-radius: 7px;
    background: var(--kg-s2);
    width: 264px;
    max-width: 100%;
}
.kg-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--kg-t1);
    font: 400 13px/1 var(--kg-sans);
}
.kg-search input::placeholder { color: var(--kg-t3); }

/* ─────────────────────────── список турниров ─────────────────────────── */

.kg-rows { overflow: hidden; }

.kg-row,
.kg-rows__head {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 74px 158px 96px 168px 118px;
    grid-template-areas:
        "logo name  fmt dates teams prize status"
        "logo phase fmt dates teams prize status";
    gap: 4px 16px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--kg-bd);
}
.kg-row:last-child { border-bottom: 0; }
.kg-row:hover { background: var(--kg-s2); }

.kg-rows__head {
    grid-template-areas: "logo name fmt dates teams prize status";
    padding: 9px 16px;
    background: var(--kg-s2);
    font: 600 10.5px/1 var(--kg-mono);
    letter-spacing: .08em;
    color: var(--kg-t3);
    white-space: nowrap;
}

.kg-row__logo   { grid-area: logo; }
.kg-row__name   { grid-area: name; font: 600 15px/1.25 var(--kg-sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kg-row__phase  { grid-area: phase; display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 12px/1 var(--kg-sans); color: var(--kg-t2); }
.kg-row__fmt    { grid-area: fmt; }
.kg-row__dates  { grid-area: dates; font: 500 12.5px/1.35 var(--kg-mono); font-variant-numeric: tabular-nums; color: var(--kg-t2); }
.kg-row__teams  { grid-area: teams; font: 500 13px/1 var(--kg-mono); color: var(--kg-t2); }
.kg-row__prize  { grid-area: prize; text-align: right; font: 600 15px/1 var(--kg-mono); font-variant-numeric: tabular-nums; color: var(--kg-t1); }
.kg-row__status { grid-area: status; display: flex; justify-content: flex-end; }
.kg-row__prize.is-gold { color: var(--kg-gold); }
/* Метки над числами нужны только в стеке — на десктопе их роль играет шапка таблицы. */
.kg-row__teams .kg-label, .kg-row__prize .kg-label { display: none; }

.kg-live-text { min-width: 0; font: 600 12px/1 var(--kg-mono); color: var(--kg-live); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─────────────────────────── карточки предстоящих ─────────────────────────── */

.kg-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.kg-card { overflow: hidden; display: flex; flex-direction: column; }
.kg-card:hover { border-color: var(--kg-bd2); }
.kg-card__banner {
    height: 78px;
    position: relative;
    background: var(--kg-s2);
    display: flex;
    align-items: flex-end;
}
.kg-card__banner img { width: 100%; height: 100%; object-fit: cover; }
.kg-card__banner .kg-badge { position: absolute; top: 10px; right: 10px; }
.kg-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kg-card__head { display: flex; gap: 10px; align-items: flex-start; }
.kg-card__head .kg-logo { width: 36px; height: 36px; font-size: 11px; }
.kg-card.has-banner .kg-card__head .kg-logo { margin-top: -24px; }
.kg-card__name { font: 600 14.5px/1.3 var(--kg-sans); text-wrap: pretty; }
.kg-card__meta { margin-top: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 500 12px/1 var(--kg-mono); color: var(--kg-t2); }
.kg-card__rule { height: 1px; background: var(--kg-bd); }
.kg-card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kg-card__foot .kg-label { display: block; margin-bottom: 5px; }
.kg-card__val { font: 600 14px/1 var(--kg-mono); font-variant-numeric: tabular-nums; color: var(--kg-t1); }
.kg-card__val.is-gold { color: var(--kg-gold); }
.kg-card__val.is-muted { color: var(--kg-t2); }

/* ─────────────────────────── страница турнира ─────────────────────────── */

.kg-hero {
    position: relative;
    border: 1px solid var(--kg-bd);
    border-radius: 10px;
    overflow: hidden;
    background: var(--kg-s2);
}
.kg-hero.has-banner { min-height: 288px; }
.kg-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Скрим всегда тёмный: он лежит на фотографии, а не на поверхности темы.
   94% снизу → 12% сверху, иначе заголовок тонет в светлом баннере. */
.kg-hero__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(6,10,15,.94) 0%, rgba(6,10,15,.82) 34%, rgba(6,10,15,.42) 66%, rgba(6,10,15,.12) 100%);
}
.kg-hero__body {
    position: relative;
    padding: 22px 24px;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 28px; flex-wrap: wrap;
}
.kg-hero.has-banner .kg-hero__body { padding-top: 140px; }
.kg-hero__main { display: flex; align-items: flex-end; gap: 18px; min-width: 0; }
.kg-hero__logo { width: 84px; height: 84px; flex: none; border-radius: 10px; object-fit: contain; border: 1px solid var(--kg-bd); background: var(--kg-s3); }
.kg-hero__tags { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.kg-hero h1 { margin: 0; font: 700 34px/1.1 var(--kg-sans); letter-spacing: -.02em; text-wrap: pretty; }
.kg-hero__meta { margin-top: 10px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font: 500 13.5px/1.4 var(--kg-mono); color: var(--kg-t2); }
.kg-hero__prize { text-align: right; flex: none; }
.kg-hero__prize .kg-num { display: block; font-size: 30px; font-weight: 600; line-height: 1; }
.kg-hero__prize .kg-num.is-gold { color: var(--kg-gold); }
.kg-hero__prize .kg-label { display: block; margin-top: 8px; letter-spacing: .09em; }

/* Поверх фотографии цвета фиксированные — подложка тёмная в обеих темах. */
.kg-hero.has-banner .kg-hero__body,
.kg-hero.has-banner .kg-hero__body h1 { color: #fff; }
.kg-hero.has-banner .kg-hero__meta { color: rgba(255,255,255,.86); }
.kg-hero.has-banner .kg-hero__prize .kg-num { color: #fff; }
.kg-hero.has-banner .kg-hero__prize .kg-num.is-gold { color: #F0C868; }
.kg-hero.has-banner .kg-hero__prize .kg-label { color: rgba(255,255,255,.72); }
.kg-hero.has-banner .kg-tag { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.kg-hero.has-banner .kg-badge { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.kg-hero.has-banner .kg-badge.is-live { background: rgba(46,212,122,.16); border-color: rgba(46,212,122,.45); color: #5AE49B; }
.kg-hero.has-banner .kg-badge.is-soon { background: rgba(233,179,87,.16); border-color: rgba(233,179,87,.45); color: #F0C868; }
.kg-hero.has-banner .kg-hero__logo { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }

.kg-body {
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 20px;
    align-items: start;
}
.kg-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.kg-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.kg-prose { margin: 0; max-width: 76ch; font: 400 14.5px/1.65 var(--kg-sans); color: var(--kg-t2); text-wrap: pretty; white-space: pre-line; }

/* Сетка «ключевых фактов»: разделители — фон под зазором в 1px, без теней. */
/* Не grid: число фактов переменное (приз, формат и текущий этап — необязательные),
   и на auto-fit последний ряд оставался недозаполненным — вместо ячеек светился фон
   контейнера. flex-wrap растягивает остаток ряда по ширине, пустот не остаётся.
   Тот же приём ниже в .kg-stageline. */
.kg-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--kg-bd);
    border: 1px solid var(--kg-bd);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 18px;
}
.kg-facts > div { flex: 1 1 180px; min-width: 0; background: var(--kg-s2); padding: 13px 14px; }
.kg-facts .kg-label { display: block; }
.kg-fact__v { margin-top: 7px; font: 600 17px/1.2 var(--kg-mono); font-variant-numeric: tabular-nums; color: var(--kg-t1); }
.kg-fact__v.is-text { font: 600 14px/1.3 var(--kg-sans); }
.kg-fact__v.is-accent { color: var(--kg-ac); }

/* Полоса этапов турнира: текущий подсвечен вертикальной чертой слева. */
.kg-stageline {
    margin-top: 16px;
    display: flex;
    border: 1px solid var(--kg-bd);
    border-radius: 8px;
    overflow: hidden;
    flex-wrap: wrap;
}
.kg-stageline > div { flex: 1 1 160px; padding: 11px 14px; background: var(--kg-s2); border-right: 1px solid var(--kg-bd); }
.kg-stageline > div:last-child { border-right: 0; }
.kg-stageline > div.is-now { background: var(--kg-ac-soft); box-shadow: inset 2px 0 0 var(--kg-ac-fill); }
.kg-stageline > div.is-now .kg-label { color: var(--kg-ac); }
.kg-stageline__d { margin-top: 6px; font: 500 12.5px/1 var(--kg-mono); font-variant-numeric: tabular-nums; color: var(--kg-t2); }
.kg-stageline > div.is-now .kg-stageline__d { color: var(--kg-t1); font-weight: 600; }

/* Карточки боковой колонки. */
.kg-side__head {
    padding: 11px 14px;
    border-bottom: 1px solid var(--kg-bd);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.kg-vs { padding: 14px; }
.kg-vs__teams { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kg-vs__t { text-align: center; flex: 1; min-width: 0; }
.kg-vs__t .kg-logo { width: 36px; height: 36px; margin: 0 auto 8px; font-size: 11px; }
.kg-vs__t span { display: block; font: 600 12.5px/1.3 var(--kg-sans); overflow: hidden; text-overflow: ellipsis; }
.kg-vs__sep { font: 600 12px/1 var(--kg-mono); color: var(--kg-t3); }
.kg-vs__clock {
    margin-top: 14px;
    padding: 10px;
    border-radius: 6px;
    background: var(--kg-s2);
    border: 1px solid var(--kg-bd);
    text-align: center;
}
.kg-vs__clock .kg-num { font-size: 20px; font-weight: 600; line-height: 1; color: var(--kg-t1); }
.kg-vs__clock .kg-label { display: block; margin-top: 6px; }

.kg-prizes { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.kg-prizes__r { display: flex; align-items: center; gap: 10px; }
.kg-prizes__p {
    width: 22px; height: 22px; flex: none;
    border: 1px solid var(--kg-bd);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font: 600 11px/1 var(--kg-mono);
    color: var(--kg-t2);
}
.kg-prizes__r:first-child .kg-prizes__p { border-color: var(--kg-bd2); color: var(--kg-t1); }
.kg-prizes__n { flex: 1; font: 500 12.5px/1 var(--kg-sans); color: var(--kg-t2); }
.kg-prizes__v { font: 600 13px/1 var(--kg-mono); font-variant-numeric: tabular-nums; color: var(--kg-t2); }
.kg-prizes__r:first-child .kg-prizes__v { color: var(--kg-t1); }
.kg-prizes__v.is-gold { color: var(--kg-gold); }

.kg-people { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.kg-person { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.kg-person img,
.kg-person .kg-ava {
    width: 38px; height: 38px; flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--kg-bd);
    background: var(--kg-s3);
    display: flex; align-items: center; justify-content: center;
    font: 600 13px/1 var(--kg-sans);
    color: var(--kg-t3);
}
.kg-person__n { font: 600 13.5px/1.2 var(--kg-sans); }
.kg-person__s { margin-top: 5px; font: 500 11px/1 var(--kg-mono); color: var(--kg-t3); }
/* Кнопки трансляций обезличены: одна высота, одна типографика, нейтральная плашка —
   в светлой теме разноцветные пастельные блоки читались как ошибка вёрстки. */
.kg-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.kg-links > a {
    height: 32px;
    border: 1px solid var(--kg-bd);
    border-radius: 6px;
    background: var(--kg-s2);
    color: var(--kg-t2);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font: 600 11.5px/1 var(--kg-sans);
    white-space: nowrap;
}
.kg-links > a:hover { border-color: var(--kg-bd2); color: var(--kg-t1); }
.kg-links > a::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--kg-t3); }
.kg-rule { height: 1px; background: var(--kg-bd); }

/* Команды турнира. */
.kg-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.kg-team { padding: 14px; }
.kg-team:hover { border-color: var(--kg-bd2); }
.kg-team__h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kg-team__h .kg-logo { width: 34px; height: 34px; font-size: 11px; }
.kg-team__n { font: 600 13.5px/1.2 var(--kg-sans); overflow: hidden; text-overflow: ellipsis; }
.kg-team__s { margin-top: 4px; font: 500 11px/1 var(--kg-mono); color: var(--kg-t3); }
.kg-team__roster { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--kg-bd); display: flex; flex-wrap: wrap; gap: 5px; }
.kg-team__roster > span {
    font: 500 11px/1 var(--kg-mono);
    color: var(--kg-t2);
    background: var(--kg-s2);
    border: 1px solid var(--kg-bd);
    border-radius: 4px;
    padding: 4px 6px;
}

/* ─────────────────────────── адаптив ─────────────────────────── */

/* Ниже 1100px правая колонка уезжает под контент: 340px + таблица матчей
   в 1fr начинают резать названия команд. */
@media (max-width: 1100px) {
    .kg-body { grid-template-columns: minmax(0,1fr); }
}

/* Ниже 900px строка-таблица перестраивается в стек: три зоны в карточке
   (шапка / фаза / метрики), ничего не переносится через тире. */
@media (max-width: 900px) {
    .kg-rows__head { display: none; }
    .kg-row {
        grid-template-columns: 40px auto minmax(0,1fr) auto;
        grid-template-areas:
            "logo  name  name  status"
            "logo  dates fmt   fmt"
            "phase phase phase phase"
            "prize prize teams teams";
        gap: 7px 10px;
        align-items: start;
        padding: 12px;
    }
    .kg-row__logo, .kg-logo { width: 40px; height: 40px; }
    .kg-row__name { white-space: normal; overflow: visible; line-height: 1.3; align-self: center; }
    .kg-row__status { align-self: center; }
    .kg-row__fmt { justify-self: start; }
    .kg-row__dates { align-self: center; }
    .kg-row__phase { padding-top: 4px; border-top: 1px solid var(--kg-bd); }
    .kg-row__teams, .kg-row__prize {
        padding-top: 7px;
        border-top: 1px solid var(--kg-bd);
        font-size: 16px;
    }
    .kg-row__teams { text-align: right; }
    .kg-row__prize { text-align: left; margin-right: -10px; }
    .kg-row__teams .kg-label, .kg-row__prize .kg-label { display: block; margin-bottom: 5px; }
    .kg-row__teams .kg-label { text-align: right; }
}

@media (max-width: 640px) {
    /* Баннер в карточке предстоящего на телефоне не несёт информации, а съедает экран —
       карточка становится компактной строкой, как в макете. */
    .kg-card__banner { display: none; }
    .kg-card.has-banner .kg-card__head .kg-logo { margin-top: 0; }
    .kg-card__body { padding-top: 12px; }

    .kg-hero h1 { font-size: 20px; }
    .kg-hero.has-banner { min-height: 0; }
    /* Hero схлопывается: баннер 132px сверху, заголовочный блок — на поверхности,
       а не поверх фотографии. Резать hero пополам нельзя, текст утонет. */
    .kg-hero.has-banner .kg-hero__body {
        padding-top: 144px;
        background: linear-gradient(to top, var(--kg-s1) 0, var(--kg-s1) calc(100% - 132px), transparent calc(100% - 132px));
    }
    .kg-hero.has-banner .kg-hero__img { height: 132px; }
    .kg-hero.has-banner .kg-hero__scrim { bottom: auto; height: 132px; }
    .kg-hero.has-banner .kg-hero__body,
    .kg-hero.has-banner .kg-hero__body h1 { color: var(--kg-t1); }
    .kg-hero.has-banner .kg-hero__meta { color: var(--kg-t2); }
    .kg-hero.has-banner .kg-hero__prize .kg-num { color: var(--kg-t1); }
    .kg-hero.has-banner .kg-hero__prize .kg-num.is-gold { color: var(--kg-gold); }
    .kg-hero.has-banner .kg-hero__prize .kg-label { color: var(--kg-t3); }
    .kg-hero.has-banner .kg-tag,
    .kg-hero.has-banner .kg-badge { background: var(--kg-s2); border-color: var(--kg-bd); color: var(--kg-t2); }
    .kg-hero.has-banner .kg-badge.is-live { background: var(--kg-live-soft); border-color: var(--kg-live-bd); color: var(--kg-live); }
    .kg-hero.has-banner .kg-badge.is-soon { background: var(--kg-soon-soft); border-color: var(--kg-soon-bd); color: var(--kg-soon); }
    .kg-hero.has-banner .kg-hero__logo { border-color: var(--kg-bd); background: var(--kg-s3); }
    .kg-hero__logo { width: 48px; height: 48px; }
    .kg-hero__main { gap: 12px; }
    .kg-hero__prize { text-align: left; }
    .kg-hero__prize .kg-num { font-size: 19px; }

    /* Тач-таргеты в стеке — 44px. */
    .kg-search { height: 44px; width: 100%; margin-left: 0 !important; }
    .kg-links > a { height: 44px; font-size: 12px; }
}