/* components/match-list.css — zápas v seznamu.
 *
 * Dvě podoby téhož: kompaktní ŘÁDEK (.ss-match, kreslí ho
 * _ss_match_row.php) a blok VZÁJEMNÝCH ZÁPASŮ (.h2h-*).
 *
 * Řádek sem byl přenesen z pages/score-service.css. Než se tak stalo,
 * měl web tři různé podoby jednoho zápasu v seznamu: tenhle řádek na
 * úvodce, kartu .match-mini-card u klubu a rozpisu, a k tomu dvě ruční
 * kopie té karty přímo v šablonách klubu a rozhodčího. Zápas tak vypadal
 * na každé stránce trochu jinak.
 *
 * Teď je řádek jeden a používají ho všechny stránky, takže jeho styly
 * nesmí být zamčené v souboru jedné z nich.
 */

/* ==========================================================================
   ŘÁDEK ZÁPASU (.ss-match)
   ========================================================================== */

.ss-match-list { display: flex; flex-direction: column; }

.ss-list-head {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 12px 4px 6px;
}
.ss-list-head:first-child { padding-top: 4px; }

/* Řádek zápasu: oba týmy v jednom řádku, domácí vlevo (název, logo),
   uprostřed skóre, hosté vpravo (logo, název) — jako na fotmob.com.
   Nesehraný zápas má uprostřed den a čas výkopu.

   Obě strany jsou stejně široké (1fr), střed si bere jen, co potřebuje —
   skóre tak sedí přesně uprostřed řádku bez ohledu na délku názvů. Nic
   jiného v řádku není: tečka probíhajícího zápasu i výsledek z pohledu
   týmu stojí u skóre, takže názvy mají celou šířku až po okraj.

   Linka mezi řádky jde přes celou šířku panelu, ne jen řádku: řádek si
   zápornými okraji sahá přes odsazení panelu (--panel-pad nastavuje
   .ss-panel) a totéž odsazení si vrací uvnitř. Mimo panel je proměnná
   prázdná a řádek se chová jako dřív. */
.ss-match {
    display: grid;
    align-items: center;
    gap: 4px;
    margin: 0 calc(-1 * var(--panel-pad, 0px));
    /* Vodorovně jen odsazení panelu — každý pixel navíc bere názvům. */
    padding: 6px var(--panel-pad, 0px);
    border-top: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-main);
    font-size: 0.85rem;
}
/* Strany jsou vždycky stejně široké (minmax(0, 1fr)), skóre tedy stojí
   v ose každého řádku a nikdy neuhýbá. Název, který se do poloviny
   nevejde, se zalomí (viz .ss-side-name). Krátce tu byla varianta, kde si
   delší název bral místo z druhé strany — skóre pak v takovém řádku
   uskočilo, a to nechceme. */
/* Svislá mezera zůstává ze společného gap (popisek a hřiště nad a pod
   řádkem), vodorovná odděluje loga od skóre nebo času — při 4 px se
   znak lepil na číslo. */
.ss-match  { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 12px; }

/* První řádek seznamu linku nad sebou nemá — nad ním je hlavička, ne
   zápas. Průhledná, ne žádná: řádek si drží touž výšku jako ostatní.
   Řádek může být zabalený v .ss-row-fold (rozbalovací seznamy) nebo
   v .h2h-item (vzájemné zápasy), proto tři podoby téhož pravidla. */
.ss-match-list > .ss-match:first-child,
.ss-match-list > .ss-row-fold:first-child > .ss-match,
.ss-match-list > .h2h-item:first-child > .ss-match { border-top-color: transparent; }
.ss-match:hover { background: var(--bg-surface); }
.ss-match-upcoming { color: var(--text-muted); }

/* Odkaz na zápas leží pod obsahem řádku a pokrývá ho celý; odkazy na kluby
   se nad něj vytáhnou z-indexem. Vnořený <a> v <a> není platné HTML. */
.ss-match { position: relative; }
.ss-match-cover { position: absolute; inset: 0; z-index: 0; }
.ss-match > .ss-side,
.ss-match > .ss-center { position: relative; z-index: 1; }
/* Nad překryvným odkazem má klik zachytávat jen odkaz na klub. Skóre
   i příznaky jsou průchozí, takže klik kamkoli jinam otevře zápas. */
.ss-match > .ss-side,
.ss-match > .ss-center { pointer-events: none; }
.ss-side-club { pointer-events: auto; }
.ss-match-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Strana: odkaz na klub (název a logo) a vedle něj případné červené karty.
   Domácí se lepí ke středu zprava, hosté zleva; u hostů jde pořadí
   obráceně (logo, název), aby loga stála u skóre a názvy vně.

   Obsah se drží u středu, ne u kraje: bez toho by se klikací plocha klubu
   roztáhla přes celý sloupec i s prázdnem, kde má fungovat proklik na
   zápas. U hostů je řádek obrácený (row-reverse), takže „u středu" je tam
   flex-end — začátek obráceného řádku leží vpravo. */
