/*
Theme Name: GP Whitebox
Theme URI: https://github.com/RobertWValentine/whitebox-site
Description: GeneratePress child theme voor White Box Rodeo (whiteboxrodeo.com). Design-laag: merk-tokens, typografie, kleuren. Functionaliteit hoort in de whitebox-core plugin.
Author: Robert Valentine
Template: generatepress
Version: 0.7.0
*/

/* Merk-tokens White Box Rodeo. Bron: artwork juni 2026 (oranje gemeten uit logo-PNG). */
:root {
  --wbr-black: #060606;
  --wbr-card: #101010;
  --wbr-line: #222222;
  --wbr-white: #ffffff;
  --wbr-muted: #9a9a9a;
  --wbr-orange: #e1560f;
}

/* ============================================================
   Basis (site-breed)
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  background: var(--wbr-black);
  color: var(--wbr-white);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, .wbr-display {
  font-family: Anton, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: .01em;
  color: var(--wbr-white);
}

.wbr-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.wbr-orange { color: var(--wbr-orange); }

/* Knoppen (content + menu-CTA) */
.wbr-sub-row .wp-block-button__link,
.wbr-btn {
  display: inline-block;
  background: var(--wbr-orange);
  color: #000;
  font-weight: 700;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 4px;
  border: 0;
  transition: transform .15s ease, background .15s ease;
}
.wbr-sub-row .wp-block-button__link:hover,
.wbr-btn:hover { background: #ff6a1f; color: #000; transform: translateY(-1px); }

.wbr-sub-row .wbr-ghost .wp-block-button__link,
.wbr-btn-ghost {
  background: transparent;
  border: 1px solid #333;
  color: var(--wbr-white);
  font-weight: 600;
}
.wbr-sub-row .wbr-ghost .wp-block-button__link:hover,
.wbr-btn-ghost:hover { border-color: var(--wbr-orange); color: var(--wbr-orange); background: transparent; }

/* ============================================================
   GP chrome: header / navigatie
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 6, 6, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wbr-line);
}
.inside-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.site-logo img { height: 34px; width: 34px; border-radius: 50%; }
.main-title {
  font-family: Anton, sans-serif;
  font-size: 18px;
  letter-spacing: .06em;
  margin: 0;
}
.main-title a, .main-title a:hover { color: var(--wbr-white); }

.site-header .main-navigation { margin-left: auto; background: transparent; }
.main-navigation .main-nav ul li a {
  color: var(--wbr-white);
  font-size: 14px;
  font-weight: 500;
  padding-left: 14px;
  padding-right: 14px;
}
.main-navigation .main-nav ul li:not(.wbr-menu-btn) a:hover { color: var(--wbr-orange); }
.main-navigation .main-nav ul li.current-menu-item a { color: var(--wbr-orange); }

/* CTA-menu-item als oranje knop */
.main-navigation .main-nav ul li.wbr-menu-btn a {
  background: var(--wbr-orange);
  color: #000;
  font-weight: 700;
  border-radius: 4px;
  padding: 10px 20px;
  margin-left: 14px;
  line-height: normal;
}
.main-navigation .main-nav ul li.wbr-menu-btn a:hover { background: #ff6a1f; }

/* Mobiel menu-toggle */
.main-navigation .menu-toggle { color: var(--wbr-white); background: transparent; }
@media (max-width: 768px) {
  .main-navigation .main-nav { background: var(--wbr-black); }
  .main-navigation .main-nav ul li.wbr-menu-btn a { margin-left: 0; border-radius: 0; }
}

/* ============================================================
   GP chrome: footer
   ============================================================ */
.site-footer { border-top: 1px solid var(--wbr-line); background: var(--wbr-black); }
.site-info { color: var(--wbr-muted); font-size: 14px; padding: 32px 24px; }
.site-info a { color: var(--wbr-muted); }
.site-info a:hover { color: var(--wbr-orange); }
.wbr-footer-links { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-bottom: 14px; }
.wbr-footer-links a { font-weight: 600; }
.wbr-footer-copy { margin: 0; text-align: center; }

/* GP zet zijn eigen knopkleur met a.wp-block-button__link:not(.has-background),
   en die greep is sterker dan een losse class. Daarom hier dezelfde greep,
   anders worden onze knoppen grijs. */
.wbr-sub-row a.wp-block-button__link:not(.has-background) {
  background-color: var(--wbr-orange);
  color: #000;
}
.wbr-sub-row a.wp-block-button__link:not(.has-background):hover,
.wbr-sub-row a.wp-block-button__link:not(.has-background):focus {
  background-color: #ff6a1f;
  color: #000;
}
.wbr-sub-row .wbr-ghost a.wp-block-button__link:not(.has-background),
.wbr-sub-row .wbr-ghost a.wp-block-button__link:not(.has-background):hover {
  background-color: transparent;
  color: var(--wbr-white);
}
.wbr-sub-row .wbr-ghost a.wp-block-button__link:not(.has-background):hover { color: var(--wbr-orange); }

.wbr-cta a.wp-block-button__link:not(.has-background) {
  background-color: #000;
  color: #fff;
}
.wbr-cta a.wp-block-button__link:not(.has-background):hover { background-color: #1a1a1a; color: #fff; }
.wbr-cta .wbr-ghost-dark a.wp-block-button__link:not(.has-background) {
  background-color: transparent;
  color: #000;
}
.wbr-cta .wbr-ghost-dark a.wp-block-button__link:not(.has-background):hover {
  background-color: #000;
  color: #fff;
}

/* ============================================================
   GP chrome: content-resets (full-width zwart canvas)
   GP draait op zijn defaults (separate containers, witte content-box).
   Die reset hoort hier en niet in de database, zodat het ontwerp
   meereist met het thema bij een herbouw van productie uit de repo.
   ============================================================ */
/* GP legt op #page een container van 1200px. Onze secties zijn banden die
   tot de rand moeten lopen; de leesbreedte zit al in .wbr-wrap. */
.site.grid-container { max-width: 100%; padding: 0; }
.site-content { display: block; }
.content-area, .site-main { width: 100%; float: none; }
.separate-containers .site-main { margin: 0; }
.separate-containers .inside-article,
.separate-containers .page-header-image,
.one-container .site-content {
  background-color: transparent;
  padding: 0;
}
.entry-content { margin-top: 0; }


/* ============================================================
   Secties (algemeen)
   ============================================================ */
.wbr-section { padding: 110px 0; }
.wbr-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 44px; }
.wbr-sec-head p { margin: 0; }
.wbr-sec-head h2 { font-size: clamp(40px, 5vw, 64px); margin: 0; }
.wbr-sec-head a { color: var(--wbr-muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.wbr-sec-head a:hover { color: var(--wbr-orange); }

/* ============================================================
   Hero
   ============================================================ */
.wbr-hero { min-height: 100svh; display: flex; align-items: center; position: relative; padding: 60px 0; }
.wbr-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; width: 100%; }
.wbr-kicker {
  color: var(--wbr-orange);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 18px;
}
.wbr-hero h1 { font-size: clamp(64px, 9vw, 128px); margin: 0; }
.wbr-hero h1 .wbr-boxed { display: inline-block; border: 4px solid var(--wbr-white); padding: 0 16px; margin-top: 8px; }
.wbr-lead { color: var(--wbr-muted); font-size: 18px; max-width: 46ch; margin: 26px 0 30px; }
.wbr-label {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wbr-muted);
  margin-bottom: 2px;
}
.wbr-sub-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.wbr-sub-row .wp-block-button { margin: 0; }

.wbr-platy { position: relative; }
.wbr-platy .wp-block-image, .wbr-platy figure { margin: 0; }
.wbr-platy img {
  width: 118%;
  max-width: none;
  filter: drop-shadow(0 0 60px rgba(225, 86, 15, .10));
  clip-path: inset(0 100% 0 0);
  animation: wbr-reveal 1.5s ease-out .35s forwards;
}
@keyframes wbr-reveal { to { clip-path: inset(0 0 0 0); } }

.wbr-scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--wbr-muted);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0;
}

