/* ============================================
   Categorie-overzichten.
   1) /category/kennis/ — Elementor-archiefsjabloon 2959: oranje kop + raster (posts-widget, klassiek).
   2) subcategorieën — standaard archief van het Hello-thema (smalle kolom, systeemkoppen).
   ============================================ */

/* ---------- 1. Kennis ---------- */
.blog-cat-kop {
  position: relative;
  padding: 75px 0;
  background-color: var(--color-accent);
}
/* Merkicoon als watermerk (achtergrond-overlay, 6% dekking) */
.blog-cat-kop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/images/2026/02/icon-witv3.webp");
  background-position: -215px -42px;
  background-repeat: no-repeat;
  background-size: 38% auto;
  opacity: 0.06;
  pointer-events: none;
}
.blog-cat-kop__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
/* "Blogs": oranje tekst op oranje vlak — in het origineel onzichtbaar (zie notes/blog.md) */
.blog-cat-kop__label {
  align-self: flex-start;
  width: 70px;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-accent);
}
.blog-cat-kop__titel {
  width: 100%;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--h-primary-size);
  font-weight: 800;
  line-height: var(--h-primary-lh);
  color: var(--color-primary);
}
.blog-cat-kop__titel em { color: var(--color-white); }
.blog-cat-kop__intro { width: 100%; color: var(--color-white); }

.blog-cat-lijst { padding: 75px 0; }
.blog-cat-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: stretch;
}
.blog-cat-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 5px;
}
.blog-cat-post__beeld { position: relative; display: block; width: 100%; margin-bottom: 15px; }
.blog-cat-post__kader {
  position: relative;
  display: block;
  overflow: hidden;
  padding-bottom: 70%;
  border-radius: 5px;
}
.blog-cat-post__kader img {
  position: absolute;
  top: calc(50% + 1px);
  left: calc(50% + 1px);
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  transform: scale(1.01) translate(-50%, -50%);
}
.blog-cat-post__tekst { flex-grow: 1; }
.blog-cat-post__titel {
  margin: 0 0 15px;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--color-primary);
}
.blog-cat-post__titel a { color: var(--color-primary); }
.blog-cat-post__meer { font-size: 12px; font-weight: 700; }

@media (max-width: 1024px) {
  .blog-cat-kop::before { background-position: 0 0; }
  .blog-cat-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .blog-cat-kop { padding: 30px 15px 50px; }
  .blog-cat-kop::before { background-position: -312px 25px; background-size: 859px auto; }
  .blog-cat-kop__inner { align-items: flex-start; }
  .blog-cat-kop__label { display: none; }
  .blog-cat-lijst { padding: 50px 15px; }
  .blog-cat-raster { grid-template-columns: minmax(0, 1fr); }
  .blog-cat-post__kader { padding-bottom: 50%; }
  .blog-cat-post__titel { font-size: 17px; }
}

/* ---------- 2. Subcategorie (Hello-thema) ---------- */
.blog-archief { width: 100%; margin-inline: auto; }
.blog-archief__titel { font-size: 2.5rem; }
.blog-archief__posttitel { font-size: 2rem; }
.blog-archief__posttitel a { color: var(--color-text); text-decoration: none; }
.blog-archief__inhoud a:not(.blog-archief__posttitel a) { text-decoration: underline; }
.blog-archief__beeld { width: 100%; max-height: 500px; object-fit: cover; }
.blog-archief__inhoud p { margin: 0; }

@media (max-width: 991px) { .blog-archief__beeld { max-height: 400px; } }
@media (max-width: 575px) {
  .blog-archief__beeld { max-height: 300px; }
  .blog-archief, .blog-archief__titel { padding-inline: 10px; }
}
@media (min-width: 576px) { .blog-archief, .blog-archief__titel { max-width: 500px; } }
@media (min-width: 768px) { .blog-archief, .blog-archief__titel { max-width: 600px; } }
@media (min-width: 992px) { .blog-archief, .blog-archief__titel { max-width: 800px; } }
@media (min-width: 1200px) { .blog-archief, .blog-archief__titel { max-width: 1140px; } }
.blog-archief__titel { width: 100%; margin-inline: auto; }