/* VDG Branche Listing — knoppen in de huisstijl.
   Geen hardcoded kleuren: alles via de centrale --vdg-* tokens met fallback. */

/* Knoppen doorlopend naast elkaar i.p.v. in vaste kolommen */
.vdg-branches .jet-listing-grid__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.vdg-branches .jet-listing-grid__item {
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	padding: 0 !important;
}

/* De knop zelf (Elementor-container met class vdg-branche-pill) */
.vdg-branches .jet-listing-grid__item .vdg-branche-pill {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	width: auto !important;
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border: 1px solid var(--vdg-text, #111A3B);
	border-radius: 999px;
	background: transparent;
	color: var(--vdg-text, #111A3B);
	font-family: var(--vdg-font, "Caros", "Tahoma", sans-serif);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vdg-branches .jet-listing-grid__item .vdg-branche-pill * {
	color: inherit !important;
	margin: 0;
}

.vdg-branches .jet-listing-grid__item .vdg-branche-pill.is-actief {
	background: var(--vdg-header, #111A3B);
	border-color: var(--vdg-header, #111A3B);
	color: var(--vdg-on-header, #FFFFFF);
}

.vdg-branches .jet-listing-grid__item .vdg-branche-pill:focus-visible {
	outline: 2px solid var(--vdg-accent, #F68D2E);
	outline-offset: 2px;
}

/* Het beeld per branche zit verborgen in het listing-item; het script gebruikt het als bron */
.vdg-branches .vdg-branche-beeld {
	display: none !important;
}

/* Grote afbeelding: altijd dezelfde vorm, ongeacht het formaat van de upload.
   Andere verhouding? Zet op de Image-widget (Advanced → Custom CSS) bv.:
   selector { --vdg-branche-verhouding: 4 / 3; } */
.vdg-branche-hoofdbeeld img {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: var(--vdg-branche-verhouding, 1 / 1);
	object-fit: cover;
	object-position: center;
}

/* Algemene layout-class: vdg-box-rechts
   Container begint links op de rand van de 1440px-box en loopt rechts door tot de schermrand.
   Te gebruiken op elke Elementor-container (Content Width: Full Width).
   Fijnafstemmen via Custom CSS op die container:
   selector { --vdg-box: 1440px; --vdg-inset: 0px; --vdg-gutter: 20px; }
   --vdg-inset  = verschuiving t.o.v. de linkerrand van de box (positief = naar rechts)
   --vdg-gutter = minimale afstand tot de schermrand op smallere schermen

   vdg-bleed-rechts = hetzelfde, plus rechts géén binnenruimte (voor de branchekaart:
   de foto raakt dan de schermrand). */
.vdg-box-rechts,
.vdg-bleed-rechts {
	--vdg-box: 1440px;
	--vdg-inset: 0px;
	--vdg-gutter: 20px;
	margin-left: max(var(--vdg-gutter), calc((100% - var(--vdg-box)) / 2 + var(--vdg-inset))) !important;
	margin-right: 0 !important;
	width: auto !important;
	max-width: none !important;
	/* Altijd de resterende ruimte vullen, ook als de oudercontainer op 'rij' staat */
	flex: 1 1 auto !important;
	align-self: stretch !important;
}

.vdg-box-rechts > .e-con-inner,
.vdg-bleed-rechts > .e-con-inner {
	max-width: none !important;
}

.vdg-bleed-rechts {
	padding-right: 0 !important;
}

/* De container waar zo'n blok in zit mag geen zijpadding of boxed breedte hebben,
   anders haalt het blok de schermrand niet en verschuift de linkerkant. */
.e-con:has(> .vdg-box-rechts),
.e-con:has(> .e-con-inner > .vdg-box-rechts),
.e-con:has(> .vdg-bleed-rechts),
.e-con:has(> .e-con-inner > .vdg-bleed-rechts) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.e-con-inner:has(> .vdg-box-rechts),
.e-con-inner:has(> .vdg-bleed-rechts) {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (min-width: 1025px) {
	/* Tekstkolom houdt zijn ingestelde breedte en krimpt niet */
	.vdg-bleed-rechts > .e-con:first-child,
	.vdg-bleed-rechts > .e-con-inner > .e-con:first-child {
		flex-shrink: 0 !important;
	}

	/* Beeld vult de rest; de (grote) foto zelf mag de kolombreedte niet bepalen */
	.vdg-bleed-rechts .vdg-branche-hoofdbeeld,
	.vdg-bleed-rechts > .e-con:not(:first-child),
	.vdg-bleed-rechts > .e-con-inner > .e-con:not(:first-child) {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: auto !important;
	}

	/* Standaard: beeld bovenaan, met vaste verhouding (--vdg-branche-verhouding) */
	.vdg-bleed-rechts .vdg-branche-hoofdbeeld {
		align-self: flex-start;
	}

	/* Optioneel: extra class vdg-beeld-vol op de kaart = beeld even hoog als de tekstkolom.
	   De foto staat dan absoluut, zodat een staande foto de kaart niet hoger maakt. */
	.vdg-bleed-rechts.vdg-beeld-vol .vdg-branche-hoofdbeeld {
		position: relative;
		align-self: stretch !important;
		min-height: 360px;
	}

	.vdg-bleed-rechts.vdg-beeld-vol .vdg-branche-hoofdbeeld > .elementor-widget-container,
	.vdg-bleed-rechts.vdg-beeld-vol .vdg-branche-hoofdbeeld a {
		display: block;
		position: absolute !important;
		inset: 0;
		height: 100%;
	}

	.vdg-bleed-rechts.vdg-beeld-vol .vdg-branche-hoofdbeeld img {
		position: absolute !important;
		inset: 0;
		width: 100% !important;
		height: 100% !important;
		aspect-ratio: auto;
	}
}

@media (max-width: 1024px) {
	/* Onder elkaar: tekst krijgt rechts ook lucht, beeld blijft tot de rand */
	.vdg-bleed-rechts > .e-con:first-child,
	.vdg-bleed-rechts > .e-con-inner > .e-con:first-child {
		padding-right: var(--vdg-gutter) !important;
	}
}

/* Overvloeier boven de grote afbeelding */
.vdg-branche-fade {
	position: absolute;
	margin: 0 !important;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.vdg-branche-fade.is-zichtbaar {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.vdg-branche-fade,
	.vdg-branches .vdg-branche-pill {
		transition: none;
	}
}