/* ============================================================================
   Sugardad.nl — magazine/blog (Blog.dc.html + BlogArtikel.dc.html)
   Pagina-specifieke stijlen; design-tokens komen uit styles.css. Kleuren
   zonder token (callout-tinten, artikel-bodytekst) staan hier letterlijk
   uit de handoff.
   ==========================================================================*/

.blog-pagina { background: var(--creme); }

/* ── Overzicht: paginakop ───────────────────────────────────────────────── */
.blog-kop { max-width: 1120px; margin: 0 auto; padding: 52px 24px 32px; }
.blog-kop .eyebrow { margin-bottom: 12px; }
.blog-kop h1 { font-size: 46px; color: var(--inkt); margin-bottom: 12px; }
.blog-kop p { font-size: 16px; color: var(--tekst-4); max-width: 560px; }

/* ── Categoriefilter-pills ──────────────────────────────────────────────── */
.blog-filter { max-width: 1120px; margin: 0 auto; padding: 0 24px 24px; }
.blog-filter__rij { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-pill {
  display: inline-block; font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 9px 18px; border-radius: var(--r-pill); transition: all .18s;
  border: 1px solid var(--rand-input); background: #FFFFFF; color: var(--tekst-3);
}
.filter-pill:hover { border-color: var(--goud); color: var(--goud-tekst); }
.filter-pill.is-actief { border-color: var(--goud); background: rgba(198, 169, 104, .14); color: var(--goud-tekst); }

/* ── Overzicht: hoofdkolom ──────────────────────────────────────────────── */
.blog-main { max-width: 1120px; margin: 0 auto; padding: 24px 24px 100px; }

/* Uitgelicht artikel */
.blog-feat {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  background: #FFFFFF; border: 1px solid var(--rand); border-radius: 18px;
  overflow: hidden; margin-bottom: 44px; color: inherit;
}
.blog-feat:hover { color: inherit; }
.blog-feat__beeld { position: relative; overflow: hidden; background: var(--antraciet); min-height: 300px; }
.blog-feat__beeld img,
.blog-feat__beeld .beeldvlak { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-feat__in { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.blog-feat__tag { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--goud-link); font-weight: 600; margin-bottom: 14px; }
.blog-feat h2 { font-size: 32px; line-height: 1.15; color: var(--inkt); margin-bottom: 14px; }
.blog-feat__excerpt { font-size: 15px; line-height: 1.65; color: var(--tekst-4); margin-bottom: 20px; }
.blog-feat__meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--tekst-5); }

/* Postgrid */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-kaart {
  display: flex; flex-direction: column; background: #FFFFFF;
  border: 1px solid var(--rand); border-radius: 14px; overflow: hidden; color: inherit;
}
.blog-kaart:hover { color: inherit; }
.blog-kaart__beeld { position: relative; aspect-ratio: 16 / 10; background: var(--antraciet); }
.blog-kaart__beeld img,
.blog-kaart__beeld .beeldvlak { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-kaart__in { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.blog-kaart__tag { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--goud-link); font-weight: 600; margin-bottom: 10px; }
.blog-kaart h3 { font-size: 20px; line-height: 1.2; color: var(--inkt); margin-bottom: 10px; }
.blog-kaart__excerpt { font-size: 14px; line-height: 1.6; color: var(--tekst-4); margin-bottom: 16px; flex: 1; }
.blog-kaart__meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--tekst-donker-4); }

/* Compacte variant in "Lees ook" (BlogArtikel.dc.html) */
.blog-kaart--klein .blog-kaart__in { padding: 20px; }
.blog-kaart--klein h3 { font-size: 18px; line-height: 1.25; margin: 8px 0 0; }
.blog-kaart--klein .blog-kaart__tag { margin-bottom: 0; }

/* Paginering (zelfde pill-taal als de categoriefilter) */
.blog-paginering { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 44px; }

