/* Homepage: alleen wat site.css niet al heeft. */

/* ---------- Hero ---------- */
/* De foto is staand: in een liggend kader blijft alleen een band over. Kies de band met de onderkant van het spatbord,
   de velg en de föhn op het snijpapier, en laat de ken burns daar naartoe inzoomen in plaats van naar het lege groene vlak. */
.hero-media img{object-position:50% 76%;transform-origin:60% 78%}

/* ---------- Intro ---------- */
.intro p{max-width:58ch}

/* ---------- Hero-zoeker ---------- */
.search select:disabled{cursor:default;color:var(--ink-2);opacity:1}
.search .btn{min-width:15.5em}

/* ---------- Keuzehulp-teaser ---------- */
.kh-teaser{padding-bottom:clamp(90px, 10vw, 150px)}
.kh{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr);gap:clamp(32px, 5vw, 88px);align-items:center;padding:clamp(28px, 4.6vw, 68px);background:var(--sage-tint)}
.kh .eyebrow{color:var(--olive)}
.kh .h2{margin-top:12px;max-width:13ch}
.kh-kop > p:last-child{margin-top:18px;max-width:38ch;font-size:1.0625rem;line-height:1.6;color:var(--ink-2)}
.kh-v{display:grid;gap:6px;margin-bottom:20px;font-size:clamp(1.25rem, 1.8vw, 1.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.kh-v span{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.kh-opties{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kh-opties a{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:14px;height:100%;min-height:76px;padding:18px 20px;background:var(--paper);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;line-height:1.3;transition:border-color .35s var(--ease-quart)}
.kh-opties a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.kh-opties a:hover,.kh-opties a:focus-visible{border-color:var(--sage-deep)}
.kh-opties a:hover::before,.kh-opties a:focus-visible::before{transform:scaleX(1)}
.kh-opties svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .55s var(--ease)}
.kh-opties a:hover svg,.kh-opties a:focus-visible svg{transform:translateX(4px)}
.kh-alles{margin-top:18px;font-size:.9375rem}
.kh-alles a{font-weight:600;text-underline-offset:3px;color:var(--ink-2)}
.kh-alles a:hover{color:var(--ink)}

/* ---------- Feature-foto ---------- */
.feature .px img{object-position:50% 62%}

/* ---------- Agenda ---------- */
.agenda .h2:focus{outline:none}
.agenda-meer{margin-top:18px;display:flex;justify-content:flex-end}

/* ---------- Pijl-link (tekstlink met beweging, zelfde taal als de tegels) ---------- */
.pijl-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;font-size:1rem;letter-spacing:-.005em;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/100% 1px no-repeat;transition:background-size .45s var(--ease)}
.pijl-link:hover{background-size:0 1px;background-position:100% calc(100% - 8px)}
.pijl-link svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .55s var(--ease)}
.pijl-link:hover svg{transform:translateX(5px)}

/* ---------- Nazorg ---------- */
.nz{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);gap:clamp(40px, 6vw, 104px);align-items:center;padding-bottom:clamp(90px, 10vw, 150px)}
.nz .h2{max-width:13ch}
.nz-regel{margin-top:24px;max-width:40ch;font-size:clamp(1.125rem, 1.5vw, 1.3125rem);font-weight:600;line-height:1.55}
.nz-sub{margin-top:14px;max-width:46ch;font-size:1.0625rem;line-height:1.65;color:var(--ink-2)}
.nz-tekst .pijl-link{margin-top:22px}
.nz-stage{position:relative;overflow:hidden;display:grid;place-items:center;min-height:clamp(520px, 44vw, 640px);padding:clamp(40px, 5vw, 72px) clamp(20px, 4vw, 56px);background:var(--shade)}
.nz-stage::after{content:"";position:absolute;inset:0;background:oklch(0.17 0.01 120 / .5);pointer-events:none}
.nz-stage .px{inset:-10% 0}
.nz-stage .px img{object-position:50% 40%}
.nz-stage > [data-nazorg-chat]{position:relative;z-index:1;width:100%;display:grid;justify-items:center}

/* ---------- Cadeau ---------- */
.gift p.gift-regel{margin-top:10px;font-size:.9375rem;line-height:1.6;opacity:.92}

/* ---------- Stappen ---------- */
.step p + p{margin-top:6px}

/* ---------- Instructeurs + vak-kaart ---------- */
.team-grid{display:grid;grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);gap:21px;align-items:stretch}
.team-grid > [data-instructeurs]{display:grid}
.person.alt .alt-intro{margin-bottom:0}
.person.alt .loon{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--olive-line);font-size:1.0625rem;font-weight:700;line-height:1.45;color:var(--on-dark)}
.person.alt .bron{margin:10px 0 28px;font-size:.8125rem;line-height:1.5;color:oklch(0.92 0.012 120)}

/* Zolang er geen portret is, toont de kaart een fotovak in dezelfde arcering als de lege reviews:
   je ziet dat hier een foto komt, in plaats van een kaart die half leeg oogt. */
.team .person .avatar{position:relative;top:auto;right:auto;align-self:stretch;width:auto;height:auto;aspect-ratio:16/9;margin:-28px -26px 24px;border:0;border-radius:0;background:var(--paper) repeating-linear-gradient(135deg, transparent 0 12px, oklch(0.95 0.003 120) 12px 13px);color:var(--ink-2);display:grid;place-items:center;transition:none}
.team .person:hover .avatar{transform:none}
.team .person .avatar b{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--olive);color:var(--on-dark);font-size:1.375rem;letter-spacing:.04em;box-shadow:0 0 0 6px var(--paper)}
.team .person .avatar small{position:absolute;left:14px;bottom:12px;max-width:none;margin:0;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.team .person .eyebrow{margin:0;padding-right:0}
.team .person h3{padding-right:0}
.team .person p:not(.eyebrow){margin-bottom:24px}

/* ---------- FAQ + route ---------- */
.faq details a{font-weight:600;color:var(--ink);text-underline-offset:3px}
.split .route-blok{grid-template-columns:1fr}

/* ---------- Responsive ---------- */
@media (max-width: 1180px){
  .team-grid{grid-template-columns:1fr}
  .kh{grid-template-columns:1fr}
  .kh .h2{max-width:none}
}
@media (max-width: 900px){
  .nz{grid-template-columns:1fr}
  .nz-stage{margin-inline:calc(-1 * var(--pad));min-height:0}
}
@media (max-width: 760px){
  .hero-sub{margin-top:22px}
  .intro{text-align:left}
  .team .person .avatar{aspect-ratio:5/2}
  .team .person .avatar b{width:72px;height:72px;font-size:1.125rem}
  .search .btn{min-width:0;width:100%}
  .kh{margin-inline:calc(-1 * var(--pad));padding:36px var(--pad)}
  .kh-opties{grid-template-columns:1fr}
  .kh-opties a{min-height:60px;padding:14px 18px}
  .agenda-meer{justify-content:flex-start}
}