/* ==========================================================================
   /ploegen: belangrijk-kaarten, trainingsroosters als tabellen, teammanagers.
   ========================================================================== */

/* sectiekop links uitgelijnd op de container: H2 met tekst eronder */
.ploegen-kop { max-width: 1054px; margin-bottom: 40px; display: flex; flex-direction: column; gap: 8px; }
.ploegen-kop p { max-width: 835px; }
.ploegen-jaar { white-space: nowrap; }   /* het seizoen breekt niet op het streepje */
.ploegen-kop h2 { margin-bottom: 16px; }
.ploegen-kop a { color: var(--rood); text-underline-offset: 2px; }
.ploegen-kop a:hover { color: var(--rood-hover); }
.ploegen-kop strong { font-weight: 600; color: var(--zwart); }

/* Belangrijk!: witte kaart met rode titel en rode bolletjes */
.ploegen-melding { background: var(--wit); border-radius: var(--r-kaart); padding: 40px 48px; }
.ploegen-melding__titel { font: 600 var(--h4)/1.2 var(--font); color: var(--rood); }
.ploegen-melding__sub { margin-top: 16px; font-weight: 600; color: var(--zwart); }
.ploegen-melding__lijst { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.ploegen-melding__lijst li, .ploegen-prijzen li { position: relative; padding-left: 20px; }
.ploegen-melding__lijst li::before {
  content: ''; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--rood);
}
.ploegen-melding__sub + .ploegen-melding__lijst { margin-top: 8px; }
.ploegen-prijzen { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--lijn-zacht); display: flex; flex-direction: column; gap: 8px; }
.ploegen-prijzen li { padding-left: 0; font-weight: 500; color: var(--zwart); }
.ploegen-melding--zaal { padding-top: 32px; }   /* titel op de hoogte van het tabelopschrift ernaast */
@media (max-width: 767px) {
  .ploegen-melding { padding: 24px; }
  .ploegen-melding__lijst li { padding-left: 16px; }
  .ploegen-melding__lijst li::before { width: 6px; height: 6px; top: 0.65em; }   /* kleiner op een telefoon */
}

/* Rooster buitenseizoen: maandag en vrijdag links onder elkaar, woensdag
   (de drukste dag) rechts. De bronvolgorde blijft maandag, woensdag, vrijdag. */
.ploegen-rooster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--goot); row-gap: var(--goot); align-items: start; }
.ploegen-dag--maandag { grid-column: 1; grid-row: 1; }
.ploegen-dag--woensdag { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
.ploegen-dag--vrijdag { grid-column: 1; grid-row: 2; }
@media (max-width: 1023px) {
  .ploegen-rooster { grid-template-columns: minmax(0, 1fr); }
  .ploegen-dag--maandag, .ploegen-dag--woensdag, .ploegen-dag--vrijdag { grid-column: 1; grid-row: auto; }
}
.ploegen-noot { margin-top: 24px; color: var(--tekst-zacht); }

/* tabel: Ploeg breed, Uur smal en met vaste cijferbreedte */
.ploegen-tabel { font-variant-numeric: tabular-nums; }
.ploegen-tabel caption { padding: 32px 24px 8px; }
.ploegen-tabel thead th:last-child, .ploegen-tabel td { width: 40%; white-space: nowrap; }
.ploegen-tabel tbody th { font-weight: 500; }
.ploegen-tabel__regel { display: block; }
.ploegen-tabel__accent th, .ploegen-tabel__accent td { background: var(--roze-50); color: var(--rood); }
.ploegen-tabel__accent th { font-weight: 600; }
@media (max-width: 767px) { .ploegen-tabel caption { padding: 24px 16px 8px; } }

/* Zaaltrainingen: rooster links, benodigdheden rechts */
.ploegen-zaal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--goot); align-items: start; }
@media (max-width: 1023px) { .ploegen-zaal { grid-template-columns: minmax(0, 1fr); } }

