/* ==========================================================================
   Erelijst: recordhouders (staafgrafiek) en het erebord per seizoen
   Grafiek: één reeks, dus geen legenda; waarden in teksttinten, balken in lime,
   4px afgeronde datakant op de basislijn, tooltip met kampioensjaren.
   ========================================================================== */

.honours {
  background:
    radial-gradient(ellipse 50% 60% at 100% 0%, rgb(198 246 72 / 0.08), transparent 70%),
    var(--night-950);
}

.honours__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-2xl);
  align-items: start;
}

/* --- Recordhouders ----------------------------------------------------- */

.records__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 900;
  font-stretch: 80%;
  text-transform: uppercase;
}

.records__title .icon {
  color: var(--lime-400);
}

.records__sub {
  margin-bottom: var(--space-m);
  color: var(--petrol-200);
  font-size: var(--step--1);
}

.records__list {
  display: grid;
  gap: 0.35rem;
}

.record {
  position: relative;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) 2.2rem;
  grid-template-areas:
    "rank name value"
    "rank bar value";
  gap: 0.35rem 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.7rem 0.6rem;
  border: 0;
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--white);
  text-align: left;
  transition: background-color var(--dur-fast) linear;
}

.record:hover,
.record:focus-visible {
  background: rgb(250 252 254 / 0.06);
}

.record__rank {
  grid-area: rank;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 75%;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--petrol-300);
}

.record__name {
  grid-area: name;
  font-weight: 700;
  line-height: 1.2;
}

.record__track {
  grid-area: bar;
  height: 0.75rem;
}

.record__bar {
  display: block;
  width: calc(var(--share) * 100%);
  min-width: 0.75rem;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--lime-400);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out-expo);
}

.js .records:not(.is-visible) .record__bar {
  transform: scaleX(0);
}

.record__value {
  grid-area: value;
  justify-self: end;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--white);
}

/* Tooltip met de kampioensjaren */
.record__tip {
  position: absolute;
  left: 2.4rem;
  right: 0.5rem;
  bottom: calc(100% - 0.2rem);
  z-index: 2;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: translateY(0.3rem);
  pointer-events: none;
  transition: opacity var(--dur-fast) linear, transform var(--dur-base) var(--ease-out-expo);
}

.record:hover .record__tip,
.record:focus-visible .record__tip {
  opacity: 1;
  transform: none;
}

/* --- Erebord ----------------------------------------------------------- */

.board-table {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.board-table th {
  padding: 0 0.6rem 0.6rem;
  border-bottom: 2px solid var(--lime-400);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 95%;
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--petrol-300);
  white-space: nowrap;
}

.board-table td {
  padding: 0.6rem;
  border-bottom: 1px solid rgb(250 252 254 / 0.08);
  vertical-align: top;
}

.board-table td:first-child {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-stretch: 80%;
  white-space: nowrap;
  color: var(--lime-400);
}

.board-table .is-empty {
  color: rgb(250 252 254 / 0.3);
}

.board-table .is-unknown {
  color: var(--petrol-300);
}

.board-table .is-cancelled {
  color: var(--petrol-200);
  font-style: italic;
}

.board-table tbody tr:hover td {
  background: rgb(250 252 254 / 0.04);
}

.board-table__more {
  margin-top: var(--space-m);
}

.honours__note {
  margin-top: var(--space-l);
  max-width: 70ch;
  color: var(--petrol-200);
  font-size: var(--step--1);
}

.honours__note a {
  color: var(--lime-400);
}

/* --- Responsief -------------------------------------------------------- */

@media (max-width: 980px) {
  .honours__grid {
    /* minmax(0, 1fr): de brede tabel mag de kolom niet buiten het scherm duwen */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
}

@media (max-width: 640px) {
  .board-table th,
  .board-table td {
    padding-inline: 0.4rem;
    font-size: var(--step--1);
  }

  .board-table .col-optional {
    display: none;
  }
}

@media (max-width: 420px) {
  .record {
    grid-template-columns: 1.3rem minmax(0, 1fr) 1.9rem;
    gap: 0.3rem 0.5rem;
  }

  .record__tip {
    left: 0.5rem;
  }
}