/* Logo-slider op de homepage (partials/logo_slider.php).
   Wordt ALLEEN geladen als er zichtbare logo's zijn. Werkt in de klassieke en
   de moderne homepage. Geen JavaScript: de beweging is een CSS-animatie. */

.logo-slider {
	position: relative;
	overflow: hidden;
	padding: 6px 0;
}

.logo-slider-track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.logo-slider-track li {
	flex: 0 0 auto;
	margin: 0;
	padding: 12px 30px;
	list-style: none;
	background: none;
}

.logo-slider-track li:before { content: none; }

.logo-slider-track a {
	display: block;
	border: 0;
}

.logo-slider-track img {
	display: block;
	width: auto;
	height: auto;
	max-width: 170px;
	max-height: 64px;
	margin: 0;
	object-fit: contain;
}

.logo-slider-track a:focus-visible {
	outline: 3px solid var(--hm-accent, #378ac4);
	outline-offset: 4px;
}

/* Grijstinten, in kleur bij aanwijzen (home.logos_grayscale) */
.logo-slider--gray img {
	filter: grayscale(1);
	opacity: .7;
	transition: filter .25s, opacity .25s;
}

.logo-slider--gray li:hover img,
.logo-slider--gray a:focus-visible img {
	filter: none;
	opacity: 1;
}

/* Bewegend: de rij staat er twee keer in en schuift precies één rij op (-50%),
   zodat het naadloos doorloopt. Stil bij aanwijzen of focus. */
.logo-slider--moving {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.logo-slider--moving .logo-slider-track {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	animation: logo-slider-scroll var(--logo-duration, 30s) linear infinite;
}

.logo-slider--moving:hover .logo-slider-track,
.logo-slider--moving:focus-within .logo-slider-track {
	animation-play-state: paused;
}

@keyframes logo-slider-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media only screen and (max-width: 767px) {
	.logo-slider-track li { padding: 10px 20px; }
	.logo-slider-track img { max-width: 130px; max-height: 50px; }
}

/* Minder beweging (instelling van het systeem): vast en gecentreerd, zonder de kopie */
@media (prefers-reduced-motion: reduce) {
	.logo-slider--moving {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.logo-slider--moving .logo-slider-track {
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
		animation: none;
	}

	.logo-slider-copy { display: none; }
	.logo-slider--gray img { transition: none; }
}

/* Blok op de homepage */
.hm .hm-logos { padding-top: 70px; padding-bottom: 70px; }
.hm-logos .hm-heading { justify-content: center; text-align: center; }
.hm-logos .hm-eyebrow { text-align: center; }
.home-logos { padding: 10px 0 30px; }
.home-logos .title { text-align: center; }