/* ------------------------------------------------------------------
   De opleidingspagina
   Eén lange pagina die twee dingen tegelijk moet doen: alles vertellen
   wat er te vertellen valt, en de lezer op elk moment naar de data
   kunnen brengen. Vandaar de vaste onderdelen: hero met de feiten
   eronder, een sprongbalk, en drie momenten waarop de vraag om in te
   schrijven terugkomt.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ hero */

.nlpa-ohero {
	min-height: 540px;
}

/* Op de homepage staat de tekst rechts en het paars valt van rechts in.
   Hier staat Eric rechts in beeld, dus draait het om. */
.nlpa-ohero__inhoud {
	max-width: 620px;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.nlpa-ohero .wp-block-buttons {
	margin-top: 30px;
}

/* --------------------------------------------------------- feitenstrook */

/* Schuift over de onderrand van de hero heen, zodat de twee als één
   geheel lezen en de belangrijkste vijf feiten meteen in beeld staan. */
.nlpa-feitenband {
	position: relative;
	z-index: 3;
	margin-top: -54px;
	padding-inline: var(--nlpa-marge);
}

/* Eén wit vlak, geen vijf vakjes. Alleen haarlijnen tussen de feiten. */
.nlpa-feiten {
	max-width: var(--nlpa-breed);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	background: var(--wp--preset--color--wit);
	border-radius: var(--nlpa-radius-groot);
	padding: clamp(18px, 1.9vw, 24px) clamp(18px, 2vw, 26px);
	box-shadow: var(--nlpa-schaduw-diep);
}

.nlpa-feiten > div {
	padding-inline: clamp(14px, 1.8vw, 26px);
	border-left: 1px solid var(--wp--preset--color--rand);
}

.nlpa-feiten > div:first-child {
	padding-left: 0;
	border-left: 0;
}

.nlpa-feiten b {
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: clamp(18px, 1.7vw, 21px);
	line-height: 1.2;
	color: var(--wp--preset--color--inkt);
}

.nlpa-feiten span {
	display: block;
	margin-top: 3px;
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--wp--preset--color--tekst-grijs);
}

/* De introductieworkshop gebruikt langere feiten dan de meerdaagse
   opleidingen. Op brede schermen houdt deze variant alle vijf regels op één
   hoogte zonder inhoud te schrappen. Op mobiel blijft de ruimere basisstijl. */
@media (min-width: 1024px) {
	.nlpa-feitenband--compact .nlpa-feiten {
		padding-block: 18px;
	}

	.nlpa-feitenband--compact .nlpa-feiten > div {
		padding-inline: 10px;
	}

	.nlpa-feitenband--compact .nlpa-feiten b {
		font-size: 17px;
	}

	.nlpa-feitenband--compact .nlpa-feiten span {
		font-size: 12.5px;
	}
}

/* ----------------------------------------------------------- sprongbalk */

.nlpa-sprong {
	border-bottom: 1px solid var(--wp--preset--color--rand);
	background: var(--wp--preset--color--wit);
	padding-inline: var(--nlpa-marge);
	margin-top: clamp(28px, 4vw, 44px);
}

.nlpa-sprong__binnen {
	max-width: var(--nlpa-breed);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 10px 26px;
	flex-wrap: wrap;
	padding-block: 6px;
}

.nlpa-sprong__links {
	display: contents;
}

.nlpa-sprong a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 0;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--wp--preset--color--tekst-grijs);
	text-decoration: none;
}

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