.ss-side {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ss-side-home { justify-content: flex-end; }
.ss-side-away { justify-content: flex-end; flex-direction: row-reverse; }

/* Logo a název tvoří jeden odkaz na klub.
   (Bez display:contents — ten u odkazů dělá potíže s přístupností.) */
.ss-side-club {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.ss-side-away .ss-side-club { flex-direction: row-reverse; }
.ss-side-home .ss-side-name { text-align: right; }

/* Vyloučení: jedna značka na každou červenou kartu týmu v zápase.
   Nezmenšuje se — ustoupit má název, ne informace o vyloučení. */
.ss-side-rc { display: inline-flex; gap: 2px; flex-shrink: 0; }
.ss-rc {
    display: block;
    width: 7px;
    height: 10px;
    border-radius: 1px;
    background: var(--rc);
}

/* Čelní buňka řádku sezóny na kartě hráče (ročník). */
.ss-row-lead {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    align-self: center;
    text-align: center;
}

/* Název se zalamuje, ne uřezává: zalomený na dva řádky zůstane celý,
   řádek se o kus zvýší. Na běžné šířce se to netýká ani nejdelších názvů
   v evidenci („FC Spartak Rychnov nad Kněžnou "B"" má ~205 px, polovina
   řádku v panelu širokém 650 px dává názvu ~255 px). */
.ss-side-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; font-size: 0.82rem; }

/* Střed: skóre, nebo den a čas výkopu. Pevná nejmenší šířka, aby se skóre
   „10:0" a „0:0" nelišila a strany kolem něj neposkakovaly; pevná nejmenší
   výška, aby byl řádek se skóre stejně vysoký jako řádek se dnem a časem
   (dva řádky textu) — jinak by se v seznamu střídaly dvě výšky. */
.ss-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 36px;
    min-height: 32px;
    line-height: 1.15;
    text-align: center;
}
.ss-center-score {
    padding: 2px 5px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ss-center-sep { margin: 0 3px; color: var(--text-muted); font-weight: 600; }
/* Výsledek z pohledu týmu: podklad skóre v barvách značky V/R/P ze sloupce
   Forma v tabulce. Text v něm je tmavý jako na značce. */
.ss-center-score.is-v { background: var(--win-bright); color: var(--bg-main); }
.ss-center-score.is-r { background: var(--neutral); color: var(--bg-main); }
.ss-center-score.is-p { background: var(--loss); color: var(--on-dark); }
.ss-center-score.is-v .ss-center-sep,
.ss-center-score.is-r .ss-center-sep,
.ss-center-score.is-p .ss-center-sep { color: inherit; opacity: 0.7; }
.ss-center-score.is-v .ss-provisional,
.ss-center-score.is-r .ss-provisional,
.ss-center-score.is-p .ss-provisional { color: inherit; }
/* Nesehraný zápas: den drobně nad časem. */
.ss-center-day {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}
.ss-center-time { font-size: 0.9rem; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
.ss-match-upcoming .ss-center-time { color: var(--text-muted); }
/* Poznámka pod skóre: rozstřel („p"), kontumace („k"). */
.ss-center-note { display: inline-flex; gap: 4px; align-items: center; font-size: 0.62rem; color: var(--text-muted); line-height: 1; }
.ss-pen { font-size: 0.62rem; }

/* Názvy mají v každém řádku touž váhu písma (600), odehraný i nesehraný
   zápas. Odehraný míval tučné (700) a nesehraný obyčejné písmo, jenže
   tučný text je širší: týž název se v řádku s výsledkem lámal a v řádku
   s výkopem vešel na jeden řádek, což vypadalo jako nestejně široké strany.
   Vítěze od poraženého dělí barva: vítěz bílý, poražený i obě strany
   remízy šedé. Nesehraný zápas si nechává tlumený řádek celý
   (.ss-match-upcoming), rozlišovat v něm není co. */
.ss-side-name { font-weight: 600; }
.ss-match:not(.ss-match-upcoming) .ss-side .ss-side-name { color: var(--text-muted); }
.ss-match:not(.ss-match-upcoming) .ss-side.is-winner .ss-side-name { color: var(--text-main); }


/* Hvězdička u průběžného výsledku: skóre je opsané ze soupisky soutěže,
   zápis o utkání ještě nedorazil. Schválně nenápadná — výsledek je to
   správný, jen zatím bez sestav a statistik. Co znamená, řekne popisek
   (title) na ní; kdo si jí nevšimne, o nic nepřijde. */
.ss-provisional {
    font-size: 0.8rem;
    line-height: 1;
    color: var(--accent);
    cursor: help;
    pointer-events: auto;
}

/* Tepající skóre — zápas se hraje. Pomalé prosvítání odliší živé číslo od
   hotového výsledku, aniž by tahalo oči jako blikání: celý cyklus trvá dvě
   a půl vteřiny a nikdy nezhasne úplně. Akcentní barva k tomu říká „teď",
   stejně jako tečka u tlačítka „Hraje se" v hlavičce přehledu.

   Tečka vedle skóre (.ss-running) tu bývala taky; zbývá po ní jen značka
   v časové ose zápasu (.timeline-live), kde skóre není. */
.ss-center-score.is-running {
    color: var(--accent);
    animation: ss-running-blink 2.5s ease-in-out infinite;
}
/* Tepou jen čísla: animuje se barva textu, ne průhlednost, a dvojtečka má
   barvu vlastní, takže stojí. */
.ss-center-score.is-running .ss-center-sep { color: var(--text-muted); }

@keyframes ss-running-blink {
    0%, 100% { color: var(--accent); }
    50%      { color: color-mix(in srgb, var(--accent) 30%, transparent); }
}
.ss-running {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    animation: ss-running-pulse 2.5s ease-in-out infinite;
}

/* Tlačítko „Hraje se" má před textem tečku, jako „Live" na fotmob.com.
   Nic se nehraje: šedá. Něco se hraje a filtr je vypnutý: tečka tepe
   v akcentu stejným rytmem jako skóre probíhajícího zápasu — kdo ho uvidí
   v seznamu, pozná, co tlačítko vyfiltruje. Zapnutý filtr: tečka svítí
   akcentem bez pohybu, celý seznam už je živý. */
.ss-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-muted);
    flex: none;
}
.ss-live-toggle:not(.is-disabled) .ss-live-dot { background: var(--accent); }
.ss-live-toggle:not(.is-on):not(.is-disabled) .ss-live-dot {
    animation: ss-running-pulse 2.5s ease-in-out infinite;
}