/* ============================================================
   Marquee
   ============================================================ */
.wbr-marquee {
  border-top: 1px solid var(--wbr-line);
  border-bottom: 1px solid var(--wbr-line);
  overflow: hidden;
  padding: 18px 0;
  background: #0a0a0a;
}
.wbr-marquee-track { display: flex; gap: 48px; white-space: nowrap; animation: wbr-scroll 28s linear infinite; width: max-content; }
.wbr-marquee-track span {
  font-family: Anton, sans-serif;
  font-size: 30px;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px #555;
}
.wbr-marquee-track span.wbr-hl { color: var(--wbr-orange); -webkit-text-stroke: 0; }
@keyframes wbr-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .wbr-marquee-track { animation: none; }
  .wbr-platy img { animation: none; clip-path: none; }
}

/* ============================================================
   Episodes bento
   ============================================================ */
.wbr-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wbr-ep {
  background: var(--wbr-card);
  border: 1px solid var(--wbr-line);
  border-radius: 8px;
  padding: 28px;
  position: relative;
  transition: border-color .2s, transform .2s;
}
.wbr-ep:hover { border-color: var(--wbr-orange); transform: translateY(-3px); }
.wbr-ep.wbr-feature { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; }
/* Zolang er maar een aflevering is, vult de featured kaart de hele rij. Anders
   blijven twee van de drie kolommen leeg en leest de bento als een gat. Vervalt
   vanzelf zodra er een tweede episode-kaart bij komt. */