.nlpa-sprong__start {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-sprong__start b {
	font-family: var(--wp--preset--font-family--kop);
	color: var(--wp--preset--color--tekst);
}

.nlpa-sprong .nlpa-knop {
    min-height: 40px;
    padding: 9px 20px;
    font-size: 14px;
}

/* De algemene linkstijl van de sprongnavigatie mag CTA's niet overschrijven. */
.nlpa-sprong a.nlpa-knop,
.nlpa-sprong a.nlpa-knop:hover,
.nlpa-sprong a.nlpa-knop:focus-visible {
    color: var(--wp--preset--color--wit);
    text-decoration: none;
}

/* -------------------------------------------------------------- tweeluik */

.nlpa-tweeluik {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	gap: clamp(24px, 3vw, 42px);
	align-items: start;
}

.nlpa-tweeluik--omgekeerd {
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
}

.nlpa-tweeluik--omgekeerd .nlpa-tweeluik__beeld {
	order: -1;
}

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

.nlpa-tweeluik--omgekeerd img {
	aspect-ratio: 4 / 3;
}

.nlpa-tweeluik p {
	max-width: 62ch;
}

/* Foto en uitleg vormen één rustige compositie. Het witte tekstvlak ligt
   optisch boven de pagina, terwijl de foto een begrensde rol houdt. */
.nlpa-fototekst {
	grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
	gap: clamp(26px, 4vw, 56px);
	align-items: center;
}

.nlpa-fototekst.nlpa-tweeluik--omgekeerd {
	grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
}

.nlpa-fototekst .nlpa-tweeluik__beeld img {
	width: 100%;
	height: clamp(320px, 34vw, 430px);
	aspect-ratio: auto;
	object-fit: cover;
}

.nlpa-fototekst__kaart {
	position: relative;
	padding: clamp(26px, 3.6vw, 44px);
	border: 1px solid rgba(70, 32, 82, 0.08);
	border-radius: var(--nlpa-radius-kaart);
	background: var(--wp--preset--color--wit);
	box-shadow: 0 20px 50px rgba(70, 32, 82, 0.13);
}

.nlpa-fototekst__kaart::before {
	content: "";
	position: absolute;
	top: 28px;
	bottom: 28px;
	left: -5px;
	width: 5px;
	border-radius: 999px;
	background: var(--wp--preset--color--olijf);
}

.nlpa-fototekst__kaart > :first-child {
	margin-top: 0;
}

.nlpa-fototekst__kaart > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------- begeleide route */

/* Aangrenzende onderdelen horen inhoudelijk bij elkaar, maar wisselen wel van
   vlak. De kortere afstand houdt de samenhang zichtbaar. */
.nlpa-osectie--herkenning {
	padding-bottom: var(--nlpa-lucht-krap);
}

.nlpa-osectie--herkenning .nlpa-tweeluik,
.nlpa-osectie--praktijk .nlpa-tweeluik {
	align-items: center;
}

.nlpa-osectie--herkenning .nlpa-tweeluik__tekst p,
.nlpa-osectie--praktijk .nlpa-tweeluik__tekst p {
	max-width: 68ch;
	font-size: 17px;
}

/* ----------------------------------------------------------- groeilijst */

/* Zes wensen naast elkaar, zonder doosjes. Het vinkje is het enige
   merkteken dat ze bij elkaar houdt. */
.nlpa-groei {
	list-style: none;
	margin: clamp(18px, 2vw, 26px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2px clamp(24px, 3vw, 42px);
}

.nlpa-groei li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 12px;
	align-items: start;
	padding: 9px 0;
	border-bottom: 1px solid var(--wp--preset--color--rand);
	font-size: 17px;
	line-height: 1.6;
}

.nlpa-groei li::before {
	content: "\2713";
	font-weight: 700;
	color: var(--wp--preset--color--olijf-tekst);
	line-height: 1.5;
}

/* De conclusie onder de groeilijst krijgt een duidelijke leesroute:
   de kern links, de uitleg en uitklapper rechts. */
.nlpa-groeiconclusie {
	display: grid;
	grid-template-columns: minmax(250px, 0.76fr) minmax(0, 1.24fr);
	gap: clamp(28px, 4.5vw, 62px);
	align-items: start;
	margin-top: clamp(28px, 3.5vw, 44px);
	padding-top: clamp(24px, 3vw, 36px);
	border-top: 1px solid var(--wp--preset--color--rand);
}

.nlpa-groeiconclusie__kop,
.nlpa-groeiconclusie__inhoud {
	min-width: 0;
}

.nlpa-groeiconclusie__kop h2 {
	margin: 0;
	font-size: clamp(30px, 3vw, 44px);
	line-height: 1.12;
}

.nlpa-groeiconclusie__inhoud > p {
	max-width: 66ch;
	margin-top: 0;
	font-size: 17px;
	line-height: 1.7;
}

.nlpa-groeiconclusie__inhoud > p + p {
	margin-top: 18px;
}

.nlpa-groeiconclusie__inhoud .nlpa-uitklap {
	margin-top: clamp(18px, 2.2vw, 24px);
}

/* Tekst en bestaand cursusbeeld wisselen de beeldrichting van de volgende
   praktijkssectie af en houden de lengte op desktop beheersbaar. */
.nlpa-opzetbeeld {
	display: grid;
	grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
	gap: clamp(34px, 5vw, 68px);
	align-items: center;
}

.nlpa-opzetbeeld__tekst,
.nlpa-opzetbeeld__foto {
	min-width: 0;
}

.nlpa-opzetbeeld__tekst .nlpa-bovenkopje {
	margin-top: 0;
}

.nlpa-opzetbeeld__tekst h2 {
	margin: 0 0 clamp(24px, 3vw, 34px);
}

.nlpa-opzetbeeld__tekst > p:not(.nlpa-bovenkopje) {
	max-width: 66ch;
	font-size: 17px;
	line-height: 1.7;
}

.nlpa-opzetbeeld__foto {
	margin: 0;
}

.nlpa-opzetbeeld__foto img {
	display: block;
	width: 100%;
	height: clamp(360px, 32vw, 410px);
	object-fit: cover;
	object-position: 50% 48%;
	border-radius: var(--nlpa-radius-kaart);
}

/* Kop binnen een sectie, een maat kleiner dan de sectiekop. */
.nlpa-subkop {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	color: var(--wp--preset--color--inkt);
	margin: 30px 0 4px;
}

/* --------------------------------------------------------- uitklapblok */

.nlpa-uitklap {
	margin-top: 18px;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-kaart);
	background: var(--wp--preset--color--wit);
}

