/* ------------------------------------------------------------------
   Secties van de homepage
   Drie verschillende vormen in plaats van drie keer dezelfde rij kaarten.
   De opleidingen zijn een route, de beloftes zijn uitspraken en de
   ervaringen hebben verschil in gewicht.
   ------------------------------------------------------------------ */

/* De achttien pixels standaard blokruimte veroorzaken witte stroken tussen
   gekleurde secties. Op de homepage sluiten de secties direct op elkaar aan. */
.home .entry-content > * {
	margin-block-start: 0;
}

/* ---------------------------------------------------- opleidingsteksten */

/* De zes ingangen delen één leeslijst. Haarlijnen houden de samenhang
   zichtbaar zonder ieder onderdeel in een kaart te veranderen. */
.nlpa-opleidingsteksten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0 clamp(28px, 4vw, 54px);
	margin-top: clamp(28px, 4vw, 48px);
	border-top: 1px solid var(--wp--preset--color--rand);
}

.nlpa-opleidingstekst {
	display: grid;
	grid-template-rows: auto 1fr auto;
	padding-block: clamp(24px, 3vw, 34px);
	border-bottom: 1px solid var(--wp--preset--color--rand);
}

.nlpa-opleidingstekst h3 {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
	margin: 0 0 10px;
}

.nlpa-opleidingstekst h3 a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--inkt);
	text-decoration: none;
}

.nlpa-opleidingstekst h3 a:hover,
.nlpa-opleidingstekst h3 a:focus-visible {
	color: var(--wp--preset--color--paars);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.nlpa-opleidingstekst p {
	font-size: 16px;
	color: var(--wp--preset--color--tekst-grijs);
	margin: 0 0 12px;
	max-width: 48ch;
}

.nlpa-opleidingstekst__link {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 14px;
	color: var(--wp--preset--color--paars);
	text-underline-offset: 4px;
}

/* ------------------------------------------------------ beeld en video */

.nlpa-overonsbeeld {
	margin: 0;
}

.nlpa-overonsbeeld img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--nlpa-radius-groot);
}

.nlpa-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.nlpa-sectie--donker :where(h2, h3) {
	color: var(--wp--preset--color--wit);
}

.nlpa-sectie--donker p {
	color: var(--nlpa-tekst-op-donker-zacht);
}

.nlpa-slot {
	margin-top: clamp(48px, 7vw, 84px);
	padding-top: clamp(34px, 4vw, 52px);
	border-top: 1px solid var(--wp--preset--color--rand);
	text-align: center;
}

.nlpa-slot .wp-block-buttons {
	justify-content: center;
}

/* ------------------------------------------- de meest gekozen opleiding */

/* De tekst schuift over de foto heen in plaats van er netjes naast te staan.
   Twee even brede kolommen naast elkaar is precies wat de pagina blokkerig
   maakte. */
.nlpa-uitgelicht {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 0;
	align-items: center;
	margin-block: clamp(22px, 3vw, 40px);
}

.nlpa-uitgelicht__beeld img {
	width: 100%;
	aspect-ratio: 5 / 6;
	object-fit: cover;
	border-radius: var(--nlpa-radius-groot);
	display: block;
}

.nlpa-uitgelicht__tekst {
	position: relative;
	z-index: 2;
	background: var(--wp--preset--color--wit);
	border-radius: var(--nlpa-radius-groot);
	padding: clamp(28px, 3.4vw, 48px);
	margin-left: clamp(-84px, -5vw, -28px);
	box-shadow: var(--nlpa-schaduw-diep);
}

.has-paneel-background-color .nlpa-uitgelicht__tekst {
	background: var(--wp--preset--color--wit);
}

.nlpa-uitgelicht__label {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--olijf-tekst);
	margin: 0 0 10px;
}

.nlpa-uitgelicht h3 {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.15;
	color: var(--wp--preset--color--inkt);
	margin: 0 0 14px;
}

.nlpa-uitgelicht h3 a {
	color: inherit;
	text-decoration: none;
}

.nlpa-uitgelicht h3 a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.nlpa-uitgelicht p {
	max-width: 52ch;
}

/* De feiten als beschrijvingslijst: het zijn paren, geen losse woorden. */
.nlpa-uitgelicht__feiten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 2px 24px;
	margin: 22px 0;
	padding: 18px 0;
	border-top: 1px solid var(--wp--preset--color--rand);
	border-bottom: 1px solid var(--wp--preset--color--rand);
}

