/* Hoe werkt het (templates/hoe-werkt-het.php). Alleen wat landing.css niet heeft. */

/* Kop iets kleiner dan de standaard hero (62px): uitlegpagina, geen verkooppagina */
.landing .lp-hero h1 {
    font-size: clamp(34px, 4.4vw, 50px);
}

/* Band in de sectietint over de volle breedte; de section erin houdt zijn 1080px */
.landing .hw-band {
    background: var(--lp-tint);
}

/* Sectiekoppen links, op dezelfde 640px-as als de stappen eronder */
.landing .hw-steps .lp-section-head {
    max-width: 640px;
    margin: 0 auto 48px;
    text-align: left;
}
/* Eén stap per rij, altijd onder elkaar.
   Smaller dan de section, zodat een afbeelding niet het hele scherm vult */
.landing .hw-step-list {
    --hw-gap: 64px;
    display: flex;
    flex-direction: column;
    gap: var(--hw-gap);
    max-width: 640px;
    margin: 0 auto;
}
/* Nummer in een eigen kolom, naast de titel; titel, vlak en tekst recht onder elkaar in de tweede kolom */
.landing .hw-step {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 20px;
}
.landing .hw-step > * {
    grid-column: 2;
}
.landing .hw-step > .lp-step-num {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
}
/* Stippellijn van nummer naar het volgende nummer: onder het rondje tot over de gap heen.
   Rondjes (radial-gradient) i.p.v. border dotted: die tekent per browser andere stippen */
.landing .hw-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 42px;
    bottom: calc(8px - var(--hw-gap));
    width: 4px;
    background: radial-gradient(circle, #d6d3cc 1.5px, transparent 2px) center top / 4px 10px repeat-y;
}
/* Titel en rondje allebei in het midden van de eerste rij. Vaste line-height, anders erft de
   titel de ruime regelhoogte van de body en zakt de tekst t.o.v. het cijfer in het rondje.
   Rondje ook line-height 1: Poppins zet cijfer en titel dan op hetzelfde optische midden */
.landing .hw-step h3 {
    grid-row: 1;
    align-self: center;
    margin: 0;
    line-height: 1.3;
}
.landing .hw-step > .lp-step-num {
    line-height: 1;
}
/* Staptekst iets groter dan de 14.5px van .lp-step: hier is de tekst de uitleg zelf */
.landing .hw-step p {
    font-size: 16px;
}
/* Wit vlak over de volle kolombreedte, zo breed als de tekst; de afbeelding er gecentreerd in.
   Geen plaat met oranje rand, gloed en kanteling bij hover */
.landing .hw-step .lp-gallery-plate,
.landing .hw-step .lp-gallery-plate:hover {
    max-width: none;
    margin: 18px 0 20px;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    box-shadow: none;
    transform: none;
}
/* Afbeelding zo groot mogelijk zonder bijsnijden: liggend vult de breedte, staand (telefoon) de hoogte.
   Geen vast kader met verhouding; schaduw en hoeken op de afbeelding zelf (drop-shadow volgt ook transparante png's), zodat er geen balken naast komen */
.landing .hw-step .lp-plate-frame {
    display: flex;
    justify-content: center;
    aspect-ratio: auto;
    background: none;
    border: 0;
    border-radius: 0;
}
.landing .hw-step .lp-plate-frame img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 320px;
    border: 0;
    filter: drop-shadow(0 10px 24px rgba(24, 24, 27, 0.14));
}
@media (max-width: 860px) {
    .landing .hw-step-list {
        --hw-gap: 48px;
    }
    .landing .hw-step .lp-gallery-plate {
        padding: 16px;
    }
}

/* Sectiekoppen iets kleiner dan op de home (28–40px): de pagina is om snel te zien hoe het werkt.
   Hero en stap-titels zoals in landing.css */
.landing .lp-section-head h2 {
    font-size: clamp(24px, 3vw, 32px);
}

/* ---------- Hero: links op de 640px-as ----------
   Op dezelfde as als de koppen en stappen eronder */
.landing .lp-hero {
    max-width: 688px;
    padding-bottom: 72px;
    text-align: left;
}
.landing .lp-hero .lp-lede {
    margin-left: 0;
}
.landing .lp-hero .lp-actions {
    justify-content: flex-start;
    gap: 12px;
}
/* Tekstlinks naar de twee delen, onder de intro */
/* Zelfde letter als .lp-lede, zodat het leest als het vervolg van de intro */
.landing .hw-jump {
    margin: -16px 0 32px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--lp-muted);
}
.landing .hw-jump a,
.landing .hw-step p a,
.landing .hw-more a {
    font-weight: 600;
    color: var(--lp-ink);
    text-decoration: underline;
    text-decoration-color: #f5dcae;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.landing .hw-jump a:hover,
.landing .hw-step p a:hover,
.landing .hw-more a:hover {
    text-decoration-color: var(--lp-accent);
}

/* ---------- Wat heb je nodig + nog vragen: kaartjes onderaan ----------
   Functiekaartjes uit landing.css, twee naast elkaar op de 640px-as */
.landing .hw-end {
    max-width: 688px;
    padding-top: 0;
}
/* Faq op dezelfde smalle as als de checklist, kop links */
.landing .hw-faq {
    max-width: 688px;
}
.landing .hw-end .lp-section-head,
.landing .hw-faq .lp-section-head {
    max-width: 640px;
    margin: 0 0 32px;
    text-align: left;
}
.landing .hw-end .lp-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.landing .hw-end .lp-feature {
    padding: 24px;
}
.landing .hw-end .lp-feature p {
    font-size: 15px;
}
@media (max-width: 560px) {
    .landing .hw-end .lp-features-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Afsluitende stap: vinkje in het rondje, knop onder de tekst ---------- */
.landing .hw-step-end > .lp-step-num {
    background: var(--lp-accent-soft);
    border-color: #f5dcae;
}
.landing .hw-step-end p {
    margin: 10px 0 20px;
}
.landing .hw-step-end .lp-actions {
    justify-content: flex-start;
}

/* Nog vragen: onder de kaartjes */
.landing .hw-more {
    margin: 32px 0 0;
    font-size: 16px;
    color: var(--lp-muted);
}