/* ============================================================
   Landing Kit — DESKTOP-laag (≥1024px)
   Visuele referentie: superpower.com op desktop.

   Alles in dit bestand staat in één media query. Onder 1024px
   verandert er dus niets: de mobiele pagina blijft exact zoals hij is.

   Laad dit ná kit.css én ná de <style> van de pagina, zodat deze
   regels de laatste stem hebben in de cascade.
   ============================================================ */

/* Enige regel buiten de media query. `display: contents` laat de wrapper
   volledig uit de layout verdwijnen: op mobiel gedragen de kinderen zich
   exact alsof de <div class="offer__buy"> er niet staat. Op desktop wordt
   hij hieronder een echte kolom. */
.offer__buy, .herowrap { display: contents; }

@media (min-width: 1024px) {

  :root { --container: 1200px; }

  /* ---------- Type-schaal ---------- */
  .headline { font-size: 54px; line-height: 1.04; }
  .subhead  { font-size: 20px; max-width: 46ch; }

  /* ---------- Frame: foto-secties zijn afgeronde kaarten met witte marge ---------- */
  .hero, .panel { margin-left: 14px; margin-right: 14px; border-radius: 28px; overflow: hidden; }
  .hero { margin-top: 14px; min-height: calc(100svh - 28px); }

  /* ---------- Nav: uitgelijnd op de container i.p.v. de schermrand ---------- */
  .nav { max-width: var(--container); margin: 0 auto; padding: 24px 20px; }
  .nav__logo { font-size: 26px; }

  /* ---------- Hero: tekstkolom links, ~halve breedte (Superpower) ----------
     De hero-foto is staand (3:4). In een breed, laag kader snijdt een gecentreerde
     cover-crop het hoofd eraf; daarom hoger uitsnijden. Zelfde foto, andere uitsnede. */
  .hero { background-position: center 15%; align-items: center; }   /* kop verticaal in het midden */
  .hero__inner { padding: 0; }
  .hero__inner .container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
  /* Kop breekt af op ~halve schermbreedte i.p.v. door te lopen tot de rechterrand */
  .hero .display { font-size: 72px; max-width: 620px; }
  .hero__sub { max-width: 44ch; font-size: 20px; margin: 22px 0 30px; }
  .hero__cta { gap: 12px; }

  /* ---------- Trust-strookje: linksonder ÍN de hero (Superpower) ----------
     .herowrap is het positie-anker; het strookje verliest zijn donkere balk en
     wordt een rij losse items met scheidingslijntjes over de foto. */
  .herowrap { display: block; position: relative; }
  .herostrip { position: absolute; left: 0; right: 0; bottom: 54px; z-index: 3;
               margin: 0; background: transparent; }
  .herostrip .container { max-width: var(--container); }
  .herostrip .row { justify-content: flex-start; }
  .herostrip .it { flex: 0 0 auto; text-align: left; padding: 2px 32px; }
  .herostrip .it:first-child { padding-left: 0; }
  .herostrip .it + .it::before { top: 0; bottom: 0; }

  /* ---------- Foto-paneel met overlay-tekst ---------- */
  .panel__inner { padding: 0 0 76px; }
  .panel .headline { max-width: 22ch; }
  .panel .subhead  { max-width: 46ch; }

  /* ---------- Smalle tekstsecties (onderzoek, FAQ, bedankt) ---------- */
  .narrow { max-width: 720px; }
  .risklist .row { padding: 22px 26px; }
  .risklist .row h3 { font-size: 22px; }
  .risklist .row p { font-size: 15.5px; }

  /* ---------- Sticky sequence: paneel-kaart, tekst linksonder, tabs verticaal rechts ---------- */
  .seq__pin { top: 14px; height: calc(100svh - 28px); margin: 0 14px; border-radius: 28px; }

  .seq__tabs { top: 50%; bottom: auto; transform: translateY(-50%); }
  .seq__tabs .container { display: flex; justify-content: flex-end; }
  .seq .tabnav { flex-direction: column; align-items: stretch; gap: 18px;
                 border-left: 0; padding-left: 0; font-size: 16px; }
  .seq .tabnav .t { display: flex; flex-direction: row-reverse; justify-content: flex-start;
                    align-items: baseline; padding-left: 16px;
                    border-left: 2px solid transparent; }
  .seq .tabnav .t b { margin: 0 0 0 26px; }
  .seq .tabnav .t .lbl { display: inline; margin: 0; }
  .seq .tabnav--light .t.on { border-left-color: #fff; }

  .seq__content { justify-content: flex-end; gap: 20px; padding: 0 0 92px; }
  .seq__content .headline { max-width: 15ch; }
  .seq__content .subhead  { max-width: 44ch; }
  .seq .faqfloat { max-width: 480px; }
  .seq .faqfloat summary { font-size: 15.5px; }
  .seq .actionlist { margin: 0; width: 300px; }

  /* ---------- Bewezen aanpak (image-slider) ---------- */
  .imgcard { min-height: 78vh; border-radius: 28px; }
  .imgcard .inner { padding: 0 44px 46px; }
  .imgcard .inner .headline { max-width: 16ch; }
  .imgcard .inner .subhead  { max-width: 46ch; }
  .slider__top { padding: 26px 44px 0; }

  /* ---------- Trust (artsen + vinkjes) ---------- */
  .docrow img { width: 56px; height: 56px; }
  .trust-title { font-size: 34px; max-width: 24ch; margin-left: auto; margin-right: auto; }
  .trustchecks { grid-auto-flow: column; gap: 32px; }
  .trustchecks li { font-size: 15px; }

  /* ---------- Testimonials: drie kaarten naast elkaar, geen scroll ---------- */
  .trail { gap: 20px; overflow-x: visible; }
  .tcard { flex: 1 1 0; min-width: 0; }
  .tcard--photo { min-height: 480px; }
  .tcard .q p { font-size: 18px; }
  /* Tekstkaarten worden even hoog als de fotokaart; zet de naam onderaan
     i.p.v. een gat onder de quote. */
  .tcard:not(.tcard--photo) .q { display: flex; flex-direction: column; height: 100%; }
  .tcard:not(.tcard--photo) .q .who { margin-top: auto; padding-top: 20px; }

  /* ---------- Aanbod: twee kolommen (tekst links, aanmeldblok rechts) ---------- */
  .offer { max-width: var(--container); display: grid;
           grid-template-columns: minmax(0, 1fr) 440px; column-gap: 90px; align-items: start; }
  .offer > .headline, .offer > .subhead, .offer > ul { grid-column: 1; max-width: none; }
  .offer > ul { margin-bottom: 0; }
  .offer > .offer__buy { display: block; grid-column: 2; grid-row: 1 / span 3; }
  .offer .offerprice .big { font-size: 60px; }

  /* ---------- FAQ: kop links, vragen rechts ---------- */
  .faq .narrow { max-width: var(--container); display: grid;
                 grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
                 column-gap: 80px; align-items: start; }
  .faq .narrow > div { margin-top: 0 !important; }
  .faq summary { font-size: 17px; }

  /* ---------- Media-kaart ---------- */
  .mediacard { max-width: 920px; margin-left: auto; margin-right: auto; }

  /* ---------- Sticky CTA: compacte knop rechts i.p.v. een balk over de volle breedte ---------- */
  .sticky .container { display: flex; justify-content: flex-end; }
  .sticky .btn--block { width: auto; min-width: 280px; }

  /* ---------- Footer ---------- */
  .foot { border-radius: 28px 28px 0 0; margin: 0 14px; }
}