:root {
  --pad: 1rem;
  --stroke: 10px;
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: gray; }

/* ===== SLIDE BASICS (1080×1920 canvas) ===== */
.slide-container { height: 1920px; overflow: hidden; position: relative; }
.slide-wrapper { position: absolute; width: 100%; }
.slide {
  width: 1080px;
  height: 1920px;
  padding: var(--pad);
  overflow: hidden;
}

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

h1, h2 { text-align: left; line-height: 1; }

/* ===== TITLE SLIDE ===== */
.title-slide h1 {
  font-size: 10rem;
  font-weight: 500;               /* iets vetter */
  text-transform: uppercase;
}
.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) / 2);
}

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

/*
.program-slide header img {
  height: 80px;                   /* smaller header-beeldmerk */
/*  width: auto;
}
*/


.program-slide header img {
  flex: 0 0 auto;
  max-width: 75%;  /* bijvoorbeeld max 1/3 van de headerbreedte */
  height: auto;
  object-fit: contain;
}

.program-slide header p {
  font: 400 .95rem/1.1 Arial, Helvetica, sans-serif;
}

/* Main */
.program-slide h1 {
  font-size: 9rem;
  line-height: .95;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;               /* iets vetter */
  padding-bottom: calc(var(--pad) / 2);
}
.program-slide p {
  font-size: 1.9rem;
  line-height: 1.25;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.program-slide main { flex-grow: 1; }

.program-slide .clamp-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(1.9rem * 1.25 * 3); /* in sync met p */
}

/* Cover beeld wat kleiner */
.program-slide .cover {
  display: block;
  max-width: 85%;
  max-height: 320px;
  overflow: hidden;
  position: relative;
}
.program-slide .cover img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  object-position: top left;
  display: block;
}

/* ===== FOOTER + QR ===== */
.program-slide footer {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pad) / 2);
  padding-bottom: calc(var(--pad) * 0.75);   /* iets meer lucht onder */
  border-bottom: var(--stroke) solid currentColor;
}

/* QR + label/tekst naast elkaar */
.program-slide footer .qr-box {
  display: flex;                   /* simpeler dan grid; geen overlap */
  align-items: center;
  gap: calc(var(--pad) * 1.2);
  margin-top: calc(var(--pad) / 3);/* QR iets hoger in de footer */
}

.program-slide footer .qr-box .qr-code {
  flex: none;
  width: 160px;                    /* compacter */
  height: 160px;
}

.program-slide footer .qr-box p {
  flex: 1;                         /* neem resterende breedte */
  margin: 0;
  font-size: 2rem;
  line-height: 1.3;
  overflow-wrap: break-word;
  white-space: normal;             /* breek altijd, nooit over QR heen */
}

/* Font-families op sectie-titels 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; }}

/* --- hard fixes --- */

/* --- header SVG fix --- */
.program-slide header img[src*="skar-uit-het-archief"] {
  height: 50px !important;   /* verlaag naar 40px of 45px indien nodig */
  width: auto !important;
  max-width: none !important;
  display: block;
  margin: 0 auto;            /* centreert horizontaal */
  object-fit: contain;
}

/* --- header SVG fix --- */
.program-slide header img[src*="skar-in-het-archief"] {
  height: 50px !important;   /* verlaag naar 40px of 45px indien nodig */
  width: auto !important;
  max-width: none !important;
  display: block;
  margin: 0 auto;            /* centreert horizontaal */
  object-fit: contain;
}

/* QR-box: vaste maat voor container én het plaatje */
.program-slide footer .qr-box .qr-code{
  width: 180px !important;   /* pas aan naar smaak */
  height: 180px !important;
  flex: none;
}
.program-slide footer .qr-box .qr-code img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* tekst mag nooit over QR vallen */
.program-slide footer .qr-box{
  align-items: center;
  gap: 1.25rem;
}
.program-slide footer .qr-box p{
  flex: 1;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}