/* ============================================================
   DrivOlution — craft.css
   Ronde 4: designkwaliteit. Eén type-schaal, één spacing-schaal,
   strikte rollen per kleur, rustiger elevatie en nette states.
   Laadt als laatste en overschrijft alleen maatvoering en detail,
   nooit de huisstijlkleuren zelf. Werkkopie, niet publiceren.
   ============================================================ */

:root {
  /* ---- Type: modulaire schaal, vloeiend van mobiel naar desktop ---- */
  --fs-hero: clamp(30px, 4.4vw, 56px);
  --fs-1:    clamp(27px, 3.0vw, 40px);
  --fs-2:    clamp(24px, 2.4vw, 34px);
  --fs-3:    clamp(20px, 1.9vw, 26px);
  --fs-4:    20px;
  --fs-5:    17px;
  --fs-lead: clamp(16.5px, 1.4vw, 19px);
  --fs-body: 16.5px;
  --fs-sm:   15px;
  --fs-xs:   12.5px;

  /* ---- Ruimte: één schaal, overal dezelfde stappen ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --sp-section: clamp(56px, 7vw, 104px);

  /* ---- Neutralen: geen hard zwart op hard wit ---- */
  --ink: #101018;
  --text: #33333d;
  --muted: #6a6a78;
  --line: #e8e8ef;

  /* ---- Elevatie: één zachte schaduw, van boven ---- */
  --shadow-soft: 0 24px 48px -28px rgba(16, 16, 48, .22);
  --shadow-lift: 0 32px 64px -30px rgba(16, 16, 48, .28);

  /* ---- Rollen per kleur, strikt aangehouden ----
     blauw   = merk en primaire actie
     groen   = in orde, gecheckt, beschikbaar
     paars   = zakelijk en vloot
     amber   = deadline en tijdsdruk                          */
}

/* ------------------------------------------------------------
   1. Type: koppen op de schaal, tekst op leesbare maat
   ------------------------------------------------------------ */
.rd-hero h1 { font-size: var(--fs-hero); letter-spacing: -.02em; line-height: 1.06; max-width: 18ch; }
@media (max-width: 760px) { .rd-hero h1 { line-height: 1.14; letter-spacing: -.01em; } }

.zone__head h2 { font-size: var(--fs-1); letter-spacing: -.015em; }
.section-title,
.planner__head h2,
.subsidy .calc__intro h2,
.dl-card__main h2 { font-size: var(--fs-2); letter-spacing: -.012em; line-height: 1.12; }

.zone--b2b .inhouse h2,
.zone--b2b .drivecoach h2,
.zone--praktisch .included h2,
.loc-picker h2,
.humans h2,
.reminder__card h2,
.contact__title,
.zone__sub { font-size: var(--fs-3); letter-spacing: -.008em; line-height: 1.18; }

.calc__box h3, .nextdates h3, .callcard h3, .contact__card h3 { font-size: var(--fs-4); }
.step h3, .tl-body h3, .module h3, .pmod__body b, .faq-item summary { font-size: var(--fs-5); }

body { font-size: var(--fs-body); color: var(--text); line-height: 1.6; }
.rd-hero__lead, .section-lead, .zone__head p { font-size: var(--fs-lead); line-height: 1.55; }
.rd-hero__lead { max-width: 46ch; }
.section-lead { max-width: 66ch; }
p { text-wrap: pretty; }
h1, h2, h3, .section-title { text-wrap: balance; }

