/* ============================================================
   race-result.css  —  Individual race result page
   Requires: base.css
   ============================================================ */

.page { padding: 1rem; max-width: 95%; }

/* ── Back nav ── */
.back-nav {
  font-size: .82rem; color: var(--muted);
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem 0; margin-bottom: .25rem;
}
.back-nav:hover { color: var(--accent); }

/* ── Page header ── */
.race-header {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 1rem;
}
.race-header-meta {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--muted); margin-bottom: .5rem;
}
.race-header h1 {
  font-size: 1.25rem; font-weight: 800; line-height: 1.25;
  margin-bottom: .25rem;
}
.race-header .race-category {
  font-size: .9rem; color: var(--muted); font-weight: 500;
}
.disc-badge {
  display: inline-block; font-size: .7rem; font-weight: 700;
  padding: .15rem .5rem; border-radius: 99px; color: #fff;
}
.disc-weg       { background: var(--wegwielrennen); }
.disc-veldrijden { background: var(--veldrijden); }
.disc-mtb       { background: var(--mountainbike); }
.disc-baan      { background: var(--baanwielrennen); }
.disc-bmx       { background: var(--bmx); }
.disc-unknown   { background: var(--accent); }
.nk-badge {
  display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .03em;
  background: #7c2d12; border: 1px solid #c2410c; color: #fed7aa;
  border-radius: 3px; padding: 1px 6px; vertical-align: middle;
}

/* ── Podium ── */
.podium-section {
  margin-bottom: 1.5rem;
}
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .75rem;
  padding: 0 .5rem;
}
.podium-slot {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; max-width: 200px;
}
.podium-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: .9rem .75rem; text-align: center;
  width: 100%; margin-bottom: 0;
}
.podium-rank {
  font-size: 1.1rem; font-weight: 900; margin-bottom: .35rem;
}
.podium-p1 .podium-rank { color: #ca8a04; }
.podium-p2 .podium-rank { color: #64748b; }
.podium-p3 .podium-rank { color: #b45309; }

.podium-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface2); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; color: var(--muted);
  margin: 0 auto .5rem; user-select: none;
}
.podium-p1 .podium-avatar { border-color: #ca8a04; }
.podium-p2 .podium-avatar { border-color: #94a3b8; }
.podium-p3 .podium-avatar { border-color: #b45309; }

.podium-name {
  font-size: .82rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.podium-name a { color: var(--text); }
.podium-name a:hover { color: var(--accent); text-decoration: underline; }
.podium-club {
  font-size: .68rem; color: var(--muted); margin-top: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.podium-time {
  font-size: .72rem; color: var(--muted); margin-top: .35rem;
  font-variant-numeric: tabular-nums;
}

.podium-step {
  width: 100%; border-radius: 4px 4px 0 0;
}
.podium-p1 .podium-step { height: 70px; background: linear-gradient(to top, #92400e, #ca8a04); }
.podium-p2 .podium-step { height: 48px; background: linear-gradient(to top, #475569, #94a3b8); }
.podium-p3 .podium-step { height: 32px; background: linear-gradient(to top, #78350f, #b45309); }
.podium-step-label {
  font-size: .65rem; font-weight: 800; text-align: center;
  padding-top: .35rem; letter-spacing: .04em; opacity: .85;
}
.podium-p1 .podium-step-label { color: #fef3c7; }
.podium-p2 .podium-step-label { color: #f1f5f9; }
.podium-p3 .podium-step-label { color: #fef3c7; }

/* ── Results table ── */
.results-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.results-section-header {
  padding: .75rem 1rem; border-bottom: 1px solid var(--border);
  font-size: .82rem; font-weight: 700; color: var(--muted);
  display: flex; align-items: center; justify-content: space-between;
}
.results-table {
  width: 100%; border-collapse: collapse; font-size: .84rem;
}
.results-table th {
  padding: .5rem 1rem; text-align: left;
  font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
  background: var(--surface2); position: sticky;
}
.results-table td {
  padding: .55rem 1rem; border-bottom: 1px solid var(--surface3);
  vertical-align: middle;
}
.results-table tr:last-child td { border-bottom: none; }
.results-table tr:hover td { background: var(--surface2); }
.results-table .td-pos {
  width: 48px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.results-table .td-name a { color: var(--text); font-weight: 600; }
.results-table .td-name a:hover { color: var(--accent); text-decoration: underline; }
.results-table .td-club { color: var(--muted); font-size: .78rem; }
.results-table .td-time { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.results-table .td-gap  { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.results-table .td-bib  { font-size: .75rem; color: var(--muted); text-align: center; }
.pos-medal { font-size: 1rem; }
.pos-p1 { color: #ca8a04; }
.pos-p2 { color: #64748b; }
.pos-p3 { color: #b45309; }
.status-pill {
  display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 3px; background: var(--surface3);
  color: var(--muted); border: 1px solid var(--border);
}
.dnf-divider td {
  padding: .4rem 1rem; background: var(--surface2);
  font-size: .7rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 600px) {
  .race-header { padding: 1rem; }
  .race-header h1 { font-size: 1rem; }
  .podium { gap: .4rem; }
  .podium-card { padding: .65rem .4rem; }
  .podium-avatar { width: 36px; height: 36px; font-size: .7rem; }
  .podium-name { font-size: .72rem; }
  .podium-club { display: none; }
  .results-table .td-club { display: none; }
  .results-table .td-gap  { display: none; }
}