/* ══════════════════════════════════════════════════════════════════
   Landingspagina (page.php)

   Bouwt voort op blog.css: de kop, de leeskolom, de zijkolom en de
   afsluitende oproep zijn dezelfde onderdelen. Hier staat alleen wat een
   landingspagina anders maakt dan een bericht: er is geen foto en geen
   auteur, maar wel een cijferregel en twee knoppen die naar de vergelijking
   wijzen. Dit bestand wordt ná blog.css geladen en mag daar dus overheen.
   ══════════════════════════════════════════════════════════════════ */

/* ── Donkere kop ───────────────────────────────────────────────── */

/* Hetzelfde vlak als het blogbericht. Een landingspagina heeft geen
   uitgelichte afbeelding, dus geen sluier en geen beeldkaart eronder: alleen
   het verloop met het stippelraster erover. */
.postHeroPagina{
    margin-top:-74px;
    padding:128px 0 72px;
    border-bottom:0;
    background:linear-gradient(165deg,var(--blog-donker-1) 0%,var(--blog-donker-2) 100%);
    color:var(--blog-lila-zacht);
}
.postHeroPagina::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
    background-size:22px 22px;
    pointer-events:none;
}
.postHeroPagina .postHeroDecor{
    z-index:1;
    background:radial-gradient(circle,rgba(109,40,217,.4) 0%,rgba(109,40,217,0) 70%);
}
/* Tweede, koelere gloed linksonder. Eén bol maakt het vlak scheef; twee
   houden het in balans zonder dat je ze los aanwijst. */
.postHeroPagina::after{
    content:'';
    position:absolute;
    left:-220px;
    bottom:-340px;
    width:620px;
    height:620px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(183,155,255,.16) 0%,rgba(183,155,255,0) 70%);
    pointer-events:none;
}
.postHeroPagina .container{z-index:2}

.postHeroPagina h1{
    font-size:clamp(30px,3.9vw,47px);
    line-height:1.13;
    color:#fff;
    margin:16px 0 0;
    max-width:min(900px,20ch);
}

