/* ---------------------------------------------------------------------------
 * Blok: Matrix. Tekst naast een vierkante 2x2-matrix met twee dikke
 * asbalken (een knipoog naar de klassieke Digital Mastery-figuur), de namen
 * van de kwadranten in de buitenhoeken en een blauw groeipad door het midden.
 * Geen Figma-ontwerp: tokens en kaartstijl van de site.
 * ------------------------------------------------------------------------- */

.blok-matrix {
	--matrix-tekst: var(--c-donkerblauw);
	--matrix-gedempt: var(--c-grijs-4);
	--matrix-vlak: var(--c-wit);
	--matrix-rand: var(--c-grijs-2);
	--matrix-lijn: var(--c-grijs-3);
	--matrix-as: var(--c-donkerblauw);
	--matrix-as-tekst: var(--c-wit);
	--matrix-doel: rgb(81 181 249 / 12%);

	padding-block: var(--blok-pt) var(--blok-pb);
	color: var(--matrix-tekst);
}

.blok-matrix--donker {
	--matrix-tekst: var(--c-wit);
	--matrix-gedempt: rgb(255 255 255 / 70%);
	--matrix-vlak: rgb(255 255 255 / 4%);
	--matrix-rand: rgb(255 255 255 / 10%);
	--matrix-lijn: rgb(255 255 255 / 18%);
	--matrix-as: var(--c-blauw);
	--matrix-as-tekst: var(--c-donkerblauw);
	--matrix-doel: rgb(81 181 249 / 16%);

	background: var(--c-donkerblauw);
}

.blok-matrix__kolommen {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 96px;
	align-items: center;
}

/* Tekst */

.blok-matrix__titel {
	margin: 0 0 20px;
	font-size: var(--fs-h2);
	line-height: 1.25;
	color: var(--matrix-tekst);
}

.blok-matrix__tekstveld {
	color: var(--matrix-gedempt);
}

.blok-matrix__tekstveld p {
	margin: 0;
}

.blok-matrix__tekstveld p + p {
	margin-top: 18px;
}

.blok-matrix__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 40px;
}

/* Diagram: asbalk links, vlak, asbalk onder. */

.blok-matrix__figuur {
	margin: 0;
}

.blok-matrix__diagram {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	grid-template-rows: auto 36px;
	gap: 12px;
}

.blok-matrix__as {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--matrix-as);
	color: var(--matrix-as-tekst);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Pijlpunt aan het uiteinde van elke as. */
.blok-matrix__as--y {
	grid-column: 1;
	grid-row: 1;
	clip-path: polygon(50% 0, 100% 26px, 100% 100%, 0 100%, 0 26px);
	border-radius: 0 0 0 10px;
}

.blok-matrix__as--y span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.blok-matrix__as--x {
	grid-column: 2;
	grid-row: 2;
	clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
	border-radius: 0 0 0 10px;
}

/* Vlak met vier kwadranten */

.blok-matrix__vlak {
	position: relative;
	display: grid;
	grid-column: 2;
	grid-row: 1;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid var(--matrix-rand);
	border-radius: 22px;
	background: var(--matrix-vlak);
}

/* Kruis door het midden */
.blok-matrix__vlak::before,
.blok-matrix__vlak::after {
	content: "";
	position: absolute;
	background: var(--matrix-lijn);
	pointer-events: none;
}

.blok-matrix__vlak::before {
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
}

.blok-matrix__vlak::after {
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
}

.blok-matrix__kwadrant {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px 26px;
	transition: background-color var(--dur-lang) var(--ease-out);
}

.blok-matrix__kwadrant--lb {
	grid-area: 1 / 1;
}

.blok-matrix__kwadrant--rb {
	grid-area: 1 / 2;
	align-items: flex-end;
	text-align: right;
	background: var(--matrix-doel);
}

.blok-matrix__kwadrant--lo {
	grid-area: 2 / 1;
	justify-content: flex-end;
}

.blok-matrix__kwadrant--ro {
	grid-area: 2 / 2;
	align-items: flex-end;
	justify-content: flex-end;
	text-align: right;
}

.blok-matrix__naam {
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--matrix-tekst);
}

.blok-matrix__kwadrant--rb .blok-matrix__naam {
	color: var(--c-blauw);
}

