/*
 * [vm_vaarpartner_profiel]: de complete profielpagina van een vaarpartner. Alleen tokens uit
 * tokens.css, geen losse hexcodes of fontnamen. Specificiteit: elke regel begint met `.vm` en
 * de klasse van het onderdeel, zodat de koppen, lijsten, afbeeldingen en links van de
 * Elementor-kit en het thema verliezen, zonder !important.
 *
 * Mobile first; desktop vanaf 1024px, tablet volgt de mobiele opbouw. `profiel_tier` bepaalt de
 * layout: `.vm-vp--tier0` (gratis, één kolom) of `.vm-vp--tier123` (Basis/Plus/Pro).
 *
 * Tier 1-3, desktop: `.vm-vp__lay` is een grid met twee vaste kinderen, allebei met een
 * expliciete `grid-row`/`grid-column` (bewust geen `order` of een rij-spannende kaart: dat
 * plaatste de kaart in rij 1 met de hoofdkolom eronder in rij 2, zie CHANGELOG 0.12.1):
 *  - `.vm-vp__hoofd` (kolom 1): sfeerfoto, korte kruimelpad, tekstblok, CTA, bodytekst, andere;
 *  - `.vm-vp__zij` (kolom 2): de bedrijfsgegevens-kaart, sticky.
 * Het volledige kruimelpad is een eigen element vóór `.vm-vp__lay` (niet in de hoofdkolom).
 * Kruimelpad-varianten zijn twee losse renders (vm_vp_kruimelpad_html()), niet één met CSS die
 * losse stappen verbergt: `--boven` (volledig, alleen zichtbaar vanaf 1024px) en `--kort`
 * (alleen zichtbaar onder 1024px).
 */

.vm.vm-vp {
	--vm-cta-w: 609px;
	--vm-cta-gap: var(--vm-s4);
	padding-block: var(--vm-sectie-y);
}

/* Mobiel: is er een sfeerfoto, dan sluit die direct aan op de sitekop (geen kop-padding erboven). */
.vm.vm-vp--met-foto {
	padding-top: 0;
}

@media (min-width: 1024px) {
	.vm.vm-vp--met-foto {
		padding-top: var(--vm-sectie-y);
	}
}

/* ---------- Gedeeld: knoppen, meta, kruimelpad ---------- */

.vm .vm-vp__knop,
.vm .vm-vp__knop:link,
.vm .vm-vp__knop:visited,
.vm .vm-vp__knop:active,
.vm .vm-vp__knop:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vm-s2);
	width: 100%;
	min-height: 48px;
	margin-top: var(--vm-s4);
	padding: 0 var(--vm-s5);
	border: 0;
	border-radius: var(--vm-r-s);
	background: var(--vm-knop);
	box-shadow: none;
	font-family: var(--vm-font-tekst);
	font-size: var(--vm-veld);
	font-weight: 700;
	line-height: 1.2;
	color: var(--vm-wit);
	text-align: center;
	text-decoration: none;
	transition: background-color .18s ease;
}

.vm .vm-vp__knop:hover {
	background: var(--vm-knop-hover);
	color: var(--vm-wit);
	text-decoration: none;
}

.vm .vm-vp__knop:focus-visible {
	outline: 2px solid var(--vm-blauw-700);
	outline-offset: 2px;
}

.vm a.vm-vp__knop-sec,
.vm a.vm-vp__knop-sec:link,
.vm a.vm-vp__knop-sec:visited,
.vm a.vm-vp__knop-sec:active,
.vm a.vm-vp__knop-sec:focus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 var(--vm-s4);
	border: 1px solid var(--vm-lijn);
	border-radius: var(--vm-r-s);
	background: var(--vm-wit);
	box-shadow: none;
	font-family: var(--vm-font-tekst);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--vm-blauw-700);
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease;
}

.vm a.vm-vp__knop-sec:hover {
	border-color: var(--vm-blauw-rand);
	background: var(--vm-blauw-50);
	color: var(--vm-blauw-700);
	text-decoration: none;
}

.vm a.vm-vp__knop-sec:focus-visible {
	outline: 2px solid var(--vm-blauw-700);
	outline-offset: 2px;
}

.vm .vm-vp__meta {
	margin: var(--vm-s2) 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--vm-grijs);
}

.vm .vm-vp__meta-plaats {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	vertical-align: bottom;
}

