/* ============================================================
   XION BLOG — assets/css/blog.css
   Laadt ná landing-v2.css en landing-pages.css (via de
   landingsschil) en gebruikt hun tokens: --ink, --violet-*,
   --n*, --font-d/b/m, --sh-*. Tot 24-9-2026 hing de blog aan het
   oude assets/css/style.css, met een eigen navigatie, een
   blauw-roze verloop en een donkerblauwe voet (Nick: "een pagina
   die niet in de huisstijl is"). Nu dezelfde kop, hetzelfde
   slotblok en dezelfde voet als elke andere publieke pagina.
   ============================================================ */

.blog-wrap{ max-width:780px; margin:0 auto; padding:148px clamp(20px,4vw,56px) 40px; }
.blog-index-wrap{ max-width:1180px; }
.blog-related{ max-width:1180px; padding-top:24px; padding-bottom:40px; }

/* Kruimelpad: klein, in het label-lettertype, zoals de kicker. Het is een
   <nav>, en landing-v2.css zet elke nav vast bovenaan de pagina (dat is de
   hoofdnavigatie). Die regels zetten we hier terug. */
.blog-breadcrumb{
    position:static; z-index:auto; background:none; border:0;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    font-family:var(--font-m); font-size:12px; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase; color:var(--n500);
    margin:0 0 22px 0;
}
.blog-breadcrumb a{ color:var(--n500); text-decoration:none; }
.blog-breadcrumb a:hover{ color:var(--violet-600); }
.blog-breadcrumb span{ color:var(--violet-600); }

/* Het overzicht */
.blog-index-wrap h1{
    font-family:var(--font-d); font-weight:800; color:var(--ink);
    font-size:clamp(38px,5vw,60px); line-height:1.05; letter-spacing:-.025em;
    margin:0 0 16px 0; max-width:16ch;
}
.blog-index-sub{ color:var(--n500); font-size:19px; line-height:1.65; max-width:620px; margin:0 0 48px 0; }

.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; }
.blog-card{
    display:flex; flex-direction:column; gap:10px; text-decoration:none;
    background:#fff; border:1px solid var(--n200); border-radius:18px 5px 18px 5px;
    padding:26px 24px;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card:hover{ transform:translateY(-3px); border-color:var(--violet-400); box-shadow:var(--sh-md); }
.blog-card:focus-visible{ outline:3px solid var(--violet-400); outline-offset:3px; }
.blog-card h2, .blog-card h3{
    font-family:var(--font-d); font-size:21px; font-weight:700; line-height:1.28;
    letter-spacing:-.015em; color:var(--ink); margin:0;
}
.blog-card p{ color:var(--n500); font-size:15.5px; line-height:1.7; margin:0; flex:1; }
.blog-card .blog-chip{ align-self:flex-start; margin:0; }

/* Label en regel met datum en leestijd */
.blog-chip{
    display:inline-block; font-family:var(--font-m); font-size:11.5px; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase;
    color:var(--violet-700); background:var(--violet-50); border:1px solid var(--violet-100);
    border-radius:999px; padding:5px 12px; margin:0 0 16px 0;
}
.blog-meta{ display:block; font-family:var(--font-m); font-size:12.5px; color:var(--n500); letter-spacing:.02em; }

/* Een artikel */
.blog-article h1{
    font-family:var(--font-d); font-weight:800; color:var(--ink);
    font-size:clamp(34px,4.6vw,52px); line-height:1.1; letter-spacing:-.025em;
    margin:0 0 16px 0;
}
.blog-article > .blog-meta{ margin-bottom:40px; }
.blog-content p{ color:var(--n600); font-size:17.5px; line-height:1.8; margin:0 0 22px 0; }
.blog-content h2{
    font-family:var(--font-d); font-weight:800; color:var(--ink);
    font-size:clamp(24px,2.6vw,30px); line-height:1.2; letter-spacing:-.02em;
    margin:52px 0 16px 0;
}
.blog-content h3{ font-family:var(--font-d); font-size:20px; font-weight:700; color:var(--ink); margin:34px 0 10px 0; }
.blog-content ul, .blog-content ol{ color:var(--n600); font-size:17.5px; line-height:1.8; padding-left:24px; margin:0 0 22px 0; }
.blog-content li{ margin-bottom:10px; }
.blog-content li::marker{ color:var(--violet-500); }
.blog-content a:not(.btn){ color:var(--violet-600); text-decoration:underline; text-decoration-color:var(--violet-100);
                           text-underline-offset:3px; text-decoration-thickness:2px; }
.blog-content a:not(.btn):hover{ text-decoration-color:var(--violet-400); }
.blog-content strong{ color:var(--ink); }

/* Het blok midden in een artikel: "zelf proberen?" */
.blog-cta-box{
    background:var(--violet-50); border:1px solid var(--violet-100);
    border-radius:20px 6px 20px 6px; padding:26px 28px; margin:44px 0;
}
.blog-cta-box p{ margin:0 0 18px 0; color:var(--n600); }
.blog-cta-box .btn{ margin:0; }

/* "Verder lezen" onder een artikel */
.blog-related-title{
    font-family:var(--font-d); font-weight:800; color:var(--ink);
    font-size:clamp(26px,3vw,34px); letter-spacing:-.02em; margin:0 0 24px 0;
}

/* Een gezinsartikel (categorie Gezin) krijgt body.lp-fam van de schil:
   dan wordt het accent magenta, net als op de gezinspagina's. Tekst in
   magenta is trede 700, want 600 haalt op het lichte vlak geen 4,5:1. */
body.lp-fam .blog-breadcrumb span,
body.lp-fam .blog-breadcrumb a:hover{ color:var(--magenta-700); }
body.lp-fam .blog-chip{ color:var(--magenta-700); background:var(--magenta-50); border-color:var(--magenta-100); }
body.lp-fam .blog-card:hover{ border-color:var(--magenta-500); }
body.lp-fam .blog-content li::marker{ color:var(--magenta-500); }
body.lp-fam .blog-content a:not(.btn){ color:var(--magenta-700); text-decoration-color:var(--magenta-100); }
body.lp-fam .blog-content a:not(.btn):hover{ text-decoration-color:var(--magenta-500); }
body.lp-fam .blog-cta-box{ background:var(--magenta-50); border-color:var(--magenta-100); border-radius:6px 20px 6px 20px; }

@media (max-width: 640px){
    .blog-wrap{ padding-top:120px; }
    .blog-content p, .blog-content ul, .blog-content ol{ font-size:16.5px; }
}