/* Typetalent - pagina "Leer blind typen" (/blind-leren-typen/). Laadt na styles.css en gebruikt alleen
   de lettertypes, groottes en diktes die daar al staan (E17). Toetskleuren altijd geel, groen, rood, blauw (E2). */

/* nulstand zonder gewicht, zodat de regels hieronder altijd winnen */
:where(.sp) :where(h3, ul) { margin: 0; }
:where(.sp) :where(ul) { padding: 0; list-style: none; }

/* ---------- Bovenaan: de vraag en de twee routes ---------- */
.sp-start { padding: 10px 0 var(--ruimte); }
.sp-start h1 { max-width: 14em; }
.sp-start .lead { max-width: 24em; }

/* de twee keuzeblokken (.routes / .route) staan in styles.css, gedeeld met de homepage */

/* ---------- Delen en secties ---------- */
.deel { scroll-margin-top: 0; }
.sp-sectie { padding: var(--ruimte) 0; }
.sp-wit { background: var(--wit); }
.sp-papier { background: var(--papier); }
.sp-boter { background: var(--boter); }
.sp-donker { background: var(--inkt); color: var(--papier); }

.thuisrij.thuisrij--klein {
  grid-template-columns: repeat(4, 22px);
  gap: 6px;
  margin: 0 0 20px;
}
.thuisrij--klein .toets { box-shadow: 0 3px 0 var(--r); }

.deel__label {
  color: var(--zacht);
  font: 700 .9375rem/1.3 var(--tekst);
  letter-spacing: .08em;
}
.sp-donker .deel__label { color: var(--geel); }
.deel__label + h2, .deel__label + h1 { margin-top: 10px; }
/* Organisatiepagina: de openingskop is daar de h1, maar ziet eruit als de h2-koppen in dit deel */
.sp-blok__kop h1 { font-size: clamp(1.75rem, 1.1rem + 2.9vw, 3.5rem); line-height: 1.08; }

/* Kop links, tekst rechts (op de telefoon onder elkaar) */
.sp-blok { display: grid; gap: 28px; }
.sp-blok__kop .lead { margin-top: 14px; }
.sp-blok__onder { margin-top: 20px; }
.sp-blok--los { margin-top: 56px; }

.sp-tekst { max-width: 34em; }
.sp-tekst > * + * { margin-top: 1.1em; }
.sp-tekst > .sp-tussenkop { margin-top: 44px; }
.sp-tussenkop { font: 600 1.4375rem/1.2 var(--kop); text-wrap: balance; }