.vm .vm-vp__meta-punt {
	margin: 0 var(--vm-s2);
}

/* Kruimelpad: twee losse renders. --kort (Vaarpartners › subcategorie › naam) alleen onder
   1024px, --boven (Home › Vaarpartners › hoofdcategorie › subcategorie › naam) alleen vanaf
   1024px. --boven staat buiten .vm-vp__lay, dus zonder margin-top van de hoofdkolom. */
.vm .vm-vp__kruimel {
	margin: 0 0 var(--vm-s3);
	font-size: 12px;
	line-height: 1.5;
	color: var(--vm-grijs);
}

.vm .vm-vp__kruimel--boven {
	display: none;
}

@media (min-width: 1024px) {
	.vm .vm-vp__kruimel--boven {
		display: block;
		margin-bottom: var(--vm-s5);
		font-size: 13px;
	}

	.vm .vm-vp__kruimel--kort {
		display: none;
	}
}

.vm .vm-vp__kruimel ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--vm-s1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vm .vm-vp__kruimel-item {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-s1);
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

.vm .vm-vp__kruimel a,
.vm .vm-vp__kruimel a:link,
.vm .vm-vp__kruimel a:visited {
	color: var(--vm-grijs);
	text-decoration: none;
}

.vm .vm-vp__kruimel a:hover {
	color: var(--vm-blauw-700);
	text-decoration: underline;
}

.vm .vm-vp__kruimel [aria-current="page"] {
	color: var(--vm-inkt);
}

.vm .vm-vp__naam {
	margin: 0;
	font-family: var(--vm-font-kop);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--vm-inkt-sterk);
	overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
	.vm .vm-vp__knop,
	.vm a.vm-vp__knop-sec {
		transition: none;
	}
}

/* ---------- Tier 0: gratis, één kolom ---------- */

.vm-vp--tier0 .vm-vp__naam {
	margin-top: var(--vm-s4);
}

.vm-vp--tier0 .vm-vp__body {
	margin-top: var(--vm-s5);
}

.vm-vp--tier0 .vm-vp__gegevens {
	margin-top: var(--vm-s6);
	max-width: 609px;
}

.vm-vp--tier0 .vm-vp__aanbevolen,
.vm-vp--tier0 .vm-vp__andere {
	margin-top: var(--vm-sectie-y);
}

.vm-vp--tier0 .vm-vp__naam {
	font-size: 24px;
}

@media (min-width: 1024px) {
	.vm-vp--tier0 > .vm-container > * {
		max-width: 875px;
	}

	.vm-vp--tier0 .vm-vp__body .vm-vp-body {
		font-size: 17px;
	}
}

/* ---------- Tier 1-3: foto/logo, tekstblok, CTA, kaart in de zijkolom ---------- */

/*
 * Mobiel: .vm-vp__lay is een flex-kolom. .vm-vp__hoofd staat op display:contents (geen eigen
 * doos), zodat zijn kinderen (foto, kruimelpad, tekst, CTA, body, andere) samen met .vm-vp__zij
 * rechtstreeks flex-items van .vm-vp__lay zijn. Zo kan .vm-vp__zij (de gegevenskaart) met
 * `order` vóór "andere bedrijven" komen, zonder iets dubbel te renderen. Vanaf 1024px wordt dit
 * weer een grid (hieronder) en krijgt .vm-vp__hoofd zijn eigen doos terug.
 */
.vm-vp--tier123 .vm-vp__lay {
	display: flex;
	flex-direction: column;
}

.vm-vp--tier123 .vm-vp__hoofd {
	display: contents;
}

.vm-vp--tier123 .vm-vp__hoofd > * {
	margin-top: var(--vm-s5);
}

.vm-vp--tier123 .vm-vp__hoofd > *:first-child {
	margin-top: 0;
}

/* Gegevenskaart vóór "andere bedrijven" (order 1 vóór order 2; de rest blijft op order 0). */
.vm-vp--tier123 .vm-vp__zij {
	order: 1;
	margin-top: 40px;
}

/* Sfeerfoto: mobiel volle breedte (uitbraak tot de schermrand), 130px hoog, geen radius */
.vm-vp--tier123 .vm-vp__media {
	position: relative;
	width: 100vw;
	height: 130px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--vm-zand);
}

.vm-vp--tier123 .vm-vp__media--zonder-foto {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	background: none;
}

