/* ==========================================================================
   Blok — Fotostrook: foto's en video's van het team
   Twee weergaven (template-parts/blok/fotostrook.php):
   - strook: een rij foto's die je horizontaal doorbladert. De lijst staat
     buiten .wrap: de eerste foto lijnt uit met de tekst (padding gelijk aan
     de linkerrand van .wrap), de rij loopt rechts door tot de rand van het
     scherm. Scroll-snap per foto; pijlknoppen naast de kop (JS). Geen
     zichtbare scrollbalk; de lijst is met het toetsenbord te scrollen
     (tabindex) en krijgt dan een focusring.
   - dek: een kaartdek van wit omrande, licht gedraaide fotokaarten (zelfde
     kaart als het blok collegas). Vanaf 1024px een losse collage: rijen van
     vier en drie kaarten die verspringen en half over elkaar liggen. Smaller
     met JavaScript een stapel (.is-stapel, fotostrook.js), zonder JavaScript
     een scrollbare rij.
   Video's: posterbeeld met afspeelknop; de speler opent in een venster.
   ========================================================================== */
.b-fotostrook {
  --b-fotostrook-rand: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  --b-fotostrook-breedte: clamp(16rem, 78vw, 22rem);
  --b-fotostrook-ruimte: clamp(.875rem, .5rem + 1vw, 1.5rem);
  overflow: hidden; /* de rij mag rechts uit beeld lopen, de pagina niet breder maken */
}
@media (min-width: 640px) {
  .b-fotostrook { --b-fotostrook-breedte: clamp(18rem, 42vw, 24rem); }
}
@media (min-width: 1024px) {
  /* Vier foto's in beeld binnen de breedte van de tekst, de vijfde loopt rechts uit beeld */
  .b-fotostrook { --b-fotostrook-breedte: calc((min(100vw - 2 * var(--gutter), var(--maxw)) - 3 * var(--b-fotostrook-ruimte)) / 3.6); }
}

.b-fotostrook__kop { margin-bottom: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); }
/* Kop op één regel (klantwens: "Samen werken, samen vieren" niet met twee keer
   "samen" onder elkaar). Niet de standaard 20ch van .sectie-kop: de kop mag
   de hele breedte naast de pijlknoppen gebruiken. Op smalle schermen schaalt
   hij mee met de schermbreedte (nooit groter dan de gewone h2), zodat een
   kop van zo'n 26 tekens ook vanaf 320px op één regel past; een langere kop
   breekt gewoon af. */
.b-fotostrook__kop h2 {
  max-width: none;
  font-size: clamp(1.25rem, 6.4vw, var(--fs-h2));
}

/* ==========================================================================
   Strook
   ========================================================================== */

/* .b-fotostrook ervoor: wint van de lijstreset (ul[role="list"]) in base.css */
.b-fotostrook--strook .b-fotostrook__lijst {
  display: flex;
  gap: var(--b-fotostrook-ruimte);
  margin: 0;
  padding: 0 var(--b-fotostrook-rand) .25rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--b-fotostrook-rand);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.b-fotostrook__lijst::-webkit-scrollbar { display: none; }
.b-fotostrook--strook .b-fotostrook__lijst:focus-visible { outline: none; box-shadow: inset var(--focus); border-radius: var(--r-lg); }

.b-fotostrook--strook .b-fotostrook__item {
  flex: 0 0 var(--b-fotostrook-breedte);
  scroll-snap-align: start;
}
.b-fotostrook__figuur { margin: 0; }
.b-fotostrook picture { display: block; }
.b-fotostrook__beeld {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--grijs);
}
.b-fotostrook__bijschrift {
  margin-top: .75rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--tekst-zacht);
}

/* --- Pijlknoppen (strook) en bladerknoppen (dek), alleen met JavaScript --- */
.b-fotostrook__knoppen { display: flex; gap: .625rem; }
.b-fotostrook__knoppen[hidden],
.b-fotostrook__bediening[hidden] { display: none; }
.b-fotostrook__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-fotostrook__knop .icoon { width: 1.15rem; height: 1.15rem; }
.b-fotostrook__knop--vorige .icoon { transform: scaleX(-1); }
.b-fotostrook__knop:hover:not(:disabled) { background: var(--navy); color: var(--wit); }
.b-fotostrook__knop:focus-visible { outline: none; box-shadow: var(--focus); }
.b-fotostrook__knop:disabled { opacity: .35; cursor: default; }
.b-fotostrook.band--navy .b-fotostrook__knop { border-color: rgba(255, 255, 255, .55); color: var(--wit); }
.b-fotostrook.band--navy .b-fotostrook__knop:hover:not(:disabled) { background: var(--wit); color: var(--navy); }

/* ==========================================================================
   Video: posterbeeld met afspeelknop
   ========================================================================== */