/* Nieuwsbrief-CTA op donkere gradient */
.blog-nieuwsbrief {
  background: linear-gradient(160deg, var(--antraciet), var(--gradient-diep));
  border-radius: 18px; padding: 44px; margin-top: 56px; text-align: center; color: var(--wit-zacht);
}
.blog-nieuwsbrief h2 { font-size: 30px; color: var(--wit-warm); margin-bottom: 10px; }
.blog-nieuwsbrief p { font-size: 15px; color: var(--tekst-donker-3); margin-bottom: 24px; }
.blog-nieuwsbrief .btn { font-size: 14.5px; font-weight: 700; padding: 14px 26px; border-radius: var(--r-btn-soft); }

/* ── Artikelpagina ──────────────────────────────────────────────────────── */
.blog-artikel__kop { max-width: 720px; margin: 0 auto; padding: 0 24px 40px; }
.blog-terug { display: inline-block; font-size: 14px; color: var(--tekst-4); margin: 20px 0 28px; }
.blog-terug:hover { color: var(--goud-link); }
.blog-artikel__cat { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--goud-link); font-weight: 600; margin-bottom: 16px; }
.blog-artikel h1 { font-size: 46px; line-height: 1.1; color: var(--inkt); margin-bottom: 20px; }

/* Byline: gouden avatar-monogram + naam + datum/leestijd */
.blog-byline { display: flex; align-items: center; gap: 14px; padding-bottom: 28px; border-bottom: 1px solid #E7E1D5; }
.blog-byline__avatar { width: 44px; height: 44px; background: var(--goud); color: var(--inkt); font-size: 20px; }
.blog-byline__naam { font-size: 14px; font-weight: 600; color: var(--inkt); }
.blog-byline__meta { font-size: 13px; color: var(--tekst-5); }

/* 21:9 hoofdbeeld */
.blog-hoofdbeeld { max-width: 900px; margin: 0 auto; padding: 0 24px 20px; }
.blog-hoofdbeeld__kader { position: relative; aspect-ratio: 21 / 9; border-radius: 16px; overflow: hidden; background: var(--antraciet); }
.blog-hoofdbeeld__kader img,
.blog-hoofdbeeld__kader .beeldvlak { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Artikel-typografie (body_html) */
.blog-body { max-width: 720px; margin: 0 auto; padding: 32px 24px 60px; }
.blog-body p { font-size: 16px; line-height: 1.8; color: #40454D; margin-bottom: 26px; }
.blog-body h2 { font-size: 26px; color: var(--inkt); margin: 0 0 12px; }
.blog-body h3 { font-size: 21px; color: var(--inkt); margin: 0 0 10px; }
.blog-body a { color: var(--goud-link); }
.blog-body ul, .blog-body ol { margin: 0 0 26px; padding-left: 22px; font-size: 16px; line-height: 1.8; color: #40454D; }
.blog-body p.blog-lead {
  font-size: 19px; line-height: 1.7; color: #2E323A; margin-bottom: 28px;
  font-family: var(--serif); font-style: italic;
}

/* "Kort samengevat"-callout (goud/crème-tinten uit de handoff) */
.blog-callout { background: #FBF6EC; border: 1px solid #E7DCC4; border-radius: 14px; padding: 26px; margin: 36px 0; }
.blog-callout__kop { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--goud-tekst); margin-bottom: 10px; }
.blog-body .blog-callout p, .blog-callout p { font-size: 15px; line-height: 1.7; color: #5C4A28; margin-bottom: 0; }

/* "Lees ook" */
.blog-verwant { max-width: 1120px; margin: 0 auto; padding: 20px 24px 80px; }
.blog-verwant h2 { font-size: 28px; color: var(--inkt); margin-bottom: 22px; }

/* Donkere afsluitende CTA */
.blog-cta { background: linear-gradient(160deg, var(--antraciet), var(--gradient-diep)); color: var(--wit-zacht); padding: 52px 24px; text-align: center; }
.blog-cta h2 { font-size: 30px; color: var(--wit-warm); margin-bottom: 12px; }
.blog-cta p { font-size: 15px; color: var(--tekst-donker-3); margin-bottom: 24px; }
.blog-cta .btn { font-size: 15px; font-weight: 700; padding: 15px 34px; border-radius: var(--r-btn-soft); }

/* ── Responsief ─────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .blog-feat { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .blog-kop h1, .blog-artikel h1 { font-size: 34px; }
  .blog-feat__in { padding: 30px 24px; }
  .blog-nieuwsbrief { padding: 36px 24px; }
}