/* ==========================================================================
   Mental Health Day 2026 client pages.
   Client colours come from the brand config, partner colours from the partner
   config. Everything else is shared by every page.
   ========================================================================== */

:root {
  /* Brand palette: overwritten at runtime by the brand config */
  --brand:        #205527;
  --brand-mid:    #43744A;
  --brand-deep:   #133718;
  --brand-tint:         #E4F1CC;
  --brand-accent:          #D0021B;
  --ink:          #0B0B0B;
  --surface:         #F6F6F6;
  --line:    #E3E3E3;

  /* Partner palette: overwritten at runtime by the partner config */
  --partner:       #55008D;
  --partner-2:         #00C9B8;
  --partner-3:         #2E5EA2;
  --partner-accent:        #FE5E54;

  /* Terugvalkleuren. Dit waren kleurverlopen over de hele reeks: vier kleuren
     die in elkaar overliepen tot tinten die in geen enkel merk voorkomen. Een
     vlak draagt nu een kleur, en een rij vlakken wisselt ze af. */
  --partner-gradient:   #1694AB;
  --brand-ap-gradient:  #205527;
  --brand-gradient:     #205527;

  --radius-lg: 33px;
  --radius-md: 24px;
  --radius-sm: 14px;
  --pill: 45px;

  --container: 1280px;
  --nav-h: 76px;

  --text: #1A1A1A;
  --text-soft: #5A5F5B;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: "Red Hat Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.section { padding: 72px 0; scroll-margin-top: var(--nav-h); }
.section--tint { background: var(--surface); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Red Hat Display", sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-mid); margin-bottom: 14px;
}
.eyebrow--partner { color: var(--partner); }
.eyebrow::before {
  content: ""; width: 22px; height: 3px; border-radius: 3px; background: currentColor;
}

.section__head { max-width: 780px; margin-bottom: 34px; }
.section__head h2 { font-size: clamp(30px, 3.4vw, 44px); }
.section__head p { color: var(--text-soft); margin: 12px 0 0; font-size: 18px; }

/* --------------------------------------------------------------- top nav */
.topnav {
  position: sticky; top: 0; z-index: 60;
  background: var(--nav-bg, rgba(255,255,255,.94));
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topnav__inner {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 26px;
}
.topnav__brand { display: flex; align-items: center; gap: 18px; min-width: 0; }

/* The two logos are optically aligned, not box-aligned: the HEINEKEN mark
   carries its star above the wordmark, so centring the boxes drops the word
   "HEINEKEN" ~6px below "archipel". Both logos are nudged onto one baseline
   and sized so their letter heights match; the exact values come from the
   brand and partner configs. */
.topnav__logo { height: 30px; width: auto; transform: translateY(-3px); }
.topnav__logo--partner { height: 24px; transform: translateY(4px); }
.topnav__poweredby {
  font-size: 13px; color: var(--text-soft); white-space: nowrap;
  display: flex; align-items: center; gap: 12px;
  transform: translateY(3px);
}
.topnav__poweredby::before {
  content: ""; width: 1px; height: 18px; background: var(--line);
}
.topnav__nav { margin-left: auto; display: flex; align-items: center; gap: 30px; list-style: none; padding: 0; }
.topnav__nav a {
  text-decoration: none; font-weight: 500; font-size: 16px; color: var(--text);
  padding: 6px 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.topnav__nav a:hover, .topnav__nav a.is-active { color: var(--brand); border-bottom-color: var(--brand); }

.lang {
  display: inline-flex; border: 1px solid var(--line); border-radius: var(--pill); overflow: hidden;
}
.lang button {
  border: 0; background: transparent; cursor: pointer; padding: 6px 13px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--text-soft);
  display: inline-flex; align-items: center; gap: 7px;
}
.lang__flag {
  width: 19px; height: 13px; border-radius: 2px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.lang button.is-active .lang__flag { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.lang button.is-active { background: var(--brand); color: #fff; }

/* Past five languages the pills become a dropdown, listing each language in
   its own script so a reader can find their own without knowing English. */
.lang--menu { position: relative; align-items: center; padding: 0 12px 0 12px; gap: 8px; }
.lang--menu select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  padding: 7px 20px 7px 2px; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--text); cursor: pointer;
}
.lang--menu select:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.lang__globe { width: 15px; height: 15px; color: var(--text-soft); flex: none; }
.lang__chev { width: 12px; position: absolute; inset-inline-end: 12px; pointer-events: none; }

/* Arabic flips the page. Layout is flex and grid throughout, so only the few
   places with a hard-coded side need saying again. */
[dir="rtl"] .welcome__sig, [dir="rtl"] .tt-item__row { text-align: right; }
[dir="rtl"] .heropanel__date svg, [dir="rtl"] .subtitles-note svg { transform: scaleX(-1); }

.topnav__burger { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 8px; }
.topnav__burger span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; }
.topnav__burger span + span { margin-top: 5px; }

/* --------------------------------------------------------------- hero */
.hero { padding: 40px 0 8px; --hero-gap: 36px; --hero-box: 452px; }
/* one row, two identical boxes: same width, same height, same top and bottom */
.hero__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hero-gap); align-items: stretch;
  grid-auto-rows: minmax(var(--hero-box), auto);
}
.hero__title {
  font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 20px;
  /* held to the width of the card below it, so it still wraps as before */
  max-width: calc(50% - var(--hero-gap) / 2);
}
.hero__title span { color: var(--brand); }

/* side panel programme */
.sidepanel {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; background: #fff;
  display: flex; flex-direction: column; min-height: 0;
}
/* zero basis: the list stretches to the row but never sets its height */
.sidepanel__scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.sidepanel__scroll::-webkit-scrollbar { width: 8px; }
.sidepanel__scroll::-webkit-scrollbar-thumb { background: #d5ddd6; border-radius: 8px; }

.sp-item {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center;
  padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line);
}
.sp-item:last-child { border-bottom: 0; }
.sp-item--odd { background: var(--surface); }
.sp-item__thumb { width: 62px; height: 74px; object-fit: cover; }
.sp-item__time { font-size: 13px; font-weight: 700; color: var(--ink); font-family: "Red Hat Display", sans-serif; }
.sp-item__title { font-size: 15px; line-height: 1.35; margin-top: 2px; }
.sp-add {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--btn, var(--brand)); color: var(--btn-ink, #fff); display: grid; place-items: center;
  transition: transform .15s ease, background .15s ease;
}
.sp-add:hover { background: var(--partner); transform: scale(1.06); }