.b-fotostrook__video {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  color: var(--navy);
  text-decoration: none;
  -webkit-user-drag: none;
}
.b-fotostrook__video img { -webkit-user-drag: none; }
/* Zonder posterbeeld: een navy vlak met de stippellijn als rand */
.b-fotostrook__beeld--leeg {
  background:
    var(--stippel-punt) 0 100% / 11px 6px repeat-x,
    var(--navy);
  --stippel-kleur: rgba(255, 255, 255, .32);
}
.b-fotostrook__speel {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(3.75rem, 3rem + 2vw, 4.75rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--wit);
  color: var(--navy);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .35), 0 10px 28px -8px rgba(0, 0, 64, .55);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  pointer-events: none;
}
.b-fotostrook__speel svg { width: 42%; height: 42%; margin-left: 8%; }
.b-fotostrook__video:hover .b-fotostrook__speel { background: var(--navy); color: var(--wit); transform: translate(-50%, -50%) scale(1.06); }
.b-fotostrook__video:focus-visible { outline: none; box-shadow: var(--focus); }
.b-fotostrook__video:focus-visible .b-fotostrook__speel { background: var(--navy); color: var(--wit); }

/* --- Videovenster (dialog) ----------------------------------------------- */
.b-fotostrook__speler {
  width: min(100% - 2 * var(--gutter), 72rem);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: var(--wit);
}
.b-fotostrook__speler::backdrop { background: rgba(0, 0, 64, .86); }
.b-fotostrook__speler-vak { position: relative; padding-top: 3.75rem; }
.b-fotostrook__speler-beeld {
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #000;
  box-shadow: var(--shadow-op-donker);
}
.b-fotostrook__speler-beeld iframe,
.b-fotostrook__speler-beeld video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #000;
}
.b-fotostrook__sluit {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: transparent;
  color: var(--wit);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.b-fotostrook__sluit .icoon { width: 1.2rem; height: 1.2rem; }
.b-fotostrook__sluit:hover { background: var(--wit); color: var(--navy); }
.b-fotostrook__sluit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--navy), 0 0 0 6px var(--blauw-licht); }

/* ==========================================================================
   Dek: kaartdek van fotokaarten
   ========================================================================== */
.b-fotostrook--dek {
  --b-fotostrook-rand-kaart: .6rem;     /* witte rand rond de foto, zoals collegas */
  --b-fotostrook-overlap: .75rem;       /* collage: kaarten zonder kolom ertussen overlappen 2× dit */
  --b-fotostrook-overlap-y: 1.25rem;    /* collage: rijen schuiven zoveel over elkaar */
}
.b-fotostrook--dek .b-fotostrook__kop { margin-bottom: clamp(1.25rem, .8rem + 1.5vw, 2rem); }

.b-fotostrook__tafel { position: relative; }

/* Notitie met getekend pijltje (wijst naar de kaarten), zoals bij collegas */
.b-fotostrook__notitie.notitie {
  --pijl-b: 3.4rem;
  --pijl-h: 2.2rem;
  position: relative;
  z-index: 30;
  margin: 0 .5rem .5rem auto;
}
.b-fotostrook__notitie .notitie__tekst { max-width: 24ch; }

.b-fotostrook--dek .b-fotostrook__lijst { margin: 0; padding: 0; list-style: none; }
.b-fotostrook--dek .b-fotostrook__item { position: relative; display: flex; min-width: 0; }

/* De kaart: wit, de foto in een smalle rand, onderaan wat meer wit met
   (optioneel) een bijschrift, zoals een afgedrukte foto */
.b-fotostrook__kaart {
  position: relative;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: var(--b-fotostrook-rand-kaart) var(--b-fotostrook-rand-kaart) 0;
  border-radius: var(--r-lg);
  background: var(--wit);
  box-shadow: var(--shadow-card);
  color: var(--navy);
  --tekst-zacht: var(--tekst-zacht-licht);
  --focus: 0 0 0 3px var(--wit), 0 0 0 6px var(--blauw);
  transition: box-shadow var(--dur) var(--ease);
}
.band--wit .b-fotostrook__kaart { box-shadow: 0 0 0 1px var(--lijn), var(--shadow-card); }
.band--navy .b-fotostrook__kaart { box-shadow: var(--shadow-op-donker); }
.b-fotostrook__kaart .b-fotostrook__beeld,
.b-fotostrook__kaart .b-fotostrook__video { border-radius: calc(var(--r-lg) - var(--b-fotostrook-rand-kaart)); }
.b-fotostrook__kaart .b-fotostrook__beeld { -webkit-user-drag: none; }
.b-fotostrook__kaart--zonder { padding-bottom: 1.6rem; }
.b-fotostrook__kaart .b-fotostrook__bijschrift {
  margin: 0;
  padding: .7rem .35rem .85rem;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--navy);
  text-wrap: balance;
}
/* Een klein roze bolletje voor het bijschrift, zoals de weetjes bij collegas */
.b-fotostrook__kaart .b-fotostrook__bijschrift::before {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  margin-right: .5em;
  border-radius: 50%;
  background: var(--roze);
  vertical-align: .08em;
}