.nlpa-uitgelicht__feiten dt {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-uitgelicht__feiten dd {
	margin: 2px 0 10px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--tekst);
}

.nlpa-uitgelicht__actie {
	margin: 0;
}

/* --------------------------------------------------------------- de route */

.nlpa-route {
	margin-block: clamp(28px, 3.6vw, 46px);
}

.nlpa-route__kop,
.nlpa-varianten h3 {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 19px;
	color: var(--wp--preset--color--inkt);
	margin: 0 0 22px;
}

.nlpa-route__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: clamp(16px, 2.2vw, 26px);
	position: relative;
}

/* De zwierboog uit het logo verbindt de vier stappen. Puur decoratie, dus
   verborgen voor schermlezers en weg zodra de stappen onder elkaar staan. */
.nlpa-route__lijst::before {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	top: 13px;
	height: 12px;
	background: no-repeat center / 100% 100%
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M0 10.5C90 3.5 260 1 400 2.5' fill='none' stroke='%23B8B233' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	pointer-events: none;
}

.nlpa-stap {
	position: relative;
	padding-top: 40px;
	/* Zodat de duur onderaan uitlijnt, ook als de ene omschrijving een regel
	   langer is dan de andere. */
	display: flex;
	flex-direction: column;
	height: 100%;
}

.nlpa-stap__nr {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--wit);
	border: 2px solid var(--wp--preset--color--olijf);
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: 12px;
	color: var(--wp--preset--color--paars-diep);
}

.nlpa-stap__titel {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	color: var(--wp--preset--color--inkt);
	margin: 0 0 8px;
}

.nlpa-stap__titel a {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	min-height: 0;
	padding-block: 4px;
}

.nlpa-stap__titel a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.nlpa-stap p {
	font-size: 15.5px;
	color: var(--wp--preset--color--tekst-grijs);
	margin: 0 0 10px;
	max-width: 32ch;
}

.nlpa-stap__feit {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 12.5px;
	color: var(--wp--preset--color--tekst-grijs);
	margin-top: auto;
	padding-top: 4px;
}

/* ------------------------------------------------------------- varianten */

.nlpa-varianten {
	padding-top: clamp(20px, 2.6vw, 30px);
	border-top: 1px solid var(--wp--preset--color--rand);
}

.nlpa-variantgroepen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.2vw, 24px);
}

.nlpa-variantgroep {
	padding: clamp(20px, 2.2vw, 26px);
	background: var(--wp--preset--color--paneel);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-kaart);
}

.nlpa-variantgroep::before {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin-bottom: 16px;
	background: var(--wp--preset--color--olijf);
	border-radius: 999px;
}

.nlpa-variantgroep h3 {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.3;
	color: var(--wp--preset--color--inkt);
}

.nlpa-variantgroep ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nlpa-variantgroep li + li {
	border-top: 1px solid var(--wp--preset--color--rand);
}

.nlpa-variantgroep a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 12px;
	min-height: 68px;
	padding-block: 12px;
	font-family: var(--wp--preset--font-family--kop);
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
}

.nlpa-variantgroep strong {
	grid-column: 1;
	display: block;
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--wp--preset--color--inkt);
}

.nlpa-variantgroep span {
	grid-column: 1;
	display: block;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--basis);
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-variantgroep a::after {
	content: "\2192";
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	color: var(--wp--preset--color--paars);
	transition: transform 0.18s var(--nlpa-veer);
}

.nlpa-variantgroep a:hover strong,
.nlpa-variantgroep a:focus-visible strong {
	color: var(--wp--preset--color--paars);
}

.nlpa-variantgroep a:hover::after,
.nlpa-variantgroep a:focus-visible::after {
	transform: translateX(4px);
}

/* -------------------------------------------------------------- beloftes */

.nlpa-beloftes {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
	gap: clamp(22px, 3.4vw, 46px);
	align-items: start;
}

.nlpa-beloftes__kop h2 {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: clamp(25px, 3.2vw, 34px);
	line-height: 1.15;
	color: var(--wp--preset--color--inkt);
	margin: 0 0 14px;
}

