/* ==========================================================================
   Tuur — themalaag boven wsc-core.
   Laadvolgorde ligt vast in elements/head.php: eerst wsc/core (de tokens en
   basisklassen die alle wsc_*-blokken gebruiken), dan dit bestand dat diezelfde
   tokens herdefinieert. Eén palet, de hele componentenset kleurt mee.
   Ontwerp: "DJ Tuur Homepage.dc.html".
   ========================================================================== */

:root {
  /* --- Tuur-palet ------------------------------------------------------- */
  --tuur-green:      #1e4736;  /* paginagrond */
  --tuur-green-deep: #163a2b;  /* The Sessions-band, footer */
  --tuur-green-dark: #16261d;  /* onderrand hero */
  --tuur-green-mid:  #1a4130;
  --tuur-ink:        #f0f4f1;  /* tekst op groen */
  --tuur-ink-2:      rgba(240, 244, 241, .78);
  --tuur-ink-3:      rgba(240, 244, 241, .58);
  --tuur-mint:       #9ecdb2;  /* labels, focusring */
  --tuur-line:       rgba(240, 244, 241, .28);
  --tuur-line-2:     rgba(240, 244, 241, .45);
  --tuur-veil:       rgba(255, 255, 255, .05);
  --tuur-veil-2:     rgba(255, 255, 255, .14);

  /* --- wsc-tokens herdefinieerd ----------------------------------------- */
  /* De blokken kleuren hierdoor mee zonder dat er één blok is aangepast.
     De accent is bewust de lichte inkt: op een donkergroene grond is licht-op-
     donker de knop die eruit springt, niet nóg een kleur. */
  --wsc-bg:        var(--tuur-green);
  --wsc-surface:   var(--tuur-green-deep);
  --wsc-ink:       var(--tuur-ink);
  --wsc-ink-2:     var(--tuur-ink-2);
  --wsc-ink-3:     var(--tuur-ink-3);
  --wsc-line:      var(--tuur-line);
  --wsc-line-2:    var(--tuur-line-2);
  /* Bewust NIET gekoppeld aan de accentkleur uit Huisstijl. Op deze donkere
     grond is de accentrol "lichte inkt": een kleur die de klant daar kiest
     levert al snel een knop op die niet leesbaar is. De Huisstijl-kleur blijft
     wel gelden voor de meldingsmails, waar hij op wit staat. */
  --wsc-accent:      #f0f4f1;
  --wsc-accent-2:    #9ecdb2;
  --wsc-accent-h:    #ffffff;
  --wsc-accent-bg:   rgba(255, 255, 255, .08);
  --wsc-accent-line: rgba(240, 244, 241, .45);
  --wsc-accent-soft: #9ecdb2;
  --wsc-footer-bg:   var(--tuur-green-deep);
  --wsc-footer-2:    var(--tuur-green-dark);
  --wsc-footer-ink:  var(--tuur-ink-2);
  --wsc-footer-ink-3: var(--tuur-ink-3);

  --wsc-font-head: 'Archivo', system-ui, sans-serif;
  --wsc-font-body: 'Archivo', system-ui, sans-serif;
  --wsc-font-mono: 'Archivo', ui-monospace, monospace;

  --wsc-maxw: 1100px;
  /* Nul radius: het ontwerp heeft nergens een ronde hoek behalve de afspeelknop. */
  --wsc-radius: 0px;
  --wsc-radius-lg: 0px;
  --wsc-gutter: clamp(18px, 4vw, 40px);
  --wsc-section-y: clamp(56px, 8vw, 104px);
  --wsc-shadow: none;
  --wsc-shadow-sm: none;

  /* Hoogte van de vaste header — de hero rekent hiermee, en jump-links
     compenseren hem via scroll-margin-top. */
  --tuur-header-h: 62px;
}

/* ---------- Basis ------------------------------------------------------- */
/* De site heeft één verschijningsvorm en die is donker. Zonder deze regel
   tekent de browser zijn eigen onderdelen in de stand van het toestel: op een
   telefoon in lichte modus werd de keuzelijst van "Type of booking" wit met
   witte tekst, en in donkere modus gebeurde hetzelfde andersom. */