/* --- Breed: losse collage ------------------------------------------------- */
@media (min-width: 1024px) {
  .b-fotostrook--dek .b-fotostrook__lijst {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    align-items: start;
    padding: .5rem var(--b-fotostrook-overlap) calc(var(--b-fotostrook-overlap-y) + 1.5rem);
  }
  .b-fotostrook--dek .b-fotostrook__item {
    z-index: var(--laag, 1);
    grid-column: var(--kolom, 1) / span var(--span, 6);
    grid-row: var(--rij, 1);
    margin: 0 calc(-1 * var(--b-fotostrook-overlap)) calc(-1 * var(--b-fotostrook-overlap-y));
    transform: translateY(var(--omlaag, 0rem)) rotate(var(--draai, 0deg));
    transition: transform .45s var(--ease);
  }
  /* Het bijschrift blijft vrij van de rechterbuur, die er een stukje overheen ligt */
  .b-fotostrook__kaart .b-fotostrook__bijschrift { padding-right: calc(2 * var(--b-fotostrook-overlap) + .35rem); }
  .b-fotostrook--dek .b-fotostrook__item:is(:hover, :focus-within) {
    z-index: 90;
    transform: translateY(calc(var(--omlaag, 0rem) - .6rem)) rotate(0deg) scale(1.04);
  }
  .b-fotostrook--dek .b-fotostrook__item:is(:hover, :focus-within) .b-fotostrook__kaart { box-shadow: var(--shadow-lift); }
  .band--navy.b-fotostrook--dek .b-fotostrook__item:is(:hover, :focus-within) .b-fotostrook__kaart { box-shadow: var(--shadow-op-donker); }

  /* Notitie rechts boven de collage, het pijltje wijst omlaag naar de kaarten */
  .b-fotostrook__notitie.notitie {
    position: absolute;
    top: calc(-1 * clamp(4.5rem, 3rem + 3vw, 6rem));
    right: clamp(1rem, 4vw, 4rem);
    margin: 0;
  }
}

/* --- Smal zonder JavaScript: scrollbare rij -------------------------------- */
@media (max-width: 1023.98px) {
  .b-fotostrook--dek .b-fotostrook__lijst {
    display: flex;
    gap: 1rem;
    margin-inline: calc(-1 * var(--gutter));
    padding: 1rem var(--gutter) 1.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .b-fotostrook--dek .b-fotostrook__item {
    flex: 0 0 min(20rem, 82%);
    scroll-snap-align: start;
    transform: rotate(calc(var(--draai, 0deg) / 2));
  }

  /* --- Smal met JavaScript: stapel ---------------------------------------- */
  .b-fotostrook--dek.is-stapel .b-fotostrook__lijst {
    display: grid;
    width: min(24rem, 100% - 2.5rem);
    margin-inline: auto;
    padding: .5rem 0 1.75rem;
    overflow: visible;
    touch-action: pan-y; /* horizontaal vegen is voor de stapel, verticaal scrollt de pagina */
    user-select: none;
    -webkit-user-select: none;
  }
  .is-stapel .b-fotostrook__item {
    grid-area: 1 / 1;
    z-index: 1;
    transform: translateY(1.35rem) rotate(-1.5deg) scale(.94);
    transition: transform .45s var(--ease), opacity .3s var(--ease);
  }
  .is-stapel .b-fotostrook__item[data-plek="0"] {
    z-index: 4;
    transform: translateX(var(--sleep, 0px)) rotate(var(--sleep-draai, -1deg));
  }
  .is-stapel .b-fotostrook__item[data-plek="1"] { z-index: 3; transform: translate(.9rem, .55rem) rotate(4deg) scale(.98); }
  .is-stapel .b-fotostrook__item[data-plek="2"] { z-index: 2; transform: translate(-.9rem, .95rem) rotate(-4.5deg) scale(.96); }
  /* Kaarten erachter: een tik haalt ze naar voren (fotostrook.js) */
  .is-stapel .b-fotostrook__item:not([data-plek="0"]) .b-fotostrook__kaart { cursor: pointer; }
  .is-stapel .b-fotostrook__item:not([data-plek="0"]) .b-fotostrook__speel { opacity: 0; }
  .is-stapel.is-slepen .b-fotostrook__item[data-plek="0"] { transition: none; cursor: grabbing; }

  .b-fotostrook__notitie.notitie { margin-bottom: .25rem; }
}

/* --- Bladeren onder de stapel (alleen met JavaScript) --------------------- */
.b-fotostrook__bediening {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: .5rem;
}
.b-fotostrook__teller {
  min-width: 4.5em;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--tekst-zacht);
}

/* --- Rustig: geen beweging ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .b-fotostrook--dek .b-fotostrook__item,
  .b-fotostrook__kaart,
  .b-fotostrook__speel { transition: none; }
  .b-fotostrook__video:hover .b-fotostrook__speel { transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .b-fotostrook--dek .b-fotostrook__item:is(:hover, :focus-within) { transform: translateY(var(--omlaag, 0rem)) rotate(0deg); }
}

@media (forced-colors: active) {
  .b-fotostrook__knop,
  .b-fotostrook__sluit { border-color: ButtonText; }
  .b-fotostrook__kaart { border: 1px solid CanvasText; }
  .b-fotostrook__speel { border: 2px solid ButtonText; forced-color-adjust: none; }
}