/* ══════════════════════════════════════════════════════════
   SPIELPLAN PAGE — Match schedule
══════════════════════════════════════════════════════════ */

/* ── Page Header ── */
.sp-header {
  padding-top: var(--nav-h);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.sp-header::before { content: 'SPIELPLAN'; font-size: clamp(4rem, 12vw, 11rem); }
.sp-header-inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: 3rem clamp(1.25rem, 5vw, 3rem) 2.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.sp-header-text .sec-eyebrow { margin-bottom: .5rem; }
.sp-title {
  font-family: 'Teko', sans-serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .9;
  color: var(--white);
  margin: 0;
}

/* ── Main ── */
.sp-main {
  background: var(--off-black);
  min-height: 60vh;
  padding: 3rem 0 5rem;
}
.sp-wrap {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

/* Stat pill inside sp-wrap — not full width, spacing below */
.sp-wrap .sp-header-stat {
  display: inline-flex;
  width: auto;
  margin-bottom: 2rem;
}

/* ── Filter bar ── */
.sp-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
}
.sp-filter-group {
  display: flex;
  gap: .375rem;
}
.sp-filter-btn { padding: .35rem .875rem; }
.sp-filter-btn.active {
  color: var(--white);
  background: var(--surface2);
  border-color: var(--faint);
}

/* ── Month group ── */
.sp-month-group {
  margin-bottom: 2.5rem;
}
.sp-month-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: .75rem 0 .625rem;
  margin-bottom: .125rem;
  border-bottom: 1px solid var(--border);
}
.sp-month-label {
  font-family: 'Teko', sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--white);
}
.sp-month-count {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-left: auto;
}

/* ── Match row ── */
a.sp-match {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.sp-match {
  display: grid;
  grid-template-columns: 9rem 1fr 13rem;
  align-items: center;
  gap: 1.2rem;
  padding: .875rem 1rem .875rem 1.25rem;
  border-bottom: 1px solid rgba(var(--rgb-white),.04);
  background: var(--surface);
  position: relative;
  transition: background .12s;
}
.sp-match::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background .12s;
}
.sp-match:hover { background: var(--surface2); }

/* SVL row accent */
.sp-match--svl::before { background: var(--red); }

/* LIVE row subtle wash */
.sp-match--live { background: rgba(var(--rgb-red),.04); }
.sp-match--live::before { background: var(--red) !important; }

/* Cancelled row */
.sp-match--cancelled { opacity: .45; }

/* ── Left meta ── */
.sp-match-meta-left {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.sp-matchday {
  font-family: 'Teko', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}
.sp-date {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--white);
}
.sp-time {
  font-size: 1.2rem;
  color: var(--muted);
}
.sp-league {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: 1.2rem;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-league-logo {
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
  flex-shrink: 0;
  opacity: .7;
}

/* ── Teams center ── */
.sp-match-teams {
  display: grid;
  grid-template-columns: 1fr 5.5rem 1fr;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.sp-club {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.sp-club--home { justify-content: flex-end; }
.sp-club--away { justify-content: flex-start; }

.sp-club-name {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gray-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-club-logo {
  width: 2rem; height: 2rem;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sp-club-logo img {
  width: 2rem; height: 2rem;
  object-fit: contain;
}
.sp-club-logo-ph {
  width: 2rem; height: 2rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-family: 'Teko', sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--faint);
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase;
}

/* ── Score / VS block ── */
.sp-score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: .2rem;
}
.sp-score {
  font-family: 'Teko', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: .04em;
  line-height: 1;
}
.sp-score--win  { color: var(--green); }
.sp-score--loss { color: var(--danger); }
.sp-score--draw { color: var(--muted); }
.sp-score--live { color: var(--red); }
.sp-score--halftime { color: var(--amber); }
.sp-score-ht {
  font-size: 1.2rem;
  color: var(--faint);
  letter-spacing: .04em;
}
.sp-score-vs {
  font-family: 'Teko', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--faint);
}
.sp-score-cancelled {
  font-family: 'Teko', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--faint);
  text-decoration: line-through;
}

/* ── Right meta ── */
.sp-match-meta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: .5rem;
  align-self: start;
  padding-top: .75rem;
}
.sp-league-logo-lg {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  flex-shrink: 0;
}
.sp-venue {
  font-size: 1.2rem;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}
.sp-venue--link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
  transition: color .15s;
}
.sp-venue--link:hover { color: var(--white); }
.sp-venue--link svg { flex-shrink: 0; stroke: currentColor; }

/* ── Empty state ── */
.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 5rem 1.2rem;
  color: var(--muted);
  text-align: center;
}
.sp-empty svg { stroke: var(--faint); }
.sp-empty p { font-size: 1.2rem; }

/* ── Responsive ── */
@media (max-width: 56rem) {
  .sp-match {
    grid-template-columns: 7rem 1fr 10rem;
  }
}

@media (max-width: 40rem) {
  .sp-header-inner { padding: 1.75rem 1rem 1.5rem; flex-direction: column; align-items: flex-start; }
  .sp-wrap .sp-header-stat { width: 100%; justify-content: flex-start; padding: .75rem 1.2rem; }
  .sp-main  { padding: 1.5rem 0 4rem; }
  .sp-wrap  { padding: 0 1.2rem; }

  .sp-filters { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .sp-filter-group { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: .25rem; width: 100%; }
  .sp-filter-group::-webkit-scrollbar { display: none; }

  /* Match row: fully stacked */
  .sp-match {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  /* Row 1: date + time + league inline */
  .sp-match-meta-left {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .75rem .5rem 1.2rem;
    border-bottom: 1px solid rgba(var(--rgb-white),.06);
  }
  .sp-matchday { display: none; }
  .sp-date { font-size: 1.2rem; }
  .sp-time { font-size: 1.2rem; }
  .sp-league { font-size: .9rem; margin-left: auto; }

  /* Row 2: teams + score */
  .sp-match-teams {
    grid-template-columns: 1fr 4.5rem 1fr;
    gap: .375rem;
    padding: .625rem .75rem .625rem 1.2rem;
  }
  .sp-club-logo { width: 1.75rem; height: 1.75rem; }
  .sp-club-logo img { width: 1.75rem; height: 1.75rem; }
  .sp-club-logo-ph { width: 1.75rem; height: 1.75rem; font-size: .9rem; }
  .sp-club-name { font-size: .95rem; max-width: 5.5rem; }
  .sp-score { font-size: 1.2rem; }
  .sp-score-ht { font-size: 1.5rem; }

  /* Row 3: venue — hidden on mobile to save space, shown only if clickable */
  .sp-match-meta-right {
    padding: .375rem .75rem .5rem 1.2rem;
    border-top: 1px solid rgba(var(--rgb-white),.04);
  }
  .sp-venue { font-size: .85rem; max-width: none; }
}