:root { color-scheme: dark; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { background: var(--tuur-green); }

.tuur-theme {
  background: var(--tuur-green);
  color: var(--tuur-ink);
  font-family: var(--wsc-font-body);
  -webkit-text-size-adjust: 100%;
}
.tuur-theme a { color: var(--tuur-ink); }
.tuur-theme a:hover { color: #fff; }
.tuur-theme :focus-visible { outline: 2px solid var(--tuur-mint); outline-offset: 2px; }
.tuur-theme ::selection { background: var(--tuur-mint); color: var(--tuur-green-deep); }

/* Twee banden achter elkaar met dezelfde grond.
   Elke band heeft boven én onder een sectiemarge. Staan er twee met dezelfde
   achtergrond op elkaar, dan tellen die bij elkaar op: op /dj-shows werd dat
   ruim tweehonderd pixels leegte tussen twee alinea's die bij elkaar horen.
   Je ziet geen scheiding, alleen een gat. Eén marge is genoeg; die van de band
   erboven. */
.tuur-theme .wsc-band--light + .wsc-band--light > .wsc-section,
.tuur-theme .wsc-band--white + .wsc-band--white > .wsc-section,
.tuur-theme .wsc-band--dark + .wsc-band--dark > .wsc-section { padding-top: 0; }

/* En de marge die overblijft mag korter. Bij een kleurwissel markeert die volle
   sectiemarge een echte overgang, maar tussen twee banden van dezelfde kleur is
   het één onderwerp dat doorloopt: op /dj-shows staat er letterlijk "de lijst
   hieronder" en dan hoort die lijst er ook vlak onder te staan.
   Kent de browser :has() niet, dan blijft de hele marge staan en is er niets
   kapot; alleen iets ruimer. */
.tuur-theme .wsc-band--light:has(+ .wsc-band--light) > .wsc-section,
.tuur-theme .wsc-band--white:has(+ .wsc-band--white) > .wsc-section,
.tuur-theme .wsc-band--dark:has(+ .wsc-band--dark) > .wsc-section {
  padding-bottom: calc(var(--wsc-section-y) * .55);
}

/* De wsc-banden krijgen de groenen; "white" is hier de diepere groentint,
   zodat een sectie die in de editor op "wit" staat toch klopt. */
.tuur-theme .wsc-band--white { background: var(--tuur-green-deep); }
.tuur-theme .wsc-band--light { background: var(--tuur-green); }
.tuur-theme .wsc-band--dark { background: var(--tuur-green-dark); color: var(--tuur-ink); }

.tuur-theme h1,
.tuur-theme h2,
.tuur-theme h3,
.tuur-theme h4 { color: var(--tuur-ink); }
.tuur-theme .wsc-eyebrow { color: var(--tuur-mint); letter-spacing: .12em; }
.tuur-theme .wsc-lead,
.tuur-theme p { color: var(--tuur-ink-2); }
.tuur-theme .wsc-card,
.tuur-theme .wsc-chip { background: var(--tuur-veil); border-color: var(--tuur-line); color: var(--tuur-ink); }

/* Knoppen: licht vlak op groen (primair) of alleen een rand (ghost). */
.tuur-theme .wsc-btn--primary { background: var(--tuur-ink); color: var(--tuur-green-deep); border-color: var(--tuur-ink); }
.tuur-theme .wsc-btn--primary:hover { background: #fff; color: var(--tuur-green-deep); }
.tuur-theme .wsc-btn--ghost,
.tuur-theme .wsc-btn--dark { background: transparent; color: var(--tuur-ink); border: 1px solid var(--tuur-line-2); }
.tuur-theme .wsc-btn--ghost:hover,
.tuur-theme .wsc-btn--dark:hover { background: var(--tuur-veil-2); color: #fff; }

/* Alle jump-doelen vrijhouden van de vaste header. */
.tuur-theme [id] { scroll-margin-top: calc(var(--tuur-header-h) + 12px); }
.ccm-toolbar-visible .tuur-theme [id] { scroll-margin-top: calc(var(--tuur-header-h) + 60px); }

/* Alleen voor schermlezers: de naam onder het logo, het land achter de vlag. */
.wsc-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Header ------------------------------------------------------ */
.tuur-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 48, 36, .92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(240, 244, 241, .22);
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
}
/* Ingelogd staat de Concrete-werkbalk als fixed balk van 48px op top:0, met
   z-index 1000. Die dekt de vastgezette header precies af, waardoor het lijkt
   alsof sticky niet werkt. Alleen voor de ingelogde beheerder schuiven we hem
   eronder; een bezoeker ziet hier niets van. */
.ccm-toolbar-visible .tuur-header { top: 48px; }

/* Zodra de balk over de inhoud ligt: iets steviger en compacter, zodat je ziet
   dat hij meekomt in plaats van dat hij toevallig bovenaan staat. */
.tuur-header.is-vast {
  background: rgba(16, 40, 30, .97);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}
.tuur-header.is-vast .tuur-header__inner { padding-top: 4px; padding-bottom: 4px; }
.tuur-header.is-vast .tuur-header__brand img { height: 28px; }
@media (prefers-reduced-motion: reduce) { .tuur-header { transition: none; } }
.tuur-header__inner {
  max-width: var(--wsc-maxw); margin-inline: auto;
  padding: 8px var(--wsc-gutter);
  display: flex; align-items: center; gap: 18px;
}
.tuur-header__brand { display: block; flex-shrink: 0; line-height: 0; }
.tuur-header__brand img { width: auto; height: 34px; display: block; }

.tuur-nav { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.tuur-theme .tuur-nav a {
  display: inline-block; padding: 8px 2px;
  font-size: 15px; text-decoration: none; color: var(--tuur-ink);
}
.tuur-theme .tuur-nav a:hover,
.tuur-theme .tuur-nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.tuur-header__actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }

/* Socials in de balk: klein, gedempt, en pas oplichtend bij hover — ze mogen de
   boekingsknop niet beconcurreren. */
.tuur-header__socials .tuur-socials { gap: 12px; }
.tuur-theme .tuur-header__socials a { color: var(--tuur-ink-2); display: inline-flex; }
.tuur-theme .tuur-header__socials a:hover { color: #fff; }
.tuur-header__socials svg { width: 17px; height: 17px; }
.tuur-header__socials--mobiel { display: none; }
/* Onder deze breedte wordt de balk te vol; dan blijven alleen logo en knop. */
@media (max-width: 1080px) and (min-width: 901px) {
  .tuur-header__actions .tuur-header__socials { display: none; }
  /* Zonder socials scheidt de haarlijn niets meer. */
  .tuur-theme .tuur-header__wa { border-left: 0; padding-left: 0; margin-left: 0; }
}
/* De boekingsknop staat twee keer in de markup: rechts in de balk op desktop,
   en onderin het uitklapmenu op mobiel. Steeds één ervan is zichtbaar. */
.tuur-header__nav .tuur-header__cta { display: none; }
.tuur-theme .tuur-header__cta {
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding: 10px 18px; background: var(--tuur-ink); color: var(--tuur-green-deep);
}
.tuur-theme .tuur-header__cta:hover { background: #fff; color: var(--tuur-green-deep); }

/* WhatsApp in de balk: alleen het pictogram, zonder kader. Een tweede knop
   naast Book Tuur zou de hoofdactie halveren; de groene kleur maakt hem ook
   zonder kader meteen vindbaar. De haarlijn ervoor scheidt hem van de socials,
   want dit is een actie en geen profiel. */
.tuur-theme .tuur-header__wa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; margin-left: -4px;
  padding-left: 12px; border-left: 1px solid var(--tuur-line);
  box-sizing: content-box;
}
.tuur-header__wa .tuur-wa__icon { width: 20px; height: 20px; opacity: .92; transition: opacity .18s ease; }
.tuur-theme .tuur-header__wa:hover .tuur-wa__icon { opacity: 1; color: #25d366; }

/* In het uitklapmenu wél met tekst, onder de boekingsknop. */
.tuur-header__nav .tuur-header__cta--wa { display: none; }

.tuur-burger {
  display: none; width: 44px; height: 44px; margin-left: auto;
  background: none; border: 1px solid var(--tuur-line); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.tuur-burger span { display: block; width: 18px; height: 2px; background: var(--tuur-ink); transition: transform .2s ease, opacity .2s ease; }
.tuur-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tuur-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tuur-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
.tuur-burger { display: flex; }
.tuur-header__actions { display: none; }
.tuur-header__nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--tuur-green-deep); border-bottom: 1px solid var(--tuur-line);
    padding: 10px var(--wsc-gutter) 18px;
  }
.tuur-header__nav.is-open { display: block; }
.tuur-header__nav .tuur-nav { flex-direction: column; align-items: stretch; gap: 0; }
/* display:block, want de basisregel zet de link op inline-block en dan loopt
   de scheidingslijn maar tot het einde van het woord. Dat leest als een foutje
   in plaats van als een lijst. */
.tuur-header__nav .tuur-nav a {
  display: block; padding: 13px 0; border-bottom: 1px solid var(--tuur-line); min-height: 44px;
}
.tuur-header__nav .tuur-nav li:last-child a { border-bottom: 0; }
.tuur-header__nav .tuur-header__cta { display: inline-block; margin-top: 16px; }
.tuur-header__nav .tuur-header__cta--wa { display: inline-flex; }
}

/* Terug naar boven. Verschijnt pas als er iets te scrollen valt, en blijft
   linksonder uit de weg van de ticketknoppen aan de rechterkant. */
.tuur-theme .tuur-totop {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 46px; height: 46px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  /* In het palet van de site: de diepe groentint met een dunne lichte rand en
     een mintgroene pijl — geen witte vlek die los van het ontwerp staat. */
  background: rgba(22, 58, 43, .92);
  color: var(--tuur-mint);
  border: 1px solid var(--tuur-line-2);
  border-radius: 50%; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.tuur-theme .tuur-totop.is-zichtbaar { opacity: 1; transform: none; }
.tuur-theme .tuur-totop:hover {
  background: var(--tuur-mint); color: var(--tuur-green-deep); border-color: var(--tuur-mint);
}
.tuur-theme .tuur-totop:focus-visible { outline: 2px solid var(--tuur-mint); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .tuur-theme .tuur-totop { transition: none; transform: none; }
}

/* ---------- Hero -------------------------------------------------------- */
/* Paginavullende foto, het logo eroverheen en de agenda in een donker vlak
   onderin. De hero-area is één sectie; het agendablok schuift erin. */
.tuur-hero {
  position: relative; overflow: hidden;
  min-height: calc(100svh - var(--tuur-header-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 6vw, 64px) var(--wsc-gutter);
}
.tuur-hero__media { position: absolute; inset: 0; z-index: 0; }
.tuur-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* De video vult de hele hero in plaats van de vaste verhouding die het blok
   meegeeft voor zijn standaardweergave.

   En hij krijgt zijn eigen bijsnede. De 50% 18% hierboven hoort bij een staande
   foto: die duwt het beeld omhoog zodat het gezicht boven de agenda uitkomt.
   Deze video is liggend gefilmd met het onderwerp in het midden, dus dezelfde
   verschuiving snijdt precies het gezicht eruit. Midden is hier goed. */
.tuur-hero__media .wsc-herovideo { position: absolute; inset: 0; aspect-ratio: auto; }
.tuur-hero__media .wsc-herovideo__poster,
.tuur-hero__media .wsc-herovideo__video { object-position: 50% 50%; }
.tuur-hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(12,28,18,.35) 0%, rgba(12,28,18,.12) 35%, rgba(12,28,18,.55) 100%);
}
.tuur-hero__foot {
  position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(22,38,29,0) 0%, rgba(22,38,29,.75) 55%, var(--tuur-green-dark) 100%);
}
.tuur-hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--wsc-maxw); margin-inline: auto; padding-bottom: 72px; }
.tuur-hero__logo { margin: 0 auto clamp(16px, 3vw, 28px); text-align: center; }
.tuur-hero__mark {
  display: block; margin-inline: auto;
  width: clamp(120px, 14vw, 190px);
  aspect-ratio: 900 / 862;
  background: url("../images/logo-tuur-wit.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .5));
}
/* De naam staat er wel, maar het logo laat hem al zien. */
.tuur-hero__naam {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Overgangsband tussen hero en de eerste sectie. */
.tuur-seam { height: 120px; background: linear-gradient(180deg, var(--tuur-green-dark) 0%, var(--tuur-green-mid) 60%, var(--tuur-green-deep) 100%); }

/* ---------- Agenda ------------------------------------------------------ */
/* Rijenlijst per maand: datum, event, stad, vlag, ticketstatus. Het geheel
   staat in een donker vlak zodat het over de herofoto leesbaar blijft. */
.tuur-agenda { background: rgba(10, 24, 16, .66); padding: clamp(18px, 3vw, 24px) clamp(14px, 2.5vw, 20px); }
.tuur-theme .tuur-agenda__month {
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75);
  margin: 0 0 8px; padding: 0 8px;
}
/* De sjablonen schrijven `tuur-agenda__groep`; deze regel stond op `__group`
   en deed daardoor niets, waardoor een nieuwe maand tegen de vorige rij aan
   plakte in plaats van er los van te staan. */
.tuur-agenda__groep + .tuur-agenda__groep { margin-top: 22px; }

/* De agendapagina van de module gebruikt zijn eigen klassen (wsc-gigrij,
   wsc-agenda__maand). Die krijgen hier dezelfde vormgeving als de rijen op de
   homepage, zodat er één ontwerp is en niet twee die uit elkaar groeien. De
   opbouw van de rij is in beide gevallen gelijk: datum, titel, plaats, vlag en
   de ticketkolom. */
.tuur-theme .wsc-agenda__maand {
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .75);
  margin: 0 0 8px; padding: 0 8px;
}
.tuur-theme .wsc-agenda__groep + .wsc-agenda__groep { margin-top: 22px; }
.tuur-theme .wsc-gigrij { color: #fff; }
.tuur-theme .wsc-gigrij__actie { justify-self: end; }
/* De laatste kolom heeft een vaste maat. Op auto werd hij per rij anders, want
   elke rij is zijn eigen raster: een rij zonder ticketknop kreeg daar nul
   breedte en dan schoven de vlag en de plaats naar rechts op. */
.tuur-gig,
.tuur-theme .wsc-gigrij {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 170px 34px 88px;
  align-items: center; gap: 14px;
  padding: 12px 8px; border-bottom: 1px solid rgba(255,255,255,.32);
  color: #fff; transition: background .15s ease;
}
.tuur-gig:hover,
.tuur-theme .wsc-gigrij:hover { background: rgba(255,255,255,.14); }
.tuur-theme .tuur-gig__date,
.tuur-theme .wsc-gigrij__datum { font-family: var(--wsc-font-head); font-weight: 700; font-size: 14px; }
.tuur-theme .tuur-gig__event,
.tuur-theme .wsc-gigrij__titel {
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 14px;
  letter-spacing: .06em; text-transform: uppercase; text-wrap: pretty;
  text-decoration: none; color: #fff; display: flex; align-items: center; min-height: 44px;
}
.tuur-theme .tuur-gig__city,
.tuur-theme .wsc-gigrij__plaats { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.tuur-gig__flag,
.tuur-theme .wsc-gigrij__vlag { font-size: 20px; line-height: 1; }
/* De labels eindigen op dezelfde rand, ook als er geen label is. */
.tuur-theme .tuur-gig > .tuur-tix,
.tuur-gig > span:last-child { justify-self: end; }
.tuur-theme .tuur-tix,
.tuur-theme .wsc-gigrij__tix {
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
  text-decoration: underline; text-underline-offset: 4px;
  white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px;
}
.tuur-theme .tuur-tix:hover,
.tuur-theme .wsc-gigrij__tix:hover { color: #fff; text-decoration-thickness: 3px; }
.tuur-theme .tuur-tix--off,
.tuur-theme .wsc-gigrij__tix--uit { text-decoration: none; color: rgba(255,255,255,.72); }
.tuur-agenda__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 22px; }
.tuur-agenda__empty { text-align: center; padding: clamp(24px, 5vw, 40px) 18px; border: 1px solid rgba(255,255,255,.4); color: #fff; }
.tuur-theme .tuur-agenda__empty p { color: rgba(255,255,255,.85); }

/* ---------- Secties ----------------------------------------------------- */
.tuur-section { padding-block: var(--wsc-section-y); padding-inline: var(--wsc-gutter); }
.tuur-section--deep { background: var(--tuur-green-deep); }
.tuur-section__inner { max-width: var(--wsc-maxw); margin-inline: auto; }
.tuur-theme .tuur-label {
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tuur-mint); margin: 0 0 8px;
}
.tuur-theme .tuur-title {
  font-family: var(--wsc-font-head); font-weight: 700;
  font-size: clamp(30px, 5vw, 56px); line-height: 1; text-wrap: balance;
  margin: 0 0 clamp(20px, 3vw, 32px);
}

/* Secties komen bij het scrollen zachtjes in. Zonder JS (of met
   prefers-reduced-motion) staan ze gewoon zichtbaar — nooit onzichtbare inhoud. */
.tuur-fade { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.tuur-fade.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tuur-fade { opacity: 1; transform: none; transition: none; } }

/* ---------- Music / gallery raster -------------------------------------- */
.tuur-grid { display: grid; gap: clamp(16px, 2.5vw, 24px); }
.tuur-grid--art { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-items: start; }
/* Het aantal per rij komt uit het blok; auto-fit met een minimum houdt het
   heel op smalle schermen, zodat er geen kolommen van 80 px overblijven. */
.tuur-grid--photos {
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, calc(100% / var(--tuur-foto-kolommen, 4) - 14px), 100%), 1fr));
  gap: 14px;
}
.tuur-grid--video { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tuur-thumb {
  display: block; width: 100%; overflow: hidden;
  background: var(--tuur-veil); border: 0; padding: 0; cursor: pointer;
  position: relative;
  /* De verhouding komt uit het blok; vierkant blijft de norm. */
  aspect-ratio: var(--tuur-foto-verhouding, 1);
}
.tuur-thumb img,
.tuur-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.tuur-thumb:hover img,
.tuur-thumb:hover video { transform: scale(1.04); }
.tuur-thumb:focus-visible { outline: 2px solid var(--tuur-mint); outline-offset: 3px; }
.tuur-thumb-fig { margin: 0; min-width: 0; }
.tuur-theme .tuur-thumb__bijschrift { font-size: 13px; color: var(--tuur-ink-3); margin: 7px 0 0; }

/* Een video in de galerij: zonder driehoek is een stilstaand frame niet van een
   foto te onderscheiden. */
.tuur-thumb__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--tuur-green-deep);
  padding-left: 3px; pointer-events: none;
  transition: transform .2s ease, background .2s ease;
}
.tuur-thumb:hover .tuur-thumb__play { background: #fff; transform: translate(-50%, -50%) scale(1.07); }

/* "Zoals de foto zelf": metselwerk in kolommen, staand en liggend door elkaar
   zonder dat er iets wordt afgesneden. */
.tuur-grid--photos-vrij {
  display: block;
  column-count: var(--tuur-foto-kolommen, 3);
  column-gap: 14px;
}
.tuur-grid--photos-vrij .tuur-thumb-fig { break-inside: avoid; margin-bottom: 14px; }
.tuur-grid--photos-vrij .tuur-thumb { aspect-ratio: auto; }
.tuur-grid--photos-vrij .tuur-thumb img,
.tuur-grid--photos-vrij .tuur-thumb video { height: auto; }

@media (prefers-reduced-motion: reduce) {
  .tuur-thumb img, .tuur-thumb video { transition: none; }
  .tuur-thumb:hover img, .tuur-thumb:hover video { transform: none; }
}

/* Geen ronde hoeken — het ontwerp heeft er nergens een, behalve de ronde
   afspeelknop. wsc-core zet op een paar plekken een vaste radius (knoppen,
   chips, iconenknop) die niet uit de tokens komt; die halen we hier weg in
   plaats van de gedeelde module aan te passen. */
.tuur-theme .wsc-btn,
.tuur-theme .wsc-chip,
.tuur-theme .wsc-card,
.tuur-theme .wsc-tag,
.tuur-theme .tuur-tag { border-radius: 0; }

/* Paginakop zonder beeld (sjabloon tuur_kop). Smaller dan een sectie eronder,
   met een hairline die de kop van de inhoud scheidt. */
.tuur-section--kop { padding-block: clamp(40px, 7vw, 88px) clamp(28px, 4vw, 44px); }
.tuur-kop { border-bottom: 1px solid var(--tuur-line); padding-bottom: clamp(22px, 3vw, 32px); }
.tuur-theme .tuur-kop h1 { margin-bottom: 0; }
.tuur-theme .tuur-kop__intro { font-size: 18px; line-height: 1.55; max-width: 60ch; margin: 16px 0 0; }
.tuur-kop .wsc-btn-row { margin-top: 22px; }

/* ---------- Sectie-onderdelen ------------------------------------------- */
.tuur-section--tight { padding-block: clamp(28px, 4vw, 48px); }
.tuur-theme .tuur-title--sm { font-size: clamp(28px, 4vw, 44px); }
.tuur-theme .tuur-subtitle {
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 16px;
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 16px; color: var(--tuur-ink);
}
/* Volgt de kop op iets anders, zoals de speler, dan hoort er lucht boven.
   Tegen het beeld aan leest hij als bijschrift bij die foto in plaats van als
   kop boven de lijst eronder. Waar de kop bovenaan een blok staat verandert er
   niets. */
.tuur-theme .tuur-subtitle:not(:first-child) { margin-top: clamp(24px, 3.4vw, 34px); }
.tuur-theme .tuur-tag {
  display: inline-block; margin-bottom: 8px;
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; background: var(--tuur-veil-2); color: var(--tuur-ink); white-space: nowrap;
}

/* The Sessions: tekst links, foto rechts. */
.tuur-sessions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.tuur-sessions--alleen-tekst { grid-template-columns: 1fr; max-width: 760px; }
.tuur-sessions__logo { margin-bottom: clamp(18px, 3vw, 28px); }
/* Het woordmerk staat in de plaats van een kop, dus hoort het ook op de maat
   van een kop te staan. Op 420 px was het bijna twee keer zo hoog als de
   koppen van de andere secties en schreeuwde het de rest van de pagina weg. */
.tuur-sessions__logo img {
  width: 100%;
  max-width: clamp(220px, 26vw, 300px);
  height: auto;
  display: block;
}
.tuur-theme .tuur-sessions__body { font-size: 18px; line-height: 1.5; max-width: 42ch; margin: 0 0 clamp(20px, 3vw, 28px); }
.tuur-sessions__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; display: block; }
/* De tekstkolom is hier twee keer zo hoog als de foto, dus die zou halverwege
   uit beeld verdwijnen en de rechterhelft leeg achterlaten. Meelopen tijdens
   het lezen vult die ruimte en houdt het beeld bij de tekst waar het over gaat.
   Alleen op een breed scherm: op mobiel staan de twee onder elkaar. */
