/* Blog index cards + single post article layout */
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
@media (max-width: 720px) { .post-grid { grid-template-columns: 1fr; } }

.post-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.post-card__img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.post-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.post-card__meta { font-size: var(--fz-sm); color: var(--c-text-3); }
.post-card__title { font-size: var(--fz-h4); }
.post-card__title a { color: var(--c-text); }
.post-card__title a:hover { color: var(--c-accent); }
.post-card__more { margin-top: auto; font-weight: 600; color: var(--c-accent); }

/* ---- Single post ---- */
.article { max-width: 800px; margin-inline: auto; }
.article__meta { font-size: var(--fz-sm); color: var(--c-text-3); margin-bottom: var(--sp-4); }
.article h2 { font-size: var(--fz-h3); margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.article h3 { font-size: var(--fz-h4); margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.article p { margin-bottom: var(--sp-3); }
.article ul, .article ol { margin: 0 0 var(--sp-3) 1.2em; color: var(--c-text-2); }
.article li { margin-bottom: 6px; }
.article img { border-radius: var(--r-md); margin-block: var(--sp-4); }
.article a { text-decoration: underline; text-underline-offset: 2px; }
.article .btn { text-decoration: none; }
.article table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: var(--fz-sm); }
.article th, .article td { border: 1px solid var(--c-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.article th { background: var(--c-featured, #FFF7EE); font-weight: 700; }

/* In-article CTA box */
.post-cta {
  margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-4);
  background: var(--c-featured, #FFF7EE); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); text-align: center;
}
.post-cta h3 { margin-bottom: var(--sp-2); margin-top: 0; }
.post-cta p { margin-bottom: var(--sp-3); color: var(--c-text-2); }

/* Laatste artikelen (related posts cross-link block) */
.related { max-width: 800px; margin-inline: auto; }
.related__title { font-size: var(--fz-h3); margin-bottom: var(--sp-3); }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (max-width: 720px) { .related__grid { grid-template-columns: 1fr; } }
.related__card {
  display: block; padding: var(--sp-3); background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-text);
  font-weight: 600; transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.related__card:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.related__tag { display: block; font-size: var(--fz-sm); color: var(--c-text-3); font-weight: 500; margin-bottom: 4px; }