/*
 * Clients marquee — infinite logo band. JS (clients-marquee.js) owns the
 * scroll animation once it boots; the CSS keyframe below is only the
 * no-JS fallback, and the PHP-duplicated .clients-marquee__set--clone is
 * what makes that fallback loop seamlessly.
 */

.home-clients__label {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: var(--wp--preset--spacing--40);
}

.home-clients {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(300px, 30vw, 430px);
	padding-top: clamp(24px, 3vw, 40px);
	padding-bottom: clamp(56px, 6vw, 92px);
}

.clients-marquee {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
	padding-block: clamp(16px, 2vw, 28px);
}

.clients-marquee-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	will-change: transform;
	backface-visibility: hidden;
	animation: clients-marquee-scroll 15s linear infinite;
}

.clients-marquee.clients-marquee--js .clients-marquee-track {
	animation: none;
}

/* Override the default WP flow-layout max-width so the track can overflow horizontally. */
.clients-marquee .wp-block-group {
	max-width: none;
}

.clients-marquee-track .clients-marquee__set {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(40px, 5vw, 80px);
	padding-right: clamp(40px, 5vw, 80px);
	white-space: nowrap;
	flex-shrink: 0;
	max-width: none;
	width: max-content;
}

/* Fixed-height slot per logo — keeps every image on the same baseline regardless
   of its own aspect ratio, so the source set and its duplicated clone (for the
   seamless loop) always line up with no vertical jump at the seam. */
.clients-marquee__set .wp-block-image {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: clamp(56px, 6vw, 90px);
	margin: 0;
	flex: 0 0 auto;
}

.clients-marquee__set .wp-block-image img {
	display: block;
	width: auto;
	height: 100%;
	max-width: clamp(100px, 10vw, 150px);
	object-fit: contain;
	opacity: 0.62;
	filter: grayscale(1) saturate(0);
}

@keyframes clients-marquee-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 781px) {
	.home-clients {
		min-height: auto;
		padding-top: 40px;
		padding-bottom: 90px;
	}

	.clients-marquee-track .clients-marquee__set {
		gap: 22px;
		padding-right: 22px;
	}

	.clients-marquee__set .wp-block-image {
		height: 48px;
	}

	.clients-marquee__set .wp-block-image img {
		max-width: 80px;
	}
}