.nlpa-uitklap > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 14px 20px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 15.5px;
	color: var(--wp--preset--color--paars);
}

.nlpa-uitklap > summary::-webkit-details-marker {
	display: none;
}

.nlpa-uitklap > summary::after {
	content: "";
	margin-left: auto;
	width: 11px;
	height: 7px;
	background: no-repeat center / 100% 100%
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2377287C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nlpa-uitklap[open] > summary::after {
	transform: rotate(180deg);
}

.nlpa-uitklap__lijst {
	list-style: none;
	margin: 0;
	padding: 0 20px 20px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2px 36px;
}

.nlpa-uitklap__lijst li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 10px;
	padding: 8px 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-uitklap__lijst li::before {
	content: "\2713";
	font-weight: 700;
	color: var(--wp--preset--color--olijf-tekst);
}

/* --------------------------------------------------------- wat je krijgt */

.nlpa-praktisch {
	display: grid;
	gap: clamp(18px, 2.4vw, 28px);
}

.nlpa-praktisch__kolommen {
	display: grid;
	gap: clamp(18px, 2.4vw, 28px);
}

.nlpa-praktisch__kaart {
	min-width: 0;
	padding: clamp(20px, 2.4vw, 28px);
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-kaart);
	box-shadow: 0 14px 34px rgba(64, 31, 78, 0.07);
}

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

.nlpa-inbegrepen li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--rand);
	font-size: 17px;
	line-height: 1.55;
}

.nlpa-inbegrepen .nlpa-waarde {
	flex: none;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--wp--preset--color--olijf-tekst);
	white-space: nowrap;
}

.nlpa-ontvangt {
	margin-top: clamp(26px, 3vw, 36px);
	padding-top: clamp(20px, 2.4vw, 28px);
	border-top: 1px solid var(--wp--preset--color--rand);
}

.nlpa-ontvangt .nlpa-subkop {
	margin-top: 0;
}

