/* 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: vlevo čas, vedle něj oba týmy pod sebou.
   Uvnitř týmu je logo vlevo, název uprostřed a počet branek vpravo —
   stejné uspořádání, jaké mají výsledkové servisy. */
.ss-match {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-top: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-main);
    font-size: 0.85rem;
}
.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; border-radius: 6px; }
.ss-match > .ss-row-lead,
.ss-match > .ss-teams,
.ss-match > .ss-match-flag { position: relative; z-index: 1; }
/* Nad překryvným odkazem má klik zachytávat jen odkaz na klub. Čas, skóre
   i příznaky jsou průchozí, takže klik kamkoli jinam otevře zápas. */
.ss-match > .ss-row-lead,
.ss-match > .ss-teams,
.ss-match > .ss-match-flag { pointer-events: none; }
.ss-side-club { pointer-events: auto; }
.ss-match-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* První buňka řádku týmu: odkaz na klub a za ním případné červené karty.
   Skóre zůstává vedle ní.

   justify-self: start je tu podstatné: bez něj by se buňka roztáhla přes celý
   sloupec a klikací plocha klubu by zabrala i prázdno za názvem, kde má
   fungovat proklik na zápas. */
.ss-side-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    justify-self: start;
}

/* 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: 8px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

/* 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);
}

.ss-row-lead {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    align-self: center;
    text-align: center;
}
.ss-pen { display: block; font-size: 0.62rem; }

/* Levá buňka má jednu podobu bez ohledu na to, co v ní stojí — čas výkopu
   („17:00") i úroveň soutěže („4. liga") se do 44 px vejdou. Chvíli tu byl
   pro úroveň širší sloupec a drobnější tučné písmo; kvůli tomu ale řádky
   v jednom řazení odskočily doprava a proti druhému vypadaly jinak, což je
   přesně to, co se stát nemělo. */

.ss-teams { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.ss-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ss-side-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-side-score {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
/* Odehraný zápas: obě strany tučně, ale barvou se liší. Vítěz bílý, poražený
   i obě strany remízy šedé — a to včetně branek, aby název a skóre jednoho
   týmu drželo pohromadě. Nesehraný zápas si nechává tlumený řádek celý
   (.ss-match-upcoming), rozlišovat v něm není co. */
.ss-match:not(.ss-match-upcoming) .ss-side { font-weight: 700; }
.ss-match:not(.ss-match-upcoming) .ss-side .ss-side-name,
.ss-match:not(.ss-match-upcoming) .ss-side .ss-side-score { color: var(--text-muted); }
.ss-match:not(.ss-match-upcoming) .ss-side.is-winner .ss-side-name,
.ss-match:not(.ss-match-upcoming) .ss-side.is-winner .ss-side-score { color: var(--text-main); }


.ss-match-flag { align-self: center; }


/* --- Značka výsledku v řádku zápasu -----------------------------------
   Přesunuto z pages/match.css: řádek _ss_match_row.php je sdílený
   a značku V/R/P vykresluje detail zápasu i karta hráče. */
/* Značka V/R/P v řádku zápasu. Vzhled dědí z .ss-form-badge, aby seděla se
   sloupcem Forma v tabulce; navíc se musí vytáhnout nad překryvný odkaz
   řádku, jinak by ji překryl.

   Stojí nalevo od skóre a je společná pro oba týmy, takže se vytahuje z toku
   a usazuje mezi jméno a skóre, svisle na střed řádku. Aby do ní dlouhý název
   týmu nevlezl, rezervuje si řádek se značkou mezi jménem a skóre sloupec
   navíc — jinak vypadá stejně jako řádek ve vzájemných zápasech. */
.ss-match.has-result .ss-teams { position: relative; }
.ss-match.has-result .ss-side { grid-template-columns: minmax(0, 1fr) 22px 26px; }
.ss-match.has-result .ss-side-score { grid-column: 3; }
.ss-match.has-result .ss-match-result {
    position: absolute;
    right: 36px;          /* 26px skóre + 8px mezera + vystředění v 22px sloupci */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: 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: 44px minmax(0, 1fr) auto 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) {
    .ss-match { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; font-size: 0.82rem; }
    .ss-side { grid-template-columns: minmax(0, 1fr) 22px; gap: 6px; }
    .ss-side-club { gap: 6px; }
}

/* ==========================================================================
   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;
    }
}