/* ==========================================================================
   webinar.twofeetup.com - Ask me AInything met Wouter
   TwoFeetUp huisstijl. Mobile-first. Geen build step, geen framework.
   ========================================================================== */

:root {
  --purple: #414099;
  --purple-dark: #1a1850;
  --blue: #8ed8f8;
  --orange: #faa61a;
  --black: #050034;
  --grey: #f1f2f2;
  --white: #ffffff;

  --ascent: linear-gradient(135deg, #414099 0%, #8ed8f8 100%);

  /*
    Eén bewuste uitzondering op Nunito. Het promptblok bovenaan de pagina moet
    op het eerste oog leesbaar zijn als iets wat iemand in een chatvenster
    typte, niet als bodytekst. Monospace doet dat werk. Nergens anders gebruikt.
  */
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
          'Liberation Mono', monospace;

  --shadow-sm: 0 2px 8px rgba(5, 0, 52, 0.08);
  --shadow-md: 0 4px 20px rgba(5, 0, 52, 0.08);
  --shadow-lg: 0 12px 40px rgba(5, 0, 52, 0.12);

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;

  --wrap: 1100px;
}

/* --------------------------------------------------------------------------
   Reset en basis
   -------------------------------------------------------------------------- */

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

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  /* HARDE REGEL: nooit horizontaal scrollen, op geen enkel viewport. */
  overflow-x: hidden;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
}

h1, h2, h3 {
  margin: 0 0 0.5em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 7vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1rem; }

a { color: var(--purple); }

img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Focus: altijd zichtbaar, nooit weggehaald. */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
  min-width: 0;
}

.wrap.narrow { max-width: 760px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--purple);
  color: var(--white);
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-s) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--radius-s);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Wit op de gradient-hero: hoogste contrast, purple tekst. */
.btn-hero {
  background: var(--white);
  color: var(--purple);
  box-shadow: var(--shadow-md);
  padding: 16px 34px;
  font-size: 1.05rem;
}
.btn-hero:hover { background: var(--grey); }

.btn-header {
  flex: none;
  background: var(--purple);
  color: var(--white);
  padding: 10px 18px;
  font-size: 0.95rem;
  /* Mag nooit over twee regels breken op smalle telefoons. */
  white-space: nowrap;
}
.btn-header:hover { background: #383878; }

.btn-submit {
  width: 100%;
  background: var(--purple);
  color: var(--white);
  padding: 17px 26px;
  font-size: 1.05rem;
  box-shadow: var(--shadow-sm);
}
.btn-submit:hover { background: #383878; }
.btn-submit[disabled] {
  opacity: 0.65;
  cursor: progress;
  transform: none;
}

/* Oranje accent voor de agenda-download: valt op zonder de hoofdactie te zijn. */
.btn-ics {
  background: var(--orange);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-ics:hover { background: #e2940f; }
.btn-ics svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(5, 0, 52, 0.06);
}

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--white); }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  min-width: 0;
}

.header-logo {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
}

.header-logo img {
  height: 30px;
  width: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   De prompt

   Staat bovenaan de pagina en moet in een oogopslag lezen als een prompt:
   monospace, donker vlak, promptteken en een knipperende cursor. Bewust geen
   bodytekst-styling, want dan wordt het gewoon een citaat.

   De tekst mag nooit horizontaal scrollen. Daarom overwrap: anywhere op de
   tekstregel, geen white-space: pre en geen vaste breedte.
   -------------------------------------------------------------------------- */

.prompt-band {
  background: var(--black);
  padding: 28px 0 32px;
}

.prompt {
  margin: 0;
  min-width: 0;
  border: 1px solid rgba(142, 216, 248, 0.28);
  border-radius: var(--radius-m);
  background: var(--purple-dark);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.prompt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(142, 216, 248, 0.18);
  background: rgba(142, 216, 248, 0.07);
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.66);
}

.prompt-glyph {
  display: flex;
  flex: none;
}

.prompt-glyph svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prompt-who {
  min-width: 0;
  overflow-wrap: anywhere;
}

.prompt-tag {
  flex: none;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(250, 166, 26, 0.2);
  /* Oranje tekst mag hier: de ondergrond is donkerpaars, niet licht. */
  color: var(--orange);
  font-weight: 700;
  white-space: nowrap;
}

