/* ============================================================================
   VTC De Ploeg — basis, secties en homepage
   ============================================================================
   Leest de variabelen uit tokens.css, bouwt voort op chrome.css (kop + voet).
   Wordt NIET door /kalender ingeladen: hier staan wél regels op elementen.

   Mobiel eerst: alles hieronder is de telefoonweergave, de media queries maken
   hem breder. De meeste bezoekers staan met hun gsm in de zaal — dát is de
   hoofdweergave, niet de uitzondering.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-kop);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--text-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Een anker onder een plakkende kop belandt anders ónder de nav. Meegegroeid
   met de nav toen het logo groter werd (72 px hoog, 88 px vanaf 900 px). */
[id] {
  scroll-margin-top: 100px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Secties ─────────────────────────────────────────────────────────────────
   Elke sectie draagt zijn eigen achtergrond. De middensecties krijgen in de
   HTML de klasse .licht mee; daardoor kantelen álle tokens binnen die sectie
   en hoeft geen enkele regel hieronder van kleur te weten. */

.sectie {
  background: var(--bg-base);
  color: var(--text-primary);
  padding-block: 64px;
}

@media (min-width: 900px) {
  .sectie {
    padding-block: 96px;
  }
}

/* Twee lichte secties naast elkaar lopen in elkaar over. Om de beurt krijgt
   er één de iets diepere ivoortint, zodat de scheiding zichtbaar blijft
   zonder er een lijn tussen te moeten trekken. */
.sectie--zacht {
  background: var(--bg-elevated);
}

.sectie__kop {
  max-width: var(--breedte-smal);
  margin-bottom: var(--sp-5);
}

.eyebrow {
  font-family: var(--font-kop);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--sp-2);
}

.sectie__kop h2 {
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 800;
}

.sectie__kop p {
  margin-top: var(--sp-3);
  color: var(--text-secondary);
}

.lees {
  max-width: 62ch;
}

.sectie__voet {
  margin-top: var(--sp-5);
}

/* ── Kaarten en roosters ─────────────────────────────────────────────────── */

.kaart {
  background: var(--bg-surface);
  border: 1px solid var(--line-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.kaart h3 {
  font-size: 20px;
  font-weight: 700;
}

.kaart p {
  color: var(--text-secondary);
  font-size: 16px;
}

.kaart__ic {
  font-size: 26px;
  line-height: 1;
  margin-bottom: var(--sp-1);
}

a.kaart {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.06s;
}

a.kaart:hover {
  border-color: var(--accent-gold);
}

a.kaart:active {
  transform: scale(0.995);
}

.rooster {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .rooster--2,
  .rooster--3,
  .rooster--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .rooster--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .rooster--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Fotoslot ────────────────────────────────────────────────────────────────
   Staat waar een échte foto komt. Houdt exact de verhouding die de foto
   krijgt, zodat de bladspiegel niet verspringt zodra hij aangeleverd wordt.
   Vervangen = deze <div> vervangen door <img class="foto" ...>. */

.fotoslot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--verhouding, 3 / 2);
  border: 1px dashed var(--line-border);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 11px,
    var(--line-border-soft) 11px 12px
  );
  overflow: hidden;
}

.fotoslot span {
  font-family: var(--font-kop);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-base);
  border-radius: var(--radius-pill);
  margin: var(--sp-3);
}

.foto {
  width: 100%;
  aspect-ratio: var(--verhouding, 3 / 2);
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  background: var(--bg-base);
  padding-block: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line-border-soft);
}

.hero__grid {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}

@media (min-width: 980px) {
  .hero {
    padding-block: var(--sp-6) 88px;
  }
  .hero__grid {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--sp-6);
  }
}

/* De volledige naam boven de kop. Bewust een <p> en geen kop: hij zegt
   hetzelfde als de <h1> eronder, en twee koppen boven elkaar helpen een
   schermlezer niet vooruit. */