.nlpa-ontvangt .nlpa-groei {
	grid-template-columns: 1fr;
	margin-top: 12px;
}

.nlpa-ontvangt .nlpa-groei li {
	padding: 8px 0;
	font-size: 16px;
}

.nlpa-praktisch__kaart.nlpa-ontvangt {
	margin-top: 0;
	padding-top: clamp(20px, 2.4vw, 28px);
	border-top: 1px solid var(--wp--preset--color--rand);
}

.nlpa-praktisch__kaart.nlpa-ontvangt .nlpa-groei li {
	font-size: 17px;
}

.nlpa-toelating__kop {
	margin-top: clamp(26px, 3vw, 36px);
	padding-top: clamp(20px, 2.4vw, 28px);
	border-top: 1px solid var(--wp--preset--color--rand);
}

.nlpa-toelating__kop .nlpa-bovenkopje {
	margin-bottom: 6px;
}

.nlpa-toelating__kop h2 {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 28px);
}

.nlpa-toelating {
	margin-top: 12px;
	border-top: 1px solid var(--wp--preset--color--rand);
	border-bottom: 1px solid var(--wp--preset--color--rand);
}

.nlpa-toelating > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	padding: 14px 0;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--paars);
}

.nlpa-toelating > summary::-webkit-details-marker {
	display: none;
}

.nlpa-toelating > summary::after {
	content: "";
	flex: none;
	margin-left: auto;
	width: 13px;
	height: 8px;
	background: no-repeat center / 100% 100%
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2377287C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nlpa-toelating[open] > summary::after {
	transform: rotate(180deg);
}

.nlpa-toelating > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--olijf);
	outline-offset: 4px;
}

.nlpa-toelating__inhoud {
	padding: 0 0 18px;
}

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

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

.nlpa-praktisch__toelating .nlpa-toelating__kop {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.nlpa-prijskaart {
	background: var(--wp--preset--color--paars-diep);
	color: var(--wp--preset--color--wit);
	border-radius: var(--nlpa-radius-kaart);
	padding: clamp(20px, 2.4vw, 28px);
	position: static;
}

.nlpa-prijskaart__label {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--olijf);
	margin: 0;
}

.nlpa-prijskaart__bedrag {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: clamp(34px, 4vw, 44px);
	line-height: 1.1;
	margin: 8px 0 2px;
}

.nlpa-prijskaart__btw {
	margin: 0 0 22px;
	font-size: 14.5px;
	color: var(--nlpa-tekst-op-donker-zacht);
}

.nlpa-prijskaart dl {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid rgba(253, 252, 253, 0.22);
	display: grid;
	gap: 10px;
}

.nlpa-prijskaart dl > div {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	font-size: 14.5px;
}

.nlpa-prijskaart dt {
	color: var(--nlpa-tekst-op-donker-zacht);
}

.nlpa-prijskaart__term {
	margin: 0;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.nlpa-prijskaart dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	text-align: right;
}

/* De feitenband is het visuele anker op brede schermen. De bronvolgorde blijft
   afgestemd op de bestaande mobiele leesroute. */
@media (min-width: 901px) {
	.nlpa-praktisch {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"feiten feiten"
			"kolommen kolommen"
			"toelating toelating";
	}

	.nlpa-praktisch__kolommen {
		grid-area: kolommen;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}

	.nlpa-praktisch__kaart {
		height: 100%;
	}

	.nlpa-prijskaart--band {
		grid-area: feiten;
		display: grid;
		grid-template-columns: minmax(250px, 1.25fr) minmax(0, 2fr);
		align-items: center;
		gap: clamp(22px, 3vw, 40px);
	}

	.nlpa-prijskaart--band .nlpa-prijskaart__hoofd {
		min-width: 0;
	}

	.nlpa-prijskaart--band dl {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		margin: 0;
		padding: 0;
		border-top: 0;
	}

	.nlpa-prijskaart--band dl > div {
		display: block;
		min-width: 0;
		padding: 2px clamp(12px, 1.6vw, 20px);
		border-left: 1px solid rgba(253, 252, 253, 0.22);
	}

	.nlpa-prijskaart--band dd {
		margin-top: 5px;
		text-align: left;
	}

	.nlpa-praktisch__toelating {
		grid-area: toelating;
		display: grid;
		grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
		align-items: start;
		gap: clamp(24px, 4vw, 54px);
	}

	.nlpa-praktisch__toelating .nlpa-toelating {
		margin-top: 0;
	}
}