@media (min-width: 861px) {
  .tuur-sessions__media {
    position: sticky;
    top: calc(var(--tuur-header-h) + 24px);
  }
  .ccm-toolbar-visible .tuur-sessions__media { top: calc(var(--tuur-header-h) + 72px); }
}

/* Afspeelknop — de enige ronde vorm in het ontwerp. */
.tuur-theme .tuur-play {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: var(--tuur-ink); color: var(--tuur-green-deep);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; border: none; cursor: pointer;
}
.tuur-theme .tuur-play:hover { background: #fff; color: var(--tuur-green-deep); }

/* Aankondiging: de uitzending die er nog aan komt.
   Een eigen vlak met een rustig kloppend stipje, zodat je in één oogopslag ziet
   dat dit iets is dat nog gaat gebeuren en niet iets om nu af te spelen. */
/* De laatste aflevering met opname: pijl naar de pagina, titel ernaast, en de
   speler eronder. De pijl is met opzet geen driehoek; afspelen doet de speler,
   deze knop gaat naar de aflevering. */
/* Titel, datum en de knop onder elkaar. De ronde pijl die hier stond is weg:
   hij ging naar dezelfde pagina als de knop, zei niet waarheen, en stond vlak
   boven de ronde afspeelknop van de speler met een ander gevolg. */
.tuur-sessions__laatste {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
}
.tuur-theme .tuur-sessions__laatste-titel {
  font-family: var(--wsc-font-head); font-weight: 700;
  font-size: clamp(16px, 1.9vw, 18px); line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--tuur-ink); text-decoration: none;
  display: block;
}
.tuur-theme .tuur-sessions__laatste-titel:hover { color: var(--tuur-mint); }
/* Een getekende pijl in plaats van het teken →. Dat teken is in Archivo een
   haarlijn en verdwijnt naast vette kapitalen; deze heeft dezelfde dikte als
   de letters ernaast. */
.tuur-pijl { flex: none; }
.tuur-theme .tuur-aankondiging__link { display: inline-flex; align-items: center; gap: 8px; }

/* De datum links, de knop rechts, op dezelfde regel. */
.tuur-sessions__laatste-regel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 24px);
  flex-wrap: wrap;
  margin-top: 4px;
}
/* Iets kleiner dan een gewone knop: hij staat naast een regel van 13 px en mag
   die niet overstemmen, en zo past hij ook naast een lange datum op één regel. */
.tuur-theme .tuur-sessions__info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: 11px;
  padding: 9px 14px;
  white-space: nowrap;
}
@media (max-width: 620px) {
  /* Onder elkaar past de knop over de volle breedte: een knop van een halve
     regel breed is op een telefoon lastig te raken. */
  .tuur-theme .tuur-sessions__info {
    flex: 1 1 100%; justify-content: center; padding: 13px 16px; font-size: 12px;
  }
}

.tuur-theme .tuur-sessions__laatste-meta {
  font-size: 13px; line-height: 1.45; color: var(--tuur-ink-3);
  margin: 3px 0 0;
}

/* ==========================================================================
   De vooraankondiging: wanneer klinkt de volgende uitzending.

   Dit was een grijs vak met een titel erin, en dan zag het eruit als een
   tweede speler zonder knop. Nu is de datum de blikvanger, want dat is wat
   iemand hier komt halen; titel en gast staan ernaast en mogen wegvallen
   zolang ze nog niet bekend zijn.
   ========================================================================== */
/* Compact gehouden: onder deze kaart staat de laatste aflevering met de
   speler, en die is het onderwerp van de sectie. De aankondiging meldt alleen
   wanneer de volgende klinkt, dus krijgt hij de maat van een mededeling. */
.tuur-aankondiging {
  margin: 22px 0 20px;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.2vw, 20px);
  border: 1px solid var(--tuur-line);
  background: var(--tuur-veil);
}
/* Vanavond mag het opvallen; op andere dagen is het een mededeling. */
.tuur-aankondiging.is-vanavond { border-color: var(--tuur-mint); }

.tuur-theme .tuur-aankondiging__label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tuur-mint);
  margin: 0 0 10px;
}
.tuur-sessions__live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tuur-mint); flex: none;
  animation: tuur-puls 2s ease-in-out infinite;
}
@keyframes tuur-puls {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
  .tuur-sessions__live { animation: none; }
}

.tuur-aankondiging__rij {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2.6vw, 26px);
}

/* De datum als blok, zoals op een kalenderblad. Tabulaire cijfers, want de
   ene datum mag niet breder staan dan de andere. */
.tuur-theme .tuur-aankondiging__datum {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 1px;
  margin: 0;
  padding-right: clamp(16px, 2.6vw, 26px);
  border-right: 1px solid var(--tuur-line);
  font-family: var(--wsc-font-head);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.tuur-aankondiging__dag,
.tuur-aankondiging__maand {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--tuur-ink-3);
}
/* Nog altijd de blikvanger van de kaart, maar niet meer zo groot als de kop
   van de sectie eronder. */
.tuur-aankondiging__cijfer {
  font-size: clamp(26px, 3.6vw, 32px); font-weight: 800; line-height: 1;
  letter-spacing: -.03em;
  color: var(--tuur-ink);
}