/* Teammanagers: 9 kaarten, 3 x 3 */
.ploegen-team { background: var(--wit); border-radius: var(--r-kaart); padding: 32px; }
.ploegen-team__naam { font: 600 var(--h4)/1.2 var(--font); color: var(--zwart); padding-bottom: 16px; border-bottom: 1px solid var(--lijn-faq); }
.ploegen-team__personen { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.ploegen-persoon__naam { color: var(--zwart); }
.ploegen-persoon__tel {
  display: inline-flex; align-items: center; min-height: 24px;
  color: var(--rood); text-decoration: none; font-variant-numeric: tabular-nums;
}
.ploegen-persoon__tel:hover { color: var(--rood-hover); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 767px) {
  .ploegen-team { padding: 24px; }
  .ploegen-persoon__tel { min-height: 44px; }
}

/* ---------------------------------------------------------- trainingsagenda
   Week- en dagweergave van de CMS-lijst `trainingen` (zie agenda.js). Zonder
   script toont .agenda__bron de lijst als eenvoudige rijen. */
.agenda { --agenda-uur: 64px; --agenda-schaal: 56px; }
.agenda.is-dag { --agenda-uur: 80px; }

/* zonder script: de lijst zelf, per rij dag, ploeg en uur */
.agenda__bron { list-style: none; margin: 0; padding: 8px 0; background: var(--wit); border-radius: var(--r-kaart); }
.agenda__bron > li {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; padding: 14px 24px;
  border-bottom: 1px solid var(--lijn-zacht); font-size: 16px; line-height: 1.5;
}
.agenda__bron > li:last-child { border-bottom: 0; }
.agenda__bron [data-veld="naam"] { grid-column: 2; grid-row: 1; font-weight: 600; color: var(--zwart); }
.agenda__bron [data-veld="dag"] { grid-column: 1; grid-row: 1; }
.agenda__bron .agenda__bron-uur { grid-column: 3; grid-row: 1; }
.agenda__bron [data-veld="schema"], .agenda__bron [data-veld="soort"] { display: none; }

/* --- balk --- */
.agenda__balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.agenda__wissel { display: inline-flex; padding: 4px; background: var(--wit); border-radius: var(--r-pil); box-shadow: inset 0 0 0 1px var(--lijn-zacht); }
.agenda__wisselknop {
  min-width: 88px; padding: 10px 20px; border: 0; border-radius: var(--r-pil); background: transparent;
  font: 500 16px/1.2 var(--font); color: var(--nav-link); cursor: pointer;
  transition: background var(--duur) var(--ease), color var(--duur) var(--ease);
}
.agenda__wisselknop:hover, .agenda__wisselknop[aria-pressed="true"]:hover { background: var(--rood-hover); color: var(--wit); }
.agenda__wisselknop[aria-pressed="true"] { background: var(--rood); color: var(--wit); }

.agenda__dagkiezer { display: flex; align-items: center; gap: 8px; }
.agenda__dagkiezer[hidden] { display: none; }
.agenda__dagknoppen { display: flex; gap: 4px; }
.agenda__dagknop, .agenda__pijl {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 50%; background: var(--wit); color: var(--zwart); cursor: pointer;
  font: 500 15px/1 var(--font); box-shadow: inset 0 0 0 1px var(--lijn-zacht);
  transition: background var(--duur) var(--ease), color var(--duur) var(--ease);
}
.agenda__pijl svg { width: 18px; height: 18px; }
.agenda__dagknop:hover, .agenda__pijl:hover, .agenda__dagknop[aria-pressed="true"]:hover { background: var(--rood-hover); color: var(--wit); opacity: 1; }
.agenda__dagknop.is-leeg { color: var(--tekst-zacht); opacity: 0.6; }
.agenda__dagknop.is-vandaag { box-shadow: inset 0 0 0 2px var(--rood); }
.agenda__dagknop[aria-pressed="true"] { background: var(--rood); color: var(--wit); opacity: 1; box-shadow: none; }

/* --- kader en raster --- */
.agenda__kader { background: var(--wit); border-radius: var(--r-kaart); overflow: hidden; }
.agenda__kop, .agenda__lijf { display: grid; grid-template-columns: var(--agenda-schaal) var(--agenda-kolommen, repeat(7, minmax(0, 1fr))); }
.agenda__kop { border-bottom: 1px solid var(--lijn-faq); }
.agenda__dagkop {
  display: flex; flex-direction: column; gap: 2px; padding: 20px 12px 16px;
  font: 600 20px/1.2 var(--font); color: var(--zwart); cursor: pointer; min-width: 0;
}
.agenda.is-dag .agenda__dagkop { cursor: default; }
.agenda.is-enkel .agenda__kader { margin-top: 0; }
.agenda__dagkop-kort { font: 500 13px/1.2 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rood); }
.agenda__dagkop-lang { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda__dagkop.is-leeg { color: var(--tekst-zacht); padding-inline: 0; align-items: center; }
.agenda.is-week .agenda__dagkop.is-leeg .agenda__dagkop-lang { display: none; }
.agenda.is-week .agenda__dagkop.is-leeg .agenda__dagkop-kort { color: var(--tekst-zacht); }
.agenda__dagkop.is-vandaag .agenda__dagkop-lang::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--rood); vertical-align: middle; }