@media (min-width: 901px) and (max-width: 1100px) {
	.nlpa-prijskaart--band {
		grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
	}

	.nlpa-prijskaart--band dl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 18px;
	}
}

/* Het formulier staat open in het lichte vlak. De haarlijn geeft voldoende
   begrenzing zonder er nog een kaart van te maken. */
.nlpa-osectie--brochure .nlpa-tweeluik {
	grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
	align-items: center;
	gap: clamp(34px, 5vw, 70px);
}

.nlpa-osectie--brochure .nlpa-formulier {
	background: transparent;
	border-top: 1px solid var(--wp--preset--color--rand);
	border-radius: 0;
	padding: clamp(20px, 2.4vw, 28px) 0 0;
}

.nlpa-osectie--brochure .nlpa-formulier input {
	min-height: 48px;
	background: var(--wp--preset--color--wit);
	font-size: 16px;
}

.nlpa-osectie--brochure .nlpa-formulier input:focus-visible,
.nlpa-osectie--brochure .nlpa-formulier button:focus-visible {
	outline: 3px solid var(--wp--preset--color--olijf);
	outline-offset: 3px;
}

.nlpa-osectie--brochure .nlpa-formulier button {
	min-height: 48px;
}

/* ------------------------------------------------------------- programma */

/* De zes inhoudelijke blokken vormen één leesreeks. Het nummer helpt bij de
   volgorde; haarlijnen houden de reeks bij elkaar zonder zes losse kaarten. */
.nlpa-programma {
	margin-top: clamp(22px, 3vw, 34px);
	border-top: 1px solid var(--wp--preset--color--rand);
}

.nlpa-zinskop {
	text-transform: lowercase;
}

.nlpa-zinskop__eerste,
.nlpa-zinskop__afkorting {
	text-transform: uppercase;
}

.nlpa-bronkop {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.5;
	color: var(--wp--preset--color--olijf-tekst);
}

.nlpa-osectie {
	overflow-wrap: anywhere;
}

.nlpa-osectie img,
.nlpa-osectie iframe,
.nlpa-osectie video {
	max-width: 100%;
	height: auto;
}

.nlpa-osectie summary {
	min-height: 44px;
}

.nlpa-osectie a:not(.nlpa-knop):not(.nlpa-video) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.nlpa-programmablok {
	border-bottom: 1px solid var(--wp--preset--color--rand);
}

.nlpa-programmablok > summary {
	list-style: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) 18px;
	gap: clamp(14px, 2vw, 24px);
	align-items: center;
	min-height: 72px;
	padding: 16px 0;
}

.nlpa-programmablok > summary::-webkit-details-marker {
	display: none;
}

.nlpa-programmablok > summary::after {
	content: "";
	width: 13px;
	height: 8px;
	background: no-repeat center / 100% 100%
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2377287C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nlpa-programmablok[open] > summary::after {
	transform: rotate(180deg);
}

.nlpa-programmablok__nr {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: 30px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--tekst-grijs);
	font-variant-numeric: tabular-nums;
}

.nlpa-programmablok__nr span {
	display: block;
	margin-bottom: 4px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--olijf-tekst);
}

.nlpa-programmablok h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: clamp(18px, 2vw, 21px);
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--inkt);
}

.nlpa-programmablok__inhoud {
	max-width: 72ch;
	padding: 0 42px 22px 96px;
}

.nlpa-programmablok__inhoud p {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-programmablok > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--olijf);
	outline-offset: 4px;
}