.tuur-aankondiging__tekst { min-width: 0; padding-top: 2px; }
.tuur-theme .tuur-aankondiging__titel {
  font-family: var(--wsc-font-head); font-weight: 700;
  font-size: clamp(16px, 2vw, 19px); line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 5px; text-wrap: pretty;
}
.tuur-theme .tuur-aankondiging__meta,
.tuur-theme .tuur-aankondiging__gast {
  font-size: 13px; line-height: 1.5; color: var(--tuur-ink-3); margin: 0;
}
.tuur-theme .tuur-aankondiging__gast { color: var(--tuur-ink-2); margin-top: 3px; }
/* De voet: waar het live te horen is. Eén regel, met het opschrift vóór de
   logo's; onder elkaar waren dat drie regels extra en werd de kaart hoger dan
   de aflevering eronder. */
.tuur-aankondiging__voet {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px clamp(14px, 2.4vw, 24px);
  margin-top: clamp(12px, 1.8vw, 15px);
  padding-top: clamp(10px, 1.6vw, 13px);
  border-top: 1px solid var(--tuur-line);
}
/* De zenders binnen de kaart: kleiner dan onderaan de sectie, want hier zijn
   ze een toelichting bij de aankondiging en niet de mededeling zelf. Het
   opschrift staat ervoor in plaats van erboven; dat scheelt een regel. */
.tuur-aankondiging__zenders { display: flex; align-items: center; gap: 12px; }
.tuur-theme .tuur-aankondiging__zenders-label {
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tuur-ink-3);
  margin: 0; flex: none;
}
.tuur-aankondiging__zenders .tuur-zenders { --zender-h: 22px; gap: 14px; }


.tuur-theme .tuur-aankondiging__link {
  display: inline-block; margin-top: 10px;
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tuur-ink); text-decoration: none;
  border-bottom: 1px solid var(--tuur-line-2);
  padding-bottom: 2px;
}
.tuur-theme .tuur-aankondiging__link:hover { border-bottom-color: var(--tuur-mint); }

@media (max-width: 520px) {
  /* De datum boven de tekst in plaats van ernaast: naast elkaar houdt de
     titel op een telefoon nog geen halve regel over. */
  .tuur-aankondiging__rij { flex-direction: column; gap: 14px; }
  .tuur-theme .tuur-aankondiging__datum {
    /* Op één regel, en tegen elkaar aan: met een raster over de volle breedte
       stond SAT uiterst links en AUG uiterst rechts, en dan lees je geen datum
       meer maar drie losse woorden. */
    display: flex; align-items: baseline; gap: 8px;
    padding-right: 0; border-right: 0;
    padding-bottom: 12px; border-bottom: 1px solid var(--tuur-line);
    width: 100%;
  }
  .tuur-aankondiging__cijfer { font-size: 30px; }
}

.tuur-theme .tuur-sessions__volgende {
  margin: 22px 0 0; padding: 14px 16px;
  border-left: 3px solid var(--tuur-mint); background: var(--tuur-veil);
  font-size: 15px; color: var(--tuur-ink-2);
}
.tuur-theme .tuur-sessions__volgende strong { color: var(--tuur-ink); display: block; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; font-family: var(--wsc-font-head); }
.tuur-sessions__meer { margin-top: 22px; }

/* Zenderlogo's onder de uitzendtijden.
   De bestanden zijn zelf al reversed (witte inkt, uitsparing transparant), dus
   hier géén filter: dat maakte er eerder witte blokken van. Alleen maatvoering,
   zodat een vierkant en een breed logo optisch even zwaar wegen. */
/* De band met de zenders.
   Geen kader eromheen: de aankondiging erboven is al een vlak, en drie vlakken
   op elkaar maakt van deze sectie een stapel dozen. Een haarlijn boven en onder
   groepeert net zo goed en blijft licht. Het kopje erboven doet het echte werk:
   zonder dat weet niemand dat dit zenders zijn. */
/* De voet van de sectie: waar de show live klinkt, en de weg naar het archief.
   Naast elkaar op één regel, met één lijn erboven. Los verspreid door de
   sectie waren het drie losse dingen; zo is het één afsluiting. */
.tuur-sessions__voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 32px);
  margin-top: clamp(24px, 3.5vw, 36px);
  padding-top: clamp(18px, 2.6vw, 24px);
  border-top: 1px solid var(--tuur-line);
}
.tuur-theme .tuur-sessions__meer-knop {
  flex: none;
  font-size: 12px;
  padding: 13px 20px;
  white-space: nowrap;
}
@media (max-width: 620px) {
  /* Onder elkaar, en de knop over de volle breedte: hij is de enige actie. */
  .tuur-sessions__voet { flex-direction: column; align-items: stretch; gap: 20px; }
  .tuur-theme .tuur-sessions__meer-knop {
    display: block; width: 100%; text-align: center; padding: 15px 20px;
  }
}

/* De logo's zitten nu in die voet, die zijn eigen lijn en ruimte meebrengt. */
.tuur-sessions__zenderband { margin: 0; padding: 0; min-width: 0; }
.tuur-theme .tuur-sessions__zenders-label { margin: 0 0 14px; }
.tuur-sessions__zenders {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 22px; margin: 0;
}
/* Eén maat voor de rij, en per merkteken een factor daarop. De drie tekens
   hebben heel verschillende vormen, en dan geeft dezelfde hoogte niet hetzelfde
   gewicht: het vierkant van 1Zuid is bijna helemaal gevuld en drukt de andere
   twee weg, terwijl de ruit van 3Heuvelland juist oppervlak verliest aan zijn
   punten. Door met een factor te werken blijft die verhouding kloppen als de
   rij op een smal scherm groter wordt. */
.tuur-zenders {
  --zender-h: 34px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
}
.tuur-zender {
  display: block;
  height: var(--zender-h); width: auto; max-width: 150px;
  object-fit: contain;
  opacity: .9;
  transition: opacity .2s ease;
}
.tuur-zender--1zuid { height: calc(var(--zender-h) * .94); }
.tuur-zender--3heuvelland { height: calc(var(--zender-h) * 1.06); }
.tuur-zender:hover { opacity: 1; }

/* Het logo is de terugluisterlink. Een tikvlak van 44 px eromheen, want een
   merkteken van 34 px hoog is met een duim niet te raken. Verder niets: geen
   kader, geen onderstreping. Dat het aanwijsbaar is blijkt uit de cursor en
   uit het oplichten; harder hoeft het niet, want de aflevering staat hier al. */
.tuur-theme .tuur-zender-link {
  display: inline-flex; align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.tuur-theme .tuur-zender-link:hover .tuur-zender { opacity: 1; }
.tuur-theme .tuur-zender-link:focus-visible { outline: 2px solid var(--tuur-mint); outline-offset: 4px; }
.tuur-dl-maat { opacity: .6; font-size: .85em; }

/* Agenda buiten de hero: geen donker vlak nodig, de sectie is al groen. */
.tuur-agenda--vlak { background: none; padding: 0; }

/* Afleveringenlijst. */
.tuur-episodes { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.tuur-episode {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--tuur-line);
}
/* De laatste regel houdt zijn lijn niet: de voet eronder brengt er zelf al
   een mee, en twee haarlijnen vlak onder elkaar leest als een foutje. */
.tuur-episode:last-child { border-bottom: 0; }
.tuur-episode .tuur-tag { margin-bottom: 0; }
.tuur-theme .tuur-episode__title {
  font-weight: 600; font-size: 16px; flex: 1 1 240px;
  text-decoration: none; color: var(--tuur-ink); text-wrap: pretty;
}
.tuur-theme a.tuur-episode__title:hover { text-decoration: underline; text-underline-offset: 4px; }
.tuur-theme .tuur-episode__date { font-size: 13px; color: var(--tuur-ink-3); white-space: nowrap; }

/* Music. */
.tuur-release__art { width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--tuur-veil); margin-bottom: 14px; }
.tuur-release__art img { width: 100%; height: 100%; object-fit: cover; }
.tuur-theme .tuur-release__title { font-family: var(--wsc-font-head); font-weight: 700; font-size: 16px; margin: 0 0 4px; }
.tuur-theme .tuur-release__meta { font-size: 13px; color: var(--tuur-ink-3); margin: 0 0 14px; }
.tuur-release__link { font-size: 12px; padding: 8px 14px; }
/* De speler in een muziekkaart: het artwork zelf is de knop.
   De klasse staat er twee keer in de selector met opzet; de algemene regel voor
   .wsc-embed staat verderop in dit bestand en heeft evenveel gewicht, dus die
   zou anders winnen op volgorde. */
.tuur-theme .wsc-embed.tuur-release__speler {
  aspect-ratio: 1; height: auto; border: 0;
  background: var(--tuur-veil); margin-bottom: 14px;
}
/* Zodra hij speelt is het geen hoes meer maar een speler, en die heeft zijn
   eigen hoogte nodig. */
.tuur-theme .wsc-embed.tuur-release__speler.is-geladen {
  aspect-ratio: auto; height: var(--wsc-embed-h, 166px);
}
.tuur-theme .tuur-release__speler .wsc-embed__poster img { opacity: 1; }
/* Lichter dan bij de hero: dit is een hoes die je wilt zien, met een knop erop,
   niet een vlak met tekst eroverheen. */
.tuur-theme .tuur-release__speler .wsc-embed__poster::after {
  background: radial-gradient(circle at 50% 50%,
    rgba(12, 28, 18, .55) 0%, rgba(12, 28, 18, .18) 42%, rgba(12, 28, 18, .28) 100%);
}
.tuur-theme .tuur-release__speler .wsc-embed__play { width: 52px; height: 52px; }
/* De titel staat er vlak onder, dus het opschrift hoeft niet in beeld. Wel
   leesbaar houden voor een schermlezer: anders is het een knop zonder naam. */
.tuur-theme .tuur-release__speler .wsc-embed__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Waar hij gedraaid heeft.
   Geen logo's maar namen: die zijn er niet in een bruikbare vorm, en gezet in
   het lettertype van de site blijft het één beeldwereld. Hairlines eromheen in
   plaats van vlakjes, zodat het een opsomming blijft en geen knoppenbalk. */
.tuur-theme .tuur-gedraaid__kop { margin-bottom: 14px; }
.tuur-gedraaid {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.tuur-gedraaid__item {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--tuur-line);
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tuur-ink);
}
/* Eén naam mag zwaarder wegen dan de rest; meer dan één en het effect is weg. */
.tuur-gedraaid__item--nadruk { border-color: var(--tuur-mint); color: var(--tuur-mint); }
.tuur-gedraaid__plaats {
  font-weight: 400; letter-spacing: .06em; color: var(--tuur-ink-3);
}

/* Music uit de SoundCloud-module. Het raster volgt het aantal kolommen dat in
   het blok is ingesteld; op smallere schermen zakt het vanzelf terug. */
.tuur-grid--art { grid-template-columns: repeat(var(--tuur-sc-kolommen, 4), minmax(0, 1fr)); }
.tuur-theme .tuur-sc__intro { max-width: 58ch; margin-bottom: clamp(20px, 3vw, 30px); }
.tuur-sc__acties {
  margin-top: clamp(24px, 3.5vw, 36px);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(16px, 3vw, 32px);
}
.tuur-sc__aantal { opacity: .7; }

