/* ============================================================
   HAJLAJTY — assets/styles/match-lists.css
   ------------------------------------------------------------
   WIDOK LIST meczów: sekcje strony głównej + archiwum kategorii. Sportowany z
   inline CSS designu (Strona Główna / kategorie) do motywu. Obejmuje: rytm
   sekcji (.section / .section__head / .section__more), siatki (.row-scroll /
   .grid-videos), wspólne miniatury (.thumb*), KARTĘ LIVE (.live-card) i KARTĘ
   SKRÓTU (.vcard). Karta ZAPOWIEDZI ma własny moduł (card-preview.css).

   Karty list to ANCHORY (cała karta linkuje do meczu) — reset dekoracji linku.
   data-filterable / chipsbar NIE są tu (Faza 4A).
============================================================ */

/* ============================================================
   1. SEKCJE
============================================================ */
main { padding-block: var(--space-xl) var(--space-2xl); }

.section { margin-bottom: var(--space-2xl); }
.section:last-child { margin-bottom: 0; }

.section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  margin-bottom: var(--space-sm);
}
@media (max-width: 768px) {
  .section__head {
    flex-direction: column;
    justify-content: space-evenly;
    margin-bottom: var(--space-xs);
  }
}
.section__title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.section__title .kicker-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
.section__title.live .kicker-dot { background: var(--live); animation: pulse 1.6s var(--ease) infinite; }
.section__more {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700;
  color: var(--text-muted);
  padding: 8px 22px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: color var(--t-fast);
}
.section__more:hover { color: var(--accent); }
.section__more svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 768px) { .section__more { font-size: 13px; } }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--live-soft); }
  50%      { box-shadow: 0 0 0 7px transparent; }
}

/* ============================================================
   2. SIATKI
============================================================ */
.row-scroll,
.grid-videos {
  display: grid;
  /* Szerokość kolumny zrównana z terminarzem (.schedule-grid) — ta sama, dobra
     szerokość karty na home/na-żywo/zapowiedziach/skrótach. min() chroni mobile. */
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: var(--space-lg) var(--space-md);
}

/* ============================================================
   3. KARTY — wspólne miniatury
============================================================ */
.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, var(--thumb-a) 0 14px, var(--thumb-b) 14px 28px);
}
/* Poster YouTube wypełnia miniaturę (brak postera → tło-placeholder powyżej). */
.thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb__dur {
  position: absolute;
  right: 10px; bottom: 10px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 6px;
  background: oklch(0 0 0 / 0.72);
  color: #fff;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
}
.thumb__play {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: oklch(0 0 0 / 0.45);
  backdrop-filter: blur(2px);
  border: 1.5px solid oklch(1 0 0 / 0.5);
  transition: transform var(--t-med), background var(--t-med);
}
.thumb__play svg { width: 24px; height: 24px; fill: #fff; transform: translateX(1px); }

/* Badge kanału wydawniczego (lewy dolny róg miniatury). */
.card__channel {
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 2;
  max-width: 55%;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: oklch(0 0 0 / 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid oklch(1 0 0 / 0.12);
  color: oklch(0.86 0.003 250);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.card-video { display: block; }
.card-video:hover .thumb__play { transform: scale(1.08); background: var(--accent); }
.card-video:hover .thumb__play svg { fill: var(--accent-ink); }

/* ============================================================
   4. KARTA LIVE (.live-card) — anchor, bez .live-events
============================================================ */
.live-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-sm);
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.live-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }

.live-card .thumb {
  background:
    radial-gradient(120% 120% at 50% -10%, var(--accent-soft), transparent 55%),
    repeating-linear-gradient(135deg, var(--thumb-a) 0 14px, var(--thumb-b) 14px 28px);
}
.live-badge {
  position: absolute;
  left: 12px; top: 12px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: var(--r-pill);
  background: var(--live);
  color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
}
.live-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse-live 1.4s ease-in-out infinite; }
@keyframes pulse-live { 0%,100%{opacity:1;} 50%{opacity:0.35;} }

.live-minute {
  position: absolute;
  right: 12px; top: 12px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: oklch(0 0 0 / 0.62);
  color: #fff;
  font-size: 12px; font-weight: 800;
}
.live-score {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 16px;
  background: linear-gradient(0deg, oklch(0 0 0 / 0.78), transparent);
  color: #fff;
}
.live-score .team { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.live-score .team.away { flex-direction: row-reverse; }
.live-score .country-flag { height: 18px; vertical-align: -0.18em; }
.live-score .num {
  font-size: 26px; font-weight: 800; letter-spacing: 0.02em;
  min-width: 26px; text-align: center;
}
.live-score .sep { opacity: 0.6; font-weight: 700; }

/* ============================================================
   5. KARTA SKRÓTU (.vcard) — anchor (cała linkuje do meczu)
============================================================ */
/* Karta BEZ tła/ramki: tylko zaokrąglona miniatura (góra) + przezroczysty dół
   na tle strony. Miniatura zachowuje własne zaokrąglenie ze WSZYSTKICH stron
   (.thumb ma już var(--r-md) + overflow:hidden) — dół wideo jak góra. */
.vcard {
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  transition: transform var(--t-med);
}
.vcard:hover { transform: translateY(-4px); }
/* DÓŁ karty: wiersz meta (faza · rozgrywki, cichy kicker) + symetryczny blok
   meczowy (flaga NAD nazwą). Bez daty i numeru meczu. Miniatura nosi już tylko
   kanał + czas trwania. */
.vcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
}

/* Wiersz meta: faza + nazwa rozgrywki, identyczny styl (cichy, rozstrzelony
   kicker — NIE pigułka, NIE kolor akcentu). JEDNA linia bez zawijania
   (flex-nowrap): faza trzyma się w całości, nazwa rozgrywki (czasem długa, np.
   „Mistrzostwa Świata") clampuje się ellipsem. */