.prompt-text {
  margin: 0;
  min-width: 0;
  padding: 15px 14px 17px;
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--white);
  overflow-wrap: anywhere;
}

.prompt-caret {
  margin-right: 9px;
  color: var(--blue);
  font-weight: 700;
}

.prompt-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--blue);
  animation: prompt-blink 1.1s steps(1, end) infinite;
}

@keyframes prompt-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .prompt-cursor { animation: none; }
}

.prompt-note {
  margin: 14px 2px 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.62);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--ascent);
  color: var(--white);
  padding: 56px 0 64px;
  overflow: hidden;
}

/*
  Scrim over de Ascent gradient. De gradient loopt naar lichtblauw (#8ed8f8) en
  witte tekst daarop haalt geen leesbaar contrast. Deze donkere sluier houdt de
  gradient zichtbaar en garandeert wel contrast waar de tekst staat.
*/
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    150deg,
    rgba(5, 0, 52, 0.58) 0%,
    rgba(5, 0, 52, 0.40) 55%,
    rgba(5, 0, 52, 0.14) 100%
  );
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
  min-width: 0;
}

.hero-copy { min-width: 0; }

.badge {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
}

.hero h1 {
  margin-bottom: 18px;
  color: var(--white);
  font-weight: 400;
}

.hero-accent {
  font-weight: 700;
  color: var(--blue);
}

.lead {
  max-width: 46ch;
  margin-bottom: 26px;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
}

.hero-facts {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.hero-facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 1rem;
  color: var(--white);
}

.hero-facts svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-facts span { min-width: 0; }

/* Host-kaart: glas op de gradient, geeft diepte zonder ruis. */
.host-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--shadow-lg);
  min-width: 0;
}

@media (prefers-reduced-transparency: reduce) {
  .host-card { background: rgba(5, 0, 52, 0.55); }
}

/*
  Ring om een ring: opgelost.

  Het bronbestand (Brand_Assets/images/employees/Wouter.png) is 500x500 RGBA en
  brengt zijn eigen vormgeving al mee: buiten straal 200px is alles volledig
  transparant, daarbinnen zit een oranje ring van ongeveer 12px (#faa61a, exact
  de TwoFeetUp-oranje) en daarbinnen het portret op wit. De illustratie beslaat
  dus 80 procent van het vierkant, met 10 procent transparante marge rondom.

  De oude regels zetten daar border-radius: 50% en background: wit overheen. Die
  witte achtergrond vulde het hele vierkant en werd door de border-radius tot een
  schijf geknipt met een rand op straal 42px, terwijl de oranje ring van het
  bestand zelf op straal 33,6px ligt. Resultaat: een witte cirkelrand met een
  gat van ruim 8px eromheen, en daarbinnen pas de oranje ring. Precies de dubbele
  ring die niemand bedoeld had.

  Nu: geen border, geen border-radius, geen achtergrond, geen box-shadow en geen
  outline. Het bestand wordt getoond zoals het is, van rand tot rand in zijn
  container. object-fit: contain in plaats van cover, want cover zou de oranje
  ring wegsnijden zodra de container ooit niet precies vierkant is. Doordat de
  marge transparant is, valt er niets te blenden en is er dus ook geen naad: de
  glaskaart schijnt er gewoon doorheen. De container is wel groter gemaakt, zodat
  de zichtbare cirkel even zwaar oogt als eerst.
*/
.host-photo {
  width: 104px;
  height: 104px;
  flex: none;
  object-fit: contain;
}

.host-meta { min-width: 0; }

.host-name {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
}