@keyframes ss-running-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

/* Kdo si pohyb na stránkách vypnul, dostane týž text bez animace. */
@media (prefers-reduced-motion: reduce) {
    .ss-running,
    .ss-center-score.is-running { animation: none; }
    /* Bez pohybu zůstane tečka v akcentu — že se hraje, řekne barva. */
    .ss-live-toggle:not(.is-on):not(.is-disabled) .ss-live-dot { animation: none; }
}


/* --- Sloupec navíc na konci řádku zápasu ------------------------------
   Přesunuto z pages/player.css: řádek _ss_match_row.php je sdílený
   a $ssRowExtra do něj přidává sloupec (dnes ho plní karta hráče). */
.ss-match.has-extra { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; }
.ss-match > .ss-match-extra { position: relative; z-index: 1; pointer-events: none; }


/* --- Značka V/R/P ---
   Tutéž značku nese sloupec Forma v tabulce soutěže i řádek zápasu na kartě
   hráče. Bydlí u řádku, protože ten je sdílený napříč stránkami; tabulka
   servisu si ji odsud jen půjčuje. */
.ss-form-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 800;
    text-decoration: none;
    color: var(--bg-main);
}
/* Jeden odstín na výhru a jeden na prohru. Zápas rozhodnutý rozstřelem měl
   dřív značku vybledlou na 65 % krytí, takže ve sloupci Forma stály dvě
   zelené a dvě červené vedle sebe a vypadalo to jako nedopatření. Že o
   výsledku rozhodly penalty, řekne popisek značky (viz getRecentForm). */
.ss-form-badge.is-v { background: var(--win-bright); }
.ss-form-badge.is-r { background: var(--neutral); }
.ss-form-badge.is-p { background: var(--loss); color: var(--on-dark); }
.ss-form-badge:hover { outline: 1px solid var(--accent); outline-offset: 1px; }

/* --- Popisek, hřiště a „můj tým" -------------------------------------------
   Řádek se používá i tam, kde zápasy nestojí pod sebou v jednom kole: na
   kartě klubu, u rozhodčího a v osobním přehledu. Tam se u každého řádku
   musí říct, kdy a v čem se hrálo — sousední řádek bývá z jiné soutěže.
   Na úvodce to smysl nedává: skupinu tam uvozuje hlavička dne a soutěže,
   takže se popisek nevykresluje vůbec.

   Popisek i hřiště se roztahují přes celou šířku, mřížka je proto odsune
   do vlastního řádku; čas, týmy a doplňky jdou pod ně beze změny. */
