/* ============================================================
   HAJLAJTY — assets/styles/terminarz.css
   ------------------------------------------------------------
   WIDOK „Terminarz turnieju" (MVP-c): LAYOUT sekcji dni + siatka + KARTA WYNIKU
   (.rcard, dla meczów rozegranych bez skrótu i odwołanych). Sportowany z
   design/Hajlajty - Terminarz Turnieju.html. Karty zapowiedzi/live/skrótu
   reużywają stylów match-lists.css / card-preview.css (ten plik ich NIE dubluje).

   Ładowany warunkowo tylko na tej stronie (hajlajty_match_lists_is_terminarz),
   dep: hajlajty-match-lists (chrome kart + @keyframes pulse-live) + hajlajty-layout
   (tokeny). Wszystko na istniejących tokenach — zero nowych zmiennych.
============================================================ */

/* ============================================================
   0. NAGŁÓWEK STRONY + LEGENDA (port 1:1 z designu pełnego terminarza)
============================================================ */
.page-head { margin-bottom: var(--space-xl); }
.page-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
[data-theme="dark"] .page-head__eyebrow { color: var(--accent); }
.page-head__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.page-head__title {
  margin-top: var(--space-xs);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.page-head__sub { margin-top: var(--space-sm); color: var(--text-muted); font-size: 16px; max-width: 58ch; text-wrap: pretty; }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }
.legend__item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.legend__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.legend__dot.skrot { background: var(--text-faint); }
.legend__dot.live  { background: var(--live); animation: pulse-live 1.4s ease-in-out infinite; } /* @keyframes z match-lists.css */
.legend__dot.soon  { background: var(--accent); }

/* ============================================================
   1. SEKCJA DNIA
============================================================ */
.schedule-day { margin-bottom: var(--space-2xl); scroll-margin-top: 96px; }
.schedule-day:last-of-type { margin-bottom: 0; }

.schedule-day__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}
.schedule-section__title {
  font-size: clamp(19px, 2.6vw, 25px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  /* Pierwsza litera dnia tygodnia z wp_date bywa małą — kapitalizujemy wizualnie. */
  text-transform: capitalize;
}
.schedule-day__count {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.schedule-day__today {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--live-soft);
  color: var(--live);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.schedule-day__today .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  animation: pulse-live 1.4s ease-in-out infinite; /* @keyframes z match-lists.css */
}

@media (max-width: 620px) {
  .schedule-day__head { flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); }
}

/* ============================================================
   2. SIATKA DNIA — jedna spójna siatka dla wszystkich typów kart
============================================================ */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: var(--space-md);
  align-items: start; /* karty różnej wysokości (skrót/live/zapowiedź/wynik) — bez rozciągania */
}

/* ============================================================
   3. KARTA WYNIKU (.rcard) — FT bez wideo + odwołany. Anchor (cała linkuje
   do meczu). Minimalna; ten sam chrome co karta live, ale statyczny.
============================================================ */
.rcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.rcard:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }

.rcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.rcard__phase {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcard__status {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.rcard--off .rcard__status { color: var(--text-faint); }

.rcard__match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-sm);
}
.rcard__team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 700;
  font-size: 15px;
}
.rcard__team--away { flex-direction: row-reverse; }
.rcard__team .country-flag { flex: 0 0 auto; height: 20px; width: auto; border-radius: 2px; }
.rcard__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rcard__score {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.rcard__sep { opacity: 0.55; }
.rcard__score--off { font-size: 18px; color: var(--text-faint); font-weight: 700; }

/* ============================================================
   PLACEHOLDER FAZY PUCHAROWEJ (.card--placeholder) — TYLKO terminarz.
   Slot rundy bez realnego fixture'a (Round of 16 … Final). Dziedziczy chrome
   karty zapowiedzi (.card--preview z card-preview.css); tu tylko WYRÓŻNIENIE
   „to jeszcze nie mecz": przygaszenie, przerywana ramka, brak interakcji.
   Znika automatycznie, gdy import wciągnie realny mecz (hajlajty_knockout_merge).
============================================================ */
.card--placeholder {
  border-style: dashed;
  background: var(--surface-2);
  cursor: default;
}
.card--placeholder:hover { transform: none; box-shadow: none; }
.card--placeholder .card__team-name {
  display: flex;
  flex-direction: column;     /* każde słowo etykiety w osobnej linii */
  align-items: center;
  gap: 1px;
  color: var(--text-muted);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  text-align: center;
  overflow: visible;          /* pełna etykieta — bez przycięcia numeru meczu */
}
.card--placeholder .card__ph-word { display: block; }

/* Plakietka „Mecz N" (numer meczu FIFA) — TYLKO terminarz (przekazywany match_no).
   Dyskretna, drugorzędna wobec zielonego chipu fazy; obok niego (karty z fazą) lub
   w pasku meta karty skrótu. Numer pozwala rozwiązać referencje placeholderów
   („Zwycięzca meczu 74"). */
.card__matchno {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.vcard__top .card__matchno { margin-left: 0; }
/* Numer w TEJ SAMEJ linii co chip fazy, dosunięty do prawej (nie nowa linia). */
.card__topline { display: flex; align-items: center; gap: 8px; }
.card__topline .card__matchno,
.rcard__top .card__matchno { margin-left: auto; }
.card--placeholder .card__vs { color: var(--text-faint); }
.card__tbd {
  margin: var(--space-sm) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}