/* ------------------------------------------------------------------ faq */

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

.nlpa-faq details {
	border-bottom: 1px solid var(--wp--preset--color--rand);
}

.nlpa-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-height: 56px;
	padding: 14px 0;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.35;
	color: var(--wp--preset--color--paars);
}

.nlpa-faq summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--olijf);
	outline-offset: 4px;
}

.nlpa-faq summary::-webkit-details-marker {
	display: none;
}

.nlpa-faq summary::after {
	content: "";
	flex: none;
	margin-left: auto;
	margin-top: 6px;
	width: 13px;
	height: 8px;
	background: no-repeat center / 100% 100%
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2377287C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nlpa-faq details[open] summary::after {
	transform: rotate(180deg);
}

.nlpa-faq__antwoord {
	padding: 0 0 18px;
	max-width: 72ch;
}

.nlpa-faq__antwoord > :first-child {
	margin-top: 0;
}

.nlpa-faq__antwoord p,
.nlpa-faq__antwoord li {
	font-size: 17px;
	line-height: 1.7;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-faq__antwoord ul {
	margin: 10px 0 16px;
	padding-left: 20px;
}

.nlpa-faq__antwoord li {
	margin-bottom: 6px;
}

.nlpa-faq__antwoord li p {
	margin: 0;
}

/* ------------------------------------------------------------ ervaringen */

/* Video's zijn gelijkwaardige ervaringen en staan daarom op desktop op één
   rustige lijn. Op mobiel blijft dezelfde rij met de hand bedienbaar. */
.nlpa-videos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 28px);
	align-items: stretch;
}

.nlpa-videos:focus-visible {
	outline: 3px solid var(--wp--preset--color--olijf);
	outline-offset: 5px;
}

.nlpa-video,
.nlpa-video-review {
	display: block;
	width: 100%;
	padding: 0;
	height: 100%;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-kaart);
	overflow: hidden;
	background: var(--wp--preset--color--wit);
	text-decoration: none;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.nlpa-video__beeld,
.nlpa-video-review__beeld {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--wp--preset--color--paars-diep);
}

.nlpa-video img,
.nlpa-video-review img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.nlpa-video:hover img,
.nlpa-video:focus-visible img,
.nlpa-video-review:hover img,
.nlpa-video-review:focus-visible img {
	transform: scale(1.03);
}

.nlpa-video__voet,
.nlpa-video-review__voet {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 12px 16px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 15px;
	color: var(--wp--preset--color--paars);
}

.nlpa-video__voet::after,
.nlpa-video-review__voet::after {
	content: "\2192";
	margin-left: auto;
	color: var(--wp--preset--color--olijf-tekst);
	transform: translateX(-4px);
	opacity: 0;
	transition: opacity 0.15s ease-out, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.nlpa-video:hover .nlpa-video__voet::after,
.nlpa-video:focus-visible .nlpa-video__voet::after,
.nlpa-video-review:hover .nlpa-video-review__voet::after,
.nlpa-video-review:focus-visible .nlpa-video-review__voet::after {
	opacity: 1;
	transform: translateX(0);
}

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

.nlpa-video.is-playing,
.nlpa-video-review.is-playing {
	cursor: default;
}

.nlpa-video.is-playing .nlpa-video__voet::after,
.nlpa-video-review.is-playing .nlpa-video-review__voet::after {
	display: none;
}

.nlpa-citaten {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: clamp(18px, 2.4vw, 28px);
	margin-top: clamp(22px, 2.6vw, 32px);
	padding-top: clamp(20px, 2.4vw, 28px);
	border-top: 1px solid var(--wp--preset--color--rand);
	align-items: stretch;
}

.nlpa-citaat {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: clamp(22px, 2.8vw, 32px);
	border: 1px solid rgba(70, 32, 82, 0.08);
	border-radius: var(--nlpa-radius-kaart);
	background: var(--wp--preset--color--wit);
	box-shadow: 0 14px 34px rgba(70, 32, 82, 0.08);
}

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

.nlpa-citaat blockquote::before {
	content: "\201C";
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: 52px;
	line-height: 0.7;
	color: var(--wp--preset--color--olijf);
	margin-bottom: 10px;
}

.nlpa-citaat blockquote p {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--wp--preset--color--tekst);
}

