/* ==========================================================================
   Teamprofiel (single-evc_team.php): "Waar krijgt … energie van?" met een
   stroomeffect, en de projecten als tijdlijn met kaarten
   ========================================================================== */

/* --- Waar krijgt … energie van? ------------------------------------------
   Kop, dan een laadkabel (stippellijn van een bronpunt naar een batterij),
   dan het antwoord groot. Met JS (single-evc_team.js) eenmalig zodra de
   kabel in beeld komt: de arcering en de stippellijn tekenen zich, de
   groene stroompuls (zoals bij stappen) loopt naar de batterij, die springt
   aan en loopt vol, en het antwoord licht op. Zonder JS en bij
   prefers-reduced-motion staat alles meteen in de eindtoestand.
   data-stroom="wacht": beginstand (JS, vóór in beeld); "aan": de animatie. */
.team-energie {
  --team-energie-bron: var(--blauw);
  --team-energie-vlak: var(--wit);            /* = band: vult het bronpunt */
  --team-energie-romp: var(--navy);           /* omtrek batterij */
  --team-energie-tekst: var(--tekst);
  --team-energie-tekst-start: var(--tekst-zacht);
  --team-energie-gloed: rgba(10, 125, 250, .28);
  --team-energie-batterij: clamp(4.25rem, 3.6rem + 1.8vw, 5.75rem); /* breedte; hoogte = 36/70 */
  --team-energie-start: .45s;                 /* puls vertrekt (JS: PULS_START) */
  --team-energie-aankomst: 1.3s;              /* puls bij de batterij (JS: AANKOMST) */
}
.team-energie.band--grijs { --team-energie-vlak: var(--grijs-licht); }
.team-energie.band--navy {
  --team-energie-bron: var(--blauw-licht);
  --team-energie-vlak: var(--navy);
  --team-energie-romp: var(--wit);
  --team-energie-gloed: rgba(255, 255, 255, .5);
}

/* Mobiel onder elkaar: kop, kabel, antwoord, geluidsknop. Desktop: de kop
   links, kabel en antwoord rechts; de kabel op de hoogte van de eerste
   regel van de kop, de knop onder de kop. */
.team-energie__binnen { display: grid; align-items: start; }
.team-energie__titel { max-width: 16ch; }
@media (min-width: 1024px) {
  .team-energie__binnen {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "titel kabel"
      "titel antwoord"
      "knop  antwoord";
    column-gap: var(--gap-lg);
  }
  .team-energie__titel { grid-area: titel; }
  .team-energie__kabel { grid-area: kabel; }
  .team-energie__antwoord { grid-area: antwoord; }
  .team-energie__geluid { grid-area: knop; align-self: start; justify-self: start; }
}

/* --- Geluidsknop (alleen met JS) --- */
.team-energie__geluid {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  justify-self: start;
  margin: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) 0 0;
  padding: .45rem 1rem .45rem .8rem;
  border: 1px solid var(--lijn);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tekst-zacht);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.team-energie__geluid[hidden] { display: none; }
.team-energie__geluid:hover,
.team-energie__geluid[aria-pressed="true"] { border-color: currentColor; color: var(--tekst); }
.team-energie__geluid:focus-visible { box-shadow: var(--focus); }
.team-energie.band--navy .team-energie__geluid { border-color: rgba(255, 255, 255, .3); }
.team-energie.band--navy .team-energie__geluid:is(:hover, [aria-pressed="true"]) { border-color: var(--wit); }
.team-energie__luidspreker {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.team-energie__golf { display: none; }
.team-energie__geluid[aria-pressed="true"] .team-energie__golf { display: inline; }
.team-energie__geluid[aria-pressed="true"] .team-energie__stil { display: none; }

/* --- Laadkabel ---------------------------------------------------------- */
.team-energie__kabel {
  position: relative;
  display: flex;
  align-items: center;
  margin-block: clamp(2rem, 1.4rem + 2.2vw, 3.5rem) clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
  isolation: isolate;
}
@media (min-width: 1024px) {
  /* Midden van de kabel op het midden van de eerste regel van de kop (h2: line-height 1.12) */
  .team-energie__kabel { margin-top: calc(var(--fs-h2) * .56 - var(--team-energie-batterij) * 36 / 70 / 2); }
}
/* Bronpunt (stopcontact): zoals de stippen van de route, in de kleur van de band gevuld */
.team-energie__bron {
  position: relative;
  z-index: 1;
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--team-energie-bron);
  border-radius: 50%;
  background: var(--team-energie-vlak);
}
/* Stippellijn en stroompuls: zelfde puntjes op exact dezelfde plek, van het
   midden van het bronpunt tot vlak voor de batterij */
