/*
 * Homepage (main body): band, kop, pillen en de aanpassingen aan de bestaande secties.
 * Alleen tokens uit tokens.css. Wordt geladen door elke homepage-module (zie vm_hp_modules()).
 *
 * Een sectie krijgt via `band="hero|zand|creme|wissel"` een wrapper `.vm-hp` met de achtergrond over de
 * volle breedte. De sectie zelf houdt haar `.vm-container` (zijmarge, max-width), maar verliest haar
 * eigen padding-block (--vm-sectie-y wordt hier 0): de band geeft 40/56/72px.
 */

/* ----- Band --------------------------------------------------------------------------------- */

.vm-hp {
	--vm-sectie-y: 0px;
	--vm-kop-gap: 22px;
	width: 100%;
	padding-block: 40px;
}

.vm-hp--hero {
	padding-block: 0;
}

.vm-hp--zand {
	background: var(--vm-zand);
}

.vm-hp--creme {
	background: var(--vm-creme);
}

.vm-hp--wissel {
	background: var(--vm-band-wissel);
}

/* Samenwerkingsbalk: compacter dan de andere secties */
.vm-hp:has(> .vm-partnerblok) {
	padding-block: 32px;
}

@media (min-width: 600px) {
	.vm-hp {
		padding-block: 56px;
	}

	.vm-hp:has(> .vm-partnerblok) {
		padding-block: 40px;
	}
}

@media (min-width: 1024px) {
	.vm-hp {
		--vm-kop-gap: 30px;
		padding-block: 72px;
	}

	.vm-hp--hero {
		padding-block: 0;
	}

	.vm-hp:has(> .vm-partnerblok) {
		padding-block: 48px;
	}
}

/* Hero: padding 28 (mobiel) en 48/52 (desktop); achtergrond is al --vm-zand */
.vm-hp--hero .vm.vm-zoeken {
	padding: 28px 0;
}

@media (min-width: 1024px) {
	.vm-hp--hero .vm.vm-zoeken {
		padding: 48px 0 52px;
	}
}

/* Zichtbaarheid per breedte (klasse dubbel: wint van de display van de lijstitems in de modules) */
@media (max-width: 599px) {
	.vm li.vm-hp-vanaf-tablet.vm-hp-vanaf-tablet {
		display: none;
	}
}

@media (max-width: 1023px) {
	.vm li.vm-hp-alleen-desktop.vm-hp-alleen-desktop {
		display: none;
	}
}

@media (min-width: 1024px) {
	.vm li.vm-hp-alleen-mobiel.vm-hp-alleen-mobiel {
		display: none;
	}
}

/* ----- Sectiekop (28/22, onderregel 14/13, link 14/13) -------------------------------------- */

.vm-hp .vm .vm-sectiekop {
	align-items: flex-start;
}

.vm-hp .vm .vm-sectiekop .vm-sectiekop__tekst {
	display: flex;
	flex-direction: column;
	gap: var(--vm-s2);
}

.vm-hp .vm .vm-sectiekop .vm-sectiekop__titel {
	font-size: 22px;
	line-height: 1.2;
}

.vm-hp .vm .vm-sectiekop .vm-sectiekop__subtitel {
	margin: 0;
	font-size: var(--vm-klein);
	line-height: 1.5;
}

.vm-hp .vm .vm-sectiekop a.vm-sectiekop__link,
.vm-hp .vm .vm-sectiekop a.vm-sectiekop__link:link,
.vm-hp .vm .vm-sectiekop a.vm-sectiekop__link:visited {
	font-size: var(--vm-klein);
}

@media (min-width: 1024px) {
	.vm-hp .vm .vm-sectiekop {
		align-items: flex-end;
		gap: var(--vm-s5);
	}

	.vm-hp .vm .vm-sectiekop .vm-sectiekop__titel {
		font-size: 28px;
	}

	.vm-hp .vm .vm-sectiekop .vm-sectiekop__subtitel,
	.vm-hp .vm .vm-sectiekop a.vm-sectiekop__link,
	.vm-hp .vm .vm-sectiekop a.vm-sectiekop__link:link,
	.vm-hp .vm .vm-sectiekop a.vm-sectiekop__link:visited {
		font-size: var(--vm-tekst-klein);
	}
}