.host-role {
  margin: 2px 0 0;
  font-size: 0.95rem;
  /* Wit met opacity, niet het lichtblauw: de glaskaart staat op het lichte
     deel van de gradient en blauw op blauw haalt daar geen contrast. */
  color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   Secties
   -------------------------------------------------------------------------- */

.section { padding: 56px 0; }
.section-grey { background: var(--grey); }

/*
  De intro en het formulier delen dezelfde grijze achtergrond en lezen als
  een blok. Daarom hier geen dubbele sectiepadding tussen de twee.
*/
.section-grey + .section-form { padding-top: 0; }
.section-grey:has(+ .section-form) { padding-bottom: 32px; }
.section-form { background: var(--grey); padding-top: 0; }

.section h2 { color: var(--purple); }

.section-lead {
  max-width: 62ch;
  color: rgba(5, 0, 52, 0.82);
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 28px;
  min-width: 0;
}

.card {
  min-width: 0;
  padding: 26px 24px;
  border-radius: var(--radius-m);
  background: var(--white);
  border: 1px solid rgba(5, 0, 52, 0.06);
  box-shadow: var(--shadow-md);
}

.card h3 { color: var(--purple); }

.card p {
  margin: 0;
  color: rgba(5, 0, 52, 0.82);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: var(--radius-m);
  background: rgba(65, 64, 153, 0.15);
}

.card-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--purple);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Doorverwijzing naar de tweede pagina

   Bewust een donkere band tussen twee lichte secties, en de hele kaart is de
   link. Dit mag geen voetnoot zijn: er staat een tweede pagina die de moeite
   waard is en dat moet je zien zonder te zoeken.
   -------------------------------------------------------------------------- */

.over-band {
  background: var(--black);
  padding: 48px 0;
}

.over-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 26px 22px 28px;
  border-radius: var(--radius-l);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: var(--white);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.over-cta:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(142, 216, 248, 0.5);
  transform: translateY(-2px);
}

/* Het bronbestand brengt zijn eigen oranje ring mee: niets eromheen zetten. */
.over-cta-photo {
  width: 116px;
  height: 116px;
  flex: none;
  object-fit: contain;
}

.over-cta-body {
  display: block;
  min-width: 0;
}

.over-cta-kicker {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}

.over-cta-title {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(1.35rem, 4.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}

.over-cta-text {
  display: block;
  max-width: 52ch;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.8);
}

.over-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: var(--radius-s);
  /* Oranje vlak met witte tekst: op zwart het sterkste accent dat we hebben. */
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  line-height: 1.2;
}

.over-cta:hover .over-cta-btn { background: #e2940f; }

.over-cta-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Formulier
   -------------------------------------------------------------------------- */

.form-card {
  min-width: 0;
  padding: 28px 22px 32px;
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.form-card h2 { color: var(--purple); }

.field {
  min-width: 0;
  margin: 0 0 18px;
  border: 0;
  padding: 0;
}

.field label,
.field legend {
  display: block;
  margin-bottom: 7px;
  padding: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--black);
}

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  border: 1.5px solid rgba(5, 0, 52, 0.16);
  border-radius: var(--radius-s);
  background: var(--white);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  color: var(--black);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea {
  min-height: 140px;
  line-height: 1.55;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(5, 0, 52, 0.42);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(65, 64, 153, 0.15);
}

.field input.invalid,
.field textarea.invalid {
  border-color: #c8102e;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 18px;
  min-width: 0;
}

.error {
  min-height: 0;
  margin: 6px 0 0;
  font-size: 0.88rem;
  font-weight: 400;
  color: #c8102e;
}
.error:empty { display: none; }

.error-form {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--radius-s);
  background: rgba(200, 16, 46, 0.08);
}

/* Honeypot: onzichtbaar, maar niet display:none (sommige bots slaan dat over). */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Sessiekeuze (radio's als keuzekaarten)
   -------------------------------------------------------------------------- */

.slots { margin-bottom: 24px; }

.slot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
}

.slot {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

/* Radio blijft bereikbaar voor toetsenbord en screenreader, maar onzichtbaar. */
.slot input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.slot-body {
  display: block;
  min-width: 0;
  padding: 18px 18px 18px 52px;
  border: 2px solid rgba(5, 0, 52, 0.14);
  border-radius: var(--radius-m);
  background: var(--white);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.slot:hover .slot-body { border-color: rgba(65, 64, 153, 0.5); }

.slot-check {
  position: absolute;
  top: 20px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(5, 0, 52, 0.22);
  border-radius: 50%;
  background: var(--white);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.slot-check svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--white);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.slot input:checked ~ .slot-body {
  border-color: var(--purple);
  background: rgba(65, 64, 153, 0.05);
  box-shadow: var(--shadow-sm);
}

.slot input:checked ~ .slot-body .slot-check {
  background: var(--purple);
  border-color: var(--purple);
}

.slot input:checked ~ .slot-body .slot-check svg { opacity: 1; }

.slot input:focus-visible ~ .slot-body {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.slot-time {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1.25;
}

.slot-day {
  display: block;
  margin-top: 1px;
  font-size: 0.95rem;
  color: var(--purple);
  font-weight: 400;
}

.slot-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  color: rgba(5, 0, 52, 0.66);
}

/* --------------------------------------------------------------------------
   Succes
   -------------------------------------------------------------------------- */

.success { text-align: left; }

.success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--purple);
}