/* De weg naar The Sessions. Geen tweede knop ernaast: dan concurreren twee
   dingen om dezelfde aandacht. Het woordmerk doet het werk, met één regel eronder
   die zegt wat je er vindt. De haarlijn links scheidt het van de knop zonder er
   een tweede vlak van te maken. */
.tuur-theme .tuur-sc__sessions {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--tuur-ink);
  padding-left: clamp(16px, 3vw, 32px);
  border-left: 1px solid var(--tuur-line);
}
/* Het woordmerk heeft drie regels tekst onder elkaar; onder een centimeter of
   vier wordt de onderste regel pap. Dan is groter niet luider maar leesbaar. */
.tuur-sc__sessions img {
  height: 46px; width: auto; display: block;
  opacity: .92; transition: opacity .2s ease;
}
.tuur-theme .tuur-sc__sessions-tekst {
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tuur-ink-2);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s ease;
}
.tuur-theme .tuur-sc__sessions:hover img { opacity: 1; }
.tuur-theme .tuur-sc__sessions:hover .tuur-sc__sessions-tekst {
  color: var(--tuur-ink); text-decoration: underline; text-underline-offset: 4px;
}
.tuur-theme .tuur-sc__sessions:focus-visible { outline: 2px solid var(--tuur-mint); outline-offset: 4px; }

@media (max-width: 980px) {
  .tuur-grid--art { grid-template-columns: repeat(min(var(--tuur-sc-kolommen, 4), 3), minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .tuur-grid--art { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* Onder elkaar, en de scheidingslijn van links naar boven: naast elkaar wordt
     het woordmerk hier te klein om te lezen. */
  .tuur-sc__acties { flex-direction: column; align-items: stretch; gap: 20px; }
  .tuur-theme .tuur-sc__acties .wsc-btn { display: block; width: 100%; text-align: center; }
  .tuur-theme .tuur-sc__sessions {
    padding-left: 0; padding-top: 20px;
    border-left: 0; border-top: 1px solid var(--tuur-line);
    justify-content: space-between;
  }
  .tuur-sc__sessions img { height: 40px; }
}

/* Bio.

   Positie en vorm van het portret komen uit het blok, niet uit dit bestand.
   Het thema bepaalt hoe groot en hoe strak het staat; de redacteur bepaalt of
   het links of rechts staat en of het rechthoekig, vierkant of rond is. */
.tuur-bio { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
/* Rechts: de kolommen wisselen van maat en de foto verhuist naar plek twee.
   Met order in plaats van een tweede rasterdefinitie, zodat de tekst in de
   broncode vóór de foto blijft staan waar dat hoort. */
.tuur-bio--rechts { grid-template-columns: minmax(0, 1fr) 380px; }
.tuur-bio--rechts .tuur-bio__media { order: 2; }
.tuur-bio--rechts .tuur-bio__text { order: 1; }

.tuur-bio__media img { width: 100%; height: auto; display: block; object-fit: cover; object-position: 50% 30%; }
/* Rechthoek is een portret: staand, zoals het ontwerp vraagt. */
.tuur-bio__media--rect img { aspect-ratio: 4 / 5; }
.tuur-bio__media--square img { aspect-ratio: 1; }
/* Rond staat er compacter bij: een cirkel van 380 px breed is een schijf, en
   dan valt de tekst ernaast in het niet. */
.tuur-bio__media--circle { max-width: 300px; }
.tuur-bio__media--circle img { aspect-ratio: 1; border-radius: 50%; }

.tuur-theme .tuur-bio__p { font-size: 17px; line-height: 1.6; max-width: 60ch; margin: 0 0 14px; }

/* Cijferrij. */
.tuur-facts {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(16px, 3vw, 28px); border-top: 1px solid var(--tuur-line); padding-top: 20px;
}
.tuur-theme .tuur-fact__value { font-family: var(--wsc-font-head); font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--tuur-ink); }
.tuur-theme .tuur-fact__label { margin: 0; font-size: 13px; color: var(--tuur-ink-3); }

@media (max-width: 860px) {
  .tuur-sessions,
  .tuur-bio,
  .tuur-bio--rechts { grid-template-columns: 1fr; }
  /* Op mobiel eerst het portret, dan de tekst, ook als de foto op een breed
     scherm rechts staat: onder elkaar hoort het beeld bovenaan. */
  .tuur-bio--rechts .tuur-bio__media { order: 1; }
  .tuur-bio--rechts .tuur-bio__text { order: 2; }
  .tuur-bio__media { max-width: 420px; }

  /* De keuze "foto op mobiel" uit het blok. Verbergen is verbergen; klein zet
     er een rond portretje boven de tekst, want de kleine foto ín de knop hoort
     bij het standaardsjabloon van het blok en die knop bestaat hier niet. */
  .tuur-bio__media--mob-hide { display: none; }
  .tuur-bio__media--mob-small { max-width: 120px; }
  .tuur-bio__media--mob-small img { aspect-ratio: 1; border-radius: 50%; }
}

/* Booking: formulier links, praktische gegevens rechts. */
.tuur-booking { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.tuur-theme .tuur-booking__intro { font-size: 17px; line-height: 1.6; max-width: 56ch; margin: 0 0 clamp(20px, 3vw, 28px); }
.tuur-booking__zij { display: grid; gap: clamp(20px, 3vw, 32px); }

/* De WhatsApp-snelroute boven het formulier. Een eigen vlak met een haarlijn
   eromheen, zodat het naast het formulier een keuze is en geen los knopje. */
.tuur-booking__snel {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 22px);
  padding: clamp(14px, 2.2vw, 18px) clamp(16px, 2.5vw, 20px);
  margin: 0 0 clamp(24px, 3.5vw, 32px);
  border: 1px solid var(--tuur-line);
  border-radius: var(--wsc-radius, 4px);
  background: rgba(255, 255, 255, .03);
}
.tuur-theme .tuur-booking__snel .wsc-btn { flex: none; gap: 10px; }
.tuur-theme .tuur-booking__snel-tekst {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tuur-ink-2);
}
/* Het merk mag je aan de kleur herkennen; de knop zelf blijft van de site. */
.tuur-wa__icon { color: #25d366; flex: none; }
.tuur-theme .tuur-wa:hover .tuur-wa__icon { color: var(--tuur-green-deep); }

@media (max-width: 560px) {
  .tuur-booking__snel { flex-direction: column; align-items: stretch; gap: 12px; }
  .tuur-theme .tuur-booking__snel .wsc-btn { justify-content: center; }
}
.tuur-booking__downloads { display: flex; flex-wrap: wrap; gap: 12px; }
.tuur-booking__downloads .wsc-btn { font-size: 13px; padding: 12px 16px; }
@media (max-width: 860px) { .tuur-booking { grid-template-columns: 1fr; } }

/* Het formulierblok tekent zijn eigen velden; hier alleen de ruimte eromheen. */
.tuur-booking .wsc-form__fields { display: grid; gap: 18px; }
.tuur-booking .wsc-form__actions { margin-top: 22px; }
.tuur-theme .wsc-form__label { color: var(--tuur-mint); }

/* Instagram-strip: kop links, volgknop rechts, daaronder vierkante beelden. */
.tuur-ig-kop {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(18px, 3vw, 28px);
}
.tuur-theme .tuur-ig-intro { max-width: 54ch; margin: 0; }
.tuur-theme .tuur-ig-volg { flex: none; font-size: 12px; padding: 11px 20px; white-space: nowrap; }

.tuur-ig-strip {
  display: grid;
  grid-template-columns: repeat(var(--tuur-ig-kolommen, 4), minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
}
.tuur-ig-tegel { margin: 0; overflow: hidden; }
/* De tegel is nu een knop om de foto heen. Een knop brengt zijn eigen rand,
   achtergrond en padding mee; die halen we hier weg zodat er visueel niets
   verandert en alleen het gedrag erbij komt. */
.tuur-theme .tuur-ig-knop {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; line-height: 0;
}
.tuur-theme .tuur-ig-knop:focus-visible { outline: 2px solid var(--tuur-mint); outline-offset: 2px; }
.tuur-ig-tegel img {
  /* height:auto is nodig: de width/height-attributen op de <img> zetten anders
     een vaste hoogte, en dan negeert de browser aspect-ratio. */
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.tuur-ig-tegel:hover img,
.tuur-ig-knop:hover img { transform: scale(1.04); }
.tuur-theme .tuur-ig-tegel figcaption { font-size: 12px; color: var(--tuur-ink-3); margin-top: 6px; line-height: 1.4; }
.tuur-theme .tuur-ig-hint { border: 1px dashed var(--tuur-line-2); padding: 20px; text-align: center; color: var(--tuur-ink-3); }


/* ---------- Klik-om-te-laden speler ------------------------------------
   De speler van SoundCloud of YouTube komt er pas in als iemand op afspelen
   drukt. Tot dat moment staat hier een vlak in de huisstijl met dezelfde ronde
   knop als de rest van de site, zodat het geen wachtscherm lijkt maar de
   speler zelf. */
.tuur-theme .wsc-embed {
  position: relative; width: 100%; overflow: hidden;
  /* Voor de klik is dit ons eigen vlak en mag het compacter dan de speler die
     erin komt; na de klik neemt het de hoogte aan die de speler nodig heeft. */
  height: 210px;
  background: linear-gradient(135deg, var(--tuur-green-mid), var(--tuur-green-dark));
  border: 1px solid var(--tuur-line);
}
.tuur-theme .wsc-embed.is-geladen { height: var(--wsc-embed-h, 300px); border-color: transparent; }
.tuur-theme .wsc-embed--video,
.tuur-theme .wsc-embed--video.is-geladen { aspect-ratio: 16 / 9; height: auto; }
.tuur-theme .wsc-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.tuur-theme .wsc-embed__knop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: none; border: 0; cursor: pointer; padding: 20px; color: var(--tuur-ink);
}
/* De foto van de aflevering achter de knop. Niet met opacity dempen: dan wordt
   het een grauwe vlek. De foto houdt zijn kleur en er komt een sluier overheen,
   donkerder waar de knop en het label staan. */
.tuur-theme .wsc-embed__poster { position: absolute; inset: 0; overflow: hidden; }
.tuur-theme .wsc-embed__poster img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;
  transition: transform .5s ease;
}
.tuur-theme .wsc-embed__poster::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(12, 28, 18, .72) 0%, rgba(12, 28, 18, .38) 55%, rgba(12, 28, 18, .52) 100%);
}
.tuur-theme .wsc-embed__knop:hover .wsc-embed__poster img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .tuur-theme .wsc-embed__poster img,
  .tuur-theme .wsc-embed__knop:hover .wsc-embed__poster img { transition: none; transform: none; }
}
/* Met een foto erachter mag het vlak zelf geen groene grond meer tonen. */
.tuur-theme .wsc-embed:has(.wsc-embed__poster) { background: var(--tuur-green-dark); }
/* Het label krijgt een zachte schaduw, zodat het op elke foto leesbaar blijft. */
.tuur-theme .wsc-embed__poster ~ .wsc-embed__play,
.tuur-theme .wsc-embed__knop:has(.wsc-embed__poster) .wsc-embed__play { box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.tuur-theme .wsc-embed__knop:has(.wsc-embed__poster) .wsc-embed__label { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.tuur-theme .wsc-embed__play {
  position: relative; width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: var(--tuur-ink); color: var(--tuur-green-deep);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
.tuur-theme .wsc-embed__knop:hover .wsc-embed__play { background: #fff; transform: scale(1.06); }
.tuur-theme .wsc-embed__label {
  position: relative; font-family: var(--wsc-font-head); font-weight: 700;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  text-align: center; text-wrap: balance; max-width: 32ch;
}
.tuur-theme .wsc-embed__knop:focus-visible { outline: 2px solid var(--tuur-mint); outline-offset: -4px; }
.tuur-theme .wsc-embed__fallback { display: inline-block; padding: 14px 18px; }
@media (prefers-reduced-motion: reduce) {
  .tuur-theme .wsc-embed__play { transition: none; }
  .tuur-theme .wsc-embed__knop:hover .wsc-embed__play { transform: none; }
}

/* ---------- Lightbox ---------------------------------------------------- */
.tuur-lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: clamp(20px, 5vw, 48px);
  background: rgba(0, 0, 0, .92);
}
.tuur-lightbox.is-open { display: flex; }
.tuur-lightbox img { max-width: 90vw; max-height: 85vh; width: auto; height: auto; object-fit: contain; }
.tuur-lightbox__close {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px;
  background: none; border: 1px solid rgba(255,255,255,.6); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}

/* ---------- Formulier --------------------------------------------------- */
/* Het wsc_form-blok tekent zijn velden met de core-klassen; hier alleen de
   kleuren omkeren zodat ze op groen leesbaar zijn. */
.tuur-theme input[type="text"], .tuur-theme input[type="email"], .tuur-theme input[type="tel"],
.tuur-theme input[type="date"], .tuur-theme input[type="search"], .tuur-theme input[type="url"],
.tuur-theme select,
.tuur-theme textarea,
.tuur-theme .form-control {
  width: 100%; box-sizing: border-box;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--tuur-line-2);
  color: var(--tuur-ink); font-family: var(--wsc-font-body); font-size: 16px;
  padding: 12px 14px; border-radius: 0;
}
.tuur-theme ::placeholder { color: var(--tuur-ink-3); }
.tuur-theme label,
.tuur-theme .control-label {
  display: block; font-family: var(--wsc-font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tuur-mint); margin-bottom: 6px;
}
/* De keuzelijst klapt nu donker open (color-scheme), dus de opties krijgen
   lichte tekst op de diepe groentint in plaats van bijna zwart op wit. Waar het
   toestel de opmaak negeert, staat er al een donkere lijst met lichte tekst. */
.tuur-theme option { color: var(--tuur-ink); background: var(--tuur-green-deep); }

/* Autofill: de browser schildert een eigen lichte achtergrond over het veld
   heen, en dan staat er lichte tekst op lichtblauw. De inzet-schaduw is de enige
   manier om dat vlak te overschrijven. */
.tuur-theme input:-webkit-autofill,
.tuur-theme input:-webkit-autofill:hover,
.tuur-theme input:-webkit-autofill:focus,
.tuur-theme textarea:-webkit-autofill,
.tuur-theme select:-webkit-autofill {
  -webkit-text-fill-color: var(--tuur-ink);
  -webkit-box-shadow: 0 0 0 1000px #1b4232 inset;
  box-shadow: 0 0 0 1000px #1b4232 inset;
  caret-color: var(--tuur-ink);
  transition: background-color 100000s ease-in-out 0s;
}

/* ---------- Footer ------------------------------------------------------ */
.tuur-footer { padding: clamp(28px, 4vw, 40px) var(--wsc-gutter); border-top: 1px solid var(--tuur-line); }
.tuur-footer__inner {
  max-width: var(--wsc-maxw); margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px;
}
.tuur-footer__brand img { height: 44px; width: auto; display: block; }
.tuur-footer__nav .tuur-nav { gap: 18px; }
.tuur-theme .tuur-footer__nav a { font-size: 13px; text-decoration: none; padding: 4px 0; }
.tuur-theme .tuur-footer__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tuur-socials { display: flex; gap: 14px; align-items: center; }
.tuur-socials a { display: inline-flex; min-width: 24px; min-height: 24px; align-items: center; justify-content: center; }
.tuur-theme .tuur-footer__copy { font-size: 13px; color: var(--tuur-ink-3); }

/* Socialrij met label (booking-kolom). */
.tuur-social-list { display: grid; gap: 4px; }
.tuur-theme .tuur-social {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  text-decoration: none; font-size: 16px;
}
.tuur-social:hover span { text-decoration: underline; text-underline-offset: 4px; }
.tuur-social svg { flex-shrink: 0; }

/* ---------- Definitielijst (praktisch / details) ------------------------ */
.tuur-dl { margin: 0; display: grid; gap: 14px; border: 1px solid rgba(240,244,241,.35); padding: 18px; }
.tuur-theme .tuur-dl dt {
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tuur-mint); margin-bottom: 4px;
}
.tuur-theme .tuur-dl dd { margin: 0; font-size: 16px; color: var(--tuur-ink); }

/* ---------- Editmodus --------------------------------------------------- */
/* In de editor mogen secties nooit onzichtbaar zijn en moet de hero niet het
   hele scherm vullen — anders is er geen blok meer aan te wijzen. */
.ccm-toolbar-visible .tuur-fade { opacity: 1; transform: none; }
.ccm-toolbar-visible .tuur-hero { min-height: 0; }

/* ==========================================================================
   Mobiel
   --------------------------------------------------------------------------
   De meeste bezoekers komen via Instagram op hun telefoon, dus dit is niet het
   restje onderaan het bestand maar de belangrijkste weergave. Gemeten op
   390 x 844 (iPhone 14/15) en 360 px (Android-basis).

   Drie regels die overal gelden:
   1. elk tikdoel is minstens 44 px hoog en raakt geen ander tikdoel;
   2. geen raster dat halfvol afloopt — dat leest als een fout;
   3. de pagina zo kort mogelijk maken zonder inhoud te schrappen.
   ========================================================================== */

/* ---------- Header en menu ---------------------------------------------- */
@media (max-width: 900px) {
  /* Het logo is 34 px hoog; het aanraakvlak eromheen wordt 44. */
  .tuur-header__brand { display: flex; align-items: center; min-height: 44px; }

  /* De boekingsknop is de belangrijkste actie in het menu: volle breedte,
     zodat hij niet als een los labeltje tussen de links hangt. */
  .tuur-theme .tuur-header__nav .tuur-header__cta {
    display: block; text-align: center; padding: 15px 18px; margin-top: 18px;
  }

  /* De tweede knop is de korte route, niet de hoofdactie: zelfde maat, maar
     omlijnd in plaats van gevuld, zodat "Book Tuur" de blikvanger blijft. */
  .tuur-theme .tuur-header__nav .tuur-header__cta--wa {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: none; color: var(--tuur-ink);
    border: 1px solid var(--tuur-line); margin-top: 10px;
  }
  .tuur-theme .tuur-header__nav .tuur-header__cta--wa:hover {
    background: rgba(255, 255, 255, .08); color: var(--tuur-ink);
  }
  .tuur-header__nav .tuur-header__cta--wa .tuur-wa__icon { width: 19px; height: 19px; }

  /* De socials horen ook op mobiel in de header thuis. Ze stonden wel in de
     markup maar nergens weer aan, dus op de telefoon waren ze onvindbaar.
     Onderin het menu, met een tikvlak van 44 px per pictogram. */
  .tuur-header__nav .tuur-header__socials--mobiel {
    display: block; margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--tuur-line);
  }
  .tuur-header__nav .tuur-socials { gap: 2px; margin-left: -10px; }
  .tuur-theme .tuur-header__nav .tuur-socials a { width: 44px; height: 44px; }
  .tuur-header__nav .tuur-header__socials svg { width: 20px; height: 20px; }

  /* Staat het menu open, dan mag de knop terug naar boven er niet doorheen
     prikken; hij hoort bij de pagina, niet bij het menu. */
  .tuur-nav-open .tuur-theme .tuur-totop.is-zichtbaar {
    opacity: 0; pointer-events: none;
  }
}