.vm-vp--tier123 .vm-vp__foto {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}

/* Logo-vak: overlapt de foto (144×72, links 16px, -36px onder de foto) */
.vm-vp--tier123 .vm-vp__logo {
	position: absolute;
	bottom: -36px;
	left: var(--vm-s4);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 144px;
	height: 72px;
	padding: 10px;
	border-radius: 12px;
	background: var(--vm-zand);
	box-shadow: var(--vm-sch-1);
}

/* Zonder foto: logo statisch, geen overlap */
.vm-vp--tier123 .vm-vp__media--zonder-foto .vm-vp__logo {
	position: static;
}

.vm .vm-vp__logo-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: contain;
}

/* Korte kruimelpad: extra ruimte boven om de overlappende logo heen (36 + 24px) */
.vm-vp--tier123 .vm-vp__media:not(.vm-vp__media--zonder-foto) + .vm-vp__kruimel--kort {
	margin-top: 60px;
}

.vm-vp--tier123 .vm-vp__tagline {
	margin: var(--vm-s3) 0 0;
	font-family: var(--vm-font-kop);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	color: var(--vm-blauw-700);
}

.vm-vp--tier123 .vm-vp__intro {
	margin: var(--vm-s2) 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--vm-grijs);
}

/* Ruimte rond de primaire knop en de bodytekst */
.vm.vm-vp--tier123 .vm-vp__knop,
.vm.vm-vp--tier123 .vm-vp__knop:link,
.vm.vm-vp--tier123 .vm-vp__knop:visited {
	margin-top: 28px;
}

.vm.vm-vp--tier123 .vm-vp__body {
	margin-top: 40px;
}

.vm-vp--tier123 .vm-vp__body .vm-vp-body {
	font-size: var(--vm-veld);
	line-height: 1.6;
	color: var(--vm-inkt);
	overflow-wrap: anywhere;
}

/* Tussenkopjes in de bodytekst (post_content) */
.vm.vm-vp--tier123 .vm-vp-body :is(h2, h3, h4) {
	margin: 32px 0 8px;
	font-family: var(--vm-font-kop);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--vm-inkt-sterk);
}

.vm.vm-vp--tier123 .vm-vp-body > :is(h2, h3, h4):first-child {
	margin-top: 0;
}

/* ---------- CTA-blokken: altijd 2 kolommen ---------- */

.vm .vm-vp__cta-lijst {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: var(--vm-s4) 0 0;
	padding: 0;
	list-style: none;
}

.vm .vm-vp__cta-item {
	margin: 0;
	padding: 0;
	line-height: normal;
}

.vm .vm-vp__cta-item::before,
.vm .vm-vp__cta-item::marker {
	content: none;
}

.vm a.vm-vp__cta-tegel,
.vm a.vm-vp__cta-tegel:link,
.vm a.vm-vp__cta-tegel:visited,
.vm a.vm-vp__cta-tegel:active,
.vm a.vm-vp__cta-tegel:focus {
	display: block;
	color: inherit;
	text-decoration: none;
}

.vm .vm-vp__cta-beeld {
	position: relative;
	display: block;
	height: 112px;
	border-radius: var(--vm-r-m);
	background: var(--vm-zand);
	box-shadow: var(--vm-sch-1);
	overflow: hidden;
}

.vm .vm-vp__cta-foto {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}

.vm .vm-vp__cta-balk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vm-s2);
	margin-top: -20px;
	margin-inline: 10px;
	position: relative;
	padding: var(--vm-s2) var(--vm-s3);
	border-radius: var(--vm-r-s);
	background: var(--vm-wit);
	box-shadow: var(--vm-sch-1);
}

.vm .vm-vp__cta-titel {
	font-family: var(--vm-font-kop);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--vm-inkt-sterk);
}

.vm .vm-vp__cta-pijl {
	flex: none;
	color: var(--vm-blauw-700);
}

.vm .vm-vp__cta-tekst {
	display: none;
}