.hero__merk {
  font-family: var(--font-kop);
  font-size: clamp(14px, 2.6vw, 17px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--sp-3);
}

.hero h1 {
  font-size: clamp(38px, 9vw, 68px);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent-gold);
}

.hero__intro {
  margin-top: var(--sp-4);
  font-size: clamp(17px, 2.4vw, 20px);
  color: var(--text-secondary);
  max-width: 46ch;
}

.hero .knoppen {
  margin-top: var(--sp-5);
}

.hero__troef {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.troef {
  border: 1px solid var(--line-border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ── Paginakop ───────────────────────────────────────────────────────────────
   De donkere kop van een binnenpagina. Zelfde stramien als de hero, maar
   zonder tweede kolom: er staat geen foto naast. */

.paginakop {
  background: var(--bg-base);
  color: var(--text-primary);
  padding-block: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line-border-soft);
}

.paginakop h1 {
  font-size: clamp(32px, 7vw, 54px);
  font-weight: 900;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.paginakop .hero__intro {
  margin-top: var(--sp-4);
}

.paginakop .knoppen {
  margin-top: var(--sp-5);
}

/* Kop binnen een sectie, boven een blok — niet groot genoeg voor een <h2>. */
.blokkop {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--sp-2);
}

/* ── Openingsuren: de voetnoot en de sluitingsdagen ──────────────────────── */

.voetnoot {
  margin-top: var(--sp-3);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 46ch;
}

.sluitlijst li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  padding: 13px 0;
  border-bottom: 1px solid var(--line-border-soft);
  font-size: 16px;
}

.sluitlijst li:last-child {
  border-bottom: 0;
}

/* display:flex hierboven wint anders van het [hidden]-attribuut, en dan blijft
   een voorbije sluitingsdag gewoon staan. */
.sluitlijst li[hidden] {
  display: none;
}

.sluitlijst time {
  font-weight: 600;
  color: var(--text-primary);
}

.sluitlijst span {
  color: var(--text-secondary);
}

/* De lege staat. Geen alarmbel, gewoon een geruststelling: er is niets. */
.sluitleeg {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--line-border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 15px;
  max-width: 46ch;
}

/* ── Infostrip ───────────────────────────────────────────────────────────────
   De band onder de hero. Dit is wat iemand met een gsm in de hand wil weten:
   waar zijn we, is het open, welk nummer bel ik. Daarom staat hij bovenaan en
   niet onderaan bij "praktisch". */

.infostrip {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--line-border);
}

.infostrip ul {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
}

@media (min-width: 760px) {
  .infostrip ul {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }
}

.infostrip li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.infostrip .ic {
  font-size: 20px;
  line-height: 1.4;
}

.infostrip dt,
.infostrip .lbl {
  font-family: var(--font-kop);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-accent);
}

.infostrip .val {
  font-size: 16px;
  color: var(--text-primary);
  margin-top: 2px;
}

.infostrip .val a {
  color: inherit;
  text-decoration: none;
}

.infostrip .val a:hover {
  text-decoration: underline;
}

/* ── Openingsuren ────────────────────────────────────────────────────────── */