/* ---------- Agenda ------------------------------------------------------ */
@media (max-width: 720px) {
  /* Twee regels per gig in plaats van drie: datum + naam boven, vlag + stad +
     status eronder. De ticketknop staat daarmee rechts, waar de duim hem
     zoekt, en elke rij wordt ruim dertig pixels korter. */
  .tuur-gig {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    grid-template-areas:
      "datum naam   naam"
      "vlag  stad   status";
    column-gap: 12px; row-gap: 2px; padding: 8px 8px 10px;
  }
  .tuur-gig__date { grid-area: datum; align-self: center; }
  .tuur-theme .tuur-gig__event { grid-area: naam; min-height: 40px; padding-top: 4px; }
  .tuur-theme .tuur-gig__city { grid-area: stad; align-self: center; }
  .tuur-gig__flag { grid-area: vlag; align-self: center; }
  .tuur-theme .tuur-tix { grid-area: status; justify-self: end; min-height: 40px; }
  /* Zonder status staat er een lege <span> in het raster; die mag geen kolom
     opeisen. */
  .tuur-gig > span:empty { display: none; }
}

/* ---------- Hero -------------------------------------------------------- */
@media (max-width: 700px) {
  /* Het ontwerp zet het portret achter de hele hero. Op een breed scherm klopt
     dat: de agenda staat daar in een vlak in het midden en de foto loopt er
     links en rechts omheen. Op een telefoon is dat vlak even breed als het
     scherm, en dan valt zijn gezicht er precies achter: je ziet alleen nog een
     stukje haar boven de eerste gig.

     Daarom krijgt de foto hier een eigen band bovenaan, uitgesneden op het
     gezicht, die naar de groene grond uitvloeit. Je opent de site op Tuur, de
     eerste gigs kijken er net onderuit zodat je wilt scrollen, en de agenda
     staat op een rustige ondergrond in plaats van over een foto heen. */
  .tuur-hero__media,
  .tuur-hero__veil {
    inset: 0 0 auto;
    height: 62vh;      /* val terug voor browsers zonder svh */
    height: 62svh;
  }
  .tuur-hero__media img { object-position: 50% 15%; }
  .tuur-hero__media::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
    /* Ruim en vroeg beginnend, want wat eronder zit wisselt: een donkere muur
       vloeit vanzelf over in het groen, maar een wit shirt of een fel podium
       niet. De uitvloei moet bij elk beeld werken, niet alleen bij het beeld
       waarop hij is afgesteld. */
    background: linear-gradient(180deg,
      rgba(30, 71, 54, 0) 0%,
      rgba(30, 71, 54, .45) 38%,
      rgba(30, 71, 54, .85) 72%,
      var(--tuur-green) 100%);
  }
  /* Er staat geen tekst meer op de foto, dus de sluier mag veel lichter. Het
     groen van die muur is precies waar de kleur van deze site vandaan komt; dat
     hoort te zien te zijn. */
  .tuur-hero__veil {
    background: linear-gradient(180deg,
      rgba(12, 28, 18, .22) 0%,
      rgba(12, 28, 18, .04) 45%,
      rgba(12, 28, 18, .12) 100%);
  }

  /* Het woordmerk lag midden over zijn gezicht. De balk bovenaan draagt het
     logo al, dus hier laten we de foto zelf de opening zijn. De naam blijft als
     tekst in de h1 staan voor Google en de schermlezer. */
  .tuur-hero__mark { display: none; }
  .tuur-hero__logo {
    min-height: 54vh;
    min-height: 54svh;
    margin: 0 0 14px;
  }

  /* Achter de agenda zit nu geen foto meer; een donker vlak zou daar een losse
     doos op groen worden. */
  .tuur-agenda { background: none; padding-inline: 0; }

  .tuur-hero__inner { padding-bottom: 24px; }
  .tuur-hero__foot { display: none; }
  .tuur-seam { height: 40px; }
}