@media (min-width: 1024px) {
	.vm .vm-vp__cta-beeld {
		height: 196px;
	}

	.vm .vm-vp__cta-tekst {
		display: block;
		margin: var(--vm-s1) 10px 0;
		overflow: hidden;
		font-size: 12px;
		line-height: 1.4;
		color: var(--vm-grijs);
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* ---------- Bedrijfsgegevens-kaart ---------- */

.vm .vm-vp__gegevens {
	padding: var(--vm-s5) var(--vm-s5) var(--vm-s3);
	border-radius: var(--vm-r-l);
	background: var(--vm-wit);
	box-shadow: var(--vm-sch-1);
}

/* Twee koppen die elkaar per breakpoint/tier afwisselen: mobiel (alle tiers) en desktop
   tier 1-3 tonen de kop met naam; desktop tier 0 toont de gewone kop "Bedrijfsgegevens". */
.vm h2.vm-vp__gegevens-titel {
	display: none;
	margin: 0 0 var(--vm-s4);
	font-family: var(--vm-font-kop);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--vm-blauw-900);
}

.vm .vm-vp__gegevens-kop-groot {
	display: block;
}

.vm .vm-vp__gegevens-label {
	display: block;
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vm-grijs);
}

.vm p.vm-vp__gegevens-naam {
	margin: 0 0 6px;
	font-family: var(--vm-font-kop);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--vm-inkt-sterk);
}

@media (min-width: 1024px) {
	.vm-vp--tier0 h2.vm-vp__gegevens-titel {
		display: block;
	}

	.vm-vp--tier0 .vm-vp__gegevens-kop-groot {
		display: none;
	}

	.vm-vp--tier123 p.vm-vp__gegevens-naam {
		margin-bottom: var(--vm-s4);
		font-size: 22px;
	}
}

.vm .vm-vp__gegevens-lijst {
	margin: 0;
	padding: 0;
}

.vm .vm-vp__gegevens-rij {
	margin: 0;
	padding: var(--vm-s3) 0;
	border-top: 1px solid var(--vm-lijn);
}

.vm .vm-vp__gegevens-rij:first-child {
	padding-top: 0;
	border-top: 0;
}

.vm .vm-vp__gegevens-rij dt {
	margin: 0 0 2px;
	font-size: var(--vm-klein);
	font-weight: 600;
	line-height: 1.4;
	color: var(--vm-grijs);
}

.vm .vm-vp__gegevens-rij dd {
	margin: 0;
	font-size: var(--vm-tekst);
	line-height: 1.45;
	color: var(--vm-inkt);
	overflow-wrap: anywhere;
}

.vm .vm-vp__gegevens-rij a {
	color: var(--vm-blauw-700);
	font-weight: 600;
	text-decoration: none;
}

.vm .vm-vp__gegevens-rij a:hover {
	text-decoration: underline;
}

/* ---------- Andere bedrijven (tier 0 en tier 1) ---------- */

.vm .vm-vp__andere-lijst {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--vm-lijn);
}

.vm .vm-vp__andere-item {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--vm-lijn);
	line-height: normal;
}

.vm .vm-vp__andere-item::before,
.vm .vm-vp__andere-item::marker {
	content: none;
}

.vm a.vm-vp__andere-rij,
.vm a.vm-vp__andere-rij:link,
.vm a.vm-vp__andere-rij:visited,
.vm a.vm-vp__andere-rij:active,
.vm a.vm-vp__andere-rij:focus {
	display: flex;
	align-items: center;
	gap: var(--vm-s3);
	min-height: 56px;
	padding: var(--vm-s3) var(--vm-s2);
	color: var(--vm-inkt);
	text-decoration: none;
	transition: background-color .15s ease;
}

.vm a.vm-vp__andere-rij:hover {
	background: var(--vm-blauw-50);
	color: var(--vm-inkt);
	text-decoration: none;
}

.vm a.vm-vp__andere-rij:focus-visible {
	outline: 2px solid var(--vm-blauw-700);
	outline-offset: -2px;
}

.vm .vm-vp__andere-logo {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 40px;
	padding: 6px;
	border-radius: var(--vm-r-s);
	background: var(--vm-zand);
}

.vm .vm-vp__andere-tekst {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vm .vm-vp__andere-naam {
	font-family: var(--vm-font-kop);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--vm-inkt-sterk);
}

.vm .vm-vp__andere-sub {
	font-size: 13px;
	line-height: 1.4;
	color: var(--vm-grijs);
}

.vm a.vm-vp__andere-rij .vm-icoon {
	flex: none;
	margin-left: auto;
	color: var(--vm-blauw-700);
}

