/* ==========================================================================
   Voorpagina
   Alleen tokens uit tokens.css.
   ========================================================================== */

/* ---------- Hero: gedeeld. Links de kop en tekst, rechts de video; op smalle schermen de video eronder ---------- */
.home-hero { position: relative; overflow: hidden; text-align: var(--hero-align); }
.home-hero__inner { position: relative; display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); }
@media (min-width: 60em) { .home-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 4vw, 4rem); } }
.home-hero h1 { max-width: 14ch; }
.home-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.home-hero__lead { max-width: 34rem; font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3rem); line-height: 1.5; color: var(--text); }
.home-hero__side { display: grid; gap: 1.5rem; align-content: start; }
.home-hero__makers { max-width: 34rem; font-size: .95rem; color: var(--muted); }
.home-hero__media { min-width: 0; text-align: left; }

/* ---------- Het probleem ---------- */
.home-problem__source { margin-top: 1.5rem; }
.home-problem__trainer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 4rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--border); }
@media (min-width: 60em) { .home-problem__trainer { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.home-problem__statement { max-width: 30ch; font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: var(--display-wdth); letter-spacing: var(--display-tracking); font-size: calc(clamp(1.55rem, 1.15rem + 1.6vw, 2.35rem) * var(--display-scale)); line-height: 1.14; color: var(--heading); text-wrap: balance; }
.home-problem__trainer .stack { max-width: var(--measure); }

/* ---------- Hoe het werkt ---------- */
.home-refer { display: flex; gap: .9rem; align-items: flex-start; max-width: 52rem; margin-top: clamp(2rem, 4vw, 3rem); padding: 1.1rem 1.3rem; border: 2px dashed var(--border-strong); border-radius: var(--radius-card); }
.home-refer svg { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .1rem; color: var(--link); }

/* ---------- Modules ---------- */
.home-modules__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 4rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.home-modules__head .section__head { margin-bottom: 0; }
@media (min-width: 60em) { .home-modules__head { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } }
.home-modules__parts { display: grid; gap: .45rem; list-style: none; font-weight: 600; }
.home-modules__parts li { position: relative; padding-left: 1.3rem; }
.home-modules__parts li::before { content: ""; position: absolute; left: 0; top: .6em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--dot); }
.home-modules__grid { --grid-min: 18rem; }
.home-modules__grid .thumb { aspect-ratio: 2.4 / 1; }
.home-modules__grid .card__body { flex: 1; align-content: start; }
.home-modules__more { margin-top: 2rem; }

/* ---------- Nieuw bij de club ---------- */
.home-welcome { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 60em) { .home-welcome { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; } }
.home-welcome__intro { max-width: 30rem; font-size: 1.15rem; }
.home-welcome__list { gap: .8rem; font-size: 1.05rem; }

/* ---------- Voor wie ---------- */
/* De clubkaart over de hele breedte, gericht op het bestuur; daaronder de drie gebruikers */
.home-aud { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 48em) { .home-aud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-aud__club { grid-column: 1 / -1; } }
@media (min-width: 64em) { .home-aud { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-aud__club { gap: 2rem 4rem; padding: clamp(1.5rem, 3.5vw, 2.75rem); }
@media (min-width: 60em) { .home-aud__club { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.home-aud__main, .home-aud__side { display: grid; gap: 1rem; align-content: start; }
.home-aud__club h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.home-aud__pitch { font-size: 1.2rem; font-weight: 700; line-height: 1.35; }
.home-aud__side { padding-top: 1.25rem; border-top: 2px solid currentColor; }
@media (min-width: 60em) { .home-aud__side { padding-top: 0; padding-left: 2rem; border-top: 0; border-left: 2px solid currentColor; } }
.home-aud__side h4 { font-size: 1.15rem; }
.home-aud__club .source { color: inherit; }
.home-aud__actions { margin-top: .5rem; }

/* ---------- Waarom niet het gratis aanbod ---------- */
.home-why { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 4rem; }
@media (min-width: 60em) { .home-why { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } }
.home-why__intro { max-width: 34rem; }
.home-why__intro p { color: var(--muted); }
.home-why__list { display: grid; list-style: none; border-bottom: 1px solid var(--border); }
.home-why__list li { display: grid; gap: .3rem; padding-block: 1.15rem; border-top: 1px solid var(--border); }
.home-why__list h3 { font-size: 1.25rem; }
.home-why__list p { color: var(--muted); }

/* ---------- Makers ---------- */
.home-makers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 48em) { .home-makers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; } }
.home-maker { display: grid; gap: 1.1rem; align-content: start; padding-top: 1.5rem; border-top: 4px solid var(--border-strong); }
.home-maker > p { max-width: 34rem; color: var(--muted); }
.home-maker__avatar { width: clamp(3.25rem, 2.5rem + 3vw, 4.5rem); height: clamp(3.25rem, 2.5rem + 3vw, 4.5rem); }
.home-maker__avatar svg { width: 2.1rem; height: 2.1rem; }
.home-maker__name { font-size: clamp(1.15rem, 1rem + .7vw, 1.35rem); }
.home-maker__quote .quote__text { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
html[data-todo="hidden"] .home-maker__quote { display: none; }

/* ---------- Prijzen ---------- */
.home-pricing__more { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; margin-top: 1.75rem; }
.home-pricing__more p { max-width: 42rem; color: var(--muted); }

/* ---------- Veelgestelde vragen ---------- */
.home-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 4rem; }
.home-faq .section__head { margin-bottom: 1.5rem; }
@media (min-width: 64em) { .home-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; } }

/* ---------- Demo ---------- */
.home-demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
@media (min-width: 60em) { .home-demo { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: center; } }
.home-demo__text { max-width: 34rem; font-size: 1.15rem; color: var(--muted); }
/* ---------- Afwerking: grote kop links, de video groter rechts op een saliegroen vlak dat rechtsonder uitsteekt ---------- */
:root .home-hero__inner { padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3.5rem, 8vw, 6.5rem); }
@media (min-width: 60em) { :root .home-hero__inner { grid-template-columns: minmax(0, .92fr) minmax(0, 1.2fr); } }
:root .home-hero h1 { font-size: clamp(2.6rem, 1.2rem + 4vw, 4.9rem); line-height: 1.02; max-width: 12ch; }
/* De kop eindigt met de rode punt van het woordbeeld. Een leesteken, dus hij breekt nooit los van het laatste woord; schermlezers slaan hem over. */
.home-hero h1::after { content: "."; content: "." / ""; color: var(--dot); }
:root .home-hero__lead { font-size: clamp(1.15rem, 1.06rem + .45vw, 1.35rem); line-height: 1.55; }
:root .home-hero__copy { gap: 1.75rem; margin-top: clamp(1.25rem, 2.5vw, 2rem); }
:root .home-hero__media { position: relative; padding: 0 clamp(.75rem, 2vw, 1.5rem) clamp(.75rem, 2vw, 1.5rem) 0; }
:root .home-hero__media::before { content: ""; position: absolute; inset: 16% 0 0 14%; border-radius: 28px; background: var(--hero-backplate); }
:root .home-hero__media .vid { position: relative; }
:root .home-hero__media .vid__frame { border: 0; border-radius: 20px; box-shadow: var(--shadow-soft); }

:root .home-refer { border: 0; background: var(--surface); }
:root .home-welcome { background: var(--surface); }
:root .home-modules__grid .thumb { aspect-ratio: 16 / 9; }
:root .home-maker { gap: 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
:root .home-maker .quote__by { gap: 1.1rem; }
:root .home-maker__avatar { width: clamp(5rem, 4rem + 2vw, 6.5rem); height: clamp(5rem, 4rem + 2vw, 6.5rem); border-radius: var(--radius-card); background: #DCEFE2 url("../img/zijlijn-maker-psycholoog.svg") center bottom / auto 80% no-repeat; }
:root .home-maker__avatar svg { display: none; }
:root .home-maker__name { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
:root .home-aud__side { border-color: rgba(14, 23, 19, .18); }
:root .home-demo { border: 1px solid var(--border); }

/* Video onder de kop (smalle schermen): even breed als de tekst, het saliegroene vlak loopt rechts door tot de rand van het scherm */
@media (max-width: 59.99em) {
  :root .home-hero__media { padding: 0 0 1rem; }
  :root .home-hero__media::before { inset: 18% -1rem 0 12%; border-radius: 24px 0 0 24px; }
}

/* De link onder Wie het maakt naar de pagina Over ons */
:root .home-makers__meer { margin-top: 2rem; font-weight: 700; }