:root{
  --pad: 1.2rem;
  --stroke: 8px;

  --hdrLogoH: 80px;
  --hdrRightFs: 1.1rem;

  --labelFs: 2.1rem;
  --titleFs: 11rem;
  --titleLh: 0.92;
  --bodyFs: 2.2rem;
  --bodyLh: 1.3;

  --coverMaxH: 500px;
  --coverMaxW: 92%;

  --qrSize: 360px;          /* 1/3 van 1080px slidebreedte */
  --qrTextFs: 2.2rem;
  --qrTextLh: 1.3;
  --titleFont: Arial, Helvetica, sans-serif;
  --bodyFont:  Arial, Helvetica, sans-serif;
}

/* Reset */
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; margin:0; overflow:hidden; }
body{ background:#000; }

/* ===== STAGE (1080×1920) centered + scaled via JS ===== */
.slide-container{
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1080px;
  height: 1920px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  transform-origin: center center;
}

.slide-wrapper{
  position: absolute;
  left: 0;
  top: 0;
  width: 1080px;
}

/* Slides blijven exact 1080×1920 */
.slide{
  width: 1080px;
  height: 1920px;
  padding: var(--pad);
  overflow: hidden;
}

/* Themes */
.bg-black{ color:#fff; background:#000; }
.bg-white{ color:#000; background:#fff; }

/* ===== TITLE SLIDES (lottie of titel) ===== */
.title-slide{
  display:flex;
  align-items:center;
  justify-content:center;
}
.title-slide h1{
  font-size: 10rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  text-align:center;
}
.bg-black.title-slide h1{ font-family:'Archief White', Arial, Helvetica, sans-serif; }
.bg-white.title-slide h1{ font-family:'Archief Black', Arial, Helvetica, sans-serif; }

/* ===== PROGRAM SLIDE ===== */
.program-slide{
  display:flex;
  flex-direction:column;
  gap: calc(var(--pad) * 0.5);
  padding-bottom: 0;   /* footer border zit op absolute bottom van de slide */
}

/* Header */
.program-slide header{
  flex: none;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding-bottom: calc(var(--pad) * 0.5);
  border-bottom: var(--stroke) solid currentColor;
}

/* Header SVG links (IN/UIT HET ARCHIEF) */
.program-slide header img{
  height: var(--hdrLogoH);
  width: auto;
  max-width: 72%;
  object-fit: contain;
  display:block;
}

/* Header tekst rechts */
.program-slide header p{
  font: 400 var(--hdrRightFs)/1.2 var(--bodyFont);
  text-align:right;
  max-width: 240px;
}

/* Cover */
.program-slide .cover{
  flex: none;
  display:block;
  max-width: var(--coverMaxW);
  max-height: var(--coverMaxH);
  overflow:hidden;
}
.program-slide .cover img{
  width: 100%;
  height: auto;
  max-height: var(--coverMaxH);
  object-fit: contain;
  object-position: top left;
  display:block;
}

/* Main: neemt alle resterende ruimte, clipped nooit de footer eraf */
.program-slide main{
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(var(--pad) * 0.15);
}

/* label boven titel */
.program-slide main > p:first-child{
  flex: none;
  font-size: var(--labelFs);
  line-height: 1.2;
  font-family: var(--bodyFont);
  font-weight: 400;
}

/* grote titel */
.program-slide h1{
  flex: none;
  font-size: var(--titleFs);
  line-height: var(--titleLh);
  font-family: var(--titleFont);
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

/* body tekst: vult resterende ruimte, tekst wordt via JS geschaald als nodig */
.program-slide .clamp-text{
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.program-slide .clamp-text p{
  font-size: var(--bodyFs);
  line-height: var(--bodyLh);
  font-family: var(--bodyFont);
  font-weight: 400;
}
/* zachte fade als tekst toch wordt afgekapt */
.program-slide .clamp-text::after{
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--bodyFs) * 1.5);
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
}
.bg-black .clamp-text::after,
.bg-black.program-slide .clamp-text::after{
  background: linear-gradient(transparent, #000);
}

/* ===== FOOTER + QR: altijd onderaan, lijn op absolute bodem ===== */
.program-slide footer{
  flex: none;
  display:flex;
  flex-direction:column;
  gap: calc(var(--pad) * 0.5);
  padding-bottom: calc(var(--pad) * 1.2);
  border-bottom: var(--stroke) solid currentColor;
}

/* "Meer lezen?" */
.program-slide footer > p:first-child{
  font-size: calc(var(--bodyFs) * 0.9);
  line-height: 1.2;
  font-family: var(--bodyFont);
}

/* QR + tekst naast elkaar */
.program-slide footer .qr-box{
  display:flex;
  align-items:center;
  gap: calc(var(--pad) * 1.2);
}

/* QR blok: 1/3 van slidebreedte */
.program-slide footer .qr-box .qr-code{
  width: var(--qrSize);
  height: var(--qrSize);
  flex: none;
}
.program-slide footer .qr-box .qr-code img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

/* Op zwarte slides: QR inverteren (wit op zwart, geen wit kader, wel scanbaar) */
.bg-black .qr-code img{
  filter: invert(1);
}

/* tekst naast QR: niet raar afbreken per letter */
.program-slide footer .qr-box p{
  flex: 1;
  margin: 0;
  font-size: var(--qrTextFs);
  line-height: var(--qrTextLh);
  font-family: var(--bodyFont);
  font-weight: 400;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Fonts per thema */
.bg-black.program-slide h2{ font-family:'Archief White', Arial, Helvetica, sans-serif; }
.bg-white.program-slide h2{ font-family:'Archief Black', Arial, Helvetica, sans-serif; }