.nlpa-citaat figcaption {
	margin-top: auto;
	padding-top: 20px;
	font-size: 13.5px;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-citaat figcaption b {
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 15px;
	color: var(--wp--preset--color--tekst);
}

/* -------------------------------------------------------------- startdata */

.nlpa-cohorten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: clamp(18px, 2.5vw, 26px);
	margin-top: clamp(18px, 2.2vw, 28px);
}

/* Drie startgroepen zijn administratief drie losse cursussen, dus krijgen ze
   alle drie dezelfde kolom. Het olijflijntje bovenaan bindt ze samen. */
.nlpa-cohort {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--wit);
	border: 0;
	border-top: 2px solid var(--wp--preset--color--olijf);
	border-radius: 0 0 var(--nlpa-radius-kaart) var(--nlpa-radius-kaart);
	padding: clamp(18px, 2vw, 24px) clamp(16px, 1.9vw, 22px) clamp(18px, 2vw, 24px);
	box-shadow: var(--nlpa-schaduw-zacht);
}

/* Drie kolommen naast elkaar, even breed en met dezelfde opmaak. De
   voetregel met prijs en knop staat bij alle drie op dezelfde hoogte. */
@media (min-width: 1050px) {
	.nlpa-cohorten {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: clamp(20px, 2.6vw, 30px);
		align-items: stretch;
	}
}

.nlpa-cohort h3 {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: 20px;
	line-height: 1.2;
	color: var(--wp--preset--color--inkt);
	margin: 0 0 6px;
}

.nlpa-cohort__plek {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-cohort__kop {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--olijf-tekst);
	margin: 0 0 6px;
}