.agenda__lijf { position: relative; height: calc(var(--agenda-uur) * var(--agenda-uren) + 16px); padding-top: 8px; }
.agenda__schaal { position: relative; }
.agenda__uur { position: absolute; right: 10px; transform: translateY(-50%); margin-top: 8px; font-size: 12px; line-height: 1; color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }

.agenda__dag {
  position: relative; min-width: 0; border-left: 1px solid var(--lijn-zacht);
  /* een lijn per uur en een stippellijn per half uur */
  background-image:
    linear-gradient(to bottom, var(--lijn-zacht) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(25, 29, 37, 0.05) 1px, transparent 1px);
  background-size: 100% var(--agenda-uur), 100% calc(var(--agenda-uur) / 2);
  background-position: 0 0, 0 0;
  background-repeat: repeat-y;
}
.agenda__dag[hidden], .agenda__dagkop[hidden] { display: none; }
.agenda__dag.is-vandaag { background-color: rgba(249, 236, 234, 0.35); }
.agenda__dag.is-leeg { background-color: rgba(244, 244, 245, 0.6); }
.agenda__leeg { position: absolute; inset: 16px 8px auto; margin: 0; font-size: 13px; color: var(--tekst-zacht); text-align: center; }
.agenda.is-week .agenda__dag.is-leeg .agenda__leeg { writing-mode: vertical-rl; transform: rotate(180deg); inset: 24px 0 auto; margin-inline: auto; width: max-content; }

.agenda__blokken { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }

/* --- een training --- */
.agenda__blok {
  position: absolute; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px; padding: 6px 8px 6px 10px;
  border-radius: var(--r-klein); background: var(--roze-50); color: var(--zwart);
  border-left: 4px solid var(--rood); font-size: 13px; line-height: 1.25;
  box-shadow: 0 0 0 1px var(--wit);
  transition: box-shadow var(--duur) var(--ease), transform var(--duur) var(--ease);
}
.agenda__blok:hover { box-shadow: 0 0 0 1px var(--wit), 0 6px 16px rgba(25, 29, 37, 0.14); z-index: 2; }
.agenda__blok-naam { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.agenda__blok-tijd { color: var(--tekst-zacht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.agenda__blok.is-kort { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 6px; padding-block: 2px; }
.agenda__blok.is-kort .agenda__blok-naam { white-space: nowrap; }

.agenda__blok--keeperstraining { background: var(--rood); color: var(--wit); border-left-color: var(--rood-hover); }
.agenda__blok--keeperstraining .agenda__blok-tijd { color: rgba(255, 255, 255, 0.85); }
.agenda__blok--pauze {
  background: repeating-linear-gradient(135deg, var(--grond) 0 6px, var(--wit) 6px 12px);
  border-left-color: var(--grijs-200); color: var(--tekst-zacht);
}
.agenda__blok--pauze .agenda__blok-naam { font-weight: 500; }

.agenda.is-dag .agenda__blok { font-size: 15px; padding: 10px 14px 10px 14px; }
.agenda.is-dag .agenda__blok.is-kort { padding-block: 4px; }

/* de rode lijn van nu */
.agenda__nu { position: absolute; left: 0; right: 0; height: 2px; margin-top: -1px; background: var(--rood); z-index: 3; pointer-events: none; }
.agenda__nu::before { content: ''; position: absolute; left: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--rood); }

/* --- smal: de week schuift horizontaal, de dag past altijd --- */
@media (max-width: 767px) {
  .agenda { --agenda-uur: 56px; --agenda-schaal: 48px; }
  .agenda.is-dag { --agenda-uur: 72px; }
  .agenda__balk { flex-direction: column; align-items: stretch; }
  .agenda__wissel { align-self: flex-start; }
  .agenda__dagkiezer { justify-content: space-between; }
  .agenda__dagknoppen { gap: 2px; }
  .agenda__dagknop, .agenda__pijl { width: 38px; height: 38px; font-size: 14px; }
  .agenda.is-week .agenda__kader { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .agenda.is-week .agenda__kop, .agenda.is-week .agenda__lijf { min-width: 760px; }
  .agenda__bron > li { grid-template-columns: 1fr auto; padding: 14px 16px; }
  .agenda__bron [data-veld="dag"] { grid-column: 1 / -1; grid-row: 1; font-size: 14px; color: var(--rood); }
  .agenda__bron [data-veld="naam"] { grid-column: 1; grid-row: 2; }
  .agenda__bron .agenda__bron-uur { grid-column: 2; grid-row: 2; }
}
@media (max-width: 389px) {
  .agenda__dagknop, .agenda__pijl { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .agenda__blok, .agenda__wisselknop, .agenda__dagknop { transition: none; }
}