.team-energie__lijn,
.team-energie__stroom {
  position: absolute;
  top: 50%;
  left: .5rem;
  right: calc(var(--team-energie-batterij) + .35rem);
  height: 6px;
  margin-top: -3px;
}
/* 'space': hele puntjes, gelijk verdeeld (geen half puntje tegen de batterij); lijn en puls rekenen hetzelfde */
.team-energie__lijn { z-index: -1; background: var(--stippel-punt) 0 50% / 11px 6px space no-repeat; }
.team-energie__stroom {
  --stroom-lengte: clamp(5rem, 3rem + 6vw, 9rem);
  display: none;
  background: radial-gradient(circle, var(--groen) 0 2.75px, transparent 3.25px) 0 50% / 11px 6px space no-repeat;
  filter: drop-shadow(0 0 2.5px rgba(0, 242, 130, .85));
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .3) 45%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .3) 45%, #000 90%, transparent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--stroom-lengte) 100%;
  mask-size: var(--stroom-lengte) 100%;
  -webkit-mask-position: calc(var(--stroom-lengte) * -1) 0;
  mask-position: calc(var(--stroom-lengte) * -1) 0;
  pointer-events: none;
}

/* Batterij: omtrek in de tekstkleur van de band, cellen groen (de stroom),
   en een bliksem in de omtrekkleur met een rand in de bandkleur (leesbaar
   op de groene cellen). Eindtoestand: vol, met een zachte groene gloed. */
.team-energie__batterij {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--team-energie-batterij);
  height: auto;
  margin-left: auto;
  overflow: visible;
  color: var(--team-energie-romp);
  filter: drop-shadow(0 0 7px rgba(0, 242, 130, .35));
}
.team-energie__romp { fill: var(--team-energie-vlak); stroke: currentColor; stroke-width: 2.5; }
.team-energie__pool { fill: currentColor; }
.team-energie__cel { fill: var(--groen); }
.team-energie__bliksem {
  fill: currentColor;
  stroke: var(--team-energie-vlak);
  stroke-width: 2.75;
  stroke-linejoin: round;
  paint-order: stroke;
}
.team-energie__cel,
.team-energie__bliksem {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.team-energie__cel { transform-origin: 0 50%; }

/* --- Antwoord ----------------------------------------------------------- */
.team-energie__antwoord {
  max-width: 30ch;
  color: var(--team-energie-tekst);
  font-size: clamp(1.5rem, 1.12rem + 1.6vw, 2.5rem);
  font-weight: var(--fw-display);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.team-energie__antwoord p + p { margin-top: .6em; }
.team-energie--lang .team-energie__antwoord {
  max-width: 40ch;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.85rem);
  line-height: 1.4;
}

/* --- Beginstand en animatie --------------------------------------------
   Alleen zonder voorkeur voor minder beweging: anders (en zonder JS) staat
   alles in de eindtoestand hierboven. "wacht" = vóór de kabel in beeld is;
   "aan" = de animatie, één keer (JS speelt hem opnieuw af als het geluid
   aangaat). */
@media (prefers-reduced-motion: no-preference) {
  .team-energie[data-stroom="wacht"] .team-energie__titel .route::before { transform: scaleX(0); }
  .team-energie[data-stroom="wacht"] .team-energie__lijn { clip-path: inset(0 100% 0 0); }
  .team-energie[data-stroom="wacht"] .team-energie__batterij { filter: none; }
  .team-energie[data-stroom="wacht"] .team-energie__cel,
  .team-energie[data-stroom="wacht"] .team-energie__bliksem { transform: scale(0); }
  .team-energie[data-stroom="wacht"] .team-energie__antwoord { color: var(--team-energie-tekst-start); }

  .team-energie[data-stroom="aan"] .team-energie__titel .route::before {
    transform-origin: 0 50%;
    animation: team-energie-arcering .8s var(--ease) both;
  }
  .team-energie[data-stroom="aan"] .team-energie__lijn {
    animation: team-energie-teken .75s var(--ease) both;
  }
  .team-energie[data-stroom="aan"] .team-energie__stroom {
    display: block;
    animation: team-energie-stroom .95s cubic-bezier(.45, .05, .75, .75) var(--team-energie-start) both;
  }
  .team-energie[data-stroom="aan"] .team-energie__batterij {
    animation: team-energie-spring .65s var(--ease) calc(var(--team-energie-aankomst) - .05s) both,
      team-energie-gloed 1.1s ease-out var(--team-energie-aankomst) both;
  }
  .team-energie[data-stroom="aan"] .team-energie__cel {
    animation: team-energie-cel .2s var(--ease) calc(var(--team-energie-aankomst) + var(--i) * .1s) both;
  }
  .team-energie[data-stroom="aan"] .team-energie__bliksem {
    animation: team-energie-bliksem .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--team-energie-aankomst) + .45s) both;
  }
  .team-energie[data-stroom="aan"] .team-energie__antwoord {
    animation: team-energie-licht 1s ease-out calc(var(--team-energie-aankomst) + .05s) both;
  }
}

