/*
 * mp/kerncijfers — <dl> met kerncijfers. Sets: product, kort, hero-badge.
 * Alleen theme.json-variabelen (CONTRACT §7).
 */

.wp-block-mp-kerncijfers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(var(--wp--preset--spacing--10) * 1.5);
	margin: 0;
	padding: 0;
}

.wp-block-mp-kerncijfers .mp-kerncijfers__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
}

.wp-block-mp-kerncijfers .mp-kerncijfers__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.4;
	color: var(--wp--preset--color--tekst-meta);
}

.wp-block-mp-kerncijfers .mp-kerncijfers__waarde {
	margin: 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--navy);
	overflow-wrap: break-word;
}

/* Set product (product-hero): witte tegels. */
.wp-block-mp-kerncijfers.is-set-product .mp-kerncijfers__item {
	padding: var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--10) * 2.5);
	border-radius: var(--wp--custom--radius--m);
	background: var(--wp--preset--color--wit);
}

.wp-block-mp-kerncijfers.is-set-product .mp-kerncijfers__waarde {
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.45;
}

/* Set kort (home "In het kort"): raster met dunne lijnen. */
.wp-block-mp-kerncijfers.is-set-kort {
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--radius--l);
	background: var(--wp--preset--color--lijn);
}

.wp-block-mp-kerncijfers.is-set-kort .mp-kerncijfers__item {
	padding: calc(var(--wp--preset--spacing--10) * 2.25) calc(var(--wp--preset--spacing--10) * 2.5);
	background: var(--wp--preset--color--wit);
}

.wp-block-mp-kerncijfers.is-set-kort .mp-kerncijfers__waarde {
	font-size: var(--wp--preset--font-size--groot);
}

/* Set hero-badge (home-hero): witte badge met icoon; waarde boven het label. */
.wp-block-mp-kerncijfers.is-set-hero-badge {
	display: inline-flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: calc(var(--wp--preset--spacing--10) * 1.25) var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--10) * 1.25) calc(var(--wp--preset--spacing--10) * 1.25);
	border-radius: var(--wp--custom--radius--m);
	background: var(--wp--preset--color--wit);
	box-shadow: var(--wp--custom--schaduw--badge);
}

.wp-block-mp-kerncijfers.is-set-hero-badge .mp-kerncijfers__item {
	position: relative;
	flex-direction: column-reverse;
	justify-content: center;
	min-height: 40px;
	padding-left: 50px;
}

.wp-block-mp-kerncijfers.is-set-hero-badge .mp-kerncijfers__label {
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.2;
	color: var(--wp--preset--color--tekst-zacht);
}

.wp-block-mp-kerncijfers.is-set-hero-badge .mp-kerncijfers__waarde {
	font-size: var(--wp--preset--font-size--groot);
	letter-spacing: 0;
}

.wp-block-mp-kerncijfers .mp-kerncijfers__icoon {
	position: absolute;
	top: 50%;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: calc(var(--wp--custom--radius--s) * 1.5);
	background: var(--wp--preset--color--vlak-blauw);
	color: var(--wp--preset--color--primair);
	transform: translateY(-50%);
}

.wp-block-mp-kerncijfers .mp-kerncijfers__icoon svg {
	width: 22px;
	height: 22px;
}

/* Toelichting tussen haakjes (bijv. "(laagste stand)"): kleine regel onder de waarde (1.0.7). */
.wp-block-mp-kerncijfers .mp-kerncijfers__noot {
	display: block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--tekst-meta);
}

/* Mobiel: "In het kort" in één kolom (lange waarden); de productcijfers zijn kort en
   blijven 2 × 2, zodat de hero niet vier schermhoogtes beslaat (1.0.7). */
@media (max-width: 599.98px) {
	.wp-block-mp-kerncijfers.is-set-kort {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-mp-kerncijfers.is-set-product {
		gap: var(--wp--preset--spacing--10);
	}

	.wp-block-mp-kerncijfers.is-set-product .mp-kerncijfers__item {
		padding: calc(var(--wp--preset--spacing--10) * 1.5) calc(var(--wp--preset--spacing--10) * 2);
	}

	.wp-block-mp-kerncijfers.is-set-product .mp-kerncijfers__waarde {
		margin-top: auto; /* waarden op één lijn, ook als een label over twee regels loopt */
		font-size: var(--wp--preset--font-size--groot);
		line-height: 1.3;
	}
}

@media (max-width: 359.98px) {
	.wp-block-mp-kerncijfers.is-set-product {
		grid-template-columns: minmax(0, 1fr);
	}
}