/* ==========================================================================
   cast.css — gedeelde slide-opmaak voor narrowcasting (v0.2).

   Eén renderpad (castrender.js) voor de tv-speler ÉN de previews/ontwerper
   in het CMS. Alle maten staan in em: de host zet op de slide-container een
   font-size van 1% van de containerhoogte (speler: .laag{font-size:1vh};
   CMS-preview: hoogte/100 in px). Daardoor is 1em hier exact "1vh op de tv"
   en schaalt een preview van 300px hoog pixelperfect mee.
   Bewust los van de app-tokens: het scherm volgt het slide-thema (R24 geldt
   voor CMS-chrome, niet voor de afspeelcontent die de beheerder zelf kleurt).
   ========================================================================== */

.cast-slide { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; overflow: hidden;
  font-family: "Outfit", "Inter", system-ui, sans-serif; }
.cast-slide img, .cast-slide video { width: 100%; height: 100%; object-fit: contain; }
.cast-slide iframe { width: 100%; height: 100%; border: 0; background: #fff; }

/* tekst-slide */
.sl-tekst { text-align: center; padding: 0 14em; }
.sl-tekst h1 { font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 7em; font-weight: 700; line-height: 1.15; margin: 0; }
.sl-tekst p { font-size: 3.2em; opacity: .8; margin: .63em 0 0; }

/* klok-slide */
.sl-klok { text-align: center; }
.sl-klok .tijd { font-family: "Space Grotesk", sans-serif; font-size: 22em;
  font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sl-klok .datum { font-size: 4.5em; opacity: .85; margin-top: .45em; text-transform: capitalize; }
.sl-klok .onder { font-size: 2.6em; opacity: .55; margin-top: 1.15em; }

/* agenda-slide */
.sl-agenda { width: 100%; height: 100%; box-sizing: border-box;
  padding: 7em 14em; display: flex; flex-direction: column; }
.sl-agenda h1 { font-family: "Space Grotesk", sans-serif; font-size: 5.5em;
  margin: 0 0 .73em; padding-bottom: .36em; border-bottom: .06em solid currentColor; opacity: .92; }
.sl-agenda .item { display: flex; align-items: center; gap: 5em;
  background: rgba(0,0,0,.22); border: .1em solid rgba(255,255,255,.12);
  border-radius: 1.6em; padding: 2.4em 4.4em; margin-bottom: 2em;
  backdrop-filter: blur(4px); }
.sl-agenda .wanneer { width: 42em; flex-shrink: 0; border-right: .15em solid currentColor;
  padding-right: 4.4em; opacity: .9; }
.sl-agenda .wanneer .d { font-size: 3em; font-weight: 600; text-transform: capitalize; }
.sl-agenda .wanneer .t { font-size: 2.4em; opacity: .75; margin-top: .25em; }
.sl-agenda .wat { font-size: 4em; font-weight: 500; }
.sl-agenda .leeg { font-size: 3.5em; font-style: italic; opacity: .6; margin-top: .85em; }

/* bericht-slide (mededelingen vanuit het platform) */
.sl-berichten { width: 100%; height: 100%; box-sizing: border-box;
  padding: 6em 12em; display: flex; flex-direction: column; }
.sl-berichten h1 { font-family: "Space Grotesk", sans-serif; font-size: 5.5em;
  margin: 0 0 .73em; padding-bottom: .36em; border-bottom: .06em solid currentColor; opacity: .92; }
.sl-berichten .bericht { background: rgba(0,0,0,.22); border: .1em solid rgba(255,255,255,.12);
  border-radius: 1.6em; padding: 2.6em 4em; margin-bottom: 2em; backdrop-filter: blur(4px); }
.sl-berichten .bericht.belangrijk { border-left: 1em solid currentColor; }
.sl-berichten .b-kop { display: flex; align-items: baseline; gap: 2em; }
.sl-berichten .b-titel { font-family: "Space Grotesk", sans-serif; font-size: 3.6em; font-weight: 700; }
.sl-berichten .b-wanneer { font-size: 2em; opacity: .6; margin-left: auto; white-space: nowrap; }
.sl-berichten .b-tekst { font-size: 2.8em; opacity: .85; margin-top: .35em; line-height: 1.35; }
.sl-berichten .leeg { font-size: 3.5em; font-style: italic; opacity: .6; margin-top: .85em; }

/* dashboard-slide (kerncijfers, aggregaten) */
.sl-dash { width: 100%; height: 100%; box-sizing: border-box;
  padding: 6em 10em; display: flex; flex-direction: column; }
.sl-dash h1 { font-family: "Space Grotesk", sans-serif; font-size: 5.5em;
  margin: 0 0 .73em; padding-bottom: .36em; border-bottom: .06em solid currentColor; opacity: .92; }
.sl-dash .tegels { flex: 1; display: grid; gap: 3em; align-content: center;
  grid-template-columns: repeat(auto-fit, minmax(38em, 1fr)); }
.sl-dash .tegel { background: rgba(0,0,0,.22); border: .1em solid rgba(255,255,255,.12);
  border-radius: 2em; padding: 3.4em 3em; text-align: center; backdrop-filter: blur(4px); }
.sl-dash .cijfer { font-family: "Space Grotesk", sans-serif; font-size: 10em;
  font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sl-dash .label { font-size: 2.6em; opacity: .75; margin-top: 1em; }

/* custom slide (slide-ontwerper): elementen op procentposities */
.sl-custom { position: absolute; inset: 0; }
.sl-custom .el { position: absolute; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; }
.sl-custom .el-tekst { white-space: pre-wrap; word-wrap: break-word; line-height: 1.25; }
.sl-custom .el img, .sl-custom .el video { width: 100%; height: 100%; }
.sl-custom .el .tijd { font-family: "Space Grotesk", sans-serif; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums; }
.sl-custom .el .datum { opacity: .85; text-transform: capitalize; }
.sl-custom .el svg { width: 100%; height: 100%; }
/* lijn-vorm: dun vlak, gecentreerd in het element (roteer voor diagonaal) */
.sl-custom .el .el-lijn { width: 100%; }
/* kerncijfer-widget: zelfde taal als de dashboard-tegels */
.sl-custom .el-cijfer { text-align: center; justify-content: center; }
.sl-custom .el-cijfer .cijfer { font-family: "Space Grotesk", sans-serif; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums; }
.sl-custom .el-cijfer .label { opacity: .75; margin-top: .4em; }
/* lopende tekst: naadloze lus zoals de kortnieuwsbalk */
.sl-custom .el-loop { position: relative; overflow: hidden; justify-content: center; }
.sl-custom .el-loop .lt-baan { position: absolute; display: flex; height: 100%;
  animation: cast-ticker-loop var(--loop-duur, 15s) linear infinite; }
.sl-custom .el-loop .lt-helft { display: flex; align-items: center; flex-shrink: 0;
  min-width: 100%; box-sizing: border-box; height: 100%;
  white-space: nowrap; padding-right: 2em; }

/* element-animaties (ontwerper: Animatie + Vertraging; speler start ze bij
   elke slide-wissel doordat de laag opnieuw wordt opgebouwd) */
.sl-custom .anim-vervagen { animation: cast-vervagen .9s ease-out both; }
.sl-custom .anim-links    { animation: cast-links   .9s ease-out both; }
.sl-custom .anim-rechts   { animation: cast-rechts  .9s ease-out both; }
.sl-custom .anim-onder    { animation: cast-onder   .9s ease-out both; }
.sl-custom .anim-groeien  { animation: cast-groeien .9s ease-out both; }
/* --rot = rotatiehoek van het element: de keyframes eindigen op de eigen
   rotatie, anders zou de animatie de transform-rotatie overschrijven */
@keyframes cast-vervagen { from { opacity: 0; } to { opacity: 1; } }
@keyframes cast-links  { from { opacity: 0; transform: translateX(-8em) rotate(var(--rot, 0deg)); } to { opacity: 1; transform: rotate(var(--rot, 0deg)); } }
@keyframes cast-rechts { from { opacity: 0; transform: translateX(8em) rotate(var(--rot, 0deg)); }  to { opacity: 1; transform: rotate(var(--rot, 0deg)); } }
@keyframes cast-onder  { from { opacity: 0; transform: translateY(8em) rotate(var(--rot, 0deg)); }  to { opacity: 1; transform: rotate(var(--rot, 0deg)); } }
@keyframes cast-groeien { from { opacity: 0; transform: scale(.7) rotate(var(--rot, 0deg)); } to { opacity: 1; transform: rotate(var(--rot, 0deg)); } }

/* kortnieuwsbalk (ticker) over de slides heen — alleen in de speler */
.cast-ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; background: rgba(10, 14, 28, .92);
  color: #fff; height: 6.4em; font-size: 1em; overflow: hidden;
  border-top: .12em solid rgba(255,255,255,.18); }
.cast-ticker .t-label { flex-shrink: 0; display: flex; align-items: center; height: 100%;
  padding: 0 2.4em; background: #dc2626; color: #fff;
  font-family: "Space Grotesk", sans-serif; font-size: 2.6em; font-weight: 700; }
.cast-ticker .t-band { flex: 1; overflow: hidden; position: relative; height: 100%; }
/* naadloze lus: twee identieke helften (elk minstens de bandbreedte), de
   baan schuift precies één helft op — de duur zet castrender per tekstlengte */
.cast-ticker .t-loop { position: absolute; height: 100%; display: flex;
  animation: cast-ticker-loop var(--ticker-duur, 30s) linear infinite; }
.cast-ticker .t-helft { display: flex; align-items: center; flex-shrink: 0;
  min-width: 100%; box-sizing: border-box; height: 100%;
  white-space: nowrap; font-size: 2.8em; }
.cast-ticker .t-helft b { font-weight: 700; margin-right: .5em; }
.cast-ticker .t-helft .t-item { margin-right: 4em; display: inline-flex; gap: .5em; }
@keyframes cast-ticker-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}