/**
 * Uitlegfilms (kd-uitlegfilm) - spelerchrome, v2 (+ bedieningsbalk v5)
 *
 * 14 okt 2026: alles hieronder is de door Robert afgestelde v2-opmaak van
 * de mediawijsheidfilms, ongewijzigd. Alleen de voortgangsbalk onderaan is
 * nieuw; de speler zet die markup alleen neer achter KD_LESFILM_LIVE/admin.
 *
 * Generieke opmaak van de filmspeler: kader, poster, ondertitelband,
 * karaoke-woorden, pauze- en herhaalknop, plus de Kijken/Lezen-switch op een
 * leestekst. De scene-opmaak van een film zit in uitlegfilm-<slug>.js en wordt
 * door de speler geinjecteerd.
 *
 * Maatvoering: de speler zet zelf --kdufi-schaal (containerbreedte / 900) en
 * de klasse .kdufi-smal (onder ~520px). In smal-modus staat de ondertitel
 * ONDER het beeld in plaats van eroverheen; in een smalle kaart past de
 * overlay-band nooit.
 */

.kd-uitlegfilm {
  --kdufi-blauw: var(--color-primary, #4BADFF);
  --kdufi-blauw-diep: var(--color-primary-dark, #2f8fd6);
  --kdufi-geel: var(--color-accent, #FFC440);
  --kdufi-geel-inkt: #6b4d00;
  --kdufi-inkt: var(--color-text, #2c3e50);
  --kdufi-inkt-zacht: #8ba0b3;
  --kdufi-lijn: #cfe9fa;
  --kdufi-schaal: 1;

  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--kdufi-lijn);
  background: radial-gradient(120% 90% at 50% 0%, #e6f5ff 0%, #f4fbff 55%, #ffffff 100%);
  box-shadow: 0 6px 28px rgba(75, 173, 255, 0.20);
  outline: none;
}
.kd-uitlegfilm:focus-visible { box-shadow: 0 0 0 4px var(--kdufi-geel), 0 6px 28px rgba(75, 173, 255, 0.20); }
.kd-uitlegfilm [hidden] { display: none !important; }
.kd-uitlegfilm.kdufi-in-leestekst { margin: 4px 0 14px; }

.kdufi-beeld { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.kdufi-laag { position: absolute; inset: 0; }
.kdufi-zacht { transition: opacity 700ms ease, transform 700ms ease; }

/* ===== Ondertitelband met karaoke-woorden ===== */
/* Breed: overlay onderin het beeld. De band is absoluut gepositioneerd binnen
   de speler, dus de hoogte van de speler is die van het beeld. */
.kdufi-subband {
  position: absolute; left: 0; right: 0; bottom: 0; height: 17%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.kdufi-subbalk {
  max-width: 90%;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 12px;
  padding: 7px 16px;
  text-align: center;
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 600;
  font-size: calc(1.32rem * var(--kdufi-schaal));
  line-height: 1.35;
  color: var(--kdufi-inkt);
  box-shadow: 0 2px 10px rgba(44, 62, 80, 0.12);
}
.kdufi-subbalk:empty { display: none; }
.kdufi-w {
  display: none;
  color: var(--kdufi-inkt-zacht);
  border-radius: 6px;
  padding: 0 3px;
  transition: color 140ms ease, background 140ms ease;
}
.kdufi-w.kdufi-zichtbaar { display: inline; }
.kdufi-w.kdufi-gezegd { color: var(--kdufi-inkt); }
.kdufi-w.kdufi-actief { color: var(--kdufi-inkt); background: var(--kdufi-geel); }

/* Smal: ondertitel als eigen balkje onder het beeld, vaste leesbare letter. */
.kd-uitlegfilm.kdufi-smal .kdufi-subband {
  position: static;
  height: auto;
  padding: 10px 10px 12px;
}
.kd-uitlegfilm.kdufi-smal .kdufi-subbalk {
  max-width: 100%;
  font-size: 1rem;
  min-height: 3.9em; /* ruimte voor ~2 regels: het beeld verspringt niet per zin */
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
}
.kd-uitlegfilm.kdufi-smal .kdufi-subbalk:empty { display: flex; }

/* Nog geen zin in beeld (het scherm met "Speel af", en na afloop): geen lege
   witte balk tonen. De speler zet alle woorden vooraf verborgen in de balk,
   dus :empty klopt nooit. De ruimte blijft staan, zodat het beeld niet
   verspringt als de eerste zin komt (Robert, 15 okt 2026). Een browser
   zonder :has() houdt het oude beeld. */
.kdufi-subbalk:not(:has(.kdufi-zichtbaar)) { visibility: hidden; }

/* "'s" en het woord erna breken nooit los van elkaar (de speler zet ze in een
   .kdufi-paar). Smal is de balk een flexrij; daar wordt het paar zelf een
   kleine flexrij, zodat de ruimte gelijk is aan die tussen andere woorden.
   Een paar van een andere zin dan de huidige telt niet mee. */
.kdufi-paar { white-space: nowrap; }
.kd-uitlegfilm.kdufi-smal .kdufi-paar { display: inline-flex; }
.kd-uitlegfilm .kdufi-paar:not(:has(.kdufi-zichtbaar)) { display: none; }

/* ===== Poster (titelkaart met speelknop) ===== */
.kdufi-poster {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(180deg, rgba(227, 244, 255, 0.90), rgba(255, 255, 255, 0.92));
  transition: opacity 500ms ease;
  z-index: 3;
}
.kdufi-titel {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: calc(3rem * var(--kdufi-schaal));
  color: var(--kdufi-inkt);
  margin: 0;
  text-align: center;
  text-wrap: balance;
}
.kdufi-play {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: max(1rem, calc(1.35rem * var(--kdufi-schaal)));
  background: var(--kdufi-blauw);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 12px 30px;
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--kdufi-blauw-diep);
}
.kdufi-play:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--kdufi-blauw-diep); }
.kdufi-play:focus-visible { outline: 4px solid var(--kdufi-geel); outline-offset: 3px; }
.kdufi-melding {
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  color: #a4452c;
  background: #fdf0e7;
  border-radius: 999px;
  padding: 4px 14px;
  margin: 0 12px;
  text-align: center;
}

/* ===== Pauzebadge (verschijnt als het filmpje gepauzeerd is) ===== */
.kdufi-pauzebadge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 12px rgba(44, 62, 80, 0.20);
  display: flex; align-items: center; justify-content: center;
  z-index: 2; pointer-events: none;
}
.kdufi-pauzebadge svg { width: 30px; height: 30px; fill: var(--kdufi-blauw-diep); margin-left: 4px; }

/* ===== Eindlaag: geblurd scherm met de herhaalknop in het midden ===== */
.kdufi-eindlaag {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(238, 248, 255, 0.45);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.kdufi-replay {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700; font-size: max(1rem, calc(1.35rem * var(--kdufi-schaal)));
  background: var(--kdufi-blauw); color: #fff;
  border: none; border-radius: 999px;
  padding: 12px 30px; cursor: pointer;
  box-shadow: 0 6px 0 var(--kdufi-blauw-diep);
}
.kdufi-replay:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--kdufi-blauw-diep); }
.kdufi-replay:focus-visible { outline: 4px solid var(--kdufi-geel); outline-offset: 3px; }

/* ===== Vergroten: knopje rechtsboven, fixed overlay als hij aan staat =====
   Overal rechtsBOVEN, op elk apparaat (Robert, 14 okt 2026). Op tablet en
   telefoon stond hij daar al sinds sep 2026; die hoek is bij elke film vrij.
   Ook in het vergrote scherm staat hij daar, als knop om te verkleinen. */
.kdufi-vol-knop {
  position: absolute; right: 3%; top: 5%;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(44, 62, 80, 0.20);
  z-index: 4; /* boven poster en eindlaag: vergroten mag altijd */
}
.kdufi-vol-knop svg { width: 21px; height: 21px; stroke: var(--kdufi-blauw-diep); }
.kdufi-vol-knop .kdufi-vol-dicht-icoon { display: none; }
.kdufi-vol-knop:focus-visible { outline: 3px solid var(--kdufi-geel); outline-offset: 2px; }

/* Met een muis verschijnt de knop pas zodra je over het filmpje gaat: hij is
   er precies wanneer je hem zoekt en staat nooit in de weg. Robert, 3 sep 2026. */
@media (hover: hover) {
  .kdufi-vol-knop {
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .kdufi-beeld:hover .kdufi-vol-knop,
  .kdufi-vol-knop:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Op een tablet of telefoon bestaat hoveren niet: daar blijft de knop gewoon
   zichtbaar (geen regel nodig, de standaard is zichtbaar). */

/* In het vergrote scherm is dit ook de sluitknop: die moet altijd zichtbaar en
   klikbaar zijn, ongeacht hover. Escape sluit ook, maar niet iedereen weet dat. */
.kd-uitlegfilm.kdufi-vol .kdufi-vol-knop {
  opacity: 1;
  pointer-events: auto;
}

/* Op de telefoon (smalle speler) geen vergrootknop: staand vergroot hij niets
   (Robert, 15 okt 2026; liggend vergroten is geparkeerd). Staat het filmpje
   toch vergroot, dan blijft hij als sluitknop. */
.kd-uitlegfilm.kdufi-smal:not(.kdufi-vol) .kdufi-vol-knop { display: none; }

.kd-uitlegfilm.kdufi-vol {
  position: fixed; inset: 0; z-index: 2147483000;
  width: auto; border: none; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #0b2038; box-shadow: none;
}
.kd-uitlegfilm.kdufi-vol .kdufi-beeld {
  width: min(94vw, 152vh);
  border-radius: 14px; overflow: hidden;
}
.kd-uitlegfilm.kdufi-vol .kdufi-subband {
  position: static; height: auto; width: min(94vw, 152vh);
  padding: 12px 0 0;
}
.kd-uitlegfilm.kdufi-vol .kdufi-subbalk { max-width: 100%; }
.kd-uitlegfilm.kdufi-vol .kdufi-vol-knop .kdufi-vol-open-icoon { display: none; }
.kd-uitlegfilm.kdufi-vol .kdufi-vol-knop .kdufi-vol-dicht-icoon { display: block; }
html.kdufi-vol-open { overflow: hidden; }

/* ===== Balk boven het filmpje: Kijken/Lezen plus het meldvlaggetje =====
   Het vlaggetje staat helemaal rechts, los van de switch. Dat is bewust: de
   switch is de hoofdbediening, het melden is bijzaak. Een opvallend vlaggetje
   pal naast de knoppen nodigt een kind van zes uit om erop te drukken omdat het
   er is, niet omdat er iets mis is. */
.kdufi-balk {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 12px;
}
.kdufi-balk .kdufi-switch { margin: 0; }

.kdufi-meld {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Zonder dit knijpt de flexrij het rondje op een smal scherm plat: gemeten
     17px breed bij 34px hoog, dus een ovaal in plaats van een cirkel. */
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(75, 173, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--kdufi-inkt-zacht, #8ba0b3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.kdufi-meld:hover {
  color: var(--kdufi-blauw-diep, #2f8fd6);
  background: #eef6fc;
  border-color: rgba(75, 173, 255, 0.55);
}
.kdufi-meld:focus-visible { outline: 3px solid var(--color-accent, #FFC440); outline-offset: 2px; }

/* ===== Kijken/Lezen-switch op een leestekst ===== */
.kdufi-switch {
  display: inline-flex;
  gap: 4px;
  background: #eef6fc;
  border: 1px solid rgba(75, 173, 255, 0.35);
  border-radius: 999px;
  padding: 4px;
  margin: 2px 0 12px;
}
.kdufi-switch-knop {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary-dark, #2f8fd6);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 8px 20px;
  min-height: 40px;
  cursor: pointer;
}
.kdufi-switch-knop.kdufi-actieve-knop {
  background: var(--color-primary, #4BADFF);
  color: #fff;
  box-shadow: 0 2px 6px rgba(75, 173, 255, 0.35);
}
.kdufi-switch-knop:focus-visible { outline: 3px solid var(--color-accent, #FFC440); outline-offset: 2px; }

/* De voorleesknop wordt in Kijken-modus via de engine-callbacks uitgezet
   (KDVoorlezen.onReset) en in Lezen-modus weer aangezet (onQuestion): twee
   stemmen door elkaar is niks. Geen CSS nodig; de knop staat in de koptekst. */

/* ===== Bedieningsbalk (v5, 17 okt 2026): vast onder het beeld, zoals bij
   Netflix. Bovenin de voortgangsbalk over de hele breedte (verhuisd uit het
   beeld, waar hij bij hoveren de onderste 20 px bedekte), daaronder de
   knoppen. Altijd zichtbaar: hij bedekt niets, en op een tablet bestaat
   hoveren niet. Dunne lijniconen (Robert: "iets dunner"). ===== */
.kd-uitlegfilm.kdufi-met-bediening { --kdufi-bd-h: 60px; }

/* Breed: de ondertitel blijft over het beeld liggen; de band schuift mee
   omhoog boven de balk en houdt 17% van de beeldhoogte. */
.kd-uitlegfilm.kdufi-met-bediening:not(.kdufi-smal):not(.kdufi-vol) .kdufi-subband {
  bottom: var(--kdufi-bd-h);
  height: calc((100% - var(--kdufi-bd-h)) * 0.17);
}

.kdufi-bediening {
  position: relative;
  height: var(--kdufi-bd-h);
  box-sizing: border-box;
  padding: 0 10px;
  background: #ffffff;
  border-top: 1px solid var(--kdufi-lijn);
  font-family: 'Nunito', sans-serif;
}

.kdufi-voortgang {
  position: relative;
  height: 16px; padding-top: 7px;
  box-sizing: border-box;
  cursor: pointer;
  touch-action: none;
}
.kdufi-voortgang-spoor {
  position: relative; height: 5px; margin: 0 2px;
  background: #dbe9f4; border-radius: 3px;
}
.kdufi-voortgang-vul {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--kdufi-blauw-diep); border-radius: 3px;
}
.kdufi-voortgang-knop {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff; border: 3px solid var(--kdufi-blauw-diep); box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(44, 62, 80, 0.25);
}

.kdufi-bd-rij { display: flex; align-items: center; height: 44px; }
.kdufi-bd-knop {
  flex: 0 0 auto;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border: none; border-radius: 50%;
  background: transparent; color: var(--kdufi-blauw-diep); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.kdufi-bd-knop svg { width: 28px; height: 28px; }
.kdufi-bd-knop:focus-visible,
.kdufi-bd-snel:focus-visible,
.kdufi-bd-keuze:focus-visible { outline: 3px solid var(--kdufi-geel); outline-offset: 1px; }
@media (hover: hover) {
  .kdufi-bd-knop:not(.kdufi-bd-speel):not(:disabled):hover { background: #eef6fc; }
}
.kdufi-bd-knop:disabled { opacity: 0.38; cursor: default; }

/* Afspelen/pauze: een klein gevuld rondje in de accentkleur. Het klikvlak
   blijft 44 px (de schaduw tekent de knop van 32 px). */
.kdufi-bd-speel { position: relative; margin-right: 0; }
.kdufi-bd-speel::before {
  content: ""; position: absolute; left: 6px; top: 6px; width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--kdufi-blauw);
  box-shadow: 0 2px 0 var(--kdufi-blauw-diep);
}
.kdufi-bd-speel svg { position: relative; width: 16px; height: 16px; color: #fff; }
.kdufi-bd-speel .kdufi-bd-i-pauze,
.kd-uitlegfilm.kdufi-bd-loopt .kdufi-bd-speel .kdufi-bd-i-speel { display: none; }
.kd-uitlegfilm.kdufi-bd-loopt .kdufi-bd-speel .kdufi-bd-i-pauze { display: block; }
.kdufi-bd-speel .kdufi-bd-i-speel { margin-left: 2px; }

.kdufi-bd-geluid .kdufi-bd-i-uit,
.kd-uitlegfilm.kdufi-bd-stil .kdufi-bd-geluid .kdufi-bd-i-aan { display: none; }
.kd-uitlegfilm.kdufi-bd-stil .kdufi-bd-geluid .kdufi-bd-i-uit { display: block; }

.kdufi-bd-tijd {
  margin-left: 6px; font-size: 0.86rem; font-weight: 500; line-height: 1;
  color: #5c6f80; font-variant-numeric: tabular-nums; white-space: nowrap;
}

.kdufi-bd-snel {
  margin-left: auto; flex: 0 0 auto;
  min-width: 44px; height: 32px; padding: 0 12px; box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(75, 173, 255, 0.35); background: #eef6fc;
  font-family: 'Baloo 2', 'Nunito', sans-serif; font-weight: 600; font-size: 0.92rem; line-height: 1;
  color: var(--kdufi-blauw-diep); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Keuzemenu snelheid: klein kaartje boven de knop, rechts uitgelijnd. */
.kdufi-bd-menu {
  position: absolute; right: 10px; bottom: calc(100% + 4px);   /* boven de voortgangsbalk */
  min-width: 168px; padding: 6px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--kdufi-lijn); border-radius: 12px;
  box-shadow: 0 6px 20px rgba(44, 62, 80, 0.16);
  z-index: 5;
}
.kdufi-bd-keuze {
  display: flex; align-items: center; width: 100%; gap: 10px;
  min-height: 40px; padding: 6px 10px; margin: 0;
  border: none; border-radius: 8px; background: transparent;
  font-family: 'Baloo 2', 'Nunito', sans-serif; font-weight: 500; font-size: 0.98rem; color: var(--kdufi-inkt);
  text-align: left; cursor: pointer;
}
.kdufi-bd-keuze b { font-weight: inherit; min-width: 46px; }
.kdufi-bd-keuze .kdufi-bd-vink { margin-left: auto; width: 16px; height: 16px; visibility: hidden; }
.kdufi-bd-keuze.kdufi-bd-gekozen { background: #dff0ff; color: var(--kdufi-blauw-diep); font-weight: 600; }
.kdufi-bd-keuze.kdufi-bd-gekozen .kdufi-bd-vink { visibility: visible; }
@media (hover: hover) {
  .kdufi-bd-keuze:not(.kdufi-bd-gekozen):hover { background: #f3f8fc; }
}

/* Voor de eerste keer afspelen: de balk staat er al (niets verspringt), maar
   alleen de speelknop doet iets. */
.kd-uitlegfilm.kdufi-bd-voor-start .kdufi-voortgang { opacity: 0.38; pointer-events: none; }

/* Springen (10 s, voortgangsbalk): het beeld staat meteen goed, zonder
   overgangen. Anders ploppen in de knipselstijl alle kaartjes tegelijk binnen. */
.kd-uitlegfilm.kdufi-springt .kdufi-beeld * { transition: none !important; }

/* Smal (telefoon): dezelfde balk, onder de ondertitel. */
.kd-uitlegfilm.kdufi-smal .kdufi-bd-tijd { margin-left: 2px; font-size: 0.8rem; }

/* Vergroot: de balk staat onder de ondertitel, even breed als het beeld. */
.kd-uitlegfilm.kdufi-vol .kdufi-bediening {
  width: min(94vw, 152vh); flex: 0 0 auto;
  margin-top: 12px; border: none; border-radius: 12px;
}

.kdufi-laadfout {
  font-family: 'Nunito', sans-serif; font-size: 0.95rem; color: #5c6f80;
  text-align: center; padding: 28px 16px; margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kd-uitlegfilm * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ===== Leesfilm (22 okt 2026) =================================
   Een verhaalfilmpje als mp4 op het filmscherm bij het openen van een les.
   Zelfde plek en breedte als een levende film, alleen een gewone speler.
   Geen Kijken/Lezen-balk: er hoort geen tekst bij. */
.kd-leesfilm {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 18px;
}
.kd-leesfilm-speler {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: #0d1b26;
  box-shadow: 0 8px 24px rgba(16, 42, 60, .18);
}
.kd-leesfilm-wrapper .kd-leestekst-title {
  text-align: center;
}