/*
 * Fortuna UI — kerncijfers: groot getal, korte uitleg, bronregel (zoals Canoe). Voor seizoens- en archiefcijfers.
 *   <div class="fu-kpis"><div class="fu-kpi"><p class="fu-kpi__value">13<span>pt</span></p><p class="fu-kpi__label">…</p><p class="fu-kpi__source">…</p></div>…</div>
 * Let op: .fu-stat is het bestaande infographic-blok; dit is iets anders.
 */
.fu-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fu-kpi-min)), 1fr)); gap: var(--fu-space-4); }

.fu-kpi {
	display: grid;
	/* Subgrid: getal, uitleg en bronregel (met lijn) staan in alle blokken op dezelfde hoogte. */
	grid-row: span 3;
	grid-template-rows: subgrid;
	align-content: start;
	gap: var(--fu-space-3);
	padding: var(--fu-space-6);
	border: var(--fu-lijn) solid var(--fu-c-line);
	border-radius: var(--fu-r-md);
	background: var(--fu-c-surface);
}

.fu-kpi__value {
	margin: 0;
	color: var(--fu-c-kop, var(--fu-c-fg));
	font-family: var(--fu-font-num);
	font-stretch: var(--fu-display-stretch);
	font-size: var(--fu-fs-2xl);
	font-weight: var(--fu-display-weight);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	line-height: 1;
}

.fu-kpi__value { margin-bottom: var(--fu-space-1); }
.fu-kpi__value span { margin-left: var(--fu-space-1); color: var(--fu-c-brand); font-size: 0.5em; letter-spacing: 0; }
.fu-kpi__label { margin: 0; color: var(--fu-c-fg); font: 400 var(--fu-fs-base) / 1.45 var(--fu-font-text); }
.fu-kpi__source { align-self: end; margin: var(--fu-space-2) 0 0; padding-top: var(--fu-space-3); border-top: var(--fu-lijn) solid var(--fu-c-line); color: var(--fu-c-fg-sub); font-size: var(--fu-fs-sm); }

@media (min-width: 720px) { .fu-kpi__value { font-size: var(--fu-fs-3xl); } }