/* Eyebrow als echte kicker: klein, versperd, in hoofdletters */
.rd-eyebrow, .zone__eyebrow, .dl-flag, .proofbar__label {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ------------------------------------------------------------
   2. Ritme: gelijke sectieafstanden, ruimte boven koppen
   ------------------------------------------------------------ */
.section { padding: var(--sp-section) 0; }
.zone > .section:first-child { padding-top: var(--sp-section); }
.zone > .section + .section { padding-top: 0; }
.zone__head { padding-top: var(--sp-section); }
.section-title { margin-bottom: var(--sp-3); }
.section-lead { margin-bottom: var(--sp-6); }
.planner__head, .calc__intro { margin-bottom: var(--sp-6); }

/* ------------------------------------------------------------
   3. Kaarten: hairline of schaduw, niet beide
   ------------------------------------------------------------ */
.pmod, .popcourse, .loc-tile, .proof-card, .review-card, .logo-pill, .segmented button {
  box-shadow: none;
}
.nextdates, .planner__panel, .calc__box, .dl-card { box-shadow: var(--shadow-soft); border-color: rgba(16,16,48,.06); }
.rd-hero__photo { box-shadow: var(--shadow-lift); }
.pmod:has(input:checked) { box-shadow: none; border-color: var(--blue); background: #fbfbff; }

/* Radius met hiërarchie: groot vlak, kaart, bedieningselement */
.pmod, .loc-tile, .review-card, .proof-card, .segmented button, .pp-cost { border-radius: var(--radius-sm); }

/* ------------------------------------------------------------
   4. States: één hover-taal, altijd zichtbare focus
   ------------------------------------------------------------ */
a, button, .btn, .pmod, .loc-tile, .nd-book, .review-card {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.pmod:hover, .loc-tile:hover { transform: translateY(-2px); border-color: #cdcbf2; }
.btn:hover { transform: translateY(-1px); }
:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(56,56,223,.4); outline-offset: 3px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------
   5. Kleurrollen strikt houden
   ------------------------------------------------------------ */
.nd-tag { background: rgba(240,160,32,.16); color: var(--amber-ink); }   /* weekend = planning, geen paars */
.dl-actions .textlink, .rd-hero__cta .textlink { color: var(--blue-dark); }
.zone--b2b .zone__eyebrow { background: rgba(136,68,255,.1); color: var(--purple-dark); }
.pmod__tag.t1 { background: #f1f1f7; color: #4b4b5c; }
.pmod__tag.t2 { background: #f1f1f7; color: #4b4b5c; }
.pmod__tag.t3 { background: #f1f1f7; color: #4b4b5c; }
.pmod input:checked ~ .pmod__meta .pmod__tag { background: rgba(56,56,223,.09); color: var(--blue-dark); }

/* ------------------------------------------------------------
   7. Footer met echte inhoud
   ------------------------------------------------------------ */
.site-footer__top { align-items: flex-start; }
.footer-col h4 { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.footer-locs { display: grid; gap: var(--sp-3); font-size: var(--fs-sm); line-height: 1.45; }
.footer-locs b { display: block; }
.footer-locs span { opacity: .78; }
.footer-cert { font-size: var(--fs-xs); opacity: .7; line-height: 1.6; }

/* ------------------------------------------------------------
   8. Maatvoering die eerder inline stond
   ------------------------------------------------------------ */
.section.pt-tight { padding-top: var(--sp-2); }
.proof-cards { margin-top: var(--sp-5); }
.reviews .section-title, .faq-section .section-title { margin-bottom: var(--sp-6); }
.btn--purple { border-radius: var(--pill); padding: 15px 26px; }
.drivecoach .rd-eyebrow { background: rgba(255,255,255,.12); color: #fff; }

/* ------------------------------------------------------------
   9. Alertbalk over de volle breedte, kicker zonder pil
   ------------------------------------------------------------ */
.alertbar { display: block; padding: 0; max-width: none; }
.alertbar__inner {
  display: flex; align-items: center; gap: var(--sp-4);
  max-width: var(--container); margin: 0 auto; padding: 11px var(--gutter);
}
@media (max-width: 860px) { .alertbar__inner { align-items: flex-start; padding: 10px 18px; } }

.rd-eyebrow {
  background: none; padding: 0; color: var(--blue-dark);
  display: inline-flex; align-items: center; gap: 10px;
}
.rd-eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--blue); border-radius: 2px; flex: none;
}
.drivecoach .rd-eyebrow { background: none; color: rgba(255,255,255,.85); }
.drivecoach .rd-eyebrow::before { background: var(--green); }

/* ------------------------------------------------------------
   10. Verticaal ritme tussen secties met dezelfde achtergrond
   ------------------------------------------------------------ */
.section.deadline { padding-top: 0; }
.faq-section + .zone--help .reminder { padding-top: var(--sp-7); }
.tvband + .contact { padding-top: 0; }

/* ------------------------------------------------------------
   11. Deadlinekaart: kolommen naar de leesbreedte toe
   ------------------------------------------------------------ */
.dl-card { max-width: 1140px; margin-inline: auto; grid-template-columns: minmax(0,1fr) 400px; }
.dl-card__main { padding: var(--sp-7) var(--sp-7) var(--sp-6); }
.dl-card__main p { max-width: 64ch; }
@media (max-width: 980px) { .dl-card { grid-template-columns: minmax(0,1fr); } .dl-card__main { padding: var(--sp-6) var(--sp-5); } }

/* ------------------------------------------------------------
   12. Tikvlakken op mobiel ruim genoeg
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .pagenav__links a { min-height: 40px; display: inline-flex; align-items: center; }
  .nd-book { min-height: 44px; padding-inline: 4px; display: inline-flex; align-items: center; }
  .nd-row { min-height: 60px; }
  .footer-col a, .site-footer__bottom a { display: inline-block; padding: 3px 0; }
}

/* ------------------------------------------------------------
   13. Footer: vier kolommen op desktop
   ------------------------------------------------------------ */
@media (min-width: 1001px) {
  .site-footer__top { grid-template-columns: 1.25fr 1fr 1fr 1.15fr; gap: var(--sp-6); }
}
@media (max-width: 1000px) and (min-width: 641px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}
@media (max-width: 640px) { .site-footer__top { grid-template-columns: 1fr; } }
.site-footer__bottom { flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }

/* ============================================================
   14. LAYOUT-HYGIENE
   Drie dingen strikt maken: de banden, de sectiepadding en de
   binnenmarge van kaarten. Alles op de spacing-schaal.
   ============================================================ */

/* --- 14a. Banden wisselen altijd van achtergrond, geen onzichtbare naden --- */
.zone--proof { background: #fff; }
.faq-section { background: #fafafb; }

/* --- 14b. Sectiepadding: alles op de schaal --- */
.rd-hero { padding: var(--sp-7) 0 var(--sp-6); }
.zone--praktisch .included { padding: var(--sp-7) 0; }
.zone--b2b .inhouse { padding-top: var(--sp-6); }
.zone--b2b .proofbar { padding: var(--sp-2) 0 var(--sp-6); }
.zone--b2b .drivecoach { padding: var(--sp-7) 0; }
.zone--b2b > .section:last-of-type { padding-bottom: var(--sp-8); }
.tvband > .container { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.contact { padding-bottom: var(--sp-9); }
.faq-section + .zone--help .reminder { padding-top: var(--sp-7); }

/* --- 14c. Kaarten: drie maten binnenmarge, één randdikte --- */
/* grote panelen */
.nextdates, .planner__panel, .calc__box, .callcard,
.reminder__card, .contact__card { padding: var(--sp-6); }
.path { padding: var(--sp-6); border-width: 1px; }
.dl-card__main, .dl-side { padding: var(--sp-7); }
/* middelgrote kaarten */
.review-card, .proof-card { padding: var(--sp-5); }
/* compacte rijen */
.pmod { padding: var(--sp-4); }
.loc-tile { padding: var(--sp-4) var(--sp-5); border-width: 1px; }
.pp-cost { padding: var(--sp-4); }
.step { padding: 0; }
.inhouse__deadline { padding: var(--sp-4) var(--sp-5); }
.loc-tile.is-hot { border-color: var(--green); }

/* --- 14d. Formuliervelden: pil voor één regel, kaartradius voor tekstvak --- */
input[type="email"], input[type="text"], input[type="tel"] { border-radius: var(--pill); }
textarea { border-radius: var(--radius-sm); }

@media (max-width: 760px) {
  .dl-card__main, .dl-side { padding: var(--sp-5); }
  .nextdates, .planner__panel, .calc__box, .callcard,
  .reminder__card, .contact__card, .path { padding: var(--sp-5); }
}
.contact .form-card textarea, .field textarea { border-radius: var(--radius-sm); }

/* --- 14e. Planner: kop in de linkerkolom, paneel bovenaan uitgelijnd --- */
.planner__main { min-width: 0; }
.planner__main .planner__head { margin-bottom: var(--sp-5); }
.planner__head h2 { max-width: 26ch; }
@media (min-width: 701px) {
  .planner__modules .pmod:last-child { grid-column: 1 / -1; }
}

/* ============================================================
   15. ÉÉN UITLIJNING
   De pagina mengde gecentreerde en linksuitgelijnde koppen.
   Alles gaat naar dezelfde linkerlijn als de container, want
   wisselende uitlijning is wat een pagina rommelig maakt.
   ============================================================ */
.section-title, .section-lead { text-align: left; margin-left: 0; margin-right: 0; }
.step { text-align: left; padding: 0; }
.step__num { margin-bottom: var(--sp-3); }

.loc-picker { text-align: left; }
.loc-picker h2, .loc-picker p { text-align: left; }

.included h2, .included__lead { text-align: left; margin-left: 0; }
.included__grid { justify-content: flex-start; }

.reviews__head { justify-content: flex-start; }
.proofbar__label { text-align: left; }
.proofbar__logos { justify-content: flex-start; }

.faq { margin-left: 0; max-width: 820px; }

.subsidy__note { text-align: left; }
.tvband > .container { text-align: left; }

/* --- 15b. Deadlinekaart links uitlijnen met de containerlijn --- */
.dl-card { margin-left: 0; margin-right: auto; }
.compare { margin: var(--sp-6) auto 0 0; max-width: 920px; }
.compare__row > div { padding: var(--sp-4) var(--sp-5); }

/* --- 15c. Trainersstrip compacter, geen leeg rechtervlak --- */
.humans__grid { max-width: 940px; gap: var(--sp-6); }
.humans p { max-width: 58ch; }
.avatars img { width: 80px; height: 80px; }

/* --- 15d. FAQ in twee kolommen: kop en hulp links, vragen rechts --- */
.faq-layout { display: grid; grid-template-columns: 360px minmax(0,1fr); gap: var(--sp-8); align-items: start; }
.faq-aside { position: sticky; top: 150px; }
.faq-aside .section-lead { margin-bottom: var(--sp-5); max-width: 34ch; }
.faq-help { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); }
.faq-help a { color: var(--blue); font-weight: 700; }
.faq { max-width: none; }
.faq-item:first-child { border-top: 1px solid var(--line); }
@media (max-width: 980px) {
  .faq-layout { grid-template-columns: minmax(0,1fr); gap: var(--sp-5); }
  .faq-aside { position: static; }
}
/* auto-marges op een grid-item blokkeren het uitrekken, daarom expliciet nul */
.faq-layout > .faq { margin: 0; max-width: none; width: 100%; }

/* --- 15e. Padenblok: min-content mocht de kolom niet oprekken --- */
.paths { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-5); margin-top: var(--sp-6); }
@media (max-width: 860px) { .paths { grid-template-columns: minmax(0,1fr); } }

/* --- 15f. Binnenmarge van de twee volle-breedte kaarten op de schaal --- */
@media (min-width: 761px) {
  .zone--praktisch .included > .container,
  .zone--b2b .drivecoach > .container { padding-inline: var(--sp-6); }
}

/* ============================================================
   16. MICRO-TYPOGRAFIE
   De kleine tekst liep van 11 tot 16 pixels door elkaar. Alles
   naar twee maten: secundair (--fs-sm) en label (--fs-xs).
   ============================================================ */
.tl-time, .tl-body p, .step p, .proof-card p, .nextdates__sub, .nd-where,
.path__price, .path__sub, .loc-sub, .am-chip__txt, .am-chip__txt small,
.calc__line, .calc__list li, .pagenav__links a, .inhouse__deadline,
.subsidy__note, .pp-checks li, .pp-hours, .pp-status, .pp-cost,
.dl-find p, .dl-help, .footer-locs, .footer-col a, .site-footer__bottom a,
.copyright, .who b, .trustbar__item, .alertbar__txt, .hours,
.topbar__phone, .topbar__trust, .reviews__meta small, .compare__feat,
.included__grid .inc-item, .path ul li, .inhouse ul li, .drivecoach ul li { font-size: var(--fs-sm); }

.nd-spots, .live, .src, .hot, .nd-tag, .pmod__tag, .pp-fine,
.calc__note, .footer-cert, .faq-help, .pmod__body small,
.pmod__body em, .who small, .proof-card .who small { font-size: var(--fs-xs); }

/* Displaycijfers op de schaal van de koppen */
.reviews__score { font-size: var(--fs-1); }
.dl-count__num { font-size: var(--fs-hero); }
.pp-hours span, .calc__line.is-total b, .stepper output { font-size: var(--fs-3); }
.proof-card .num { font-size: var(--fs-1); }
.step__num { font-size: var(--fs-5); }

/* Primaire leestekst blijft op bodymaat */
.faq-item p, .review-card blockquote, .dl-card__main p, .zone__head p,
.humans p, .included__lead, .inhouse p, .drivecoach p { font-size: var(--fs-body); }

/* Laatste losse maten naar de schaal */
.pmod__price, .logo-pill, .tl-time, .am-chip__txt b, .copyright,
.calc__field > label, .dl-count__lbl b, .dl-find b, .calc__line span,
.footer-locs b, .site-footer__bottom .spark { font-size: var(--fs-sm); }
.tl-body h3 { font-size: var(--fs-5); }
.tl-body p, .loc-sub, .rd-hero__chip .stars, .live, .src, .hot { font-size: var(--fs-xs); }
.path h2 { font-size: var(--fs-3); }
.path__price strong, .nd-where { font-size: var(--fs-sm); }

/* Restanten met genoeg specificiteit */
.loc-tile .loc-sub, .review-card .src, .nextdates .live, .loc-tile .hot,
.am-chip__txt small span, .footer-brand .copyright { font-size: var(--fs-xs); }
.tvband p b { font-size: inherit; }
.segmented button { font-size: var(--fs-sm); }
.pp-cost small span { font-size: inherit; }

/* ------------------------------------------------------------
   17. Slotzone: twee kaarten op wit, en leesbare contactkop
   ------------------------------------------------------------ */
.zone--help .reminder { background: transparent; padding-bottom: var(--sp-5); }
.zone--help .reminder__card { background: #eafaf3; border-color: #c7efdf; }
.zone--help .callsection { padding-bottom: var(--sp-8); }

.contact::before { background: linear-gradient(90deg, rgba(20,20,28,.72) 0%, rgba(20,20,28,.5) 60%, rgba(20,20,28,.38) 100%); }
.contact__title { max-width: 22ch; }

/* ============================================================
   18. RUST
   De pagina was te vol. Minder banden, minder badges, meer wit.
   ============================================================ */
.zone--praktisch { background: #fff; }
.calc__list li { padding-left: 0; }
.calc__list li::before { content: ""; width: 18px; height: 1px; background: var(--line); margin-right: var(--sp-3); flex: none; position: relative; top: 11px; }

/* --- 18b. Hero rustiger: foto zonder uitstekende hoek, kalm contactblok --- */
.rd-hero h1 { max-width: 20ch; }
.rd-hero__media .nextdates { margin: -64px 0 0; }
.rd-hero__photo { height: 340px; }
.am-chip { background: transparent; border: 0; box-shadow: none; padding: 0; }
.am-chip img { border: 2px solid #fff; }

/* --- 18c. Beschikbaarheid: één rustige stijl in plaats van drie kleuren --- */
.nd-spots { background: #f1f1f7; color: var(--muted); }
.nd-spots.low { background: var(--amber-bg); color: var(--amber-ink); }
.nd-tag { background: #f1f1f7; color: var(--muted); }

/* --- 18d. Mobiel: de datums meteen in beeld, foto is daar decoratie --- */
@media (max-width: 760px) {
  .rd-hero__photo { display: none; }
  .rd-hero__media .nextdates { margin: 0; }
  .rd-hero { padding-top: var(--sp-5); }
  .rd-hero__cta { margin: var(--sp-5) 0 var(--sp-4); }
  /* bellen kan al via de topbalk en de vaste actiebalk onderaan */
  .am-chip { display: none; }
}

/* --- 18e. Vaste actiebalk: één primaire actie, bellen secundair --- */
.sticky-cta .btn--call {
  background: #fff; border: 1px solid var(--line); color: var(--blue);
  box-shadow: 0 8px 20px -12px rgba(16,16,48,.3);
}
.sticky-cta .btn--call svg path { fill: var(--blue); }