/* ==========================================================================
   Indeling Gesplitst (LandingPageTemplate::Gesplitst)

   Laadt NA landing.css en zet alleen om wat in deze indeling anders is: de
   pagina is in tweeën gedeeld op precies de helft van het scherm. Links de
   tekst op wit, rechts de hero-afbeelding op een licht vlak met een zachte tint
   van de accentkleur, over de volle hoogte, ook achter het logo en de footer.
   Alle kleuren en fonts komen uit dezelfde variabelen als op de standaardpagina
   (zie LandingColorComposer). Prototype: testhtml/gratis-gids-gesplitst/index.html
   (3 oktober 2026, door Leroy stap voor stap bijgestuurd).
   ========================================================================== */

/* De splitsing zit op de body, zodat header en footer erin meelopen. */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(90deg, #ffffff 0, #ffffff 50%, transparent 50%),
        linear-gradient(160deg, color-mix(in srgb, var(--primary-color) 10%, #ffffff) 0%, var(--background-color-light) 70%);
}

.wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

.nf-gesplitst {
    flex: 1;
    display: flex;
}

/* Header: alleen het logo, geen vaste balk met schaduw. */
.header {
    position: static;
    background: transparent;
    box-shadow: none;
}

.header > .container {
    max-width: none;
    padding: 0 48px;
    min-height: 96px;
}

/* De hero is de splitsing: tekst links, afbeelding rechts. */
.hero {
    flex: 1;
    padding: 0;
    background: transparent;
    display: flex;
}

.hero > .container {
    max-width: none;
    padding: 0;
    margin: 0;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
}

.hero-content {
    padding: 48px 56px 72px;
    justify-content: center;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.hero h1 {
    max-width: none;
}

.hero-image.desktop-only {
    position: relative;
    padding: 24px 48px 72px;
}

/* Zachte lichtval achter de afbeelding, zodat hij op het vlak staat in plaats van erin zweeft. */
.hero-image.desktop-only::before {
    content: '';
    position: absolute;
    inset: 10% 8%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.9;
}

.hero-image.desktop-only img {
    position: relative;
    max-width: 92%;
    border-radius: 0;
    filter: drop-shadow(0 32px 36px rgba(15, 23, 42, 0.22));
}

/* Footerregel: gecentreerd over de volle breedte (op de naad), geen eigen vlak of lijn. */
.nf-voet {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 24px 24px;
    font-size: 13px;
    color: #64748b;
}

.nf-voet a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nf-voet a:hover {
    color: var(--text-color);
}

.nf-voet a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Mobiel: bovenaan het lichte vlak met de afbeelding (achter het logo door),
   daaronder wit met de tekst, knop volle breedte.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body {
        background: #ffffff;
    }

    /* Header en afbeeldingsblok vormen samen één vlak: de header in de effen tint, het
       blok met een verticaal verloop dat bovenaan exact die tint heeft. Twee losse
       diagonale verlopen gaven een zichtbare naad op 64px (4 oktober 2026). */
    .header {
        background: color-mix(in srgb, var(--primary-color) 10%, #ffffff);
    }

    .header > .container {
        padding: 0 20px;
        min-height: 64px;
    }

    .hero > .container {
        display: block;
    }

    .hero-content {
        padding: 24px 20px 28px;
        margin-bottom: 0;
        max-width: none;
        gap: 16px;
    }

    /* De mobiele afbeelding staat in de HTML na de kop; hier gaat hij ervoor,
       over de volle breedte op hetzelfde lichte vlak als de header. */
    .hero-image.mobile-only {
        order: -1;
        margin: -24px -20px 8px;
        padding: 8px 20px 28px;
        background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 10%, #ffffff) 0%, var(--background-color-light) 100%);
    }

    .hero-image.mobile-only img {
        max-width: 70%;
        padding: 0;
        border-radius: 0;
        filter: drop-shadow(0 18px 22px rgba(15, 23, 42, 0.2));
    }

    .hero h1 {
        max-width: none;
    }

    /* landing.css zet op mobiel `.hero .cta-button` op 80%; zelfde specificiteit nodig. */
    .hero .cta-button {
        width: 100%;
    }

    .nf-voet {
        padding: 0 20px 20px;
    }
}