/* Kennisbank — archief (archive-kennisbank.php), artikel (single-kennisbank.php) en het blok
   "Meer lezen" op de behandelpagina's. Header, intro en tekstopmaak komen uit paginas.css. */

/* Titel van een artikel: kleiner dan de paginatitels (lange zinnen), krimpt alleen als het langste
   woord niet past (.kop-past in base.css) */
.kb .pg-hero h1 {
	--kop-grootte: clamp(36px, 5vw, 64px);
	line-height: 1.05;
}

.kb-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--grijs-tekst);
}

/* Lopende tekst van een artikel: één leeskolom */
.kb .kb-tekst {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(48px, 6vw, 88px) var(--gutter) 0;
}

.kb .kb-tekst > :first-child {
	margin-top: 0;
	font-size: 19px;
	line-height: 1.65;
	color: var(--inkt);
}

.kb .kb-tekst h2 {
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.15;
	letter-spacing: -.01em;
}

.kb .kb-tekst strong {
	color: var(--inkt);
	font-weight: 600;
}

.kb .kb-tekst ul {
	list-style: none;
	padding-left: 0;
}

.kb .kb-tekst ul li {
	position: relative;
	padding-left: 22px;
}

.kb .kb-tekst ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .7em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--blad);
}

.kb .kb-tekst a {
	color: var(--pruim);
	text-decoration-thickness: 1px;
}

.kb .kb-tekst a:hover {
	color: var(--inkt);
}

/* Na het artikel: naar de behandelpagina */
.kb-verder {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(40px, 5vw, 64px) var(--gutter) 0;
}

.kb-verder__vlak {
	background: var(--lila);
	border-radius: var(--radius);
	padding: clamp(28px, 4vw, 44px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

/* Met behandelfoto: foto boven de tekst, vanaf 768 px links ernaast */
.kb-verder__tekst {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}

.kb-verder__foto {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--zand);
}

.kb-verder__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.kb-verder__vlak--foto {
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		align-items: center;
		gap: 32px;
	}

	.kb-verder__foto {
		aspect-ratio: 4 / 5;
	}
}

.kb-verder h2 {
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.1;
}

.kb-verder p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--tekst-intro);
	text-wrap: pretty;
}

/* Archief: kaarten */
.kb-lijst {
	max-width: var(--max-breedte-breed);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 96px) var(--gutter) 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 20px;
}

.kb-leeg {
	font-size: 17px;
	color: var(--tekst-intro);
}

/* Kaart: bloem van de behandeling, bovenregel, titel, samenvatting. De titellink dekt de hele
   kaart (::after); de focus staat dan op de kaart. */
.kb-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--wit);
	transition: transform .35s ease, box-shadow .35s ease;
}

.kb-kaart:hover,
.kb-kaart:has(a:focus-visible) {
	transform: translateY(-6px);
	box-shadow: var(--schaduw-kaart);
}

.kb-kaart:has(a:focus-visible) {
	outline: 3px solid var(--pruim);
	outline-offset: 3px;
}

.kb-kaart__titel a:focus-visible {
	outline: none;
}

.kb-kaart__beeld {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--lila);
}

/* Absoluut in het vlak: vult altijd, ook waar <picture> (display: contents) geen hoogte doorgeeft */
.kb-kaart__beeld img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kb-kaart__tekst {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(24px, 3vw, 32px);
}

.kb-kaart__titel {
	font-size: clamp(24px, 2.4vw, 28px);
	line-height: 1.15;
}

.kb-kaart__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kb-kaart p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--tekst);
	text-wrap: pretty;
}

.kb-kaart__meer {
	margin-top: auto;
	padding-top: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--pruim);
}

.kb-kaart:hover .kb-kaart__titel a {
	color: var(--pruim);
}

@media (prefers-reduced-motion: reduce) {
	.kb-kaart {
		transition: none;
	}

	.kb-kaart:hover,
	.kb-kaart:has(a:focus-visible) {
		transform: none;
	}
}

/* Na een gekleurd vlak ("Waarom kiezen…", "Wat kun je verwachten") staat "Meer lezen" anders er
   direct tegenaan: zelfde ruimte als tussen de andere secties */
.bh-waarom + .bh-meer,
.bh-verwacht + .bh-meer {
	padding-top: clamp(64px, 9vw, 128px);
}

/* Behandelpagina: "Meer lezen" (titel links, kaarten rechts, zoals de andere secties).
   Eén artikel, of het derde van drie: liggende kaart over de volle breedte (geen leeg vak ernaast). */
.bh-meer__kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 20px;
	align-content: start;
}

@media (min-width: 768px) {
	.bh-meer__kaarten > .kb-kaart:only-child,
	.bh-meer__kaarten > .kb-kaart:nth-child(3):last-child {
		grid-column: 1 / -1;
		flex-direction: row;
	}

	.bh-meer__kaarten > .kb-kaart:only-child .kb-kaart__beeld,
	.bh-meer__kaarten > .kb-kaart:nth-child(3):last-child .kb-kaart__beeld {
		flex: 0 0 42%;
		aspect-ratio: auto;
		min-height: 260px;
	}
}

.kb-kaart__boven {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

/* Alleen zichtbaar voor wie is ingelogd: nog niet gepubliceerd */
.kb-kaart__concept {
	padding: 4px 10px;
	border-radius: var(--radius-pil);
	background: var(--lila);
	color: var(--inkt);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}