/* ---------------------------------------------------------------------------
 * Blok: Subsidie-rekenhulp. Donker paneel (zelfde radius en kleur als de
 * donkere tegel van tekst_kaarten) met links de schuifbalk en rechts een
 * witte uitkomstkaart. Geen Figma-ontwerp: gebouwd met de tokens van de site.
 * ------------------------------------------------------------------------- */

.blok-rekenhulp {
	padding-block: var(--blok-pt) var(--blok-pb);
}

.blok-rekenhulp__paneel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	gap: 72px;
	align-items: center;
	overflow: clip;
	padding: 76px 80px;
	border-radius: var(--radius-sectie);
	background: var(--c-donkerblauw);
	color: var(--c-wit);
}

/* Beeldmerk-watermerk linksonder, deels buiten het paneel. */
.blok-rekenhulp__watermerk {
	position: absolute;
	left: -60px;
	bottom: -90px;
	width: 380px;
	height: auto;
	fill: var(--c-blauw);
	opacity: 0.07;
	pointer-events: none;
}

.blok-rekenhulp__invoer,
.blok-rekenhulp__uitkomst {
	position: relative;
}

.blok-rekenhulp__titel {
	margin: 0 0 18px;
	font-size: 40px;
	line-height: 50px;
	color: var(--c-wit);
}

.blok-rekenhulp__intro {
	color: rgb(255 255 255 / 80%);
}

.blok-rekenhulp__intro p {
	margin: 0;
}

.blok-rekenhulp__intro p + p {
	margin-top: 16px;
}

/* Schuifbalk */

.blok-rekenhulp__veld {
	margin-top: 44px;
}

.blok-rekenhulp__label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--c-blauw);
}

.blok-rekenhulp__bedrag {
	display: block;
	margin: 6px 0 22px;
	font-size: 56px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--c-wit);
}

.blok-rekenhulp__schuif {
	--vulling: 50%;
	width: 100%;
	height: 32px; /* groot raakvlak; de baan zelf is 8px */
	margin: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.blok-rekenhulp__schuif::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 99px;
	background: linear-gradient(to right, var(--c-blauw) var(--vulling), rgb(255 255 255 / 14%) var(--vulling));
}

.blok-rekenhulp__schuif::-moz-range-track {
	height: 8px;
	border-radius: 99px;
	background: rgb(255 255 255 / 14%);
}

.blok-rekenhulp__schuif::-moz-range-progress {
	height: 8px;
	border-radius: 99px;
	background: var(--c-blauw);
}

.blok-rekenhulp__schuif::-webkit-slider-thumb {
	width: 30px;
	height: 30px;
	margin-top: -11px;
	border: 7px solid var(--c-blauw);
	border-radius: 50%;
	background: var(--c-wit);
	box-shadow: 0 6px 18px rgb(0 0 0 / 35%);
	transition: transform var(--dur-kort) var(--ease-out);
	-webkit-appearance: none;
	appearance: none;
}

.blok-rekenhulp__schuif::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 7px solid var(--c-blauw);
	border-radius: 50%;
	background: var(--c-wit);
	box-shadow: 0 6px 18px rgb(0 0 0 / 35%);
}

.blok-rekenhulp__schuif:hover::-webkit-slider-thumb,
.blok-rekenhulp__schuif:active::-webkit-slider-thumb {
	transform: scale(1.12);
}

.blok-rekenhulp__schuif:focus-visible {
	outline: 2px solid var(--c-wit);
	outline-offset: 6px;
	border-radius: 6px;
}

.blok-rekenhulp__schaal {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 13px;
	color: rgb(255 255 255 / 55%);
}

.blok-rekenhulp__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 48px;
}

/* Uitkomstkaart */

.blok-rekenhulp__uitkomst {
	padding: 44px 44px 36px;
	border-radius: 20px;
	background: var(--c-wit);
	box-shadow: 0 30px 70px rgb(0 0 0 / 35%);
	color: var(--c-donkerblauw);
}

.blok-rekenhulp__uitkomst-label {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--c-grijs-4);
}

.blok-rekenhulp__subsidie {
	margin: 4px 0 8px;
	font-size: 64px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--c-donkerblauw);
	transition: color var(--dur-kort) var(--ease-out);
}

.blok-rekenhulp__melding {
	min-height: 52px; /* twee regels, zodat de kaart niet verspringt */
	margin: 0 0 26px;
	font-size: 15px;
	line-height: 26px;
	color: var(--c-grijs-4);
}

.is-onder .blok-rekenhulp__subsidie {
	color: var(--c-grijs-3);
}

.is-onder .blok-rekenhulp__melding,
.is-max .blok-rekenhulp__melding {
	color: var(--c-paars);
	font-weight: 600;
}

/* Verdeling: paarse baan (eigen bijdrage) met daarover het blauwe deel
 * (subsidie), geschaald met transform in plaats van breedte. */
.blok-rekenhulp__balk {
	--aandeel: 0.5;
	position: relative;
	height: 14px;
	overflow: hidden;
	border-radius: 99px;
	background: var(--c-paars);
}

.blok-rekenhulp__balk-subsidie {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--c-blauw);
	transform: scaleX(var(--aandeel));
	transform-origin: left;
	transition: transform 400ms var(--ease-out);
}

.blok-rekenhulp__verdeling {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 18px 0 0;
}

.blok-rekenhulp__verdeling dt {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--c-grijs-4);
}

.blok-rekenhulp__verdeling dd {
	margin: 2px 0 0;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.blok-rekenhulp__stip {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.blok-rekenhulp__stip--subsidie {
	background: var(--c-blauw);
}

.blok-rekenhulp__stip--eigen {
	background: var(--c-paars);
}

.blok-rekenhulp__toelichting {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--c-grijs-2);
	font-size: 13px;
	line-height: 21px;
	color: var(--c-grijs-4);
}

.blok-rekenhulp__toelichting p {
	margin: 0;
}

@media (max-width: 1199px) {
	.blok-rekenhulp__paneel {
		gap: 44px;
		padding: 56px 48px;
	}

	.blok-rekenhulp__bedrag {
		font-size: 46px;
	}

	.blok-rekenhulp__subsidie {
		font-size: 52px;
	}
}

@media (max-width: 899px) {
	.blok-rekenhulp__paneel {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {

	.blok-rekenhulp__paneel {
		gap: 32px;
		padding: 36px 22px 22px;
		border-radius: 20px;
	}

	.blok-rekenhulp__titel {
		font-size: 26px;
		line-height: 34px;
	}

	.blok-rekenhulp__veld {
		margin-top: 30px;
	}

	.blok-rekenhulp__bedrag {
		font-size: 38px;
	}

	.blok-rekenhulp__knoppen {
		margin-top: 32px;
	}

	.blok-rekenhulp__uitkomst {
		padding: 28px 22px 24px;
	}

	.blok-rekenhulp__subsidie {
		font-size: 42px;
	}

	.blok-rekenhulp__verdeling dd {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.blok-rekenhulp__balk-subsidie,
	.blok-rekenhulp__schuif::-webkit-slider-thumb {
		transition: none;
	}
}

/* Direct onder de pagina-hero: de hero heeft zelf al lucht onder de curve. */