/* De data zijn het antwoord op de vraag, dus die krijgen de ruimte. */
.nlpa-cohort__data {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nlpa-cohort__data li {
	padding: 6px 0;
	border-bottom: 1px solid var(--wp--preset--color--rand);
	font-size: 15.5px;
	line-height: 1.45;
	color: var(--wp--preset--color--tekst);
	font-variant-numeric: tabular-nums;
	text-wrap: pretty;
}

/* De extra informatie is bijzin, geen tweede opsomming. Vandaar één
   doorlopende regel met scheidingstekens in plaats van vijf vinkjes. */
.nlpa-cohort__extra {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-cohort__extra li {
	display: inline;
}

/* Het scheidingsteken hangt aan het vorige onderdeel vast, anders begint een
   nieuwe regel met een los puntje. */
.nlpa-cohort__extra li:not(:last-child)::after {
	content: " \00B7";
	color: var(--wp--preset--color--olijf-tekst);
	margin-right: 7px;
}

/* Op de Business Practitioner mag de scheiding in de praktische informatie
   iets duidelijker zijn, zonder extra regels of een hogere datumkaart. */
body.page-id-1063 .nlpa-cohort__extra li:not(:last-child)::after {
	font-size: 1.35em;
	font-weight: 900;
	line-height: 0;
	vertical-align: -0.06em;
}

/* Kopje boven de extra informatie krijgt lucht van de data erboven. */
.nlpa-cohort__data + .nlpa-cohort__kop {
	margin-top: clamp(14px, 1.8vw, 22px);
}

.nlpa-cohort__regel {
	margin-top: clamp(16px, 2vw, 24px);
	padding-top: clamp(12px, 1.6vw, 18px);
	border-top: 1px solid var(--wp--preset--color--rand);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.nlpa-cohort__prijs {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: 19px;
	color: var(--wp--preset--color--tekst);
}

.nlpa-cohort .nlpa-knop {
	min-height: 44px;
}

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

@media (max-width: 1023px) {
	.nlpa-feiten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.nlpa-feitenband {
		margin-top: -34px;
	}
	.nlpa-prijskaart {
		position: static;
	}
}

@media (max-width: 900px) {
	.nlpa-groeiconclusie,
	.nlpa-opzetbeeld {
		grid-template-columns: 1fr;
	}
	.nlpa-groeiconclusie {
		gap: 22px;
	}
	.nlpa-opzetbeeld {
		gap: 28px;
	}
	.nlpa-opzetbeeld__foto img {
		height: clamp(220px, 48vw, 320px);
	}
	.nlpa-tweeluik,
	.nlpa-tweeluik--omgekeerd {
		grid-template-columns: 1fr;
	}
	.nlpa-tweeluik--omgekeerd .nlpa-tweeluik__beeld {
		order: 0;
	}
	.nlpa-tweeluik img {
		aspect-ratio: 3 / 2;
	}
	.nlpa-fototekst,
	.nlpa-fototekst.nlpa-tweeluik--omgekeerd {
		grid-template-columns: 1fr;
	}
	.nlpa-fototekst .nlpa-tweeluik__beeld img {
		height: clamp(240px, 48vw, 390px);
		aspect-ratio: auto;
		object-fit: cover;
	}
	.nlpa-citaten {
		grid-template-columns: 1fr;
	}
	.nlpa-sprong__start {
		margin-left: 0;
		width: 100%;
	}
	.nlpa-osectie--brochure .nlpa-tweeluik,
	.nlpa-osectie--praktijk .nlpa-tweeluik {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.nlpa-opzetbeeld__foto img {
		height: min(68vw, 260px);
	}
	.nlpa-videos {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(82vw, 320px);
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline mandatory;
		scroll-padding-inline: 20px;
		padding-bottom: 12px;
	}
	.nlpa-video,
	.nlpa-video-review {
		scroll-snap-align: start;
	}
}

@media (max-width: 560px) {
	/* Lange opleidingsnamen moeten in de hero altijd binnen het scherm
	   afbreken. Dit speelt vooral bij namen als NLP Coach Opleiding. */
	.nlpa-ohero .wp-block-cover__inner-container,
	.nlpa-ohero__inhoud {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
	.nlpa-ohero .wp-block-cover__inner-container > .nlpa-ohero__inhoud {
		width: calc(100vw - (var(--nlpa-marge) * 2)) !important;
		max-width: calc(100vw - (var(--nlpa-marge) * 2)) !important;
	}
	.nlpa-ohero :where(h1, p) {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.nlpa-knop--accent {
		max-width: 100%;
		white-space: normal;
		overflow-wrap: anywhere;
	}
	.nlpa-feiten {
		grid-template-columns: 1fr;
	}
	.nlpa-feitenband {
		margin-top: -22px;
	}
	.nlpa-programmablok > summary {
		grid-template-columns: 54px minmax(0, 1fr) 16px;
		min-height: 60px;
		gap: 12px;
	}
	.nlpa-programmablok__nr {
		font-size: 25px;
	}
	.nlpa-programmablok__inhoud {
		padding: 0 0 20px 66px;
	}
	.nlpa-fototekst__kaart {
		padding: 24px 20px;
		box-shadow: 0 14px 34px rgba(70, 32, 82, 0.11);
	}
	.nlpa-fototekst__kaart::before {
		top: 22px;
		bottom: 22px;
	}
	.nlpa-inbegrepen li {
		display: grid;
		gap: 4px;
	}
	.nlpa-inbegrepen .nlpa-waarde {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nlpa-video img,
	.nlpa-video-review img,
	.nlpa-faq summary::after,
	.nlpa-uitklap > summary::after,
	.nlpa-programmablok > summary::after,
	.nlpa-toelating > summary::after {
		transition: none;
	}
}

/* De voetregel wordt naar de onderkant geduwd, zodat de drie knoppen op
   dezelfde hoogte staan. Moet na de basisregel komen, anders wint die. */
@media (min-width: 900px) {
	.nlpa-cohort .nlpa-cohort__regel {
		margin-top: auto;
	}
}