.nlpa-beloftes__kop p {
	color: var(--wp--preset--color--tekst-grijs);
	margin: 0;
}

/* Geen doosjes, geen randen. Zes uitspraken naast elkaar in twee kolommen,
   met het nummer als enige markering. */
.nlpa-beloftes__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(16px, 2vw, 24px) clamp(24px, 3vw, 40px);
}

.nlpa-waardenkaarten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.6vw, 30px);
}

.nlpa-waardekaart {
	position: relative;
	padding: clamp(26px, 3vw, 36px);
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-kaart);
	box-shadow: var(--nlpa-schaduw-zacht);
}

.nlpa-waardekaart::before {
	content: "";
	display: block;
	width: 58px;
	height: 3px;
	margin-bottom: 22px;
	background: var(--wp--preset--color--olijf);
	border-radius: 999px;
}

.nlpa-waardekaart h3 {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: clamp(19px, 2vw, 23px);
	line-height: 1.25;
	color: var(--wp--preset--color--inkt);
}

.nlpa-waardekaart p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-redenen-home {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 3vw, 36px) clamp(28px, 4vw, 52px);
}

.nlpa-belofte {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 14px;
	row-gap: 2px;
}

.nlpa-belofte__nr {
	grid-row: 1 / span 2;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: 13px;
	color: var(--wp--preset--color--olijf-tekst);
	padding-top: 4px;
}

.nlpa-belofte h3 {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	color: var(--wp--preset--color--tekst);
	margin: 0;
}

.nlpa-belofte p {
	font-size: 15.5px;
	color: var(--wp--preset--color--tekst-grijs);
	margin: 0;
}

/* -------------------------------------------------------------- stemmen */

.nlpa-sectie--stemmen {
	color: var(--wp--preset--color--tekst);
	margin-bottom: 0;
}

.nlpa-sectie--stemmen h2 {
	color: var(--wp--preset--color--inkt);
}

.nlpa-stemmen {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: clamp(18px, 2.8vw, 32px);
	align-items: stretch;
}

.nlpa-stem {
	margin: 0;
	padding: clamp(26px, 3.2vw, 40px);
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-groot);
	box-shadow: var(--nlpa-schaduw-zacht);
}

.nlpa-stem blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.nlpa-stem blockquote p {
	margin: 0;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.6;
	color: var(--wp--preset--color--tekst);
}

.nlpa-stem--groot blockquote p {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: clamp(20px, 2.15vw, 27px);
	line-height: 1.42;
	letter-spacing: -0.01em;
}

/* Het aanhalingsteken als merkgebaar, in de olijfkleur van de boog. */
.nlpa-stem blockquote::before {
	content: "\201C";
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: 58px;
	line-height: 0.7;
	color: var(--wp--preset--color--olijf-tekst);
	margin-bottom: 12px;
}

.nlpa-stem figcaption {
	margin-top: 18px;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 13.5px;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-stem figcaption b {
	display: block;
	font-weight: 700;
	font-size: 15px;
	color: var(--wp--preset--color--inkt);
}

/* ------------------------------------------------------------- brochure */

.nlpa-brochure {
	background: var(--wp--preset--color--wit);
}

.nlpa-brochure__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
	gap: clamp(42px, 6vw, 86px);
	align-items: center;
}

.nlpa-brochure__inhoud {
	max-width: 540px;
}

.nlpa-brochure__inhoud h2 {
	margin: 0 0 22px;
	color: var(--wp--preset--color--inkt);
}

.nlpa-brochure__inhoud p {
	margin: 0 0 14px;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-brochure__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: 16px;
	padding: 12px 26px;
	border-radius: var(--nlpa-radius-knop);
	background: var(--wp--preset--color--paars);
	color: var(--wp--preset--color--wit);
	font-family: var(--wp--preset--font-family--kop);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
}

.nlpa-brochure__knop:hover {
	background: var(--wp--preset--color--paars-diep);
	color: var(--wp--preset--color--wit);
	text-decoration: none;
}

.nlpa-brochure__beeld {
	position: relative;
	margin: 0 12px 12px 0;
}

.nlpa-brochure__beeld::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 18px -12px -12px 18px;
	border-radius: var(--nlpa-radius-groot);
	background: var(--wp--preset--color--olijf);
}