.vcard__meta {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.vcard__competition,
.vcard__phase {
  font-size: clamp(9.5px, 1vw, 11px);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}
/* Faza pierwsza — nie kurczy się; nazwa rozgrywki druga — clampuje się gdy długa. */
.vcard__phase { flex: 0 0 auto; max-width: 100%; }
.vcard__competition { flex: 0 1 auto; min-width: 0; }
/* Separator „·" przed nazwą rozgrywki — TYLKO gdy poprzedza ją faza (brak fazy
   → brak osieroconego separatora). */
.vcard__phase + .vcard__competition::before {
  content: "\00B7";
  margin-right: 6px;
  color: var(--text-faint);
}

/* Wynik: symetryczny układ [drużyna] [wynik] [drużyna], flaga NAD nazwą. */
.vcard__score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(8px, 2.5vw, 18px);
}
.vcard__team {
  display: flex; flex-direction: column; align-items: center;
  gap: 9px; min-width: 0; text-align: center;
}
.vcard__team .country-flag { height: clamp(26px, 4.4vw, 32px); border-radius: 3px; }
/* KRYTYCZNE: clamp + ellipsis dla długich nazw (np. „Republika Południowej Afryki") */
.vcard__team-name {
  max-width: 100%;
  font-size: clamp(13px, 1.6vw, 15px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vcard__result {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: clamp(24px, 5vw, 30px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.01em;
}
.vcard__sep { color: var(--text-faint); font-weight: 700; }

/* DESKTOP: skala kart bazuje na vw, co na szerokim ekranie dawało zbyt duże
   wartości względem wąskich kart w siatce. Powyżej progu mobilnego ustal
   stałe, kompaktowe rozmiary = dolny kraniec clamp() (czyli widok mobilny). */
@media (min-width: 769px) {
  .vcard__score { gap: 10px; }
  .vcard__team .country-flag { height: 26px; }
  .vcard__team-name { font-size: 13px; }
  .vcard__result { font-size: 24px; }
  .vcard__competition,
  .vcard__phase { font-size: 9.5px; }
}

/* ============================================================
   5b. KARTA SKRÓTU „RAIL" (.rvideo) — POZIOMA, sidebarowa (P-c)
   Współistnieje z pionową .vcard (sekcja 5): .vcard = listy/gridy/home,
   .rvideo = wąskie kolumny aside („Inne skróty"). Miniatura po lewej + meta/
   wynik po prawej; .rvideo__row--lose przygasza przegranego. Chrome miniatury
   (.thumb*, .card-video) wspólny z sekcją 1. Port 1:1 z „Skrót Meczu -2".
   `.rvideo` (grid) bije `.card-video` (block) bo jest niżej w pliku.
============================================================ */
.rvideo { display: grid; grid-template-columns: 158px 1fr; gap: var(--space-sm); margin-bottom: var(--space-md); }
.rvideo:last-child { margin-bottom: 0; }
.rvideo .thumb { border-radius: var(--r-sm); }
/* Mniejszy guzik play na kompaktowej miniaturze sidebara — jak w designie „-2"
   (48/20). Współdzielone .thumb__play (60/24) jest skrojone pod dużą .vcard i na
   wąskiej miniaturze .rvideo wygląda na za duże; zakresujemy TYLKO do .rvideo. */
.rvideo .thumb__play { width: 48px; height: 48px; }
.rvideo .thumb__play svg { width: 20px; height: 20px; }
.rvideo__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Meta sidebaru: cichy, rozstrzelony kicker (mniejszy, --text-faint, bez pigułki). */
.rvideo__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint);
}
.rvideo__comp { color: var(--text-faint); font-weight: 700; }
.rvideo__meta .dot-sep { flex: none; width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }
/* Mini-tabela wyniku: jeden grid na obie linie → kolumny (nazwa | wynik) wyrównane;
   szerokość do treści, więc wynik trzyma się nazw zamiast uciekać na krawędź. */
.rvideo__match {
  display: grid; grid-template-columns: minmax(0, max-content) auto;
  column-gap: 16px; row-gap: 5px; align-items: center;
  width: max-content; max-width: 100%; margin-top: 3px;
}
.rvideo__row { display: contents; }
.rvideo__team { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.rvideo__team .country-flag { height: 15px; }
.rvideo__tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvideo__num { justify-self: end; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px; color: var(--text); }
.rvideo__row--lose { color: var(--text-muted); }
.rvideo__row--lose .rvideo__num { color: var(--text-muted); }
/* W kolumnie aside miniatura nieco szersza; węższe ekrany — proporcjonalnie mniej. */
.watch__aside .rvideo { grid-template-columns: 168px 1fr; }
@media (max-width: 620px) { .watch__aside .rvideo { grid-template-columns: 140px 1fr; } }

/* P-l: nota rozstrzygnięcia pucharowego („po karnych"/„po dogrywce") pod wynikiem
   karty skrótu. Nawias serii karnych („1(3)") żyje w samym wyniku — to jest sama
   etykieta końca meczu. Wspólna dla .vcard (pionowej) i .rvideo (rail): drobna,
   przygaszona; wyśrodkowana pod centrowanym wynikiem .vcard, dosunięta do wiersza
   meczu w wąskim .rvideo. */
.card-decider { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.vcard .card-decider { display: block; text-align: center; margin-top: 8px; }
.rvideo .card-decider { margin-top: 2px; }

/* ============================================================
   6. PUSTY STAN (archiwum bez wyników)
============================================================ */
.empty-state {
  display: none;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: var(--text-muted);
}
.empty-state.is-visible { display: block; }
.empty-state h3 { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 8px; }