/*
 * Logo Slider — continuous CSS-only marquee.
 * Loaded only on pages containing the mainoslahde/logo-slider block
 * (see inc/logo-slider.php).
 *
 * Default (no JS, or "static" state): .logo-slider__track uses
 * display:contents so its items become direct children of the flex
 * .logo-slider__group, which centers and wraps them like a plain row --
 * this is what avoids CLS, since it's the correct final layout for the
 * common "not enough logos to scroll" case with zero JS needed.
 *
 * .is-marquee (added by JS only when the content actually overflows the
 * viewport) turns .logo-slider__group into a non-wrapping strip containing
 * both the real track and its aria-hidden clone back to back, animated by
 * exactly -50% for a seamless loop.
 */

.logo-slider__viewport {
	overflow: hidden;
}

.logo-slider__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 155px;
}

.logo-slider__track {
	display: contents;
}

.logo-slider__track--clone {
	display: none;
}

.logo-slider__item img {
	width: 242px;
	height: auto;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: opacity 200ms ease, filter 200ms ease;
}

.logo-slider__item img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

/* Marquee state. animation-duration here is only a fallback for the brief
   moment before JS measures the content and sets the real duration inline
   (see logo-slider.js) -- that's what keeps the scroll speed constant
   regardless of how many logos are configured. */
.is-marquee .logo-slider__group {
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	width: max-content;
	will-change: transform;
	animation: logo-slider-marquee 60s linear infinite;
}

.is-marquee .logo-slider__track {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	flex-shrink: 0;
	gap: 155px;
	padding-right: 155px;
}

.is-marquee .logo-slider__track--clone {
	display: flex;
}

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

@media (prefers-reduced-motion: reduce) {
	.is-marquee .logo-slider__group {
		animation: none;
	}
}