.blok-matrix:not(.blok-matrix--donker) .blok-matrix__kwadrant--rb .blok-matrix__naam {
	color: #1784d1; /* blauw donker genoeg voor tekst op de lichte tint */
}

.blok-matrix__toelichting {
	max-width: 190px;
	font-size: 13px;
	line-height: 19px;
	color: var(--matrix-gedempt);
}

.blok-matrix__toelichting p {
	margin: 0;
}

/* Groeipad */

.blok-matrix__pad {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.blok-matrix__spoor,
.blok-matrix__lijn {
	fill: none;
	stroke-linecap: round;
}

.blok-matrix__spoor {
	stroke: var(--matrix-lijn);
	stroke-width: 0.5;
	stroke-dasharray: 1.4 1.6;
}

.blok-matrix__lijn {
	stroke: var(--c-blauw);
	stroke-width: 1;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.blok-matrix__loper {
	fill: var(--c-blauw);
	stroke: var(--c-wit);
	stroke-width: 0.6;
	opacity: 0;
}

.blok-matrix__punt {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	line-height: 1;
	transform: translate(-50%, -50%);
}

.blok-matrix__punt--start {
	left: 26%;
	top: 74%;
	width: 38px;
	height: 38px;
	background: var(--matrix-tekst);
	color: var(--matrix-vlak);
	font-size: 15px;
}

.blok-matrix--donker .blok-matrix__punt--start {
	color: var(--c-donkerblauw);
}

.blok-matrix__punt--eind {
	left: 74%;
	top: 26%;
	width: 54px;
	height: 54px;
	background: var(--c-blauw);
	color: var(--c-donkerblauw);
	font-size: 19px;
	box-shadow: 0 0 0 8px rgb(81 181 249 / 22%);
}

.blok-matrix__bron {
	margin-top: 16px;
	padding-left: 48px; /* gelijk met het vlak, naast de verticale as */
	font-size: 13px;
	color: var(--matrix-gedempt);
}

/* ---------------------------------------------------------------------------
 * Animatie (matrix.js): .is-wacht zet de beginstand, .is-speelt laat het
 * pad lopen, de loper bewegen en het doel oplichten. Zonder JavaScript of
 * bij bewegingsarm blijft de eindstand staan.
 * ------------------------------------------------------------------------- */

.blok-matrix__figuur.is-wacht .blok-matrix__lijn {
	stroke-dashoffset: 1;
}

.blok-matrix__figuur.is-wacht .blok-matrix__punt--eind {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.4);
}

.blok-matrix__figuur.is-wacht .blok-matrix__kwadrant--rb {
	background: transparent;
}

.blok-matrix__figuur.is-speelt .blok-matrix__lijn {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.8s var(--ease-out);
}

.blok-matrix__figuur.is-speelt .blok-matrix__loper {
	opacity: 1;
}

.blok-matrix__figuur.is-speelt .blok-matrix__punt--eind {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	transition: opacity 400ms var(--ease-out) 1.45s, transform 600ms var(--ease-out) 1.45s;
}

.blok-matrix__figuur.is-speelt .blok-matrix__kwadrant--rb {
	background: var(--matrix-doel);
	transition-delay: 1.3s;
}

@media (max-width: 1199px) {
	.blok-matrix__kolommen {
		gap: 56px;
	}

	.blok-matrix__kwadrant {
		padding: 18px 18px;
	}

	.blok-matrix__toelichting {
		max-width: 150px;
	}
}

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

	.blok-matrix__figuur {
		max-width: 560px;
	}
}

@media (max-width: 767px) {

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

	.blok-matrix__diagram {
		grid-template-columns: 28px minmax(0, 1fr);
		grid-template-rows: auto 28px;
		gap: 8px;
	}

	.blok-matrix__as {
		font-size: 10px;
		letter-spacing: 0.08em;
	}

	.blok-matrix__kwadrant {
		padding: 12px;
	}

	.blok-matrix__naam {
		font-size: 13px;
	}

	.blok-matrix__toelichting {
		display: none; /* te krap naast elkaar; de namen en het pad blijven */
	}

	.blok-matrix__punt--start {
		width: 30px;
		height: 30px;
		font-size: 13px;
	}

	.blok-matrix__punt--eind {
		width: 42px;
		height: 42px;
		font-size: 15px;
		box-shadow: 0 0 0 6px rgb(81 181 249 / 22%);
	}

	.blok-matrix__bron {
		padding-left: 36px;
	}
}