.bk-klachten-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bk-klachten-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-klachten-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bk-klachten-grid__card { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; align-items: start; padding: 1.5rem 1.75rem; background: #fff; border: 1px solid var(--color-line); border-radius: 0.5rem; text-decoration: none; color: inherit; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; }
.bk-klachten-grid__card:hover { border-color: var(--color-content-primary); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); transform: translateY(-2px); }

.bk-klachten-grid__num { color: var(--color-secondary-500); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.05em; padding-top: 0.35rem; }
.bk-klachten-grid__body { display: flex; flex-direction: column; gap: 0.35rem; }
.bk-klachten-grid__title { margin: 0; font-family: var(--h1-font-family); font-size: 1.25rem; line-height: 1.25; color: var(--color-content-heading); }
.bk-klachten-grid__excerpt { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--color-content-faded); }

/* Tablet: 3- en 4-koloms krijgen 2-kolom tussenstap */
@media (max-width: 1024px) {
	.bk-klachten-grid--cols-3,
	.bk-klachten-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobiel: alles naar 1 kolom */
@media (max-width: 640px) {
	.bk-klachten-grid,
	.bk-klachten-grid--cols-3,
	.bk-klachten-grid--cols-4 { grid-template-columns: 1fr; }
	.bk-klachten-grid__card { padding: 1.25rem 1.5rem; }
}

.l-section:has(.bk-related-empty) { display: none; }