.sp-nadruk {
  font-size: clamp(1.1875rem, 1.08rem + .5vw, 1.4375rem);
  line-height: 1.4;
  text-wrap: pretty;
}
.sp-intro {
  font-size: clamp(1.1875rem, 1.08rem + .5vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.4;
}
.sp-groot {
  font-size: clamp(1.3125rem, 1rem + 1.45vw, 2rem);
  font-weight: 500;
  line-height: 1.42;
  text-wrap: pretty;
}

.sp-h2-smal { max-width: 18em; }
.sp-h2-breed { max-width: 24em; }

/* Grote zin met een toelichting eronder */
.sp-statement h2 { max-width: 18em; }
.sp-statement .sp-groot { margin-top: 22px; max-width: 30em; }

/* ---------- "...verandert alles:" drie punten met een toets (de .punt komt uit styles.css) ---------- */
.alles { display: grid; margin-top: 36px; border-bottom: 1px solid var(--lijn); }

/* Aanmeldknop onder een lijst */
.sp-aanmeld, .sp-tekst > .sp-aanmeld { margin-top: 36px; }

/* ---------- Lijsten met een toets ervoor (de .punt komt uit styles.css) ---------- */
.lijst { border-bottom: 1px solid var(--lijn); }
.aanbod { display: grid; margin-top: 36px; border-bottom: 1px solid var(--lijn); }
.aanbod .punt { padding-bottom: 26px; }
.aanbod .punt strong {
  display: inline-block;
  margin-bottom: 4px;
  font: 600 1.4375rem/1.2 var(--kop);
  text-wrap: balance;
}

/* ---------- Over mij: tekst links, foto en filmpje rechts (op de telefoon eronder) ---------- */
.juf { display: grid; gap: 40px; margin-top: 36px; }
.juf__beeld { display: grid; gap: 28px; max-width: 520px; }
.juf .portret { max-width: none; }
.sp-lach { padding-top: 6px; }

.video { margin: 0; }
.video__kader {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid var(--inkt);
  border-radius: 12px;
  background: #23282a;
  box-shadow: 0 6px 0 var(--inkt);
}
/* Vimeo: voorplaatje met afspeelknop (zelfde toets als op de homepage); na een klik de speler */
.video__kader iframe { display: block; width: 100%; height: 100%; border: 0; }
.video__kader .film__speel { left: 14px; top: 14px; width: 58px; height: 54px; border-radius: 12px; }
.video__kader .film__speel::after { margin: -10px 0 0 -6px; border-width: 10px 0 10px 17px; }
.video__kader--vierkant { aspect-ratio: 1 / 1; }
.sp-blok__video { margin-top: 28px; }
.video figcaption {
  margin-top: 16px;
  color: var(--zacht);
  font: 600 1rem/1.3 var(--kop);
}

/* ---------- Vragen: open en dicht te klikken ---------- */
.faq { border-bottom: 1px solid var(--lijn); max-width: 34em; }
.faq details { border-top: 1px solid var(--lijn); }
.faq summary {
  position: relative;
  padding: 20px 52px 20px 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(1.1875rem, 1.08rem + .5vw, 1.4375rem);
  line-height: 1.4;
  text-wrap: pretty;
}
.faq summary::-webkit-details-marker { display: none; }
/* het plusje staat op een blauwe toets */
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 19px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 22%;
  background: var(--blauw);
  box-shadow: 0 3px 0 var(--blauw-rand);
  color: var(--inkt);
  font: 700 1.25rem/1 var(--tekst);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover::after { background: var(--knop-licht); }
.faq__antwoord { padding: 0 0 26px; }
.faq__antwoord p + p { margin-top: .8em; }

/* ---------- Prijs en aanmelden ---------- */
.prijs {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 22px 34px;
  border: 2px solid var(--inkt);
  border-radius: 14px;
  background: var(--wit);
  box-shadow: 0 7px 0 var(--inkt);
}
.prijs__regel { margin-top: 26px; line-height: 1.3; }
/* Organisatiepagina: blokje zonder kop, dus geen extra ruimte boven de eerste regel */
.prijs > .prijs__regel:first-child { margin-top: 0; }
.prijs__label { display: block; font-size: 1.125rem; }
.prijs__bedrag {
  display: inline-block;
  margin: 8px .12em 0 0;
  padding: 0 .16em;
  border-radius: 6px;
  background: var(--geel);
  font-size: clamp(2.125rem, 1.2rem + 4.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.prijs__btw { font-size: 1.125rem; }
.prijs__knop { margin-top: 30px; }
.sp .prijs__knop { width: 100%; }
/* Particulieren: kies je groep, vier gelijke knoppen onder elkaar op datumvolgorde */
.prijs { scroll-margin-top: 16px; }
.prijs__kies { margin-top: 30px; font-weight: 700; font-size: 1.125rem; line-height: 1.3; }
.prijs__groepen { display: grid; gap: 14px; margin-top: 14px; }
.sp .prijs__groep { display: block; width: 100%; min-height: 44px; padding-left: 14px; padding-right: 14px; }
/* op de telefoon de tijd op een eigen regel onder de datum */
.prijs__groep span { display: block; white-space: nowrap; }

/* Bonusfilmpje bij de prijs: op de telefoon erboven, op breed scherm ernaast */
.prijsrij { display: grid; gap: 36px; max-width: calc(860px + 2 * var(--goot)); }
.prijsrij__film { width: 100%; max-width: 340px; }
.prijsrij .prijs { width: 100%; }

/* ---------- Organisaties ---------- */
.sp-donker h1, .sp-donker h2 { color: var(--wit); }
/* De banner: alleen de vraag, die krijgt alle aandacht */
.sp-banner h1 { max-width: 15em; }

.vraag {
  max-width: 34em;
  padding-left: clamp(20px, 3.4vw, 48px);
  border-left: 6px solid var(--inkt);
  font-size: clamp(1.3125rem, 1rem + 1.45vw, 2rem);
  line-height: 1.42;
  text-wrap: pretty;
}

.sp-kijk {
  font: 600 clamp(1.5625rem, 1.05rem + 2.3vw, 2.875rem)/1.2 var(--kop);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.sp-kijk strong { font-weight: 600; }

.sp-meting .tijdbalk { max-width: 33em; }
.sp-som strong {
  padding: 0 .16em;
  border-radius: 4px;
  background: var(--geel);
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Over Juf Diana: tekst en knop links, het filmpje rechts (op de telefoon eronder) */
.over { display: grid; gap: 32px; }
.over__tekst h2 { margin-bottom: 6px; }
.over__knop .knop { width: 100%; }

/* ---------- Vanaf tablet ---------- */
@media (min-width: 600px) {
  .sp-start { padding-top: 18px; }
  .thuisrij.thuisrij--klein { grid-template-columns: repeat(4, 24px); gap: 7px; }
  .prijs { padding: 40px 40px 44px; }
  .sp .prijs__knop, .over__knop .knop { width: auto; }
  .prijs__groep span { display: inline; }
}

@media (min-width: 800px) {
  .juf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 72px); align-items: start; }
}

@media (min-width: 800px) {
  .aanbod {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 6vw, 96px);
  }
  /* twee kolommen: de onderste lijn hoort onder beide kolommen */
  .aanbod { border-bottom: 0; }
  .aanbod .punt:nth-last-child(-n+2) { border-bottom: 1px solid var(--lijn); }
}

/* ---------- Desktop ---------- */
@media (min-width: 1000px) {
  .sp-start { padding-top: 56px; }
  .sp-start .lead { max-width: 24em; }

  .sp-blok {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  .sp-blok__kop h1, .sp-blok__kop h2 { font-size: clamp(2rem, .9rem + 2.1vw, 2.875rem); }
  /* de kop blijft in beeld staan terwijl je de tekst ernaast leest */
  .sp-blok__kop { position: sticky; top: calc(var(--balk) + 40px); }
  .sp-blok--los { margin-top: 88px; }
  .sp-kijk { font-size: clamp(2rem, .9rem + 2.1vw, 2.875rem); }
  .sp-h2-breed { font-size: clamp(2rem, .9rem + 2.1vw, 2.875rem); max-width: 26em; }
  .sp-groot { font-size: clamp(1.875rem, .6rem + 2vw, 2.375rem); line-height: 1.36; }
  .sp-tussenkop { font-size: clamp(1.625rem, 1rem + 1.5vw, 2.25rem); }
  .sp-tekst > .sp-tussenkop { margin-top: 56px; }

  /* drie kolommen: elke kolom zijn eigen onderste lijn */
  .alles { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); margin-top: 52px; border-bottom: 0; }
  .alles .punt { border-bottom: 1px solid var(--lijn); }
  .sp-aanmeld, .sp-tekst > .sp-aanmeld { margin-top: 44px; }
  .aanbod { margin-top: 52px; }
  .aanbod .punt { padding-bottom: 30px; }

  .juf { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(340px, 31vw, 460px)); gap: clamp(40px, 6vw, 96px); margin-top: 52px; align-items: start; }
  .juf .portret { border-radius: 14px; }

  .faq summary { padding: 24px 60px 24px 0; }
  .faq summary::after { top: 24px; width: 38px; height: 38px; }

  .prijs { padding: 56px 64px 60px; border-radius: 18px; box-shadow: 0 9px 0 var(--inkt); }
  .prijs__bedrag { font-size: clamp(2.375rem, 6.2vw, 5.75rem); }
  .prijs__label, .prijs__btw { font-size: 1.25rem; }
  .prijs__knop { margin-top: 40px; }
  .prijs__kies { margin-top: 40px; font-size: 1.25rem; }
  .prijs__groepen { gap: 18px; margin-top: 16px; }
  .prijsrij {
    max-width: 1440px;
    grid-template-columns: minmax(0, 860px) clamp(260px, 24vw, 340px);
    justify-content: center;
    align-items: center;
    column-gap: clamp(40px, 5vw, 72px);
  }
  .prijsrij .prijs { grid-column: 1; grid-row: 1; margin: 0; }
  .prijsrij__film { grid-column: 2; grid-row: 1; }

  .over {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "tekst video" "knop video";
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 6vw, 96px);
    row-gap: 40px;
    align-items: start;
  }
  .over__tekst { grid-area: tekst; }
  .over__video { grid-area: video; align-self: center; }
  .over__knop { grid-area: knop; }
  .over__tekst h2 { font-size: clamp(2rem, .9rem + 2.1vw, 2.875rem); }
}