/* Link onder de sectie (alleen mobiel) */
.vm .vm-hp-meer-mobiel {
	margin: var(--vm-kop-gap) 0 0;
}

.vm .vm-hp-meer-mobiel a.vm-hp-meer,
.vm .vm-hp-meer-mobiel a.vm-hp-meer:link,
.vm .vm-hp-meer-mobiel a.vm-hp-meer:visited {
	display: inline-flex;
	gap: 6px;
	font-size: var(--vm-klein);
	font-weight: 600;
	line-height: 1.5;
	color: var(--vm-blauw-700);
	text-decoration: none;
	white-space: nowrap;
}

.vm .vm-hp-meer-mobiel a.vm-hp-meer:hover {
	text-decoration: underline;
}

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

@media (min-width: 600px) {
	.vm .vm-hp-meer-mobiel {
		display: none;
	}
}

/* ----- Pillen (onderwerpen, rubrieken, hulpmiddelen) ---------------------------------------- */

.vm .vm-hp-rij {
	margin: 0 0 var(--vm-kop-gap);
}

.vm .vm-hp-rij--hulp {
	margin: var(--vm-kop-gap) 0 0;
}

.vm .vm-hp-rij__lijst {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--vm-s2);
	/* Mobiel: één scrollbare rij tot de schermrand; 100% is hier de inhoudsbreedte (zie base.css) */
	margin: 0 calc((100% - 100vw) / 2);
	padding: var(--vm-s1) calc((100vw - 100%) / 2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	list-style: none;
}

.vm .vm-hp-rij__lijst::-webkit-scrollbar {
	display: none;
}

.vm .vm-hp-rij__item {
	flex: none;
	margin: 0;
	padding: 0;
	line-height: normal;
}

.vm .vm-hp-rij__item::before,
.vm .vm-hp-rij__item::marker {
	content: none;
}

