/* ==========================================================================
   Voor ambitieuze ouders (ambitieuze-ouders.html)
   Alleen tokens uit tokens.css. Mobiel eerst.
   ========================================================================== */

/* ---------- Eerlijk over de kansen ---------- */
.odds {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border-radius: var(--radius-block);
}
.odds__intro { display: grid; gap: 1rem; align-content: start; }
.odds__intro .lead { color: var(--muted); }
.odds__numbers { display: grid; gap: 1.75rem; }
@media (min-width: 30em) { .odds__numbers { grid-template-columns: 1fr 1fr; } }
.odds .stat { border-top-color: var(--chalk); }
.odds .stat__value { font-size: clamp(3rem, 2.2rem + 3.2vw, 4.8rem); }
.odds .stat__label { max-width: 16rem; }

.odds__split {
  display: grid;
  gap: 2rem;
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--border);
}
@media (min-width: 48em) { .odds__split { grid-template-columns: 1fr 1fr; gap: 3rem; } }
@media (min-width: 64em) {
  .odds { grid-template-columns: 1fr 1.05fr; column-gap: 4rem; }
  .odds__split { grid-column: 1 / -1; }
}
.odds__col { display: grid; gap: 1rem; align-content: start; }
.odds__col h3 { color: var(--heading); }
.odds__list { display: grid; gap: .7rem; }
.odds__list li { position: relative; padding-left: 1.75rem; }
.odds__list li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .8rem; height: .8rem; border-radius: 50%;
  border: 2px solid var(--muted);
}
.odds__col:not(.odds__col--yes) .odds__list li { color: var(--muted); }
.odds__col--yes .odds__list li { font-weight: 600; }
.odds__col--yes .odds__list li::before { background: var(--chalk); border-color: var(--chalk); }

/* ---------- Vragen waar je mee zit ---------- */
.worries { display: grid; gap: 0 clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 48em) { .worries { grid-template-columns: 1fr 1fr; } }
.worries li {
  display: grid; gap: .5rem; align-content: start;
  padding-block: 1.25rem 1.4rem;
  border-top: 2px solid var(--border-strong);
}
.worries__q {
  font-family: var(--font-h3);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-tracking);
  font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem);
  line-height: 1.3;
  color: var(--heading);
  text-wrap: balance;
}
.worries__ref {
  justify-self: start;
  display: inline-flex; align-items: center; min-height: var(--target);
  margin-block: -.6rem -.8rem;
  font-size: .95rem; font-weight: 700;
}

/* ---------- Thema ---------- */
.course { display: grid; gap: 1rem; counter-reset: none; }
.course__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}
/* Telefoon: het nummer is een pil boven de titel, zoals het modulenummer in de catalogus */
.course__num {
  justify-self: start;
  margin: 1.25rem 1.25rem 0; padding: .22rem .65rem;
  border-radius: var(--radius-tag);
  background: var(--aud-ambitie);
  color: var(--on-aud);
  font-family: var(--font-body); font-weight: 700; font-size: .875rem; line-height: 1.4; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.course__main { display: grid; gap: .6rem; align-content: start; padding: .75rem 1.25rem .4rem; }
.course__main h3 { margin-top: .15rem; }
.course__parts { margin: 0 1.25rem 1.25rem; }
.course__guest { display: flex; gap: .75rem; align-items: center; margin-top: .3rem; font-size: .95rem; }
.course__guest .avatar { width: 2.5rem; height: 2.5rem; }
.course__guest .avatar svg { width: 1.25rem; height: 1.25rem; }

@media (min-width: 48em) {
  .course__item { grid-template-columns: 5.5rem minmax(0, 1fr) minmax(15rem, 19rem); }
  .course__num {
    grid-row: auto; justify-self: stretch;
    display: flex; justify-content: center; align-items: flex-start;
    margin: 0; padding: 1.35rem 0 0; border-radius: 0;
    font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: var(--display-wdth);
    font-size: 2.6rem; line-height: 1; letter-spacing: -.02em;
  }
  .course__main { padding: 1.4rem 1.5rem 1.5rem; }
  .course__parts { margin: 1.4rem 1.5rem 1.4rem 0; padding: 0 0 0 1.5rem; border-top: 0; border-left: 1px solid var(--border); align-content: start; }
}
.course__note { max-width: 46rem; margin-top: 1.5rem; font-size: .95rem; }

/* ---------- Prijs ---------- */
.offer {
  display: grid;
  overflow: hidden;
  border: var(--card-border);
  border-radius: var(--radius-block);
  background: var(--bg);
}
@media (min-width: 48em) { .offer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.offer__price {
  display: grid; gap: 1rem; align-content: start;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--surface);
}
.offer__price h2 { font-size: calc(clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem) * var(--display-scale)); }
.offer__price .plan__amount { font-size: clamp(2.8rem, 2.2rem + 2.4vw, 3.8rem); }
.offer__price .muted { max-width: 24rem; }
.offer__price .actions { margin-top: .5rem; }
.offer__detail { display: grid; gap: 1rem; align-content: start; padding: clamp(1.5rem, 4vw, 2.75rem); }
.offer__club { display: grid; gap: .5rem; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.offer__club p { color: var(--muted); max-width: var(--measure); }

/* Lange samenstellingen (Proeftrainingen, gespreksstarter) mogen afbreken op smalle schermen */
.course__main { min-width: 0; }
.course__main h3, .course__parts li, .worries__q { overflow-wrap: break-word; hyphens: auto; }

:root .worries li { border-top: 1px solid var(--border); }