/**
 * S21 — Artikelen uit de kennisbank.
 *
 * Gevolgd naar het ontwerp: drie kaarten met een beeld van 150px hoog, een blauwe
 * metaregel, en rechtsonder de link naar het overzicht.
 */

/* De kop is hier een omhullend blok; de h2 zit erin. */
.drieo-s21__kop {
	margin-bottom: 1.625rem;
}

.drieo-s21__kop h2 {
	font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem); /* 22 -> 30 */
	line-height: 1.2;
}

.drieo-s21__raster {
	margin: 0;
	padding: 0;
	gap: 1.375rem;
	list-style: none;
}

.drieo-s21__kaart {
	border: 1px solid var(--drieo-lijn);
	border-radius: var(--drieo-radius-kaart);
	overflow: hidden;
	background: var(--drieo-wit);
	transition: border-color var(--drieo-transitie), box-shadow var(--drieo-transitie);
}

.drieo-s21__kaart:hover {
	border-color: var(--drieo-lijn-oranje);
	box-shadow: var(--drieo-schaduw-oranje-zacht);
}

.drieo-s21__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.drieo-s21__beeld {
	display: block;
	height: 150px;
	border-bottom: 1px solid var(--drieo-lijn);
	background: var(--drieo-beeld-leeg);
}

.drieo-s21__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.drieo-s21__inhoud {
	display: block;
	padding: 24px;
}

.drieo-s21__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-bottom: .625rem;
	color: var(--drieo-blauw);
	font-size: var(--drieo-eyebrow);
	font-weight: 600;
}

.drieo-s21__meta > span + span::before {
	content: "·";
	margin-right: .5rem;
}

.drieo-s21__titel {
	display: block;
	font-family: var(--drieo-font-kop);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--drieo-tekst-kop);
}

/* Net als bij het team: een oranje tekstlink zonder pijl, rechts uitgelijnd. */
.drieo-s21__actie {
	margin-top: 1.875rem;
	text-align: right;
}

.drieo-s21__actie .drieo-tekstlink {
	font-size: var(--drieo-knop-grootte);
	font-weight: 600;
	color: var(--drieo-oranje);
}

.drieo-s21__actie .drieo-tekstlink:hover {
	color: var(--drieo-oranje-hover);
}

.drieo-s21__actie .drieo-tekstlink::after {
	content: none;
}

@media (max-width: 767px) {
	.drieo-s21__beeld {
		height: 180px;
	}

	.drieo-s21__actie {
		text-align: left;
	}
}