/* hero panel: partner gradient frame, client-led */
.heropanel {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--brand-hero); color: #fff; min-height: 0;
  /* copy and mosaic share the first row; the player bar spans the second */
  display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr auto;
}
/* top padding clears the live badge, which sits 16px down and is 30px tall */
.heropanel__copy { padding: 62px 34px 44px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.heropanel__star { width: 34px; height: 34px; }
.heropanel h2 { color: #fff; font-size: clamp(24px, 2.5vw, 33px); }
/* De opvallende kleur van het merk, naast de donkere waar het paneel op staat.
   Met een kleur alleen wordt de hele pagina blauw en verdwijnt het geel dat
   IKEA net zo goed voert. */
.heropanel h2 em { font-style: normal; color: var(--brand-op, var(--brand-tint)); }
.heropanel .livebadge__dot { background: var(--brand-op, currentColor); }
.eyebrow::before, .sec__eyebrow::before { background: var(--brand-op, var(--brand)); }
.card__art--brand2 { background: var(--brand-op); }
.card__art--brand3 { background: var(--brand-tweede); }
.heropanel p { margin: 0; font-size: 17px; color: rgba(255,255,255,.9); }
.heropanel__date {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 10px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  padding: 9px 18px; border-radius: var(--pill); font-weight: 700; font-size: 15px;
  font-family: "Red Hat Display", sans-serif; text-decoration: none; color: #fff;
  transition: background .18s ease;
}
.heropanel__date:hover { background: rgba(255,255,255,.26); }
/* De tegels rekten mee met de tekstkolom ernaast. Werd die kort, dan werden ze
   laag en breed, en snijdt object-fit:cover een horizontale band uit het midden
   van een portret. Bij een pasfoto is dat precies het voorhoofd: je zag twaalf
   haarlijnen in plaats van twaalf gezichten. Vierkante tegels lossen dat op, en
   de uitsnede ligt iets boven het midden, waar bij een portret het gezicht zit. */
.heropanel__mosaic {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px;
  align-content: start;
}
.heropanel__mosaic img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  object-position: 50% 30%; min-height: 0; display: block;
}

/* Vierkante tegels bovenaan uitgelijnd laten onder de laatste rij een stuk
   paneel leeg. Zet een merk zelf het aantal kolommen, dan zegt het daarmee dat
   het mozaiek het blok moet vullen: de rijen delen de hoogte en de tegel rekt
   mee. De uitsnede blijft cover, dus het gezicht blijft in beeld. */
.heropanel__mosaic--fill { align-content: stretch; grid-auto-rows: 1fr; }
.heropanel__mosaic--fill img { height: 100%; aspect-ratio: auto; }

/* strapline directly beneath the green hero panel */
.subtitles-note {
  margin: 16px 0 0;
  display: flex; align-items: center; gap: 10px;
  font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 16px;
  color: var(--brand);
}
.subtitles-note svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--partner); }

/* --------------------------------------------------------------- welcome */
.welcome { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.welcome__photo {
  border-radius: var(--radius-md); overflow: hidden; background: var(--brand-tint);
  aspect-ratio: 3/4; position: relative;
}
.welcome__photo img { width: 100%; height: 100%; object-fit: cover; }
.welcome__photo figcaption {
  position: absolute; inset: auto 0 0 0; padding: 14px 16px;
  /* A long title can run to four lines, so the scrim starts well above the
     text rather than fading out halfway through it. */
  padding-top: 44px;
  background: linear-gradient(to top, rgba(11,11,11,.88) 40%, rgba(11,11,11,.62) 72%, rgba(11,11,11,0));
  color: #fff; font-size: 13px; line-height: 1.35;
}
.welcome__body p { margin: 0 0 18px; font-size: 18px; }
.welcome__sig { margin-top: 26px; padding-top: 20px; border-top: 3px solid var(--brand-tint); }
.welcome__sig strong { font-family: "Red Hat Display", sans-serif; font-size: 19px; display: block; }
.welcome__sig span { color: var(--text-soft); font-size: 15px; }

/* --------------------------------------------------------------- link cards */
.cardgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.cardgrid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

.card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  border-radius: var(--radius-md); overflow: hidden; background: #fff;
  border: 1px solid var(--line);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(11,11,11,.5); border-color: transparent; }
.card__art {
  aspect-ratio: 43/20; position: relative; display: grid; place-items: center;
  /* the brand gradient is composed at runtime; the static one is the last resort */
  background: var(--brand-grad, var(--brand-gradient)); color: #fff; overflow: hidden;
}
/* One hue per card. Each accent gets a small tonal gradient of its own colour
   rather than a sweep across the whole palette, which reads as mud. */