@keyframes team-energie-arcering {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes team-energie-teken {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes team-energie-stroom {
  from { -webkit-mask-position: calc(var(--stroom-lengte) * -1) 0; mask-position: calc(var(--stroom-lengte) * -1) 0; }
  to { -webkit-mask-position: calc(100% + var(--stroom-lengte)) 0; mask-position: calc(100% + var(--stroom-lengte)) 0; }
}
/* Aanspringen: kort opveren (geen flitsen, alleen schaal) */
@keyframes team-energie-spring {
  0% { transform: none; }
  30% { transform: scale(1.16) rotate(-4deg); }
  55% { transform: scale(.95) rotate(1.5deg); }
  78% { transform: scale(1.03); }
  100% { transform: none; }
}
@keyframes team-energie-gloed {
  0% { filter: drop-shadow(0 0 0 rgba(0, 242, 130, 0)); }
  30% { filter: drop-shadow(0 0 14px rgba(0, 242, 130, .8)); }
  100% { filter: drop-shadow(0 0 7px rgba(0, 242, 130, .35)); }
}
@keyframes team-energie-cel {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes team-energie-bliksem {
  from { transform: scale(0) rotate(-20deg); }
  to { transform: none; }
}
@keyframes team-energie-licht {
  0% { color: var(--team-energie-tekst-start); text-shadow: 0 0 0 transparent; }
  35% { color: var(--team-energie-tekst); text-shadow: 0 0 .5em var(--team-energie-gloed); }
  100% { color: var(--team-energie-tekst); text-shadow: 0 0 0 transparent; }
}

@media (forced-colors: active) {
  .team-energie__bron { border-color: CanvasText; }
  .team-energie__romp { stroke: CanvasText; }
  .team-energie__cel,
  .team-energie__pool { fill: CanvasText; }
  .team-energie__bliksem { fill: Canvas; stroke: Canvas; }
}

/* --- Projecten: tijdlijn met kaarten -------------------------------------
   Van oud naar nieuw. Boven elke kaart het jaartal op een stippellijn
   (brandbook: ronde puntjes); het nieuwste project heeft een roze stip.
   Hetzelfde jaar als de kaart ervoor: een kleine stip en het jaartal in de
   zachte tekstkleur, zodat de jaren als groep lezen. De rij staat buiten .wrap: de eerste kaart lijnt uit met de
   tekst en de rij loopt door tot de rand van het scherm (zoals de
   fotostrook). Scroll-snap per kaart; met JS pijlknoppen naast de kop en
   start de rij bij het nieuwste project. Zonder JS: een gewone horizontaal
   scrollbare rij met een dunne scrollbalk. */
.team-projecten {
  --team-projecten-rand: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  --team-projecten-ruimte: clamp(1rem, .6rem + 1.2vw, 1.75rem);
  --team-projecten-vlak: var(--wit);          /* = band: vult de stippen */
  --team-projecten-stip: .875rem;
  overflow: hidden; /* de rij mag rechts uit beeld lopen, de pagina niet breder maken */
}
.team-projecten.band--grijs { --team-projecten-vlak: var(--grijs-licht); }

.team-projecten__kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}

/* --- Pijlknoppen (alleen met JS), zoals de fotostrook --- */
.team-projecten__knoppen { display: flex; flex: none; gap: .625rem; }
.team-projecten__knoppen[hidden] { display: none; }
.team-projecten__knop {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.team-projecten__knop .icoon { width: 1.15rem; height: 1.15rem; }
.team-projecten__knop--vorige .icoon { transform: scaleX(-1); }
.team-projecten__knop:hover:not([aria-disabled="true"]) { background: var(--navy); color: var(--wit); }
.team-projecten__knop:focus-visible { box-shadow: var(--focus); }
/* aria-disabled in plaats van disabled: de focus blijft op de knop staan */
.team-projecten__knop[aria-disabled="true"] { opacity: .35; cursor: default; }

/* --- De rij --- */
/* .team-projecten ervoor: wint van de lijstreset (ol[role="list"]) in base.css */
.team-projecten .team-projecten__lijst {
  display: flex;
  gap: var(--team-projecten-ruimte);
  margin: 0 0 -1.5rem;
  /* Onder: ruimte voor de schaduw en het optillen van de kaarten (de rij knipt af) */
  padding: .25rem var(--team-projecten-rand) 2.25rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--team-projecten-rand);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--stippel-kleur) transparent;
}
/* Met JS (pijlknoppen): geen zichtbare scrollbalk */
.js .team-projecten .team-projecten__lijst { scrollbar-width: none; }
.js .team-projecten__lijst::-webkit-scrollbar { display: none; }
.team-projecten__lijst:focus-visible { outline: none; box-shadow: inset var(--focus); border-radius: var(--r-lg); }

.team-projecten__item {
  display: flex;
  flex: 0 0 min(82%, 21rem);
  flex-direction: column;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .team-projecten__item { flex-basis: calc((100% - var(--team-projecten-ruimte)) / 2.25); }
}
@media (min-width: 1024px) {
  /* Drie kaarten vullen precies de breedte van de tekst; meer loopt rechts uit beeld */
  .team-projecten__item { flex-basis: calc((100% - 2 * var(--team-projecten-ruimte)) / 3); }
}

/* --- Tijdlijn: jaartal, stip en stippellijn boven de kaart --- */
.team-projecten__jaar {
  position: relative;
  /* Ook zonder jaartal even hoog: stip en lijn op één lijn */
  min-height: calc(1.3em + var(--team-projecten-stip) + .7rem);
  margin-bottom: 1.1rem;
  padding-bottom: calc(var(--team-projecten-stip) + .7rem);
  color: var(--tekst);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
/* Stip */
.team-projecten__jaar::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: var(--team-projecten-stip);
  height: var(--team-projecten-stip);
  border: 2px solid var(--blauw);
  border-radius: 50%;
  background: var(--team-projecten-vlak);
}
/* Stippellijn naar de stip van de volgende kaart (over de tussenruimte heen).
   'space' verdeelt de puntjes gelijk: geen half puntje bij de volgende stip. */
.team-projecten__jaar::after {
  content: "";
  position: absolute;
  left: calc(var(--team-projecten-stip) / 2);
  right: calc(var(--team-projecten-ruimte) * -1);
  bottom: calc(var(--team-projecten-stip) / 2 - 3px);
  height: 6px;
  background: var(--stippel-punt) 0 50% / 11px 6px space no-repeat;
}
.team-projecten__item:last-child .team-projecten__jaar::after { content: none; }
/* Nieuwste project: roze stip (zoals het eindpunt van de route) */
.team-projecten__item:last-child .team-projecten__jaar::before { border-color: var(--roze); background: var(--roze); }
/* Zelfde jaar als de vorige kaart: zacht jaartal, kleine stip op de lijn */
.team-projecten__jaar--zelfde { color: var(--tekst-zacht); }
.team-projecten__jaar--zelfde::before {
  left: calc(var(--team-projecten-stip) / 2 - 4px);
  bottom: calc(var(--team-projecten-stip) / 2 - 4px);
  width: 8px;
  height: 8px;
  border: 0;
  background: var(--blauw);
}
.team-projecten__item:last-child .team-projecten__jaar--zelfde::before { background: var(--roze); }

/* --- Kaart (stijl van het blok cases) --- */
.team-projecten__kaart { flex: 1 1 auto; }
.team-projecten__media picture,
.team-projecten__media > img { position: absolute; inset: 0; }
.team-projecten__media--leeg {
  display: grid;
  place-items: center;
  background: var(--roze-licht);
  color: var(--blauw);
}
.team-projecten__media--leeg .icoon { width: clamp(2.75rem, 2rem + 2vw, 4rem); height: auto; aspect-ratio: 1; }
.team-projecten__body { gap: .65rem; }
.team-projecten__titel { line-height: 1.3; }
.team-projecten__voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: .6rem;
}
.team-projecten__voet .pijl-cirkel { margin-left: auto; }
.team-projecten__kaartjaar { color: var(--tekst-zacht); font-size: var(--fs-small); font-weight: var(--fw-bold); }

/* --- Eén project: één brede kaart (zoals een losse case bij het blok cases) --- */
@media (min-width: 720px) {
  .team-projecten__kaart--breed {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  }
  .team-projecten__kaart--breed .team-projecten__media { aspect-ratio: auto; min-height: clamp(18rem, 12rem + 10vw, 23rem); }
  .team-projecten__kaart--breed .team-projecten__body {
    justify-content: center;
    padding: clamp(1.75rem, 1rem + 2.2vw, 3.25rem);
  }
  .team-projecten__kaart--breed .team-projecten__titel {
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    line-height: 1.22;
  }
  .team-projecten__kaart--breed .team-projecten__voet { margin-top: .9rem; }
}

@media (forced-colors: active) {
  .team-projecten__knop { border-color: ButtonText; }
  .team-projecten__jaar::before { border-color: CanvasText; }
}