/* ---------- Tier 1-3: "andere bedrijven" subtieler, en de gegevens-CTA ---------- */

/* Ruime afstand + dunne lijn erboven: minder concurrentie met de eigen inhoud van de partner. */
.vm.vm-vp--tier123 .vm-vp__andere {
	order: 2;
	margin-top: 150px;
	padding-top: 24px;
	border-top: 1px solid var(--vm-lijn);
}

.vm.vm-vp--tier123 .vm-vp__andere .vm-sectiekop {
	margin-bottom: 8px;
}

.vm.vm-vp--tier123 .vm-vp__andere .vm-sectiekop .vm-sectiekop__titel {
	font-family: var(--vm-font-tekst);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vm-grijs);
}

.vm.vm-vp--tier123 a.vm-vp__andere-rij {
	min-height: 48px;
	padding: 8px 4px;
}

.vm.vm-vp--tier123 .vm-vp__andere-logo {
	width: 56px;
	height: 32px;
	padding: 4px;
}

.vm.vm-vp--tier123 .vm-vp__andere-naam {
	font-size: 15px;
	font-weight: 600;
	color: var(--vm-inkt);
}

/* CTA-tekstlink onderin de gegevenskaart: dezelfde url als de primaire knop (§gegevens-CTA). */
.vm.vm-vp--tier123 .vm-vp__gegevens-cta {
	margin: 0;
	padding: 16px 0 10px;
	border-top: 1px solid var(--vm-lijn);
}

.vm.vm-vp--tier123 a.vm-vp__gegevens-cta-link,
.vm.vm-vp--tier123 a.vm-vp__gegevens-cta-link:link,
.vm.vm-vp--tier123 a.vm-vp__gegevens-cta-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-family: var(--vm-font-kop);
	font-size: 17px;
	font-weight: 800;
	color: var(--vm-oranje-tekst);
	text-decoration: underline;
	text-decoration-color: var(--vm-oranje);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.vm.vm-vp--tier123 a.vm-vp__gegevens-cta-link:hover {
	color: var(--vm-oranje-tekst-hover);
}

.vm.vm-vp--tier123 a.vm-vp__gegevens-cta-link:focus-visible {
	outline: 2px solid var(--vm-blauw-700);
	outline-offset: 2px;
}

/* ---------- Aanbevolen (tier 0) ---------- */

.vm .vm-vp__aanbevolen-lijst {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vm-s4);
	margin: var(--vm-s4) 0 0;
	padding: 0;
	list-style: none;
}

.vm .vm-vp__aanbevolen-item::before,
.vm .vm-vp__aanbevolen-item::marker {
	content: none;
}

.vm .vm-vp__aanbevolen-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--vm-r-m);
	background: var(--vm-wit);
	box-shadow: var(--vm-sch-1);
	isolation: isolate;
}

.vm .vm-vp__aanbevolen-media {
	position: relative;
	flex: none;
	height: 150px;
	background: var(--vm-zand);
}

.vm .vm-vp__aanbevolen-foto {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}

.vm .vm-vp__aanbevolen-logo {
	position: absolute;
	bottom: var(--vm-s3);
	left: var(--vm-s3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 108px;
	height: 54px;
	padding: 6px;
	border-radius: var(--vm-r-s);
	background: var(--vm-zand);
	box-shadow: var(--vm-sch-1);
}

.vm .vm-vp__aanbevolen-tekst {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--vm-s2);
	padding: var(--vm-s4);
}

.vm h3.vm-vp__aanbevolen-naam {
	margin: 0;
	font-family: var(--vm-font-kop);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--vm-inkt-sterk);
}

.vm a.vm-vp__aanbevolen-link,
.vm a.vm-vp__aanbevolen-link:link,
.vm a.vm-vp__aanbevolen-link:visited,
.vm a.vm-vp__aanbevolen-link:hover,
.vm a.vm-vp__aanbevolen-link:active,
.vm a.vm-vp__aanbevolen-link:focus {
	color: inherit;
	text-decoration: none;
	outline: none;
}

.vm a.vm-vp__aanbevolen-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.vm .vm-vp__aanbevolen-sub {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--vm-grijs);
}

.vm .vm-vp__aanbevolen-kort {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--vm-inkt);
}

.vm .vm-vp__aanbevolen-acties {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vm-s3);
	margin-top: auto;
	padding-top: var(--vm-s2);
}