.success-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--white);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.success-lead {
  max-width: 56ch;
  font-size: 1.08rem;
  color: rgba(5, 0, 52, 0.85);
}

.success-lead strong {
  font-weight: 700;
  color: var(--purple);
}

/*
  Verschijnt alleen als de server persisted:false meldt. Oranje als
  achtergrondtint op wit (oranje TEKST op wit haalt geen contrast), met
  TwoFeetUp-zwart als tekstkleur.
*/
.success-warning {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-s);
  background: rgba(250, 166, 26, 0.12);
  color: var(--black);
  font-size: 0.95rem;
  text-align: left;
}
.success-warning[hidden] { display: none; }

.success-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.success-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  color: rgba(5, 0, 52, 0.82);
}

.success-list svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 3px;
  fill: none;
  stroke: var(--purple);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.success-list span { min-width: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--black);
  color: var(--white);
  padding: 34px 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.footer-logo {
  height: 30px;
  width: auto;
  object-fit: contain;
  /* Voorkomt dat een flex-kolom het logo uitrekt. */
  align-self: flex-start;
}

.footer-text {
  margin: 0;
  min-width: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
}

.footer-text a {
  color: var(--blue);
  text-decoration: none;
}
.footer-text a:hover { text-decoration: underline; }

/* ==========================================================================
   Pagina 2: /over-wouter

   Deelt bewust de hele basis met de inschrijfpagina (header, hero, secties,
   footer). Alleen wat hier echt nieuw is, staat hieronder.
   ========================================================================== */

/* Terug-link boven de kop. Blauw op de donkere kant van de gradient. */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--blue);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}
.backlink:hover { text-decoration: underline; }

.backlink svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lead-2 { font-size: 1.02rem; }

/* --------------------------------------------------------------------------
   Shorts (YouTube, 9:16)

   Twee verticale video's. Naast elkaar vanaf tablet, gestapeld op mobiel. De
   iframe zit in een wrapper met een vaste 9:16 verhouding en position:
   absolute erin, zodat hij nooit breder wordt dan zijn kolom. Een vaste
   max-width houdt ze op desktop bescheiden: verticale video hoort niet
   beeldvullend te zijn.
   -------------------------------------------------------------------------- */

.shorts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-top: 26px;
  min-width: 0;
}

.short {
  margin: 0;
  min-width: 0;
}

.short-frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--black);
  box-shadow: var(--shadow-md);
}

/* Terugval voor browsers zonder aspect-ratio: 16/9 = 177,78% hoogte. */
@supports not (aspect-ratio: 9 / 16) {
  .short-frame { height: 0; padding-bottom: 177.78%; }
}

.short-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.short-title {
  max-width: 320px;
  margin: 12px auto 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--purple);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Spotify

   Bewust een blok over de volle breedte van de contentkolom. De .wrap eromheen
   levert de marge links en rechts, dus hier alleen width: 100% en geen eigen
   max-width. Zo leest het als een blok en niet als een smal kaartje dat links
   is blijven hangen.
   -------------------------------------------------------------------------- */

.spotify {
  width: 100%;
  max-width: 100%;
  margin: 24px auto 0;
  min-width: 0;
}

.spotify iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 352px;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--grey);
}

/* Terugval als de embed niet laadt: dan verdwijnt de iframe helemaal, zodat er
   geen zwart vlak achterblijft. */
.spotify-failed iframe { display: none; }

.spotify-fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 24px;
  border-radius: var(--radius-m);
  background: var(--grey);
  border: 1px solid rgba(5, 0, 52, 0.06);
  min-width: 0;
}

.spotify-fallback[hidden] { display: none; }

.spotify-fallback-text {
  margin: 0;
  max-width: 52ch;
  color: rgba(5, 0, 52, 0.82);
}