.ss-match-meta,
.ss-match-venue {
    grid-column: 1 / -1;
    position: relative;
    z-index: 1;
    pointer-events: none;
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.ss-match-meta { margin-bottom: 2px; }
/* Oddělovač mezi částmi popisku. Vlastní třída, ať se dá ztlumit — svislá
   čára mezi datem a soutěží nemá tahat pozornost víc než ony samy. */
.ss-meta-sep { opacity: 0.45; margin: 0 2px; }
.ss-match-venue { margin-top: 2px; }
/* Odkaz uvnitř popisku (soutěž) musí zůstat klikatelný — zbytek řádku
   překrývá .ss-match-cover. */
.ss-match-meta a { pointer-events: auto; color: inherit; text-decoration: none; }
.ss-match-meta a:hover { color: var(--accent); }
/* S popiskem se řádek roztáhne na dva řádky mřížky; mezera mezi nimi má
   být menší než mezi dvěma zápasy. */
.ss-match.has-meta { row-gap: 0; padding: 10px 6px; }

/* Sledovaný tým tam, kde stojí oba soupeři vedle sebe — bez toho není
   poznat, kvůli kterému z nich je zápas ve výpisu. Barvou, ne tučností:
   tučnost už nese vítěz zápasu. */
.ss-side.is-mine .ss-side-name { color: var(--accent); }

/* Prázdný seznam. */
.ss-match-empty { margin: 4px 0 16px; font-size: 0.85rem; }

/* --- Najetí na klub v řádku ---
   Přeneseno z jednotného hoveru ve výsledkovém servisu: řádek je sdílený,
   takže se musí chovat stejně i na stránkách, které servisní styly
   nenačítají. Stojí za barvami vítěze, aby je přebilo. */
.ss-side .ss-side-club:hover .ss-side-name,
.ss-side.is-winner .ss-side-club:hover .ss-side-name {
    color: var(--accent);
    text-decoration: none;
}

/* --- Responzivita řádku --- */
@media (max-width: 520px) {
    /* Na úzkém displeji zůstávají obě strany stejně široké, aby skóre
       a čas stály v ose řádku pod sebou — se stranami podle obsahu (auto)
       skákal střed řádek od řádku, což bylo horší než zalomený název.
       Dlouhý název se zalomí na dva řádky (overflow-wrap výš); písmo je
       o stupeň menší, ať se zalamuje co nejmíň. */
    .ss-match { gap: 5px; column-gap: 8px; font-size: 0.74rem; }
    .ss-side-club { gap: 7px; }
    .ss-center { min-width: 40px; min-height: 30px; }
    .ss-center-score { font-size: 0.84rem; padding: 2px 5px; }
    .ss-center-time { font-size: 0.82rem; }
    .ss-center-day { font-size: 0.56rem; }
}

/* ==========================================================================
   BLOK VZÁJEMNÝCH ZÁPASŮ A ROZBALOVÁNÍ

   Z původní rodiny .h2h-* zbyl obal bloku, značka výsledku a mechanika
   rozbalování. Vlastní řádek (.h2h-row, .h2h-team, .h2h-score, .h2h-date,
   .h2h-comp) zanikl — kreslil ho jediný soubor, karta trenéra, a byla to
   čtvrtá podoba zápasu v seznamu na webu. Dnes i tam stojí .ss-match výš.
   ========================================================================== */

.h2h-block {
    margin-bottom: 36px;
}

.h2h-block:last-child {
    margin-bottom: 0;
}

.h2h-block .section-header {
    margin-bottom: 14px;
}

.h2h-block .section-header h3 {
    font-size: 1rem;
    margin: 0;
}

/* Skrývá se obal (.h2h-item, .ss-row-fold), ne řádek samotný — ten je
   položkou mřížky a display:none by mu ji rozhodil. Že skrytý obal opravdu
   zmizí, hlídá [hidden] v base.css. */

.h2h-result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--on-dark);
    background: var(--text-muted);
    line-height: 1;
}

.h2h-result-W .h2h-result-badge { background: var(--win); }
.h2h-result-D .h2h-result-badge { background: var(--draw); color: var(--on-light); }
.h2h-result-L .h2h-result-badge { background: var(--loss); }

.expand-toggle {
    margin-top: 12px;
    padding: 8px 16px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.expand-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    border-style: solid;
}

.expand-remaining {
    margin-left: 6px;
    opacity: 0.7;
    font-size: 0.78rem;
}

/* --- RESPONZIVITA --- */
@media (max-width: 992px) {
    .h2h-result-badge {
        width: 22px;
        height: 22px;
    }
}

/* Plný a krátký název klubu v řádku (karta Zápasy soutěže, viz
   $ssRowFullNames). Na širokém displeji plný se zkratkou, na mobilu krátký —
   plný by se do poloviny řádku nevešel. */
.ss-name-short { display: none; }
@media (max-width: 820px) {
    .ss-name-full  { display: none; }
    .ss-name-short { display: inline; }
}