.vm .vm-vp__aanbevolen-acties a.vm-vp__knop-sec {
	position: relative;
	z-index: 2;
}

.vm .vm-vp__aanbevolen-bekijk {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-s1);
	margin-left: auto;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--vm-blauw-700);
	white-space: nowrap;
}

.vm .vm-vp__upsell {
	margin: var(--vm-s4) 0 0;
	padding: var(--vm-s4);
	border-radius: var(--vm-r-m);
	background: var(--vm-blauw-50);
	font-size: 14px;
	line-height: 1.55;
	color: var(--vm-inkt);
}

.vm .vm-vp__upsell a {
	font-weight: 600;
	color: var(--vm-blauw-700);
}

@media (min-width: 1024px) {
	.vm .vm-vp__aanbevolen-kaart {
		flex-direction: row;
	}

	.vm .vm-vp__aanbevolen-media {
		width: 320px;
		height: auto;
	}

	.vm .vm-vp__aanbevolen-foto {
		position: absolute;
		inset: 0;
	}

	.vm .vm-vp__aanbevolen-tekst {
		padding: var(--vm-s5);
	}

	.vm .vm-vp__aanbevolen-logo {
		bottom: var(--vm-s4);
		left: var(--vm-s4);
		width: 120px;
		height: 60px;
	}
}

/* ---------- Media in de bodytekst (post_content) ---------- */

.vm-vp-body :is(img, figure, video, iframe, .wp-block-image, .wp-block-embed, .wp-block-gallery) {
	display: block;
	max-width: 100%;
	height: auto;
	margin: var(--vm-s4) 0;
	float: none;
	border-radius: var(--vm-r-s);
}

.vm-vp-body iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

.vm-vp-body :is(.alignleft, .alignright, .aligncenter, .alignwide, .alignfull) {
	float: none;
	margin-left: 0;
	margin-right: 0;
}

.vm-vp-body p,
.vm-vp-body ul,
.vm-vp-body ol {
	margin: 0 0 var(--vm-s3);
}

.vm-vp-body > :last-child {
	margin-bottom: 0;
}

.vm-vp-body figcaption {
	font-size: var(--vm-klein);
	color: var(--vm-grijs);
}

@media (min-width: 1024px) {
	.vm-vp-body :is(img, figure, video, iframe, .wp-block-image, .wp-block-embed, .wp-block-gallery) {
		max-width: calc((var(--vm-cta-w) - var(--vm-cta-gap)) / 2);
	}
}

/* ---------- Desktop (≥1024px): 2-koloms grid met sticky zijkolom ---------- */