/* ---------- The Sessions ------------------------------------------------ */
@media (max-width: 560px) {
  /* De zenderlogo's stonden op 28 px. Twee van de drie zijn woordmerken met
     kleine letters erin; die zijn op die hoogte niet te lezen, en juist deze
     namen moeten vertrouwen wekken bij een boeker. Ze passen met 38 px nog
     ruim op één regel. */
  .tuur-sessions__zenders { gap: 18px 22px; }
  .tuur-zenders { --zender-h: 38px; }


  /* De afleveringsdatum zweefde midden naast een titel van twee regels. Nu op
     één regel met het aflevernummer, de titel eronder over de volle breedte. */
  .tuur-episode { gap: 4px 12px; padding: 12px 0; }
  .tuur-episode .tuur-tag { order: 1; }
  .tuur-theme .tuur-episode__date { order: 2; margin-left: auto; }
  .tuur-theme .tuur-episode__title {
    order: 3; flex: 1 1 100%; font-size: 17px;
    display: flex; align-items: center; min-height: 44px; padding: 2px 0;
  }

  /* De titel naast de ronde afspeelknop is zelf ook een link naar de
     aflevering; die was 27 px hoog. */
  .tuur-theme .tuur-sessions__laatste-titel {
    display: flex; align-items: center; min-height: 40px;
  }

  /* De speler mag korter: 300 px kostte een derde scherm zonder meer te tonen. */
  .tuur-theme .tuur-sessions__speler { height: 176px; }
}

/* ---------- Music ------------------------------------------------------- */
@media (max-width: 560px) {
  /* Vierkant beeld per set maakte de sectie bijna drie schermen lang. Liggend
     scheelt ruim zeshonderd pixels en de foto's zijn liggend genomen. */
  .tuur-release__art { aspect-ratio: 3 / 2; }
  /* "Listen" was 74 x 30. Over de kaartbreedte is het een echte knop. */
  .tuur-theme .tuur-release__link {
    display: block; text-align: center; padding: 13px 16px; font-size: 13px;
  }
}

/* ---------- Booking ----------------------------------------------------- */
@media (max-width: 620px) {
  /* Verzenden is de enige actie op deze pagina die telt: volle breedte. */
  .tuur-theme .tuur-booking .wsc-form__actions .wsc-btn,
  .tuur-theme .tuur-booking .wsc-form__actions button {
    display: block; width: 100%; text-align: center;
  }
  /* Perskit en persfoto's naast elkaar werden twee halve knoppen; onder
     elkaar blijven het twee leesbare downloads. */
  .tuur-booking__downloads .wsc-btn { flex: 1 1 100%; text-align: center; padding: 14px 16px; }

  /* Het boekingsadres staat in lopende tekst maar is de snelste weg naar een
     boeking; die mag geen tikdoel van 18 px zijn. */
  .tuur-theme .tuur-dl dd a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* ---------- Waar hij gedraaid heeft ------------------------------------- */
@media (max-width: 560px) {
  /* Acht namen onder elkaar wordt een lijst om te lezen; als veegstrook blijft
     het iets om in één blik langs te gaan, en dat is de bedoeling. */
  .tuur-gedraaid {
    flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--wsc-gutter) * -1);
    padding-inline: var(--wsc-gutter); padding-bottom: 4px;
  }
  .tuur-gedraaid::-webkit-scrollbar { display: none; }
  .tuur-gedraaid__item { flex: none; }
}

/* ---------- Instagram --------------------------------------------------- */
@media (max-width: 900px) { .tuur-ig-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 560px) {
  /* Een raster van twee kolommen liet bij drie foto's een gat vallen, en dat
     leest als een fout in plaats van als een keuze. Op de telefoon wordt het
     een veegstrook van rand tot rand: die klopt bij elk aantal foto's, ziet
     eruit zoals Instagram zelf, en kost één rij in plaats van twee. */
  .tuur-ig-strip {
    display: grid; grid-auto-flow: column;
    grid-template-columns: none; grid-auto-columns: 46%;
    gap: 8px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--wsc-gutter) * -1);
    padding-inline: var(--wsc-gutter); padding-bottom: 4px;
  }
  .tuur-ig-strip::-webkit-scrollbar { display: none; }
  .tuur-ig-tegel { scroll-snap-align: start; }
  /* Een bijschrift onder een beeld van 170 px is niet te lezen. */
  .tuur-theme .tuur-ig-tegel figcaption { display: none; }

  .tuur-theme .tuur-ig-volg {
    display: block; width: 100%; text-align: center; padding: 14px 20px;
  }
}

/* ---------- Footer ------------------------------------------------------ */
@media (max-width: 700px) {
  /* De footerlinks stonden op één regel van 29 px hoog, en het laatste item
     verdween onder de knop terug naar boven. Onder elkaar, met ruimte. */
  .tuur-footer { padding-bottom: 92px; }
  .tuur-footer__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .tuur-footer__nav { width: 100%; }
  .tuur-footer__nav .tuur-nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .tuur-theme .tuur-footer__nav a {
    display: block; padding: 12px 0; min-height: 44px; font-size: 15px;
    border-bottom: 1px solid var(--tuur-line);
  }
  .tuur-footer .tuur-socials { gap: 2px; margin-left: -10px; }
  .tuur-theme .tuur-footer .tuur-socials a { width: 44px; height: 44px; }
  .tuur-footer .tuur-socials svg { width: 20px; height: 20px; }
}

/* ---------- Knop terug naar boven --------------------------------------- */
@media (max-width: 640px) {
  .tuur-theme .tuur-totop { right: 14px; bottom: 14px; }
}

/* ==========================================================================
   Kopbanner van /dj-shows
   Dezelfde taal als de hero op de home (foto, sluier, uitvloeien in het
   groen), maar half zo hoog en zonder video. De home is de entree, deze
   pagina is de agenda: het beeld geeft bewijs, de data blijven boven de vouw.
   ========================================================================== */
.tuur-theme .wsc-agenda-kop__beeld {
  /* seo_signaal zet width en height op elke <img>; zonder deze regel wint dat
     van object-fit en wordt de foto uitgerekt. */
  height: 100%;
  /* De banner is veel breder dan de foto hoog is, dus er valt boven en onder
     een flink stuk weg. Iets onder het midden houdt hoofd en booth in beeld. */
  object-position: 50% 54%;
}

.tuur-theme .wsc-agenda-kop__veil {
  background:
    /* Onderin volledig uitvloeien in het groen, zodat er geen naad staat
       tussen de foto en de band eronder. */
    linear-gradient(180deg, rgba(12,28,18,.34) 0%, rgba(12,28,18,.12) 26%, rgba(22,38,29,.62) 66%, rgba(30,71,54,.94) 90%, var(--tuur-green) 100%),
    /* En links donkerder, want daar staat de tekst. */
    linear-gradient(90deg, rgba(12,28,18,.68) 0%, rgba(12,28,18,.42) 46%, rgba(12,28,18,0) 82%);
}

.tuur-theme .wsc-agenda-kop__inhoud {
  min-height: clamp(300px, 36vw, 460px);
  padding-bottom: clamp(28px, 4vw, 48px);
}
.tuur-theme .wsc-agenda-kop__inhoud .wsc-eyebrow { color: var(--tuur-mint); }
.tuur-theme .wsc-agenda-kop__inhoud .wsc-lead { max-width: 46ch; }

@media (max-width: 700px) {
  /* Op een telefoon gaat de tekst niet over de foto heen maar eronder. Een
     staand scherm is te smal om allebei te doen: de kop komt over het
     onderwerp te staan en de foto is dan nergens meer goed te zien. Nu staat
     de foto er heel op en blijft de tekst gewoon leesbaar. */
  .tuur-theme .wsc-agenda-kop__beeld {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: 50% 45%;
  }
  .tuur-theme .wsc-agenda-kop__veil {
    /* Even hoog als de foto, doordat de breedte en de verhouding dezelfde
       zijn. Alleen onderin verloopt hij naar het groen van de band. */
    inset: 0 0 auto;
    height: auto;
    aspect-ratio: 4 / 3;
    background: linear-gradient(180deg, rgba(12,28,18,.12) 0%, rgba(12,28,18,0) 40%, rgba(22,38,29,.45) 80%, var(--tuur-green) 100%);
  }
  .tuur-theme .wsc-agenda-kop__inhoud {
    min-height: 0;
    padding-top: clamp(16px, 4vw, 26px);
    padding-bottom: clamp(20px, 5vw, 32px);
  }
}

/* --------------------------------------------------------------------------
   Wit op wit. De modules gaan uit van een gekleurd accent met contrasterende
   inkt; op dit donkere thema is het accent juist bijna wit, net als de inkt.
   Waar een module die twee combineert valt de tekst weg. Het duidelijkste
   geval is het minteken van een geopende vraag in de FAQ.
   -------------------------------------------------------------------------- */
.tuur-theme .wsc-accordion__item.is-open .wsc-accordion__sign,
.tuur-theme .wsc-cat-filter.is-active,
.tuur-theme .wsc-cat-steps__n,
.tuur-theme .wsc-ref-filter.is-active,
.tuur-theme .wsc-ref-card__badge { color: var(--tuur-green-deep); }