.card__art--brand  { background: var(--brand-grad); color: var(--brand-ink, #fff); }
.card__art--brand2 { background: var(--brand-grad-2); color: var(--p4-ink, #fff); }
.card__art--brand3 { background: var(--brand-grad-3); color: var(--brand-ink, #fff); }
.card__art--p1 { color: var(--p1-ink, #fff); }
.card__art--p2 { color: var(--p2-ink, #fff); }
.card__art--p3 { color: var(--p3-ink, #fff); }
.card__art--p4 { color: var(--p4-ink, #fff); }
.card__art--p1    { background: var(--p1-grad); }
.card__art--p2    { background: var(--p2-grad); }
.card__art--p3    { background: var(--p3-grad); }
.card__art--p4    { background: var(--p4-grad); }
.card__art--partner { background: var(--p1-grad); }
.card__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.card__art--photo { background: var(--brand-deep); }
/* Een waas over de foto zodat de knop erop leesbaar blijft. Was een verloop
   over drie kleuren; nu een gelijkmatige waas in de merkkleur zelf. */
.card__art--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--brand-deep); opacity: .46;
}
.playbtn {
  position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--brand);
  display: grid; place-items: center; transition: transform .18s ease, background .18s ease, color .18s ease;
}
.playbtn svg { width: 24px; height: 24px; margin-left: 3px; opacity: 1; }
.card:hover .playbtn { transform: scale(1.1); background: var(--brand); color: #fff; }
.card__art svg { width: 54px; height: 54px; opacity: .95; }

/* Nugget banner: the speaker's face, the format on their shoulder, and the
   subject of the session beside them. */
.card__art--nugget { grid-auto-flow: column; gap: 22px; }
.nugget { position: relative; z-index: 2; display: block; line-height: 0; }
.card__art .nugget__face {
  position: static; width: 86px; height: 86px; border-radius: 50%;
  object-fit: cover; object-position: center 18%;
  border: 3px solid rgba(255,255,255,.85);
}
.nugget__fmt {
  position: absolute; inset-inline-end: -5px; bottom: -3px;
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: var(--ink); display: grid; place-items: center;
}
.card__art .nugget__fmt svg { width: 16px; height: 16px; }
.nugget__topic {
  position: relative; z-index: 2; width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.36);
  display: grid; place-items: center;
}
.card__art .nugget__topic svg { width: 30px; height: 30px; }
.card:hover .nugget__face { border-color: #fff; }
.card__art::after {
  content: ""; position: absolute; right: -34px; bottom: -46px;
  width: 130px; height: 130px; border-radius: 50%; border: 22px solid rgba(255,255,255,.10);
}
.card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.card__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-mid);
  font-family: "Red Hat Display", sans-serif;
}
.card__kicker--partner { color: var(--partner); }
.card__title { font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 18px; line-height: 1.25; }
.card__intro { font-size: 15px; color: var(--text-soft); margin: 0; flex: 1; }
.card__cta {
  margin-top: 6px; font-weight: 700; font-size: 15px; color: var(--brand);
  display: inline-flex; align-items: center; gap: 7px;
}
.card--partner .card__cta { color: var(--partner); }
.card__cta svg { width: 15px; height: 15px; transition: transform .18s ease; }
.card:hover .card__cta svg { transform: translateX(4px); }

/* partner gradient-framed band */
.gradframe {
  border-radius: var(--radius-lg); padding: 44px 40px; color: var(--band-ink, #fff);
  background: var(--p1-grad); position: relative; overflow: hidden;
}
.gradframe__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; justify-content: space-between; margin-bottom: 30px; }
.gradframe h2 { color: var(--band-ink, #fff); font-size: clamp(26px, 3vw, 38px); max-width: 640px; }
.gradframe p.lead { color: var(--band-ink, #fff); opacity: .82; margin: 12px 0 0; max-width: 620px; }
.gradframe .eyebrow { color: rgba(255,255,255,.85); }
.gradframe .card { background: rgba(255,255,255,.97); border-color: transparent; }
.gradframe__mark { height: 58px; width: auto; opacity: .95; filter: brightness(0) invert(1); }
/* a mark already drawn for a dark band keeps its own colours */
.gradframe__mark.is-plain { filter: none; opacity: 1; }

/* --------------------------------------------------------------- programme */
.timetable__top {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between;
  padding-bottom: 22px;
}
.tzpicker { display: flex; align-items: center; gap: 10px; }
.tzpicker label { font-size: 14px; color: var(--text-soft); white-space: nowrap; }
.tzpicker__field { position: relative; }
.tzpicker select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); border-radius: var(--pill);
  padding: 11px 44px 11px 20px; background: #fff; cursor: pointer; max-width: 300px;
  /* iOS zoomt de pagina in zodra je een veld aanraakt dat kleiner is dan 16px,
     en zoomt daarna niet vanzelf terug. Vandaar precies 16. */
  font-size: 16px;
}
.tzpicker select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.tzpicker__field svg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; width: 14px; }

.tt-item { border-top: 1px solid var(--line); transition: border-color .2s ease; }
.tt-item:last-child { border-bottom: 1px solid var(--line); }
.tt-item.is-open { border-top: 2px solid var(--brand); }
.tt-item__row {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 18px;
  padding: 16px 0; width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
}
.tt-item__row:hover .tt-item__title { color: var(--brand); }
.tt-chevron {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--brand);
  transition: transform .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.tt-item.is-open .tt-chevron { transform: rotate(180deg); background: var(--btn, var(--brand)); color: var(--btn-ink, #fff); border-color: var(--btn, var(--brand)); }
.tt-item__info { display: flex; align-items: center; gap: 16px; min-width: 0; }
.tt-item__avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: 0 0 58px; }
.tt-item__speaker { font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 16px; }
.tt-item__title { font-size: 15px; color: var(--text-soft); transition: color .2s ease; }
.tt-item__right { display: flex; align-items: center; gap: 18px; }
.tt-item__time { font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 15px; white-space: nowrap; }

.tt-panel { display: none; padding: 4px 0 34px 64px; }
.tt-item.is-open .tt-panel { display: block; animation: fadeIn .28s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tt-panel__grid { display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: start; }
.tt-panel h3 { font-size: 15px; color: var(--brand-mid); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 20px; }
.tt-panel h4 {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft);
  margin: 24px 0 6px;
}
.tt-panel h4:first-of-type { margin-top: 0; }
.tt-panel p { margin: 0 0 12px; white-space: pre-line; }
.tt-panel__title { font-size: clamp(21px, 2vw, 27px); margin-bottom: 22px; }
.tt-panel__photo { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/5; }
.tt-panel__photo img { width: 100%; height: 100%; object-fit: cover; }
.tt-panel__slot {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
.tt-panel__slot .tt-item__time { font-size: 17px; }

/* add to calendar */
.atc { position: relative; }
.atc__btn {
  display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer;
  background: var(--btn, var(--brand)); color: var(--btn-ink, #fff); padding: 11px 22px; border-radius: var(--pill);
  font-weight: 700; font-size: 15px; font-family: "Red Hat Display", sans-serif;
  transition: background .18s ease;
}
.atc__btn:hover { background: var(--partner); }
.atc__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 216px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 22px 44px -20px rgba(11,11,11,.4); padding: 6px; display: none;
}
.atc.is-open .atc__menu { display: block; }
.atc__menu button {
  display: flex; width: 100%; align-items: center; gap: 10px; background: none; border: 0;
  padding: 11px 14px; border-radius: 10px; cursor: pointer; text-align: left; font-size: 15px;
}
.atc__menu button:hover { background: var(--brand-tint); }

/* --------------------------------------------------------------- library */
.libcat + .libcat { margin-top: 48px; }
.libcat__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.libcat__head h3 { font-size: 24px; }
.libcat__head .pillcount {
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--pill);
  background: var(--brand-tint); color: var(--brand);
}
.libcat__head .rule { flex: 1; height: 1px; background: var(--line); }

.badge {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  background: rgba(255,255,255,.92); color: var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--pill);
}

/* --------------------------------------------------------------- footer */
.footer { background: var(--ink); color: #fff; padding: 66px 0 34px; }
.footer h2 { color: #fff; font-size: 30px; }
.footer__grid { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.footer__powered { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 18px; }
.footer__logo { height: 46px; filter: brightness(0) invert(1); }
.footer p { color: rgba(255,255,255,.75); }
.footer__buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; border-radius: var(--pill);
  font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 15px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; transition: .18s ease;
}
.btn--primary { background: var(--partner-accent); border-color: var(--partner-accent); color: var(--partner-ink, #fff); }
.btn--primary:hover { background: transparent; color: var(--partner-accent); }
.btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--green { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--green:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.footer__meta {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.15);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 13px; color: rgba(255,255,255,.5);
}

/* --------------------------------------------------------------- modal */
.modal {
  position: fixed; inset: 0; z-index: 100; background: rgba(11,11,11,.82);
  display: none; place-items: center; padding: 24px;
}
.modal.is-open { display: grid; }
.modal__box { width: min(960px, 100%); }
.modal__frame { position: relative; padding-top: 56.25%; border-radius: var(--radius-md); overflow: hidden; background: #000; }
.modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal__close {
  margin: 0 0 12px auto; display: block; background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 15px; font-weight: 700;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .hero__title { max-width: none; }
  .sidepanel { height: var(--hero-box); }
  .heropanel { min-height: var(--hero-box); grid-template-columns: 1fr; }
  /* Op een telefoon heeft het paneel geen vaste hoogte om te verdelen, dus
     daar zijn de tegels weer vierkant. */
  .heropanel__mosaic { grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; }
  .heropanel__mosaic--fill { align-content: start; }
  .heropanel__mosaic--fill img { height: auto; aspect-ratio: 1; }
  .cardgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tt-panel__grid { grid-template-columns: 1fr; }
  .tt-panel__photo { max-width: 260px; }
}

@media (max-width: 860px) {
  .topnav__nav { display: none; }
  .topnav__nav.is-open {
    display: flex; position: absolute; left: 0; right: 0; top: var(--nav-h);
    background: #fff; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 18px 28px 24px; border-bottom: 1px solid var(--line);
  }
  .topnav__burger { display: block; }
  .topnav__poweredby span { display: none; }
  .welcome { grid-template-columns: 1fr; }
  .welcome__photo { max-width: 260px; }
  .footer__grid { grid-template-columns: 1fr; }
  .section { padding: 54px 0; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { padding: 0 18px; }
  .cardgrid { grid-template-columns: 1fr; }
  .gradframe { padding: 30px 22px; }
  .tt-item__row { grid-template-columns: 34px 1fr; gap: 12px; }
  .tt-item__right { grid-column: 2; justify-content: flex-start; padding-bottom: 4px; }
  .tt-item__avatar { width: 46px; height: 46px; flex-basis: 46px; }
  .tt-panel { padding-left: 0; }
  .tt-chevron { width: 34px; height: 34px; }
  .timetable__top { align-items: flex-start; }
  .tzpicker { flex-wrap: wrap; }
}

/* --------------------------------------------------------------- shapes
   Partners can ask for their own thumbnail silhouette. HR.com builds its
   whole identity on hexagons, so on those pages every thumbnail becomes one. */
:root { --thumb-shape: none; }
/* HR.com's hexagons have soft corners, so we mask with a rounded hexagon
   rather than a hard-cornered polygon. The rounding comes from stroking the
   hexagon path with a round line join. */
:root {
  --hex-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 212' preserveAspectRatio='none'%3E%3Cpath d='M100 26L174 68L174 144L100 186L26 144L26 68Z' fill='%23000' stroke='%23000' stroke-width='52' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.shape-hex .card__art,
.shape-hex .heropanel__mosaic img,
.shape-hex .sp-item__thumb,
.shape-hex .tt-item__avatar,
.shape-hex .tt-panel__photo,
.shape-hex .welcome__photo {
  -webkit-mask-image: var(--hex-mask); mask-image: var(--hex-mask);
  -webkit-mask-size: 100% 100%;      mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;    mask-repeat: no-repeat;
  clip-path: none;
  border-radius: 0;
}
.shape-hex .card__art { aspect-ratio: 1 / 1.06; }
.shape-hex .card__art::after { display: none; }
.shape-hex .card__art svg { width: 44px; height: 44px; }
.shape-hex .card { border: 0; background: transparent; }
.shape-hex .card:hover { box-shadow: none; transform: translateY(-5px); }
.shape-hex .card__body { padding: 16px 6px 18px; }
/* cards sit directly on the partner band, so their text goes white there */
.shape-hex .gradframe .card { color: #fff; }
.shape-hex .gradframe .card__intro { color: rgba(255,255,255,.82); }
.shape-hex .gradframe .card__kicker { color: rgba(255,255,255,.7); }
.shape-hex .gradframe .card__cta { color: #fff; }
.shape-hex .heropanel__mosaic { gap: 6px; padding: 10px; }
.shape-hex .welcome__photo { aspect-ratio: 1 / 1.12; }
.shape-hex .welcome__photo figcaption { display: none; }
.shape-hex .tt-panel__photo { aspect-ratio: 1 / 1.06; }
.shape-hex .badge { left: 50%; transform: translateX(-50%); top: 22px; }

/* --------------------------------------------------------- standalone mode
   No partner, so the footer belongs to the event itself. */
.is-standalone .footer__grid { grid-template-columns: 1fr; }
.is-standalone .footer__powered { display: none; }
.is-standalone .footer__logo { display: none; }

/* week and category chips, used by year-long programmes */
.tt-item__week {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--pill);
  background: var(--brand-tint); color: var(--brand); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; vertical-align: 2px;
}
.tt-item__cat {
  display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); vertical-align: 2px;
}
@media (max-width: 640px) { .tt-item__cat { display: none; } }


/* ==========================================================================
   Demo notes. A template page carries no real client, so the slots that
   would hold a logo, a photo or a welcome letter say what they are, and the
   features worth knowing about explain themselves on hover or focus.
   ========================================================================== */
.demo-slot, .demo-feat { position: relative; }
.demo-slot { outline: 2px dashed var(--note-bg, var(--partner-accent)); outline-offset: 8px; border-radius: 4px; }

.demo-tag {
  position: absolute; z-index: 30; top: -13px; inset-inline-end: -6px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--note-bg, var(--partner-accent)); color: var(--note-ink, #fff);
  font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--pill); cursor: help;
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
.demo-tag::before {
  content: "i"; display: grid; place-items: center; width: 14px; height: 14px;
  border-radius: 50%; background: var(--note-ink, #fff); color: var(--note-bg, var(--partner-accent));
  font-size: 10px; font-style: italic; letter-spacing: 0;
}
.demo-tag__note {
  position: absolute; top: calc(100% + 9px); inset-inline-end: 0; width: 262px;
  background: #313141; color: #fff; text-transform: none; letter-spacing: 0;
  font-weight: 500; font-size: 13px; line-height: 1.45; padding: 12px 14px;
  border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.24);
  /* the accent edge keeps the bubble legible on the dark band too */
  border: 1.5px solid var(--note-bg, var(--partner-accent));
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.demo-tag:hover .demo-tag__note,
.demo-tag:focus .demo-tag__note,
.demo-tag:focus-within .demo-tag__note { opacity: 1; visibility: visible; transform: translateY(0); }
.demo-tag:focus-visible { outline: 2px solid #313141; outline-offset: 2px; }

/* the nav sits above everything, so its note has to open downwards clear of it */
.topnav .demo-tag { top: 50%; transform: translateY(-50%); inset-inline-end: auto; inset-inline-start: calc(100% + 14px); }
.topnav .demo-tag__note { inset-inline-end: auto; inset-inline-start: 0; }

/* These three clip their overflow, so their note sits inside the box rather
   than overhanging the corner where it would be cut in half. */
.heropanel .demo-tag, .welcome__photo .demo-tag, .gradframe .demo-tag {
  top: 14px; inset-inline-end: 14px; transform: none;
}
.heropanel .demo-tag__note, .welcome__photo .demo-tag__note, .gradframe .demo-tag__note { width: 234px; }

/* the subtitle line is a short sentence, so its note sits right after it
   rather than drifting to the far edge of the column */
.subtitles-note .demo-tag { position: relative; top: auto; inset-inline-end: auto; margin-inline-start: 4px; }
/* a note that would otherwise land under its neighbour takes the other corner */
.demo-tag--start { inset-inline-end: auto; inset-inline-start: -6px; }
.demo-tag--start .demo-tag__note { inset-inline-end: auto; inset-inline-start: 0; }

@media (max-width: 860px) {
  .demo-tag__note { width: 210px; }
  .topnav .demo-tag { display: none; }
  /* on a narrow screen the corner of a block is a face or a card, so the
     note lifts clear into the gap under the section heading */
  [data-grid] .demo-tag, [data-recordings] .demo-tag,
  [data-library] .demo-tag, [data-timetable] .demo-tag,
  [data-brand-links] .demo-tag { top: -34px; }
}

/* Embedded scheduler */
.booking {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; background: #fff;
}
.booking iframe { width: 100%; min-height: 740px; border: 0; display: block; }
@media (max-width: 700px) { .booking iframe { min-height: 940px; } }

/* ==========================================================================
   Player frame around the hero panel. Decoration: it says "this is live
   video" at a glance. The controls take no clicks, so nothing invites a
   press that would go nowhere. A page with a trailer gets a working button.
   ========================================================================== */
.playerbar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
  padding: 7px 14px; background: #0B0B0B; color: rgba(255,255,255,.92);
  pointer-events: none; user-select: none;
}
.playerbar__btns { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.playerbar svg { width: 17px; height: 17px; display: block; }
.playerbar__track {
  flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden;
}
.playerbar__fill { display: block; height: 100%; width: 22%; background: #E01B24; }

.heropanel__expand {
  position: absolute; top: 16px; inset-inline-end: 16px; z-index: 3;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 9px; cursor: default;
  background: rgba(11,11,11,.42); color: #fff;
  transition: background .18s ease;
}
.heropanel__expand svg { width: 16px; height: 16px; }
/* only a page that supplies a trailer gets a button that does something */
.heropanel__expand:not(.is-live) { pointer-events: none; }
.heropanel__expand.is-live { cursor: pointer; }
.heropanel__expand.is-live:hover { background: rgba(11,11,11,.72); }

@media (max-width: 700px) {
  .playerbar { gap: 10px; padding: 6px 11px; }
  .playerbar svg { width: 15px; height: 15px; }
}

/* ==========================================================================
   The rest of the year. A wall of faces the reader can scan in one look,
   with the detail arriving under the cursor instead of under a scrollbar.
   ========================================================================== */
.wkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.wk {
  position: relative; aspect-ratio: 1; display: block; overflow: hidden;
  border: 0; padding: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--brand-deep); color: #fff; text-align: start;
  font-family: inherit; transition: transform .18s ease, box-shadow .18s ease;
}
.wk:hover, .wk:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.2); }
.wk:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }
.wk__face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

.wk__base {
  position: absolute; inset: auto 0 0 0; padding: 11px 12px; display: grid; gap: 2px;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 58%, rgba(0,0,0,0) 100%);
}
.wk__no { font-size: 10px; font-weight: 700; letter-spacing: .11em; color: var(--brand-accent); }
.wk__name { font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.wk__title {
  font-size: 11.5px; line-height: 1.3; color: rgba(255,255,255,.84);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.wk__hover {
  position: absolute; inset: 0; padding: 13px 14px; display: flex; flex-direction: column; gap: 7px;
  background: var(--wk-hover-bg, var(--brand));
  opacity: 0; transition: opacity .18s ease;
}
.wk:hover .wk__hover, .wk:focus-visible .wk__hover { opacity: 1; }
.wk__when { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.wk__cat {
  justify-self: start; align-self: flex-start; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--brand-accent);
}
.wk__desc {
  font-size: 11.5px; line-height: 1.38; color: rgba(255,255,255,.9); flex: 1; overflow: hidden;
  /* the tile decides how much fits, so the text fades out instead of being
     chopped mid-word at whatever height the grid happens to give it */
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
}
.wk__more { font-size: 11.5px; font-weight: 700; color: var(--brand-accent); }

/* a session opened from a tile */
.modal--info .modal__frame { display: none; }
.modal__body:empty { display: none; }
.modal__body {
  background: #fff; border-radius: var(--radius-md); padding: 34px 36px;
  max-height: 78vh; overflow-y: auto;
}
.sesh { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
.sesh h3 { font-size: 15px; color: var(--text-soft); font-weight: 500; margin-bottom: 4px; }
.sesh h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-mid); margin: 24px 0 8px; }
.sesh p { margin: 0; color: var(--text-soft); }
.sesh__photo img { width: 100%; border-radius: var(--radius-sm); }

@media (max-width: 760px) {
  .wkgrid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
  .sesh { grid-template-columns: 1fr; }
  .sesh__photo { order: -1; max-width: 200px; }
  .modal__body { padding: 24px 22px; }
}

/* The live badge. White on any brand panel, because the panel colour is the
   one thing that changes from client to client. */
.livebadge {
  position: absolute; top: 16px; inset-inline-start: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ink); border-radius: var(--pill);
  padding: 6px 13px; font-family: "Red Hat Display", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.livebadge__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #E01B24;
  animation: livepulse 1.8s ease-in-out infinite;
}
@keyframes livepulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) { .livebadge__dot { animation: none; } }

/* the badge's own note sits beside it, where nothing else is */
.livebadge .demo-tag {
  top: 50%; transform: translateY(-50%);
  inset-inline-start: calc(100% + 8px); inset-inline-end: auto;
}
.livebadge .demo-tag__note { inset-inline-start: 0; inset-inline-end: auto; width: 250px; }

/* ==========================================================================
   Brand look and feel beyond one colour: the signature rule, a button that
   runs across the two brand colours, and both languages side by side.
   ========================================================================== */
.has-rule .topnav { border-bottom: 0; }
.has-rule .topnav::after {
  content: ""; display: block; height: 3px; background: var(--brand-rule);
}
.has-rule .footer__meta { border-top: 0; position: relative; }
.has-rule .footer__meta::before {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--brand-rule);
}
.has-duo .btn--primary {
  background: var(--brand-accent-grad); border-color: transparent; color: #fff;
}
.has-duo .btn--primary:hover { background: transparent; border-color: var(--brand-accent); color: var(--brand-accent); }
.has-duo .heropanel__date { background: rgba(255,255,255,.16); }

/* Everything else that was a flat field of the first colour takes the sweep
   between the two instead: the calendar buttons, the row toggles, the chips. */
.has-duo .atc__btn,
.has-duo .sp-add,
.has-duo .demo-tag,
.has-duo .badge--live,
.has-duo .wk__more { background-image: var(--brand-accent-grad); }
.has-duo .atc__btn:hover { background-image: none; background-color: var(--brand-deep); }
.has-duo .tt-item.is-open .tt-chevron { background-image: var(--brand-accent-grad); }

/* Both languages at once: the second sits under the first, quieter, with
   enough air that the two read as two texts rather than one long one. */
.alt {
  display: block; margin-top: 9px; font-weight: 400;
  opacity: .58; font-size: .88em; line-height: 1.45;
}
h1 .alt, h2 .alt, .card__title .alt, .tt-item__title .alt, .wk__title .alt, .sp-item__title .alt {
  font-family: "Red Hat Text", sans-serif; letter-spacing: 0;
}
h1 .alt, h2 .alt { margin-top: 12px; }
.card__title .alt, .tt-item__title .alt, .sp-item__title .alt { margin-top: 7px; }
.card__intro .alt, .section__head p .alt, .welcome__body .alt { margin-top: 14px; }
/* short pairs need less: they are read as a single glance */
.tt-item__time .alt, .wk__when .alt, .sp-item__time .alt, .eyebrow .alt,
.card__kicker .alt, .badge .alt, .pillcount .alt { margin-top: 4px; opacity: .5; }
.bi { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.bi__col p:last-child { margin-bottom: 0; }
.bi__col[lang="en"] { color: var(--text-soft); }
.bi__col[lang="en"] p { color: inherit; }
@media (max-width: 820px) { .bi { grid-template-columns: 1fr; gap: 8px; } }

/* A nav is a row, so its second language runs alongside rather than under. */
.topnav__nav .alt, .card__cta .alt, .atc__btn .alt, .wk__more .alt {
  display: inline; font-size: .92em;
}
.topnav__nav .alt::before, .card__cta .alt::before,
.atc__btn .alt::before, .wk__more .alt::before { content: " / "; }

/* A short programme: the list ends where it ends instead of stretching to
   match a panel that is taller than it. */
.is-short .hero__grid { grid-auto-rows: auto; align-items: start; }
/* zero basis collapses a column that is no longer being stretched, so a short
   list takes the height of its own rows instead */
.is-short .sidepanel__scroll { flex: 0 0 auto; overflow: visible; }

/* A coloured navigation bar: the border would cut across it, and the links
   need to read against the colour rather than against white. */
.has-navcolor .topnav { border-bottom: 0; }
.has-navcolor .topnav__nav a { color: var(--ink); }
.has-navcolor .topnav__nav a:hover,
.has-navcolor .topnav__nav a.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.has-navcolor .lang { border-color: rgba(0,0,0,.18); }
.has-navcolor .topnav__poweredby::before { background: rgba(0,0,0,.2); }

/* A flat brand keeps its tile hover flat too. */
.has-flat { --wk-hover-bg: var(--brand); }

/* A dark brand bar: its own links, burger and language pills go light. */
.nav-dark .topnav__nav a { color: rgba(255,255,255,.86); }
.nav-dark .topnav__nav a:hover, .nav-dark .topnav__nav a.is-active {
  color: #fff; border-bottom-color: #fff;
}
.nav-dark .topnav__burger span { background: #fff; }
.nav-dark .topnav__poweredby { color: rgba(255,255,255,.7); }
.nav-dark .topnav__poweredby::before { background: rgba(255,255,255,.28); }
.nav-dark .lang { border-color: rgba(255,255,255,.3); }
.nav-dark .lang button { color: rgba(255,255,255,.8); }
.nav-dark .lang--menu select { color: #fff; }
.nav-dark .lang__globe, .nav-dark .lang__chev { color: rgba(255,255,255,.75); }

/* De regel onder de speler op de voorbeeldpagina. Zonder uitleg lijkt een
   video die na een minuut stopt kapot. */
.modal__demo {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
  max-width: 52ch;
}

/* Een opname die er nog niet is: dezelfde kaart, maar grijs en zonder knop.
   Zo zie je voor het event al wat deze sectie straks laat zien. */
.card--straks { cursor: default; }
.card--straks:hover { transform: none; box-shadow: none; }
.card--straks .card__art img { filter: grayscale(1); opacity: .55; }
.card--straks .card__art::before { opacity: .3; }
.card__soon {
  display: inline-block; margin-top: 4px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: rgba(11, 11, 11, .5);
}

/* De trailer in het venster bovenin. Zonder film staat daar de mozaiek van
   portretten in een smalle kolom naast de tekst. Met film ligt het paneel
   anders, want de opname is een breed studioshot: twee presentatoren naast
   elkaar en de balk met de naam van de dag rechtsonder. In een staande kolom
   van driehonderd bij achthonderdvijftig werd dat een postzegel bovenin met
   een halve meter leegte eronder.

   Dus draait het paneel een kwartslag. De tekst ligt bovenin in twee kolommen,
   de kop links en de toelichting met de knop rechts, en de film ligt daar op
   volle breedte onder, direct boven de spelerbalk. Het beeld wordt daarmee
   twee keer zo breed en de tekst leest nog steeds in een oogopslag. */
.heropanel--film { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; }
.heropanel--film .heropanel__copy {
  display: grid; align-content: center;
  grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto;
  column-gap: 34px; row-gap: 14px; padding: 62px 34px 30px;
}
/* De vijf onderdelen van het blok staan hier met de hand verdeeld. Laat je ze
   vanzelf vallen, dan komt de alinea onder de kop in plaats van ernaast. */
.heropanel--film .heropanel__copy > .heropanel__star { grid-area: 1 / 1; }
.heropanel--film .heropanel__copy > .eyebrow { grid-area: 2 / 1; }
.heropanel--film .heropanel__copy > h2 { grid-area: 3 / 1; align-self: start; }
.heropanel--film .heropanel__copy > p { grid-area: 1 / 2 / 4 / 3; align-self: start; }
.heropanel--film .heropanel__copy > .heropanel__date { grid-area: 4 / 2; align-self: start; }

/* Geen bijsnede: de verhouding is die van het bestand zelf, dus staat de hele
   opname erin en blijven beide presentatoren en de balk in beeld. De vaste
   verhouding hieronder is er voor het moment voordat de video zijn eigen maten
   doorgeeft, zodat de pagina niet verspringt. */
.heropanel__mosaic--film {
  display: block; padding: 0; gap: 0; overflow: hidden; position: relative;
}
.heropanel__mosaic--film video {
  width: 100%; height: auto; aspect-ratio: 848 / 480;
  display: block; background: #0b0b0b;
}

/* Op een smal scherm past er geen tweede kolom naast, dus valt alles terug op
   de gewone volgorde onder elkaar. */
@media (max-width: 900px) {
  .heropanel--film .heropanel__copy { grid-template-columns: 1fr; }
  .heropanel--film .heropanel__copy > .heropanel__star,
  .heropanel--film .heropanel__copy > .eyebrow,
  .heropanel--film .heropanel__copy > h2,
  .heropanel--film .heropanel__copy > p,
  .heropanel--film .heropanel__copy > .heropanel__date { grid-area: auto; }
}

/* De plek waar de naam van het bedrijf komt, zolang er nog geen merk is
   opgehaald. Grijs en met een stippellijn eronder, zodat je ziet dat het een
   plek is en niet een woord dat er hoort te staan. */
.brand-gleuf {
  color: rgba(11, 11, 11, .38); font-weight: inherit;
  border-bottom: 2px dashed rgba(11, 11, 11, .22);
  padding-bottom: .04em;
}
.heropanel .brand-gleuf, [class*="--dark"] .brand-gleuf {
  color: rgba(255, 255, 255, .5);
  border-bottom-color: rgba(255, 255, 255, .3);
}

/* In het venster op een eventpagina houdt de voorbeeldpagina op na de
   bibliotheek: de afsluiting en de voettekst eronder maken onduidelijk waar de
   demo eindigt en onze eigen pagina begint. */
.is-ingebed #booking,
.is-ingebed .footer { display: none; }
/* In het venster is de pagina zo hoog als zijn eigen inhoud, dus scrollt hij
   zelf niet. Een plakkende kopbalk blijft dan hangen aan de bovenkant van de
   pagina en komt boven onze eigen adresbalk uit te staan. Binnen het venster
   loopt hij daarom gewoon mee met de inhoud; het plakken doet de balk van het
   venster eromheen. */
.is-ingebed .topnav { position: static; }

/* In het venster staat de pagina smaller, met een strook vrij aan de
   rechterkant. Daar komen de i'tjes te staan: per sectie een uitleg van wat je
   niet meteen ziet. Ze stonden eerder over de pagina heen en dekten dan af waar
   ze juist naar wijzen. */
/* De uitleg staat naast het venster, niet in de pagina: daar dekte hij af waar
   hij juist naar wijst. De aantekeningen blijven wel in de pagina staan, want
   het vak ernaast leest ze daaruit; ze zijn alleen niet meer te zien. */
.is-ingebed .demo-tag { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.is-ingebed .demo-slot { outline: none; }

/* ==========================================================================
   A page on a dark ground

   Most clients run their event pages white. A few run them black: VEON's own
   group events are the example, and their programme page has to look like a
   continuation of those rather than a new supplier. The neutral tokens flip
   once here, and the handful of surfaces that hardcode white flip with them.
   Off unless the brand config says dark: true.
   ========================================================================== */
/* The neutral tokens themselves flip in mhd.js, next to the rest of the
   palette: they are written straight onto the root element there, so they land
   in the same place as the brand colours instead of racing them. */
html.is-dark body { background: #0B0B0B; }

/* every panel that was a white card is now a card lifted off the ground */
html.is-dark .sidepanel,
html.is-dark .card,
html.is-dark .gradframe .card,
html.is-dark .tzpicker select,
html.is-dark .atc__menu,
html.is-dark .booking,
html.is-dark .modal__body,
html.is-dark .topnav__nav.is-open { background: #151515; }
html.is-dark .sp-item--odd { background: #1E1E1E; }
html.is-dark .footer { background: #000; }

/* Chips that sit on top of a photo keep their white ground, so their own ink
   must stay dark even though the page ink went light. */
html.is-dark .livebadge,
html.is-dark .badge,
html.is-dark .nugget__fmt,
html.is-dark .modal__close,
html.is-dark .btn--ghost:hover { color: #111; }

/* a card whose recording has not happened yet: grey on white was almost
   invisible once the card itself went dark */
html.is-dark .card__soon { color: #8A8A8A; }
html.is-dark .card:hover { box-shadow: 0 24px 44px -26px rgba(0,0,0,.9); }

/* Anything that carried the brand colour as text was drawn for a white page:
   on black the same colour disappears. The engine already works out which of
   the brand's own colours is the standout one, so that carries them here. */
html.is-dark .subtitles-note,
html.is-dark .subtitles-note svg,
html.is-dark .card__kicker,
html.is-dark .hero__title span,
html.is-dark .eyebrow,
html.is-dark .eyebrow--partner,
html.is-dark .playbtn { color: var(--brand-op, var(--brand-accent)); }
/* the eyebrow inside the partner band still sits on a coloured panel */
html.is-dark .gradframe .eyebrow { color: rgba(255,255,255,.85); }
html.is-dark .libcat__head .pillcount {
  background: rgba(255,255,255,.07); color: var(--brand-op, var(--brand-accent));
}
/* a native select paints its own black text, whatever the page says */
html.is-dark .tzpicker select { color: var(--text); }

@media (max-width: 640px) {
  /* On a phone the hero panel is narrow enough that the live chip and the
     explanation chip land on the same line and cover each other. The
     explanation steps down below it. */
  .heropanel__copy > .demo-tag { top: 34px; }
}

/* ==========================================================================
   Afvinken dat je een sessie gezien hebt

   Een programma dat verplicht is heeft geen aanwezigheidslijst nodig maar een
   bevestiging: ik heb dit gezien en begrepen. De knop staat onder de kaart in
   plaats van erin, want bij een opname is de kaart zelf een link.
   Uit tenzij het product attest: true zegt.
   ========================================================================== */
.rec { display: flex; flex-direction: column; gap: 10px; }
.rec > .card { flex: 1; }
.attest {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 16px; border-radius: var(--pill); cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text);
  font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 14px;
  text-align: start; transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.attest:hover:not([disabled]) { border-color: var(--btn, var(--brand)); }
.attest[disabled] { opacity: .4; cursor: default; }
.attest__box {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--line); display: grid; place-items: center;
  transition: inherit;
}
.attest__box svg { width: 14px; height: 14px; opacity: 0; transition: opacity .14s ease; }
.attest.is-on { border-color: var(--btn, var(--brand)); color: var(--btn, var(--brand)); }
.attest.is-on .attest__box {
  background: var(--btn, var(--brand)); border-color: var(--btn, var(--brand));
  color: var(--btn-ink, #fff);
}
.attest.is-on .attest__box svg { opacity: 1; }

/* de stand van de lezer zelf, boven het raster */
.attest-progress { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; }
.attest-progress__bar {
  flex: 0 1 220px; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden;
}
.attest-progress__bar > span {
  display: block; height: 100%; background: var(--btn, var(--brand));
  transition: width .3s ease;
}
.attest-progress__text {
  font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 14px;
  color: var(--text-soft);
}
.attest-progress.is-done .attest-progress__text { color: var(--btn, var(--brand)); }

/* --------------------------------------- bevestigen met een mailadres
   Aftekenen vraagt om een adres, en daarna staat de mail die eruit gaat in
   beeld. Dat is dezelfde modal als een sessie, dus alleen de inhoud is nieuw. */
.confirm { max-width: 640px; }
.confirm__title { font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 12px; }
.confirm__lead { color: var(--text-soft); margin: 0 0 22px; }
.confirm__label {
  display: block; font-family: "Red Hat Display", sans-serif; font-weight: 700;
  font-size: 14px; margin-bottom: 8px;
}
.confirm__row { display: flex; flex-wrap: wrap; gap: 10px; }
.confirm__input {
  flex: 1 1 260px; min-width: 0; font: inherit; font-size: 16px;
  padding: 12px 18px; border-radius: var(--pill);
  border: 1px solid var(--line); background: #fff; color: var(--text);
}
.confirm__input:focus-visible { outline: 2px solid var(--btn, var(--brand)); outline-offset: 2px; }
.confirm__error { color: #C62828; font-size: 14px; margin: 10px 0 0; }
.confirm--done .btn { margin-top: 22px; }

/* de mail zelf, als een envelop op de pagina */
.mailcard {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; background: #fff;
}
.mailcard__head {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.mailcard__head span {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-soft); font-family: "Red Hat Display", sans-serif;
}
.mailcard__head strong { font-family: "Red Hat Display", sans-serif; font-size: 16px; }
.mailcard__body { padding: 22px 24px 26px; font-size: 15px; line-height: 1.65; }
.mailcard__body h3 { font-size: 19px; margin: 0 0 10px; }
.mailcard__body h4 {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--btn, var(--brand)); margin: 22px 0 8px;
}
.mailcard__body p { margin: 0 0 12px; }
.mailcard__tips { margin: 0; padding-inline-start: 22px; }
.mailcard__tips li { margin-bottom: 8px; }

/* --------------------------------- de oproep over het uitzendscherm
   Vijf seconden na het laden schuift de vraag om af te tekenen over het
   paneel, zoals een poll halverwege een webinar. Hij dekt het paneel af en
   niets anders, zodat de rest van de pagina gewoon leesbaar blijft. */
.liveattest {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; padding: 24px;
  background: rgba(8, 12, 20, .72);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
}
.liveattest.is-on { opacity: 1; visibility: visible; }
.liveattest__card {
  background: #fff; color: var(--text); border-radius: var(--radius-md);
  padding: 30px 32px 26px; max-width: 420px; text-align: center;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.6);
  transform: translateY(14px) scale(.96);
  transition: transform .35s cubic-bezier(.2,.9,.3,1);
}
.liveattest.is-on .liveattest__card { transform: none; }
.liveattest__dot {
  display: block; width: 12px; height: 12px; border-radius: 50%; margin: 0 auto 14px;
  background: #E01B24; box-shadow: 0 0 0 0 rgba(224,27,36,.5);
  animation: liveattestPuls 1.8s ease-out infinite;
}
@keyframes liveattestPuls {
  70% { box-shadow: 0 0 0 14px rgba(224,27,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,27,36,0); }
}
.liveattest__card h3 { font-size: clamp(20px, 2.2vw, 26px); margin: 0 0 6px; }
.liveattest__sess {
  font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 15px;
  color: var(--btn, var(--brand)); margin: 0 0 12px;
}
.liveattest__body { color: var(--text-soft); font-size: 15px; margin: 0 0 20px; }
.liveattest__card .btn { width: 100%; justify-content: center; gap: 10px; }
.liveattest__card .attest__box { border-color: currentColor; }
.liveattest__later {
  display: block; margin: 14px auto 0; border: 0; background: none; cursor: pointer;
  font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 14px;
  color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .liveattest, .liveattest__card { transition: none; }
  .liveattest__dot { animation: none; }
}
.confirm__sendfail { color: #C62828; font-size: 14px; margin: 16px 0 0; }