/* Blog: overzichtskaarten en artikelopmaak. Bouwt op .prose en de huisstijl-variabelen. */
.blog-meta { margin-top: 22px; font-family: var(--font-mono); font-size: var(--stap-klein); color: var(--tekst-dim); }

.blog-lijst { display: grid; gap: clamp(16px, 2.4vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.blog-kaart {
  display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 3vw, 34px);
  background: var(--schemer); border: 1px solid var(--lijn); border-radius: var(--radius-kaart);
  color: var(--tekst); text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}
.blog-kaart:hover { border-color: var(--amber); transform: translateY(-3px); }
.blog-kaart h2 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); margin: 0; }
.blog-kaart p { margin: 0; color: var(--tekst-zacht); font-size: 0.97rem; }
.blog-kaart__meta { margin-top: auto; font-family: var(--font-mono); font-size: var(--stap-klein); color: var(--tekst-dim); }

.blog-artikel { margin-inline: auto; max-width: 68ch; font-size: 1.08rem; line-height: 1.7; }
.blog-artikel h2 { margin-top: 2em; }
.blog-artikel h3 { margin-top: 1.6em; font-size: 1.15rem; }
.blog-artikel ul, .blog-artikel ol { padding-left: 1.3em; }
.blog-artikel li + li { margin-top: .5em; }
.blog-artikel strong { color: var(--tekst); }
.blog-artikel .blog-kort {
  margin: 0 0 1.8em; padding: 20px 24px; background: var(--schemer);
  border-left: 3px solid var(--amber); border-radius: 0 var(--radius-kaart) var(--radius-kaart) 0;
}
.blog-artikel .blog-kort p { margin: 0; }
.blog-tabel { width: 100%; border-collapse: collapse; font-size: .98rem; margin-block: 1.4em; }
.blog-tabel th, .blog-tabel td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.blog-tabel th { font-family: var(--font-mono); font-size: var(--stap-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
@media (max-width: 600px) { .blog-tabel { display: block; overflow-x: auto; } }

.blog-verder { margin: clamp(40px, 6vw, 72px) auto 0; max-width: 68ch; padding-top: 28px; border-top: 1px solid var(--lijn); }
.blog-verder ul { list-style: none; padding: 0; margin: 14px 0 0; }
.blog-verder li + li { margin-top: 10px; }
.blog-verder a { color: var(--lucht); }