.uren {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.uren th,
.uren td {
  text-align: left;
  padding: 13px var(--sp-2);
  border-bottom: 1px solid var(--line-border-soft);
}

.uren th {
  font-weight: 600;
  color: var(--text-primary);
}

.uren td {
  color: var(--text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.uren tr:last-child th,
.uren tr:last-child td {
  border-bottom: 0;
}

/* ── Kalendervoorproefje ─────────────────────────────────────────────────── */

.kallijst {
  border: 1px solid var(--line-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
}

.kalrij {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  align-items: baseline;
}

.kalrij + .kalrij {
  border-top: 1px solid var(--line-border-soft);
}

.kalrij__datum {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-accent);
  grid-row: span 2;
  min-width: 68px;
  font-variant-numeric: tabular-nums;
}

.kalrij__wie {
  font-size: 17px;
  font-weight: 600;
}

.kalrij__wat {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ── Clubs ───────────────────────────────────────────────────────────────────
   Elke club krijgt dezelfde kaart: geen uitgelichte, geen bredere. Wie de
   meeste ploegen heeft staat vooraan, en dat is het enige verschil — de rest
   leest de bezoeker maar liever zelf uit het aantal dan uit onze opmaak.

   De hele kaart is één link naar de clubkalender. Daarom staat de <li> leeg en
   draagt de <a> de klasse .kaart: één doel, niet een kaart met ergens een
   linkje in. */

.club {
  position: relative;
  height: 100%;
  gap: var(--sp-3);
}

.club h3 {
  font-size: 19px;
}

/* Duwt de pijl naar de onderrand, zodat hij op elke kaart op dezelfde hoogte
   staat — ook als de ene clubnaam over twee regels loopt en de andere niet. */
.club__gaan {
  margin-top: auto;
  padding-top: var(--sp-1);
  font-family: var(--font-kop);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-accent);
}

a.club:hover .club__gaan,
a.club:focus-visible .club__gaan {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* De plek van de badge staat vast, ook als hij er nog niet is. Het aantal
   ploegen komt uit een fetch en verschijnt dus een seconde ná het tekenen;
   zonder deze hoogte groeit elke kaart op dat moment 27 px — zes kaarten die
   samen alles eronder naar beneden duwen, en precies dát is wat Lighthouse
   als CLS afrekent. GEMETEN: een badge is 27,19 px hoog, dus dat is de maat.
   Bijkomend: zonder JavaScript blijft de kaart even hoog als met. */
.club__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-height: 27.19px;
}

/* Eén badge-stijl voor alles wat hier in een pilletje staat. Zodra er twee
   verschillende vormen naast elkaar komen, wordt het een badgeverzameling. */
.club__badge {
  border: 1px solid var(--line-border);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--bg-base);
  white-space: nowrap;
}


/* ── Eten en drinken ─────────────────────────────────────────────────────── */

.kaartlijst li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 11px 0;
  border-bottom: 1px solid var(--line-border-soft);
  font-size: 16px;
}

.kaartlijst li:last-child {
  border-bottom: 0;
}

.kaartlijst .prijs {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Adres in een gewone sectie ──────────────────────────────────────────────
   NIET .voet__adres hiervoor gebruiken: die staat vast op het goud van de
   donkere voet, en dat goud haalt op ivoor 1,65:1 — onleesbaar. Deze variant
   volgt de tokens van de sectie waar hij in staat. */

.adres {
  font-style: normal;
  line-height: 1.75;
  color: var(--text-secondary);
}

.adres a {
  color: var(--text-accent);
}

/* ── Praktisch ───────────────────────────────────────────────────────────── */

.praktisch {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 900px) {
  .praktisch {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--sp-5);
    align-items: start;
  }
}

/* ── Nieuwsbrief ─────────────────────────────────────────────────────────── */

.brief {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}

@media (min-width: 900px) {
  .brief {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
}

.brief__veld {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.brief label {
  display: block;
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
}

.brief input[type='email'] {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--line-border);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
  padding: 12px var(--sp-4);
  min-height: 48px;
}

.brief input[type='email']::placeholder {
  color: var(--text-secondary);
  opacity: 1;
}

.brief small {
  display: block;
  margin-top: var(--sp-3);
  font-size: 14px;
  color: var(--text-secondary);
}

/* Melding na verzenden — staat er al, maar leeg, zodat de plek niet verspringt
   en een schermlezer hem voorleest zodra er iets in komt. */
.brief__melding:not(:empty) {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: 15px;
  color: var(--text-primary);
}

/* ── Kleine hulpjes ──────────────────────────────────────────────────────── */

.enkel-schermlezer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}