/* ═══════════════════════════════════════════════
   SV Diana – klassement.css
   Stijlen voor de klassement/podium pagina.
   Bouwt voort op style.css; overschrijft niets.
   ═══════════════════════════════════════════════ */

/* ── Header navigatie ── */
.header-nav {
  margin-left: auto;
  display: flex;
  gap: .25rem;
}
.nav-link {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-size: .82rem;
  padding: .3rem .75rem;
  border-radius: 4px;
  transition: color .18s, background .18s;
  letter-spacing: .03em;
}
.nav-link:hover         { color: var(--gold-light); background: rgba(255,255,255,.07); }
.nav-link--active       { color: var(--gold); background: rgba(201,168,76,.12); }

/* ── Actieve filter-omschrijving ── */
.filter-context {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  padding: .55rem .9rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 3px solid var(--gold);
}

/* ── Sectietitels ── */
.section-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--border);
}

/* ═══════════════════════════════════════════════
   PODIUM
   Drie cards naast elkaar. Volgorde in DOM:
   2e – 1e – 3e  (visueel midden = winnaar).
   Op mobiel: 1e bovenaan, dan 2e, dan 3e.
   ═══════════════════════════════════════════════ */

.podium-section { margin-bottom: 3rem; }

.podium {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "tweede eerste derde";
  align-items: end;   /* cards "staan" op een denkbeeldige vloer */
  gap: 1rem;
}

/* ── Basis podiumcard ── */
.podium-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: var(--shadow-md);
  position: relative;
  transition: box-shadow .2s;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.podium-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.13); }

/* Positie-labels */
.podium-card[data-positie="1"] { grid-area: eerste; }
.podium-card[data-positie="2"] { grid-area: tweede; }
.podium-card[data-positie="3"] { grid-area: derde; }

/* ── 1e plaats: extra uitgelicht ── */
.podium-card[data-positie="1"] {
  border-color: var(--gold);
  border-width: 2px;
  padding-top: 2.1rem;
  box-shadow: 0 6px 28px rgba(201,168,76,.18), var(--shadow-md);
}

/* ── 2e en 3e: iets kleiner optisch door minder padding-top ── */
.podium-card[data-positie="2"],
.podium-card[data-positie="3"] {
  padding-top: 1.75rem;
}

/* Positienummer badge linksboven */
.podium-positie {
  position: absolute;
  top: .75rem;
  left: .9rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.podium-card[data-positie="1"] .podium-positie { color: var(--gold); font-size: 1.15rem; }
.podium-card[data-positie="2"] .podium-positie { color: var(--muted); }
.podium-card[data-positie="3"] .podium-positie { color: #a0522d; }

/* Naam */
.podium-naam {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-top: .1rem;
}
.podium-card[data-positie="1"] .podium-naam { font-size: 1.2rem; }

/* Meta-rij (disc + klasse badges) */
.podium-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin: .15rem 0 .4rem;
}

/* Scoreblok */
.podium-scores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem .6rem;
  margin-top: .3rem;
}
.podium-score-item {}
.podium-score-label {
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  line-height: 1;
  margin-bottom: .1rem;
}
.podium-score-value {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
}
.podium-card[data-positie="1"] .podium-score-value { font-size: 1.05rem; color: var(--gold); }

/* Klassementscore groot weergeven */
.podium-score-item--highlight .podium-score-label { color: var(--navy-mid); }
.podium-score-item--highlight .podium-score-value {
  font-size: 1.35rem;
  color: var(--navy);
}
.podium-card[data-positie="1"] .podium-score-item--highlight .podium-score-value {
  font-size: 1.5rem;
  color: var(--gold);
}

/* Seizoen-label onderaan card */
.podium-seizoen {
  font-size: .72rem;
  color: var(--muted);
  margin-top: .4rem;
  padding-top: .55rem;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════
   RANGLIJST – aanvullende kolommen
   ═══════════════════════════════════════════════ */

.ranglijst-section { margin-bottom: 4rem; }

.col-aantal  { width: 80px; text-align: center; }
.col-beste   { width: 68px; text-align: right; }
.col-laatste { width: 68px; text-align: right; }
.col-score   { width: 115px; text-align: right; }

/* Klassementscore-cel: accent */
.kscore-cell {
  text-align: right;
  font-weight: 700;
  color: var(--navy-mid);
}

/* Top-3 rijen in de tabel */
tbody tr.top-1 td:first-child { color: var(--gold); }
tbody tr.top-2 td:first-child { color: var(--muted); }
tbody tr.top-3 td:first-child { color: #a0522d; }

/* Winnaar-rij lichte achtergrond */
tbody tr.top-1 {
  background: rgba(201,168,76,.05);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .podium {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "eerste eerste"
      "tweede derde";
    align-items: start;
  }
}

@media (max-width: 560px) {
  .podium {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eerste"
      "tweede"
      "derde";
  }
  .podium-scores { grid-template-columns: 1fr 1fr; }
}

/* Klassementscore kolom breedte */
.col-kscore  { width: 120px; text-align: right; }
.kscore-cell { text-align: right; font-weight: 700; color: var(--navy-mid); }

/* Top-3 rijen */
tbody tr.top-1 { background: rgba(201,168,76,.05); }
tbody tr.top-1 td:first-child { color: #b8860b; }
tbody tr.top-2 td:first-child { color: #888; }
tbody tr.top-3 td:first-child { color: #a0522d; }

/* Naam-link in podiumcard */
.podium-naam-link {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}
.podium-naam-link:hover { color: var(--gold); }