/* ==========================================================================
   Drie media, drie vormen.

   Music, Video en Instagram stonden alle drie als een raster van vier op
   dezelfde groene grond. Daardoor leek het één lange herhaling en zei de vorm
   niets over wat je voor je had. Ze krijgen nu elk de vorm die bij het medium
   past, binnen dezelfde taal: hetzelfde groen, dezelfde haarlijnen, dezelfde
   kapitalen.

     Music      een rek: één set op de draaitafel, de rest als lijst
     Video      een affiche: één groot beeld, kleinere ernaast, dieper groen
     Instagram  een stroom: één strip die rechts van het scherm afloopt
   ========================================================================== */

/* ---------- De bronregel, gedeeld ---------------------------------------- */
/* Een haarlijn met rechts waar het vandaan komt en hoeveel het er zijn. Geeft
   de sectie een bovenrand en zegt meteen om welk platform het gaat, zonder er
   een logo bij te hoeven zetten. */
.tuur-bron {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(20px, 3vw, 30px) 0 0;
}
.tuur-bron__lijn { flex: 1 1 auto; height: 1px; background: var(--tuur-line); }
.tuur-theme .tuur-bron__tekst {
  flex: none;
  font-family: var(--wsc-font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tuur-ink-3);
}

/* ---------- Music: het rek ----------------------------------------------- */
.tuur-rek {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-top: clamp(22px, 3vw, 32px);
}

/* De draaitafel. Vierkant zolang er een hoes staat; zodra de speler erin komt
   mag hij zijn eigen hoogte houden. */
.tuur-rek__art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tuur-veil);
}
.tuur-rek__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tuur-rek__art iframe { width: 100%; height: 100%; border: 0; display: block; }
.tuur-rek__art.is-speelt { cursor: default; }

.tuur-rek__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--tuur-green-deep);
  padding-left: 4px;
  transition: transform .2s ease, background .2s ease;
}
.tuur-rek__art:hover .tuur-rek__play,
.tuur-rek__art:focus-visible .tuur-rek__play { background: #fff; transform: translate(-50%, -50%) scale(1.07); }
.tuur-rek__art.is-speelt .tuur-rek__play { display: none; }

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

.tuur-rek__onder { margin-top: 14px; }
.tuur-theme .tuur-rek__titel {
  font-family: var(--wsc-font-head); font-weight: 800;
  font-size: clamp(18px, 2.1vw, 22px); line-height: 1.2;
  letter-spacing: -.015em; margin: 6px 0 5px; text-wrap: pretty;
}
.tuur-theme .tuur-rek__meta {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 13px; color: var(--tuur-ink-3); margin: 0;
}
.tuur-rek__duur { margin-left: auto; font-variant-numeric: tabular-nums; flex: none; }

/* De rechterkolom: de lijst met de knoppen eronder. Ze horen bij elkaar, dus
   ze staan in dezelfde kolom; onder de hele sectie zouden ze onder de hoes
   links hangen en bij de draaitafel lijken te horen. */
.tuur-rek__kolom { display: flex; flex-direction: column; min-width: 0; }
/* Dichter op de lijst dan wanneer de voet onder de hele sectie stond: hij sluit
   nu aan op de laatste haarlijn in plaats van een nieuw blok te beginnen. */
.tuur-rek__kolom .tuur-sc__acties {
  margin-top: clamp(18px, 2.4vw, 26px);
  gap: clamp(14px, 2.2vw, 26px);
}
/* In een smallere kolom is het woordmerk sneller te groot voor één regel; iets
   kleiner houdt de voet op één regel naast de knop. */
.tuur-rek__kolom .tuur-sc__sessions img { height: 40px; }
/* Onder elkaar heeft het woordmerk zijn eigen scheidingslijn en dus lucht
   nodig; de krappere tussenruimte hierboven geldt alleen naast elkaar. Deze
   regel staat bewust ná die van hierboven: een mediaquery telt niet mee in de
   specificiteit, dus wint anders gewoon de laatste. */
@media (max-width: 640px) {
  .tuur-rek__kolom .tuur-sc__acties { gap: 20px; }
}

/* De lijst ernaast. Haarlijnen tussen de regels, duur rechts uitgelijnd: zo
   lees je in één blik hoe lang iets duurt, en dat is bij een set het eerste
   wat iemand wil weten. */
.tuur-rek__lijst {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--tuur-line);
}
.tuur-theme .tuur-rij {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: clamp(12px, 1.6vw, 18px);
  align-items: center;
  padding: 12px 10px;
  margin-inline: -10px;
  border-bottom: 1px solid var(--tuur-line);
  text-decoration: none;
  color: var(--tuur-ink);
  transition: background .18s ease;
}
.tuur-theme .tuur-rij:hover,
.tuur-theme .tuur-rij.is-actief { background: var(--tuur-veil); }
.tuur-theme .tuur-rij:focus-visible { outline: 2px solid var(--tuur-mint); outline-offset: -2px; }
.tuur-rij__art { width: 54px; height: 54px; overflow: hidden; background: var(--tuur-veil); }
.tuur-rij__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tuur-rij__tekst { min-width: 0; }
.tuur-rij__titel {
  display: block;
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 15px; line-height: 1.3;
  /* Eén regel: een lijst leest alleen als lijst zolang elke regel even hoog is. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tuur-rij__meta { display: block; font-size: 12px; color: var(--tuur-ink-3); margin-top: 2px; }
.tuur-rij__duur { font-size: 13px; color: var(--tuur-ink-3); font-variant-numeric: tabular-nums; flex: none; }

@media (max-width: 860px) {
  .tuur-rek { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 28px); }
  .tuur-rek__art { max-width: 320px; }
  .tuur-rek__lijst { border-top: 0; }
  /* Eén kolom: dan staat de voet vanzelf onder de lijst en mag hij weer de
     ruimte van een eigen blok krijgen. */
  .tuur-rek__kolom .tuur-sc__acties { margin-top: clamp(22px, 4vw, 30px); }
}
@media (max-width: 520px) {
  .tuur-rek__art { max-width: none; }
  .tuur-theme .tuur-rij { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .tuur-rij__art { width: 46px; height: 46px; }
}

/* ---------- Video: het affiche ------------------------------------------ */
.tuur-theme .tuur-aff__intro { max-width: 58ch; }

.tuur-aff {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: clamp(22px, 3vw, 32px);
}
/* De rechterkolom: het raster met de knoppen eronder. Ze horen bij elkaar en
   staan daarom in dezelfde kolom, net als bij het platenrek van Music. Onder de
   hele sectie zouden ze onder het grote beeld links hangen. */
.tuur-aff__kolom { display: flex; flex-direction: column; min-width: 0; }
.tuur-aff__rest {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  align-content: start;
}

.tuur-aff__beeld {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tuur-veil);
  color: inherit;
  text-decoration: none;
}
.tuur-aff__beeld img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
@media (hover: hover) { .tuur-aff__beeld:hover img { transform: scale(1.03); } }

.tuur-aff__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--tuur-green-deep);
  padding-left: 3px;
  transition: transform .2s ease, background .2s ease;
}
.tuur-aff__beeld--groot .tuur-aff__play { width: 66px; height: 66px; padding-left: 4px; }
.tuur-aff__beeld:hover .tuur-aff__play,
.tuur-aff__beeld:focus-visible .tuur-aff__play { background: #fff; transform: translate(-50%, -50%) scale(1.07); }

.tuur-aff__duur {
  position: absolute; right: 8px; bottom: 8px;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 2px 6px; background: rgba(0, 0, 0, .78); color: #fff;
}

.tuur-aff__tekst { margin-top: 14px; }
.tuur-theme .tuur-aff__titel {
  font-family: var(--wsc-font-head); font-weight: 800;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1.16;
  letter-spacing: -.02em; margin: 6px 0 5px; text-wrap: balance;
}
.tuur-theme .tuur-aff__kleintitel {
  font-family: var(--wsc-font-head); font-weight: 700;
  font-size: 14px; line-height: 1.3; margin: 10px 0 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tuur-theme .tuur-aff__meta { font-size: 13px; color: var(--tuur-ink-3); margin: 0; }
/* Dichter op het raster dan toen de voet onder de hele sectie stond: hij sluit
   nu aan op de laatste rij tegels in plaats van een nieuw blok te beginnen. */
.tuur-aff__meer {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(12px, 2vw, 20px);
  margin-top: clamp(16px, 2.4vw, 24px);
}

@media (max-width: 860px) {
  .tuur-aff { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .tuur-aff__rest { gap: 12px; }
  .tuur-aff__play { width: 40px; height: 40px; }
  .tuur-aff__beeld--groot .tuur-aff__play { width: 54px; height: 54px; }
  .tuur-aff__meer { flex-direction: column; align-items: stretch; }
  .tuur-aff__meer .wsc-btn { display: block; width: 100%; text-align: center; }
}

/* ---------- Instagram: de stroom ---------------------------------------- */
/* Een feed houdt niet op, dus houdt de strip ook niet op bij de kantlijn: hij
   loopt rechts van het scherm af. Dat zegt "er is meer" zonder er een woord
   aan vuil te maken, en het scheelt de tweede rij die er als een blok bij lag.
   De sectie snijdt af, anders krijgt de pagina zelf een schuifbalk. */
.tuur-section--stroom { overflow: hidden; }

@media (min-width: 861px) {
  .tuur-ig-strip {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: clamp(190px, 20vw, 250px);
    gap: clamp(10px, 1.4vw, 16px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Tot de rechterrand van het scherm, plus een stukje eraf zodat de laatste
       tegel half in beeld blijft: dat is het teken dat er meer is. */
    margin-right: calc(50% - 50vw);
    padding-bottom: 4px;
  }
  .tuur-ig-strip::-webkit-scrollbar { display: none; }
  .tuur-ig-tegel { scroll-snap-align: start; }
}

/* De headliner van een aflevering speelt op de pagina zelf, niet op SoundCloud.
   Compacter dan de speler van de aflevering: dat is de hoofdopname, dit is het
   nummer waar de aflevering om draait. */
.tuur-theme .wsc-ep__headliner-speler { margin-top: 12px; }
.tuur-theme .wsc-embed--smal { height: 64px; }
.tuur-theme .wsc-embed--smal.is-geladen { height: 166px; }
.tuur-theme .wsc-embed--smal .wsc-embed__knop {
  /* De basisknop staat in kolom en gecentreerd, voor een groot vlak met een
     foto erachter. Hier is het een regel, dus terug naar een rij. */
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  justify-content: flex-start;
  padding: 0 14px;
  border: 1px solid var(--tuur-line);
  background: var(--tuur-veil);
  text-align: left;
}
.tuur-theme .wsc-embed--smal .wsc-embed__knop:hover { background: var(--tuur-veil-2); }
.tuur-theme .wsc-embed--smal .wsc-embed__play {
  position: static; transform: none;
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tuur-ink); color: var(--tuur-green-deep);
}
.tuur-theme .wsc-embed--smal .wsc-embed__play svg { width: 17px; height: 17px; }
.tuur-theme .wsc-embed--smal .wsc-embed__label {
  position: static; transform: none;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tuur-ink);
  text-align: left; max-width: none; text-wrap: nowrap;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}