/*
 * [vm_categorieen] – "Populaire categorieën": tegels met foto en chips.
 * Alleen tokens uit tokens.css gebruiken. De chips zelf zijn het gedeelde
 * component .vm-chip (base.css), de kop is .vm-sectiekop (base.css).
 *
 * Specificiteit: elke regel begint met `.vm.vm-categorieen`, zodat de koppen,
 * lijsten, afbeeldingen en links van de Elementor-kit en het thema verliezen,
 * zonder !important.
 */

/* Het verloop op de foto wordt donkerder bij hover; dat animeren we via een geregistreerde kleur. */
@property --vm-tegel-tot {
	syntax: '<color>';
	inherits: false;
	initial-value: transparent;
}

.vm.vm-categorieen {
	padding-block: var(--vm-sectie-y);
}

/* Mobiel: 2 kolommen × 3 rijen */
.vm.vm-categorieen .vm-categorieen__raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vm.vm-categorieen .vm-categorieen__item {
	margin: 0;
	padding: 0;
	line-height: normal;
}

.vm.vm-categorieen .vm-categorieen__item::before,
.vm.vm-categorieen .vm-categorieen__item::marker {
	content: none;
}

.vm.vm-categorieen a.vm-categorieen__tegel,
.vm.vm-categorieen a.vm-categorieen__tegel:link,
.vm.vm-categorieen a.vm-categorieen__tegel:visited,
.vm.vm-categorieen a.vm-categorieen__tegel:hover,
.vm.vm-categorieen a.vm-categorieen__tegel:focus {
	position: relative;
	display: block;
	height: 140px;
	overflow: hidden;
	border-radius: var(--vm-r-tegel);
	background: var(--vm-tegel-leeg); /* Effen tegel als er geen foto is */
	box-shadow: none;
	color: var(--vm-wit);
	text-decoration: none;
	isolation: isolate;
}

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

.vm.vm-categorieen .vm-categorieen__foto {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: center 48%;
	transition: transform .25s ease;
}

/* Verloop onderin, voor de leesbaarheid van de titel */
.vm.vm-categorieen .vm-categorieen__tegel::before {
	--vm-tegel-tot: var(--vm-tegel-verloop-tot);
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	height: 55%;
	background: linear-gradient(to bottom, var(--vm-tegel-verloop-van), var(--vm-tegel-tot));
	transition: --vm-tegel-tot .25s ease;
}

/* Mobiel staan titel en knop los van elkaar: de wrapper telt niet mee */
.vm.vm-categorieen .vm-categorieen__onder {
	display: contents;
}

.vm.vm-categorieen .vm-categorieen__titel {
	position: absolute;
	inset: auto 8px 10px;
	z-index: 2;
	margin: 0;
	font-family: var(--vm-font-kop);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	color: var(--vm-wit);
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Pijlknop: ring van 40px met een chevron */
.vm.vm-categorieen .vm-categorieen__knop {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 1.5px solid var(--vm-wit);
	border-radius: var(--vm-r-pil);
	background: var(--vm-tegel-knop-mobiel);
	color: var(--vm-wit);
}

/* Meer categorieën: label en chips. Mobiel één regel die tot de schermrand scrolt. */
.vm.vm-categorieen .vm-categorieen__meer {
	margin: var(--vm-s5) 0 0;
}

.vm.vm-categorieen .vm-categorieen__meer-label {
	margin: 0 0 var(--vm-s3);
	font-family: var(--vm-font-tekst);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--vm-grijs);
}

.vm.vm-categorieen .vm-categorieen__chips {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--vm-s2);
	/* 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-categorieen .vm-categorieen__chips::-webkit-scrollbar {
	display: none;
}

.vm.vm-categorieen .vm-categorieen__chip-item {
	flex: none;
	margin: 0;
	padding: 0;
	line-height: normal;
}

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

/* Mobiel: de tekstlink uit de sectiekop staat onder de sectie */
.vm.vm-categorieen .vm-categorieen__alle {
	margin: var(--vm-s4) 0 0;
}

.vm.vm-categorieen a.vm-categorieen__alle-link,
.vm.vm-categorieen a.vm-categorieen__alle-link:link,
.vm.vm-categorieen a.vm-categorieen__alle-link:visited {
	font-family: var(--vm-font-tekst);
	font-size: var(--vm-tekst);
	font-weight: 600;
	line-height: 1.5;
	color: var(--vm-blauw-700);
	text-decoration: none;
	white-space: nowrap;
}

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

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

/* Tablet en desktop: 3 kolommen, titel links en knop rechts onderin */
@media (min-width: 600px) {
	.vm.vm-categorieen .vm-categorieen__raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}

	.vm.vm-categorieen a.vm-categorieen__tegel,
	.vm.vm-categorieen a.vm-categorieen__tegel:link,
	.vm.vm-categorieen a.vm-categorieen__tegel:visited,
	.vm.vm-categorieen a.vm-categorieen__tegel:hover,
	.vm.vm-categorieen a.vm-categorieen__tegel:focus {
		height: 190px;
	}

	.vm.vm-categorieen .vm-categorieen__tegel::before {
		height: 65%;
	}

	.vm.vm-categorieen .vm-categorieen__onder {
		position: absolute;
		inset: auto 22px 22px 24px;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: var(--vm-s4);
	}

	/* De titel loopt nooit onder de knop: de knop krimpt niet, de titel breekt af */
	.vm.vm-categorieen .vm-categorieen__titel {
		position: static;
		flex: 1 1 auto;
		min-width: 0;
		font-size: clamp(18px, 2vw, 24px);
		text-align: left;
	}

	.vm.vm-categorieen .vm-categorieen__knop {
		position: static;
		margin: 0;
		background: transparent;
	}

	/* Hover en toetsenbordfocus: foto schaalt binnen de tegel, verloop wordt donkerder */
	.vm.vm-categorieen .vm-categorieen__tegel:hover .vm-categorieen__foto,
	.vm.vm-categorieen .vm-categorieen__tegel:focus-visible .vm-categorieen__foto {
		transform: scale(1.03);
	}

	.vm.vm-categorieen .vm-categorieen__tegel:hover::before,
	.vm.vm-categorieen .vm-categorieen__tegel:focus-visible::before {
		--vm-tegel-tot: var(--vm-tegel-verloop-hover);
	}

	/* Chips: één rij naast het label, mag afbreken */
	.vm.vm-categorieen .vm-categorieen__meer {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vm-s3) var(--vm-s4);
	}

	.vm.vm-categorieen .vm-categorieen__meer-label {
		margin: 0;
	}

	.vm.vm-categorieen .vm-categorieen__chips {
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	/* Vanaf hier staat de link rechts in de sectiekop */
	.vm.vm-categorieen .vm-categorieen__alle {
		display: none;
	}
}

@media (min-width: 1024px) {
	.vm.vm-categorieen a.vm-categorieen__tegel,
	.vm.vm-categorieen a.vm-categorieen__tegel:link,
	.vm.vm-categorieen a.vm-categorieen__tegel:visited,
	.vm.vm-categorieen a.vm-categorieen__tegel:hover,
	.vm.vm-categorieen a.vm-categorieen__tegel:focus {
		height: 250px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vm.vm-categorieen .vm-categorieen__foto,
	.vm.vm-categorieen .vm-categorieen__tegel::before {
		transition: none;
	}
}