.postHeroPagina .postLead{
    max-width:62ch;
    margin-top:20px;
    font-size:18px;
    line-height:1.72;
    color:var(--blog-lila-zacht);
}
.postHeroPagina .postLead a{
    color:#fff;
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-color:rgba(255,255,255,.4);
}
.postHeroPagina .postLead a:hover{text-decoration-color:#fff}
.postHeroPagina .postLead strong{color:#fff}

.postHeroPagina .postKruimels a{color:var(--blog-lila)}
.postHeroPagina .postKruimels a:hover{color:#fff}
.postHeroPagina .postKruimels span{color:rgba(255,255,255,.32)}

/* ── Cijferregel ───────────────────────────────────────────────── */

/* Drie tellingen van wat er vastligt: hoeveel bureaus, in hoeveel diensten,
   en van wanneer deze pagina is. Dezelfde vorm als op het blogoverzicht,
   zodat de twee koppen als familie lezen. */
.postHeroCijfers{
    display:flex;
    flex-wrap:wrap;
    gap:14px 40px;
    margin-top:30px;
    padding-top:26px;
    border-top:1px solid rgba(255,255,255,.13);
    max-width:680px;
}
.postHeroCijfers li{display:flex;flex-direction:column;gap:3px}
.postHeroCijfers strong{font-size:23px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.1}
.postHeroCijfers span{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#9C90B8}

/* ── Knoppen in de kop ─────────────────────────────────────────── */

.postHeroActies{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.postHeroActies .btnOutline{color:#fff;border-color:rgba(255,255,255,.3)}
.postHeroActies .btnOutline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}

/* ── Leeskolom ─────────────────────────────────────────────────── */

/* Zonder deelrail links, maar met dezelfde zijkolom rechts als het bericht.
   .postLayout regelt dat al; hier alleen wat lucht rond de tekst omdat er
   geen beeldkaart tussen de kop en de tekst staat. Onder de tekst evenveel als
   erboven: het bericht krijgt die onderkant van de algemene regel in style.css,
   maar op een landingspagina volgt er direct een ander blok en zou de tekst
   zonder deze regel tegen de rand van de volgende sectie aanlopen. */
.postArtikelPagina .postInhoud{padding:60px 0}

/* De inleiding staat nu in de kop, dus de alinea waarmee de tekst hier begint
   is een gewone alinea en hoeft niet meer als opstap te worden gezet. Alleen
   als de kop geen inleiding kreeg blijft die opstap staan; de klasse daarvoor
   zet page.php op het artikel. */
.postArtikelPagina.heeftLead .postBody > p:first-of-type{font-size:17px;line-height:1.85;color:var(--font-color)}

.postArtikelPagina .postAuteur{margin-top:44px}

/* ── Zijkolom: verwante pagina's ───────────────────────────────── */

/* Dezelfde lijst als "meer uit het blog", maar zonder miniatuur: een
   landingspagina heeft geen uitgelichte afbeelding, en een lege plaatshouder
   naast elke regel zou de lijst alleen maar rommelig maken. */
.postZijLijstPlat{display:flex;flex-direction:column;gap:2px}
.postZijItemPlat{
    display:block;
    padding:10px 12px;
    border-radius:10px;
    transition:var(--transition);
}
.postZijItemPlat .postZijItemTitel{
    display:block;
    font-size:14px;
    font-weight:600;
    line-height:1.45;
    color:var(--font-color-dark);
}
.postZijItemPlat:hover{background:var(--background-alt-1)}
.postZijItemPlat:hover .postZijItemTitel{color:var(--color-indigo)}

/* ── Verwante pagina's onderaan ────────────────────────────────── */

.paginaVerwant{padding:72px 0 0}
.paginaGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}

/* Kaart zonder beeld. Het violette streepje bovenin doet wat de foto op een
   blogkaart doet: het geeft de kaart een kant om aan te beginnen. */
.paginaKaart{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:26px 26px 22px;
    border:1px solid var(--border-color-1);
    border-radius:18px;
    background:var(--white-bg-1);
    box-shadow:var(--shadow-card);
    overflow:hidden;
    transition:var(--transition);
}
.paginaKaart::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg,var(--color-indigo) 0%,#B79BFF 100%);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s ease;
}
.paginaKaart:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:#D3C6F3}
.paginaKaart:hover::before{transform:scaleX(1)}

.paginaKaartTitel{font-size:18px;font-weight:800;line-height:1.34;margin:0}
.paginaKaartTitel a{color:var(--font-color-dark)}
/* Onzichtbaar vlak over de hele kaart, zodat hij klikbaar is zonder dat een
   schermlezer twee keer dezelfde bestemming voorleest. */
.paginaKaartTitel a::after{content:'';position:absolute;inset:0;z-index:1}
.paginaKaart:hover .paginaKaartTitel a{color:var(--color-indigo)}

.paginaKaartTekst{margin:0;font-size:14.5px;line-height:1.68;color:var(--font-color)}

.paginaKaartVoet{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid var(--border-color-2);
    font-size:13.5px;
    font-weight:700;
    color:var(--color-indigo);
}
.paginaKaartPijl{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--background-alt-1);
    color:var(--color-indigo);
    transition:var(--transition);
}
.paginaKaart:hover .paginaKaartPijl{background:var(--color-indigo);color:#fff;transform:translateX(3px)}

/* ── Smallere schermen ─────────────────────────────────────────── */

@media (max-width:1040px){
    /* De zijkolom valt uit de rasterstroom (zie blog.css); deze twee blokken
       hebben daar nog een plek in de volgorde nodig. */
    .postArtikelPagina .postZijMeer{order:3}
}

@media (max-width:768px){
    .postHeroPagina{padding:104px 0 48px}
    .postHeroPagina h1{font-size:clamp(26px,7vw,33px);max-width:none}
    .postHeroPagina .postLead{font-size:16.5px;margin-top:16px}
    .postHeroCijfers{gap:14px 26px;margin-top:24px;padding-top:20px}
    .postHeroCijfers strong{font-size:20px}
    .postHeroCijfers span{font-size:12px}
    .postHeroActies{margin-top:24px;gap:10px}
    .postHeroActies .btnIndigo,.postHeroActies .btnOutline{width:100%}
    .postArtikelPagina .postInhoud{padding:36px 0}
    .paginaVerwant{padding-top:52px}
    .paginaGrid{grid-template-columns:1fr;gap:16px}
    .paginaKaart{padding:22px 22px 18px}
}

@media (prefers-reduced-motion:reduce){
    .paginaKaart{transition:box-shadow .2s ease,border-color .2s ease}
    .paginaKaart:hover{transform:none}
    .paginaKaart:hover .paginaKaartPijl{transform:none}
    .paginaKaart::before{transition:none}
}