/* ==========================================================================
   Blok — Projecten: voorbeeldprojecten in de module van de homepage
   De kaarten en het grid (1–3 projecten) komen uit assets/css/home/impact.css
   (één bron met de homepage; blokken/projecten/blok.php laadt die ook op
   subpagina's). Hier alleen wat er bij het blok bijkomt:
   - een kaart zonder link (geen lift, geen zoom, geen pijl);
   - de banden grijs/roze/navy (de homepage staat altijd op wit);
   - de slider bij meer dan drie projecten: een rij die rechts doorloopt tot
     de rand van het scherm (de eerste kaart lijnt uit met de kop), met
     scroll-snap. Mobiel één kaart met de volgende ernaast, tablet twee,
     desktop drie. Zonder JavaScript een scrollbare rij met een dunne
     scrollbalk; met JavaScript (.is-klaar, projecten.js) een voortgangslijn
     met vorige/volgende-knoppen.
   Selectors beginnen met .b-projecten: ze winnen van impact.css, welke van
   de twee ook als laatste geladen wordt.
   ========================================================================== */

/* --- Kaart zonder link ---------------------------------------------------- */
.b-projecten .b-projecten__case--zonder-link:hover { transform: none; box-shadow: var(--shadow-card); }
.b-projecten .b-projecten__case--zonder-link:hover .kaart__media img { transform: none; }
.b-projecten.band--navy .b-projecten__case--zonder-link:hover { box-shadow: inset 0 0 0 1px var(--navy-80); }

/* --- Banden -------------------------------------------------------------- */
/* Navy: donkere kaart (components.css); het tekstpaneel van de grote case en
   de pijl-cirkel gaan mee. */
.b-projecten.band--navy .s-impact__pijl { border-color: rgba(255, 255, 255, .28); color: var(--wit); }
.b-projecten.band--navy .s-impact__case:hover .s-impact__pijl,
.b-projecten.band--navy .s-impact__case:has(a:focus-visible) .s-impact__pijl { background: var(--wit); border-color: var(--wit); color: var(--navy); }
@media (min-width: 1100px) {
  .b-projecten.band--navy .s-impact__grid--redactioneel .s-impact__case--uitgelicht .s-impact__body { background: var(--navy-90); }
}

/* ==========================================================================
   Slider (meer dan drie projecten)
   ========================================================================== */
.b-projecten--slider {
  --b-projecten-rand: max(var(--gutter), calc((100% - var(--maxw)) / 2)); /* = linkerrand van .wrap */
  --b-projecten-ruimte: clamp(1.25rem, .8rem + 1.4vw, 2rem);               /* = ruimte in het homepage-grid */
  --b-projecten-lucht: 1rem;      /* boven: ruimte voor de lift bij hover */
  --b-projecten-lucht-onder: 3rem; /* onder: ruimte voor de schaduw */
  overflow-x: clip; /* nooit horizontaal scrollen van de pagina */
}

/* .b-projecten ervoor: wint van de lijstreset (ul[role="list"]) in base.css */
.b-projecten .b-projecten__lijst {
  position: relative; /* offsetLeft van de kaarten ten opzichte van de rij (projecten.js) */
  display: flex;
  gap: var(--b-projecten-ruimte);
  /* De rij scrolt horizontaal en knipt dus ook verticaal af: binnenruimte
     voor de lift en de schaduw, met een negatieve marge zodat de sectie
     niet hoger wordt. */
  margin: calc(-1 * var(--b-projecten-lucht)) 0 calc(-1 * var(--b-projecten-lucht-onder));
  padding: var(--b-projecten-lucht) var(--b-projecten-rand) var(--b-projecten-lucht-onder);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--b-projecten-rand);
  scrollbar-width: thin;
  scrollbar-color: var(--lijn) transparent;
  -webkit-overflow-scrolling: touch;
}
.b-projecten .b-projecten__lijst:focus-visible { outline: none; box-shadow: inset var(--focus); }

/* Met JavaScript: geen scrollbalk, de voortgangslijn neemt het over. */
.b-projecten.is-klaar .b-projecten__lijst { scrollbar-width: none; }
.b-projecten.is-klaar .b-projecten__lijst::-webkit-scrollbar { display: none; }
/* Tijdens slepen met de muis: geen snap (dat zou elke beweging terugzetten). */
.b-projecten.is-slepen .b-projecten__lijst {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* Kaarten: allemaal even breed en even hoog; de volgende kaart steekt rechts in beeld. */
.b-projecten .b-projecten__dia {
  flex: 0 0 calc(100% - 2.75rem);
  scroll-snap-align: start;
}
@media (min-width: 720px) {
  .b-projecten .b-projecten__dia { flex-basis: calc((100% - var(--b-projecten-ruimte)) / 2.2); }
}
@media (min-width: 1100px) {
  .b-projecten .b-projecten__dia { flex-basis: calc((100% - 2 * var(--b-projecten-ruimte)) / 3.2); }
}
.b-projecten .b-projecten__dia .s-impact__case { -webkit-user-drag: none; }
.b-projecten .b-projecten__dia img { -webkit-user-drag: none; }

/* Zonder beeld: in een rij even hoog beeldvlak als de rest (niet de smalle
   band die impact.css mobiel geeft aan een losse kaart). */
.b-projecten .b-projecten__dia .s-impact__media--leeg { aspect-ratio: 16 / 10; height: auto; }
.b-projecten .b-projecten__dia .s-impact__media--leeg .icoon { width: clamp(2.75rem, 2rem + 2vw, 4rem); }

/* --- Voet: voortgangslijn en knoppen --------------------------------------- */
.b-projecten .b-projecten__voet {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, .75rem + 2vw, 2.5rem);
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.b-projecten .b-projecten__voet[hidden] { display: none; }

.b-projecten__voortgang {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--lijn);
  overflow: hidden;
}
.b-projecten__voortgang-balk {
  position: absolute;
  inset-block: 0;
  left: calc(var(--positie, 0) * (100% - var(--deel, 1) * 100%));
  width: calc(var(--deel, 1) * 100%);
  border-radius: inherit;
  background: var(--navy);
}

.b-projecten__knoppen { display: flex; flex: none; gap: .625rem; }
/* Zelfde knop als de pijlknoppen van de fotostrook */
.b-projecten__knop {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.b-projecten__knop .icoon { width: 1.15rem; height: 1.15rem; }
.b-projecten__knop--vorige .icoon { transform: scaleX(-1); }
.b-projecten__knop:hover:not([aria-disabled="true"]) { background: var(--navy); color: var(--wit); }
.b-projecten__knop:focus-visible { outline: none; box-shadow: var(--focus); }
/* Begin of eind: aria-disabled (projecten.js), zodat de knop de focus houdt */
.b-projecten__knop[aria-disabled="true"] { opacity: .35; cursor: default; }

.b-projecten.band--navy .b-projecten__voortgang { background: var(--navy-80); }
.b-projecten.band--navy .b-projecten__voortgang-balk { background: var(--wit); }
.b-projecten.band--navy .b-projecten__knop { border-color: rgba(255, 255, 255, .55); color: var(--wit); }
.b-projecten.band--navy .b-projecten__knop:hover:not([aria-disabled="true"]) { background: var(--wit); color: var(--navy); }

@media (forced-colors: active) {
  .b-projecten__voortgang-balk { background: CanvasText; }
}