/* Blogindex als kaartenraster (vervangt de kale WP-lijst). Alleen geladen op
   /blog/ en de pagineringspagina's. Huisstijl: primair #68a72e, accent #c74793,
   basis #0a0a0a, Lato (site-breed al geladen). */

.blogkaarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 26px;
  margin: 10px 0 34px;
  text-align: left;
}

.blogkaart {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(10, 10, 10, .05);
  transition: transform .18s ease, box-shadow .18s ease;
}

.blogkaart:hover,
.blogkaart:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(10, 10, 10, .10);
}

.blogkaart__beeldlink { display: block; }

.blogkaart__beeld {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #f3f3f3;
}

.blogkaart__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}

.blogkaart__datum {
  margin: 0 0 6px;
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #c74793;
}

.blogkaart__titel {
  margin: 0 0 10px;
  font-size: 1.18em;
  line-height: 1.35;
}

.blogkaart__titel a {
  color: #0a0a0a;
  text-decoration: none;
}

.blogkaart__titel a:hover { color: #68a72e; }

.blogkaart__tekst {
  margin: 0 0 14px;
  font-size: .95em;
  line-height: 1.55;
  color: #444;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blogkaart__meer { margin: auto 0 0; }

.blogkaart__meer a {
  font-weight: 700;
  color: #68a72e;
  text-decoration: none;
}

.blogkaart__meer a:hover { text-decoration: underline; }

/* Paginering iets meer lucht boven */
.blogkaarten + .page-numbers { margin-top: 6px; }