.btn-spotify {
  background: var(--purple);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-spotify:hover { background: #383878; }

.btn-spotify svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Staat de terugval aan, dan heeft die de knop al. Dezelfde link er direct
   onder nog een keer is dan alleen maar herhaling. */
.spotify-failed + .spotify-note { display: none; }

.spotify-note {
  margin: 14px 0 0;
  font-size: 0.92rem;
  color: rgba(5, 0, 52, 0.66);
}

.spotify-note a { font-weight: 700; }

/* --------------------------------------------------------------------------
   Project-kaart
   -------------------------------------------------------------------------- */

.project {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  min-width: 0;
  margin-top: 24px;
  padding: 26px 24px 28px;
  border-radius: var(--radius-m);
  background: var(--white);
  border: 1px solid rgba(5, 0, 52, 0.06);
  box-shadow: var(--shadow-md);
  color: var(--black);
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.project:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.project-body {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
}

/*
  Het icoon van Stella Story. Vierkant bronbestand (512x512), en dat blijft het:
  vaste breedte, height: auto en align-self, zodat het in een flex-kolom niet
  wordt uitgerekt. Op mobiel staat het onder de tekst, vanaf tablet rechts ernaast.
*/
.project-icon {
  display: block;
  width: 84px;
  height: auto;
  flex: none;
  align-self: flex-start;
  object-fit: contain;
}

.project-kicker {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
}

.project-title {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--purple);
}

.project-text {
  display: block;
  margin-top: 6px;
  color: rgba(5, 0, 52, 0.82);
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-weight: 700;
  color: var(--purple);
}

.project:hover .project-link { text-decoration: underline; }

.project-link svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Tegeltje

   Het tegeltje is vierkant (4125x4125) en wordt op zijn eigen verhouding
   getoond: geen crop, geen rand, geen ring. Het bestand brengt zijn eigen
   vormgeving mee.

   De quote stond hier eerst ook nog los naast, maar die staat al op het
   tegeltje zelf. Nu het enige element in de sectie staat het gecentreerd.
   -------------------------------------------------------------------------- */

.tegel {
  margin: 24px auto 0;
  min-width: 0;
  text-align: center;
}

.tegel img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

.tegel figcaption {
  margin-top: 10px;
  font-size: 0.9rem;
  color: rgba(5, 0, 52, 0.66);
}

/* --------------------------------------------------------------------------
   Donkere sectie met de links
   -------------------------------------------------------------------------- */

.section-dark {
  background: var(--black);
  color: var(--white);
}

.section-dark h2 { color: var(--white); }

.dark-lead {
  max-width: 62ch;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  color: rgba(255, 255, 255, 0.88);
}

.linkrow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin: 26px 0 0;
  padding: 0;
  min-width: 0;
}

.linkrow a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}
.linkrow a:hover { text-decoration: underline; }

.linkrow svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Afsluiter met de weg terug
   -------------------------------------------------------------------------- */

.section-close { background: var(--grey); }

/* De naam van het event mag eruit springen in de afsluiter. */
.section-close strong {
  font-weight: 700;
  color: var(--purple);
}

.btn-back {
  margin-top: 8px;
  background: var(--purple);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-back:hover { background: #383878; }

.btn-back svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Vanaf tablet
   -------------------------------------------------------------------------- */

@media (min-width: 620px) {
  .shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Vanaf tablet past het icoon naast de tekst, rechts uitgelijnd. */
  .project {
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }
  .project-icon {
    width: 116px;
    align-self: center;
    margin-left: auto;
  }
  .over-cta {
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding: 28px 30px;
    text-align: left;
  }
  .over-cta-photo { width: 132px; height: 132px; }
  .over-cta-btn { margin-bottom: 0; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .slot-grid { grid-template-columns: 1fr 1fr; }
  .form-card { padding: 36px 34px 40px; }
  .footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 900px) {
  body { font-size: 18px; }
  .hero { padding: 84px 0 92px; }
  .hero-grid {
    grid-template-columns: 1.35fr 0.65fr;
    gap: 48px;
  }
  .host-card { flex-direction: column; text-align: center; padding: 28px 24px; }
  .host-photo { width: 164px; height: 164px; }
  .section { padding: 76px 0; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}