.nlpa-brochure__beeld img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center 36%;
	border-radius: var(--nlpa-radius-groot);
	box-shadow: var(--nlpa-schaduw-zacht);
}

.nlpa-cijfer {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding-bottom: 26px;
	border-bottom: 1px solid rgba(253, 252, 253, 0.2);
}

.nlpa-cijfer b {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: 46px;
	line-height: 1;
	color: var(--wp--preset--color--olijf);
}

.nlpa-cijfer span {
	font-size: 14.5px;
	color: var(--nlpa-tekst-op-donker-zacht);
	max-width: 26ch;
}

/* De deelnemersvideo's vormen één horizontale rij. De gedeeltelijk zichtbare
   volgende kaart maakt duidelijk dat de rij verdergaat. */
.nlpa-videocarrousel {
	outline: none;
}

.nlpa-sectie--videoverhalen {
	border-top: 1px solid var(--wp--preset--color--rand);
}

.nlpa-videocarrousel__bediening {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 14px;
}

.nlpa-videocarrousel__bediening button {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--paars);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 21px;
	line-height: 1;
	color: var(--wp--preset--color--paars);
	cursor: pointer;
	transition:
		background-color 0.15s ease-out,
		color 0.15s ease-out,
		opacity 0.15s ease-out;
}

.nlpa-videocarrousel__bediening button:hover,
.nlpa-videocarrousel__bediening button:focus-visible {
	background: var(--wp--preset--color--paars);
	color: var(--wp--preset--color--wit);
}

.nlpa-videocarrousel__bediening button:disabled {
	opacity: 0.32;
	cursor: default;
}

.nlpa-videocarrousel__bediening button:disabled:hover {
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--paars);
}

.home .nlpa-videocarrousel .nlpa-videos {
	display: flex;
	grid-template-columns: none;
	gap: clamp(16px, 2vw, 24px);
	margin-inline: 0;
	padding: 4px 2px 18px;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	scroll-padding-inline: 2px;
	scrollbar-color: var(--wp--preset--color--paars) transparent;
	scrollbar-width: thin;
}

.home .nlpa-videocarrousel .nlpa-videos > * {
	flex: 0 0 clamp(320px, 39vw, 440px);
	grid-column: auto;
	margin-top: 0;
	scroll-snap-align: start;
}

.nlpa-videokaart {
	overflow: hidden;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-groot);
	box-shadow: var(--nlpa-schaduw-zacht);
}

.nlpa-videokaart .nlpa-video {
	border: 0;
	border-radius: 0;
}

.nlpa-videokaart h3 {
	margin: 0;
	padding: 18px 20px 20px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 17px;
	color: var(--wp--preset--color--inkt);
}

.nlpa-schuifhint {
	margin: 5px 0 0;
	font-size: 13px;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-videocarrousel .nlpa-videos:focus-visible {
	outline: 3px solid var(--wp--preset--color--paars);
	outline-offset: 6px;
	border-radius: 4px;
}

/* ------------------------------------------------------------- formaten */

@media (max-width: 900px) {
	.nlpa-uitgelicht,
	.nlpa-beloftes,
	.nlpa-stemmen {
		grid-template-columns: 1fr;
	}
	.nlpa-redenen-home {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* Onder elkaar hoeft de tekst niet over de foto te schuiven. */
	.nlpa-uitgelicht__tekst {
		margin-left: 0;
		margin-top: -28px;
		padding: 24px;
	}
	.nlpa-uitgelicht__beeld img {
		aspect-ratio: 4 / 3;
	}
	.nlpa-route__lijst::before {
		display: none;
	}
	.nlpa-stap {
		padding-top: 0;
		padding-left: 46px;
	}
	.nlpa-stap__nr {
		top: 2px;
	}
}

@media (max-width: 760px) {
	.nlpa-brochure__grid {
		grid-template-columns: 1fr;
	}

	.nlpa-brochure__inhoud {
		max-width: 680px;
	}
}

@media (max-width: 720px) {
	.nlpa-waardenkaarten,
	.nlpa-variantgroepen {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.nlpa-redenen-home,
	.nlpa-waardenkaarten,
	.nlpa-variantgroepen {
		grid-template-columns: 1fr;
	}
	.home .nlpa-videocarrousel .nlpa-videos > * {
		flex-basis: min(78vw, 320px);
	}
}