@media (min-width: 1024px) {
	.vm .vm-hp-rij__lijst {
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}

.vm a.vm-hp-pil,
.vm a.vm-hp-pil:link,
.vm a.vm-hp-pil:visited {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	height: 40px;
	padding: 0 var(--vm-s4);
	border: 1px solid var(--vm-lijn);
	border-radius: var(--vm-r-pil);
	background: var(--vm-wit);
	font-family: var(--vm-font-tekst);
	font-size: var(--vm-tekst-klein);
	font-weight: 600;
	line-height: 1;
	color: var(--vm-inkt-sterk);
	text-decoration: none;
	white-space: nowrap;
}

.vm a.vm-hp-pil:hover {
	border-color: var(--vm-blauw-700);
	color: var(--vm-inkt-sterk);
}

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

.vm a.vm-hp-pil--rubriek {
	gap: var(--vm-s2);
	padding: 0 var(--vm-s4) 0 14px;
}

.vm .vm-hp-pil__icoon {
	display: inline-flex;
	color: var(--vm-blauw-700);
}

.vm .vm-hp-pil__aantal {
	font-size: var(--vm-klein);
	font-weight: 400;
	color: var(--vm-grijs);
}

.vm a.vm-hp-pil--hulp,
.vm a.vm-hp-pil--hulp:link,
.vm a.vm-hp-pil--hulp:visited {
	gap: var(--vm-s2);
	padding: 0 14px;
	border-color: var(--vm-blauw-50);
	background: var(--vm-blauw-50);
	font-weight: 700;
	color: var(--vm-blauw-700);
}

.vm a.vm-hp-pil--hulp:hover {
	border-color: var(--vm-blauw-700);
	color: var(--vm-blauw-700);
}

/* ----- Bestaande secties: Nieuw op Vaarmarkt ------------------------------------------------ */

.vm-hp .vm.vm-aanbod .vm-aanbod__alle {
	display: none;
	margin: var(--vm-kop-gap) 0 0;
}

.vm-hp .vm.vm-aanbod a.vm-aanbod__alle-link,
.vm-hp .vm.vm-aanbod a.vm-aanbod__alle-link:link,
.vm-hp .vm.vm-aanbod a.vm-aanbod__alle-link:visited {
	display: inline-flex;
	gap: 6px;
	font-size: var(--vm-klein);
	font-weight: 600;
	color: var(--vm-blauw-700);
	text-decoration: none;
}

.vm-hp .vm.vm-aanbod a.vm-aanbod__alle-link:hover {
	text-decoration: underline;
}

/* Geen carrousel: op mobiel 2 kolommen met 4 boten, de link eronder */
@media (max-width: 599px) {
	.vm-hp .vm.vm-aanbod .vm-aanbod__baan {
		container-type: normal;
		contain-intrinsic-inline-size: auto;
	}

	.vm-hp .vm.vm-aanbod .vm-aanbod__lijst {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
		gap: 10px;
		margin: 0;
		padding: 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	.vm-hp .vm.vm-aanbod .vm-aanbod__item {
		flex: none;
		min-width: 0;
	}

	.vm-hp .vm.vm-aanbod .vm-aanbod__item:nth-child(n + 5),
	.vm-hp .vm.vm-aanbod .vm-aanbod__item--cta {
		display: none;
	}

	.vm-hp .vm.vm-aanbod .vm-aanbod__alle {
		display: block;
	}
}

@media (min-width: 600px) {
	.vm-hp .vm.vm-aanbod .vm-aanbod__lijst {
		gap: 20px;
	}
}

/* Bootkaart op de homepage: radius 12px en SH1 */
.vm-hp .vm .vm-bootkaart {
	border-radius: var(--vm-r-m);
	box-shadow: var(--vm-sch-1);
}

.vm-hp .vm .vm-bootkaart:hover {
	box-shadow: var(--vm-sch-2);
}

.vm-hp .vm .vm-bootkaart__foto {
	border-radius: var(--vm-r-m) var(--vm-r-m) 0 0;
}

/* ----- Bestaande secties: Populaire categorieën --------------------------------------------- */

.vm-hp .vm.vm-categorieen a.vm-categorieen__tegel,
.vm-hp .vm.vm-categorieen a.vm-categorieen__tegel:link,
.vm-hp .vm.vm-categorieen a.vm-categorieen__tegel:visited,
.vm-hp .vm.vm-categorieen a.vm-categorieen__tegel:hover,
.vm-hp .vm.vm-categorieen a.vm-categorieen__tegel:focus {
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: var(--vm-r-m);
}

@media (max-width: 599px) {
	.vm-hp .vm.vm-categorieen .vm-categorieen__knop {
		display: none;
	}
}

@media (min-width: 600px) {
	.vm-hp .vm.vm-categorieen a.vm-categorieen__tegel,
	.vm-hp .vm.vm-categorieen a.vm-categorieen__tegel:link,
	.vm-hp .vm.vm-categorieen a.vm-categorieen__tegel:visited,
	.vm-hp .vm.vm-categorieen a.vm-categorieen__tegel:hover,
	.vm-hp .vm.vm-categorieen a.vm-categorieen__tegel:focus {
		height: auto;
		aspect-ratio: 16 / 10;
	}
}

@media (min-width: 1024px) {
	.vm-hp .vm.vm-categorieen .vm-categorieen__raster {
		gap: 16px;
	}
}

/* "Meer categorieën": label 13px, pillen 36px/13px */
.vm-hp .vm.vm-categorieen .vm-categorieen__meer-label {
	font-size: var(--vm-klein);
}

.vm-hp .vm.vm-categorieen a.vm-chip,
.vm-hp .vm.vm-categorieen a.vm-chip:link,
.vm-hp .vm.vm-categorieen a.vm-chip:visited {
	min-height: 36px;
	height: 36px;
	font-size: var(--vm-klein);
}