.wbr-bento > .wbr-ep:only-child { grid-column: 1 / -1; }
.wbr-num {
  font-family: Anton, sans-serif;
  font-size: 64px;
  color: transparent;
  -webkit-text-stroke: 1px #3a3a3a;
  line-height: 1;
  margin: 0;
}
.wbr-ep.wbr-feature .wbr-num { font-size: 96px; -webkit-text-stroke: 1px var(--wbr-orange); }
.wbr-ep h3 { font-size: 24px; margin: 14px 0 10px; }
.wbr-ep.wbr-feature h3 { font-size: 36px; }
.wbr-ep p { color: var(--wbr-muted); font-size: 15px; }
.wbr-ep .wbr-meta { margin-top: 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #666; }
.wbr-ep .wbr-play {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #333;
  display: grid;
  place-items: center;
  transition: all .2s;
}
.wbr-ep:hover .wbr-play { background: var(--wbr-orange); border-color: var(--wbr-orange); }
.wbr-ep .wbr-play svg { fill: #fff; margin-left: 2px; }
.wbr-player-embed { margin-top: 24px; border-radius: 6px; overflow: hidden; background: #000; }
.wbr-player-embed iframe { width: 100%; height: 190px; border: 0; display: block; }

/* ============================================================
   Mission
   ============================================================ */
.wbr-mission {
  position: relative;
  text-align: center;
  background: #0a0a0a;
  border-top: 1px solid var(--wbr-line);
  border-bottom: 1px solid var(--wbr-line);
  overflow: hidden;
}
.wbr-mission .wbr-watermark {
  position: absolute;
  inset: auto -8% -18% auto;
  width: 62%;
  opacity: .06;
  pointer-events: none;
  margin: 0;
}
.wbr-mission .wbr-watermark img { width: 100%; }
.wbr-mission blockquote {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.08;
  max-width: 20ch;
  margin: 0 auto;
  border: 0;
  padding: 0;
  background: transparent;
}
.wbr-mission blockquote p { margin: 0; line-height: 1.08; }
.wbr-mission blockquote em { font-style: normal; color: var(--wbr-orange); }
.wbr-mission .wbr-mission-sub { color: var(--wbr-muted); max-width: 62ch; margin: 28px auto 0; font-size: 17px; }

/* ============================================================
   Hosts
   ============================================================ */
.wbr-hosts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wbr-host { background: var(--wbr-card); border: 1px solid var(--wbr-line); border-radius: 8px; overflow: hidden; }
.wbr-host .wbr-photo {
  height: 320px;
  display: grid;
  place-items: center;
  position: relative;
  background: linear-gradient(135deg, #181818 0%, #0c0c0c 100%);
}
.wbr-host .wbr-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 55%, rgba(225, 86, 15, .18));
}
.wbr-host .wbr-photo span {
  font-family: Anton, sans-serif;
  font-size: 84px;
  color: transparent;
  -webkit-text-stroke: 1.5px #6a6a6a;
}
/* Uitgeknipte hostfoto's uit de one-pager: staand, op de bodem van het kader. */
.wbr-host .wbr-photo img {
  position: relative;
  z-index: 1;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  align-self: end;
}
.wbr-host .wbr-info { padding: 24px 28px 30px; }
.wbr-host h3 { font-size: 26px; margin: 0; }
.wbr-host .wbr-role {
  color: var(--wbr-orange);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 6px 0 12px;
}
.wbr-host .wbr-info p { color: var(--wbr-muted); font-size: 15px; }

/* ============================================================
   CTA
   ============================================================ */
.wbr-cta { background: var(--wbr-orange); color: #000; text-align: center; padding: 90px 24px; }
.wbr-cta h2 { font-size: clamp(40px, 5.6vw, 72px); max-width: 18ch; margin: 0 auto 18px; color: #000; }
.wbr-cta p { font-weight: 500; max-width: 52ch; margin: 0 auto 32px; color: #000; }
.wbr-cta .wp-block-buttons { display: flex; justify-content: center; }
.wbr-cta .wp-block-button { margin: 0; }
.wbr-cta .wp-block-button__link { background: #000; color: #fff; font-weight: 700; border-radius: 4px; padding: 10px 20px; }
.wbr-cta .wp-block-button__link:hover { background: #1a1a1a; transform: translateY(-1px); }

/* ============================================================
   Scroll-reveal
   ============================================================ */
.wbr-fade { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.wbr-fade.wbr-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wbr-fade { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Generieke content-pagina (about, be-a-guest, contact, legal)
   ============================================================ */
.wbr-page-hero { padding: 150px 0 20px; }
.wbr-page-hero h1 { font-size: clamp(52px, 7vw, 100px); margin: 8px 0 0; }
.wbr-page-hero .wbr-lead { margin-top: 22px; }

/* Contact-kaarten */
.wbr-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wbr-contact-card {
  background: var(--wbr-card);
  border: 1px solid var(--wbr-line);
  border-radius: 8px;
  padding: 32px 28px;
  transition: border-color .2s, transform .2s;
}
.wbr-contact-card:hover { border-color: var(--wbr-orange); transform: translateY(-3px); }
.wbr-contact-card h3 { font-size: 22px; margin: 0 0 12px; }
.wbr-contact-card p { color: var(--wbr-muted); font-size: 15px; margin: 0 0 8px; }
.wbr-contact-card a { color: var(--wbr-orange); }

/* ============================================================
   Episode-archief (/episodes/)
   ============================================================ */
.wbr-archive { padding-top: 140px; }
.wbr-archive-head { margin-bottom: 56px; }
.wbr-archive-head h1 { font-size: clamp(52px, 7vw, 96px); margin: 8px 0 0; }
.wbr-archive-head .wbr-lead { margin: 20px 0 0; }

.wbr-archive-grid { grid-template-columns: repeat(3, 1fr); }
/* Klikbare kaart: hele kaart is een link */
.wbr-ep-link { display: block; color: inherit; }
.wbr-ep-link:hover { color: inherit; }
.wbr-ep-link h3 { transition: color .2s; }
.wbr-ep-link:hover h3 { color: var(--wbr-orange); }

.wbr-empty {
  border: 1px solid var(--wbr-line);
  border-radius: 8px;
  background: var(--wbr-card);
  padding: 56px 32px;
  text-align: center;
}
.wbr-empty p { color: var(--wbr-muted); font-size: 18px; margin: 0 0 22px; }

.wbr-pagination { margin-top: 48px; }
.wbr-pagination .nav-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wbr-pagination a, .wbr-pagination .current {
  border: 1px solid var(--wbr-line);
  border-radius: 4px;
  padding: 8px 14px;
  font-weight: 600;
  color: var(--wbr-white);
}
.wbr-pagination a:hover { border-color: var(--wbr-orange); color: var(--wbr-orange); }
.wbr-pagination .current { background: var(--wbr-orange); color: #000; border-color: var(--wbr-orange); }

/* ============================================================
   Episode-detail (single)
   ============================================================ */
.wbr-episode { padding: 140px 0 110px; }
.wbr-episode .wbr-wrap { max-width: 820px; }
.wbr-back {
  display: inline-block;
  color: var(--wbr-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 28px;
}
.wbr-back:hover { color: var(--wbr-orange); }
.wbr-episode-num {
  font-family: Anton, sans-serif;
  font-size: 44px;
  color: transparent;
  -webkit-text-stroke: 1px var(--wbr-orange);
  line-height: 1;
  margin: 0 0 10px;
}
.wbr-episode-title { font-size: clamp(36px, 5vw, 60px); margin: 0 0 20px; }
.wbr-episode-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: var(--wbr-muted);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.wbr-episode-meta a { color: var(--wbr-orange); }
.wbr-episode-player { margin: 0 0 28px; }
.wbr-episode-player iframe { height: 180px; }
.wbr-episode-subscribe { margin: 0 0 48px; }

/* Leesbare long-form op donkere achtergrond: shownotes, timestamps, transcript */
.wbr-prose { font-size: 17px; line-height: 1.75; color: #d8d8d8; }
.wbr-prose > * + * { margin-top: 1.1em; }
.wbr-prose h2 { font-size: 28px; margin: 1.8em 0 .6em; color: var(--wbr-white); }
.wbr-prose h3 { font-size: 21px; margin: 1.6em 0 .5em; color: var(--wbr-white); }
.wbr-prose a { color: var(--wbr-orange); text-decoration: underline; text-underline-offset: 3px; }
.wbr-prose ul, .wbr-prose ol { padding-left: 1.4em; }
.wbr-prose li + li { margin-top: .4em; }
.wbr-prose blockquote {
  border-left: 3px solid var(--wbr-orange);
  padding-left: 20px;
  color: var(--wbr-muted);
  font-style: italic;
}
.wbr-prose code {
  background: var(--wbr-card);
  border: 1px solid var(--wbr-line);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .9em;
}
/* Timestamp-links (bv. "00:14:32 — onderwerp") krijgen een subtiele chip-stijl */
.wbr-prose .wbr-ts {
  font-variant-numeric: tabular-nums;
  color: var(--wbr-orange);
  font-weight: 600;
}

.wbr-episode-topics {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--wbr-line);
  color: var(--wbr-muted);
  font-size: 14px;
}
.wbr-episode-topics a { color: var(--wbr-white); }
.wbr-episode-topics a:hover { color: var(--wbr-orange); }

/* ============================================================
   Launch-badge (hero)
   ============================================================ */
.wbr-launch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--wbr-orange);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  margin: 0 0 20px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wbr-orange);
}
.wbr-launch span {
  background: var(--wbr-orange);
  color: #000;
  border-radius: 999px;
  padding: 3px 10px;
}

/* ============================================================
   Format (home + about): feiten-strip en formatkaarten
   ============================================================ */
.wbr-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--wbr-line);
  border: 1px solid var(--wbr-line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px;
}
.wbr-fact { background: var(--wbr-black); padding: 24px 26px; }
.wbr-fact strong {
  display: block;
  font-family: Anton, sans-serif;
  font-size: 22px;
  letter-spacing: .01em;
  color: var(--wbr-white);
  margin-bottom: 6px;
}
.wbr-fact span { color: var(--wbr-muted); font-size: 14px; }

.wbr-format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wbr-fcard {
  background: var(--wbr-card);
  border: 1px solid var(--wbr-line);
  border-radius: 8px;
  padding: 32px 28px 34px;
  transition: border-color .2s, transform .2s;
}
.wbr-fcard:hover { border-color: var(--wbr-orange); transform: translateY(-3px); }
.wbr-fcard h3 { font-size: 24px; margin: 10px 0 12px; }
.wbr-fcard p { color: var(--wbr-muted); font-size: 15px; margin: 0; }
.wbr-fcard .wbr-num { font-size: 34px; margin: 0; }

.wbr-section-note { color: var(--wbr-muted); font-size: 14px; margin: 0 0 26px; }
.wbr-prose-wide { max-width: 62ch; }

/* ============================================================
   Mission/why-kaarten (about) en aandachtsblokken (partners)
   ============================================================ */
.wbr-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wbr-why-card {
  background: var(--wbr-card);
  border: 1px solid var(--wbr-line);
  border-radius: 8px;
  padding: 34px 30px 36px;
}
.wbr-why-card h3 { font-size: 26px; margin: 8px 0 14px; }
.wbr-why-card p { color: var(--wbr-muted); font-size: 15px; margin: 0; }
.wbr-note { border-left: 3px solid var(--wbr-orange); padding: 4px 0 4px 24px; }
.wbr-note h3 { font-size: 24px; margin: 8px 0 12px; }
.wbr-note p { color: var(--wbr-muted); font-size: 15px; margin: 0; }

/* ============================================================
   Partners: hero en de grid met partnerpakketten
   ============================================================ */
.wbr-partners-hero h1 { font-size: clamp(48px, 6.4vw, 92px); line-height: .95; }
.wbr-grid-section { border-top: 1px solid var(--wbr-line); background: #0a0a0a; }

.wbr-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wbr-tier {
  display: flex;
  flex-direction: column;
  background: var(--wbr-card);
  border: 1px solid var(--wbr-line);
  border-radius: 8px;
  padding: 30px 28px 34px;
  transition: border-color .2s, transform .2s;
}
.wbr-tier:hover { border-color: var(--wbr-orange); transform: translateY(-3px); }
.wbr-tier h3 {
  font-family: Anton, sans-serif;
  font-size: 34px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.wbr-tier-seats {
  color: var(--wbr-orange);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 10px;
}
.wbr-tier-line { color: var(--wbr-white); font-size: 15px; font-weight: 600; margin: 0 0 18px; }
.wbr-tier ul { list-style: none; padding: 0; margin: 0; }
.wbr-tier li {
  position: relative;
  padding-left: 20px;
  color: var(--wbr-muted);
  font-size: 14px;
  line-height: 1.55;
}
.wbr-tier li + li { margin-top: 10px; }
.wbr-tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--wbr-orange);
}
/* Title en Principal krijgen nadruk: de twee schaarse seats */
.wbr-tier-title { border-color: #3a3a3a; background: linear-gradient(160deg, #151515 0%, var(--wbr-card) 60%); }
.wbr-tier-featured { border-color: var(--wbr-orange); }

/* Donkere knop op de oranje CTA-band (tweede actie) */
.wbr-cta .wbr-ghost-dark .wp-block-button__link {
  background: transparent;
  color: #000;
  border: 2px solid #000;
}
.wbr-cta .wbr-ghost-dark .wp-block-button__link:hover { background: #000; color: #fff; }

/* ============================================================
   Mobiel
   ============================================================ */
@media (max-width: 1100px) {
  .wbr-tier-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .wbr-hero { padding-top: 36px; }
  .wbr-archive { padding-top: 110px; }
  .wbr-archive-grid { grid-template-columns: 1fr; }
  .wbr-episode { padding-top: 110px; }
  .wbr-page-hero { padding-top: 110px; }
  .wbr-contact-grid { grid-template-columns: 1fr; }
  .wbr-hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .wbr-platy { order: -1; }
  .wbr-platy img { width: 92%; margin: 0 auto; }
  .wbr-bento { grid-template-columns: 1fr; }
  .wbr-ep.wbr-feature { grid-column: span 1; }
  .wbr-hosts { grid-template-columns: 1fr; }
  .wbr-facts { grid-template-columns: 1fr 1fr; }
  .wbr-format-grid { grid-template-columns: 1fr; }
  .wbr-why-grid { grid-template-columns: 1fr; }
  .wbr-tier-grid { grid-template-columns: 1fr; }
}