@media (min-width: 1024px) {
	/* Beide kinderen expliciet in dezelfde rij (geen order/auto-plaatsing): dat zette eerder
	   de kaart in rij 1 met de hoofdkolom eronder in rij 2, waardoor de kaart niet sticky was
	   en foto/kaart niet gelijk begonnen (zie CHANGELOG 0.12.1). */
	.vm-vp--tier123 .vm-vp__lay {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		column-gap: var(--vm-s6);
		align-items: stretch;
	}

	.vm-vp--tier123 .vm-vp__hoofd {
		display: block;
		grid-row: 1;
		grid-column: 1;
		min-width: 0;
	}

	.vm-vp--tier123 .vm-vp__hoofd > * {
		margin-top: var(--vm-s6);
	}

	.vm-vp--tier123 .vm-vp__hoofd > *:first-child {
		margin-top: 0;
	}

	/* Kaart-wrapper: vult de volle rijhoogte (align-items: stretch hierboven), zodat de kaart
	   binnenin kan stickyen tot het einde van de hoofdkolom. */
	.vm-vp--tier123 .vm-vp__zij {
		grid-row: 1;
		grid-column: 2;
		margin-top: 0;
	}

	.vm-vp--tier123 .vm-vp__media,
	.vm-vp--tier123 .vm-vp__tekst,
	.vm-vp--tier123 .vm-vp__cta,
	.vm-vp--tier123 .vm-vp__body,
	.vm-vp--tier123 .vm-vp__andere {
		max-width: 818px;
	}

	.vm-vp--tier123 .vm-vp__media,
	.vm-vp--tier123 .vm-vp__cta .vm-vp__cta-lijst {
		max-width: var(--vm-cta-w);
	}

	.vm.vm-vp--tier123 .vm-vp__body {
		margin-top: 48px;
	}

	.vm.vm-vp--tier123 .vm-vp__andere {
		margin-top: 200px;
	}

	.vm-vp--tier123 .vm-vp__media {
		width: var(--vm-cta-w);
		height: 300px;
		margin-left: 0;
		margin-right: 0;
		border-radius: var(--vm-r-l);
	}

	.vm-vp--tier123 .vm-vp__foto {
		border-radius: var(--vm-r-l);
	}

	.vm-vp--tier123 .vm-vp__logo {
		bottom: -52px;
		left: var(--vm-s6);
		width: 208px;
		height: 104px;
		padding: 14px;
		border-radius: 14px;
	}

	.vm-vp--tier123 .vm-vp__tekst {
		margin-top: 76px;
	}

	.vm-vp--tier123 .vm-vp__naam {
		font-size: 36px;
		line-height: 1.15;
	}

	.vm-vp--tier123 .vm-vp__meta {
		font-size: 15px;
	}

	.vm-vp--tier123 .vm-vp__tagline {
		margin-top: var(--vm-s2);
		font-size: 22px;
	}

	.vm-vp--tier123 .vm-vp__intro {
		font-size: 17px;
		line-height: 1.6;
	}

	/* Primaire knop: compact, niet de volle kolombreedte. Specificiteit (klasse + element)
	   hoger dan de mobiele basisregel, zodat width:100% daar altijd verliest. */
	.vm-vp--tier123 a.vm-vp__knop {
		display: inline-flex;
		width: auto;
		max-width: 100%;
		align-self: flex-start;
		justify-content: center;
		height: 44px;
		min-height: 44px;
		padding: 0 20px;
		font-size: 15px;
	}

	/*
	 * width:auto hierboven verliest zelf nog van de mobiele basisregel: die telt ook mee voor
	 * :link/:visited (.vm .vm-vp__knop:link, .vm .vm-vp__knop:visited), en :link/:visited
	 * tellen als een klasse in de specificiteit, dus die basisregel (3 klassen) wint van
	 * .vm-vp--tier123 a.vm-vp__knop (2 klassen + element). .vm en .vm-vp--tier123 staan op
	 * hetzelfde element (de buitenste wrapper): .vm.vm-vp--tier123 (samengesteld, geen spatie)
	 * plus :link/:visited geeft hier wel genoeg klassen (4) om te winnen. max-width begrenst de
	 * gerenderde breedte alsnog, ook als width:100% de "winnende" width-waarde blijft.
	 */
	.vm.vm-vp--tier123 .vm-vp__knop,
	.vm.vm-vp--tier123 .vm-vp__knop:link,
	.vm.vm-vp--tier123 .vm-vp__knop:visited {
		max-width: 50%;
		margin-top: 32px;
	}

	/* Rechterkolom: gegevenskaart, sticky tot het einde van de hoofdkolom */
	.vm-vp--tier123 .vm-vp__gegevens {
		position: sticky;
		top: var(--vm-sticky-top, 100px);
	}
}

/* ---------- Thema (Classima): overflow:hidden breekt position:sticky ---------- */

/*
 * De theme-wrapper `#page` (assets/css/style.css van Classima) heeft overflow:hidden.
 * Daardoor werd de bedrijfsgegevens-kaart niet sticky: een voorouder met overflow anders dan
 * visible wordt de scrollcontainer voor position:sticky, en #page scrollt zelf niet mee.
 * overflow:clip clipt net als hidden (geen horizontale scroll door de full-bleed sfeerfoto)
 * maar telt niet als scrollcontainer, dus sticky blijft werken.
 *
 * 0.12.1 overschreef eerst `div.site` (een class-selector, lagere specificiteit dan het
 * thema's eigen `#page`-regel), dus die had geen effect. Live geverifieerd op /vaarpartner/
 * suzuki-marine/ (1440px): met #page op overflow:clip blijft de kaart correct op
 * top: var(--vm-sticky-top, 100px) staan.
 *
 * Alleen op single vaarpartner; andere paginatypes (die deze overflow mogelijk nodig hebben,
 * bijv. voor een animatie) blijven ongemoeid. Classima is closed-source (geen bestandstoegang
 * vanuit deze repository); gevonden door de live pagina te inspecteren.
 */
body.single-vaarpartner #page {
	overflow: clip;
}