/**
 * Client-logo strip — template-parts/section-clients.php.
 *
 * The shell is the original `[data-clients-shell]` frame; the marquee inside it is new.
 * The track is printed twice by PHP, so one loop is exactly half its width.
 */

.ons3-logos {
	--ons3-logo-gap: clamp(40px, 5vw, 72px);

	position: relative;
	margin-top: 34px;
	min-height: 168px;
	border: 1px solid var(--cream-16);
	border-radius: var(--r-shell);
	overflow: hidden;
	display: grid;
	place-items: center;
	background: var(--cream-035);
}

/* Faint gold cross-hatch standing in for the original pattern tile. */
.ons3-logos::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .055;
	background-image:
		repeating-linear-gradient(45deg, var(--ons-gold) 0 2px, transparent 2px 19px),
		repeating-linear-gradient(-45deg, var(--ons-gold) 0 2px, transparent 2px 19px);
}

/* The shell's ::before is positioned, so in-flow children need a stacking peer. */
.ons3-logos__viewport,
.ons3-logos__empty {
	position: relative;
}

.ons3-logos__viewport {
	width: 100%;
	overflow: hidden;
	/* Room for the focus ring: overflow:hidden clips it to the padding box. */
	padding-block: 10px;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.ons3-logos__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: onsMarquee var(--ons3-marquee-duration, 32s) linear infinite;
}

[dir="rtl"] .ons3-logos__track {
	animation-name: onsMarqueeRtl;
}

/* Keyboard and touch users need the pause too, not just the mouse. */
.ons3-logos__track:hover,
.ons3-logos__track:active,
.ons3-logos__track:focus-within {
	animation-play-state: paused;
}

.ons3-logos__set {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--ons3-logo-gap);
	padding-inline-end: var(--ons3-logo-gap);
	/* With only a handful of logos the two passes together can be narrower than the viewport.
	   Translating the track by half its width then leaves a permanent gap and a visible jump
	   at the loop point, so floor each pass at half the viewport and spread the logos across
	   it. Beyond that width the natural content size takes over and nothing changes. */
	min-width: 50vw;
	justify-content: space-around;
}

.ons3-logos__item {
	display: flex;
	align-items: center;
}

.ons3-logos__item img {
	display: block;
	height: clamp(34px, 4vw, 52px);
	width: auto;
	opacity: .72;
	transition: opacity .3s;
}

.ons3-logos__item img:hover,
.ons3-logos__item a:hover img,
.ons3-logos__item a:focus-visible img {
	opacity: 1;
}

/* Any uploaded PNG or SVG flattens to white. */
.ons3-logos--white .ons3-logos__item img {
	filter: brightness(0) invert(1);
}

.ons3-logos--original .ons3-logos__item img {
	filter: none;
}

.ons3-logos__item a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 6px;
	border-radius: var(--r-link);
}

.ons3-logos__empty {
	margin: 0;
	padding: 28px;
	text-align: center;
	color: var(--cream-74);
	font-size: 16px;
	line-height: 1.7;
}

/* onsMarquee and onsMarqueeRtl are declared in tokens.css, which owns every keyframe. */

@media (prefers-reduced-motion: reduce) {
	/* The RTL rule above is more specific, so it has to be named again here. */
	.ons3-logos__track,
	[dir="rtl"] .ons3-logos__track {
		animation: none;
	}

	/* Scroll it by hand instead; the duplicate set would just repeat everything.
	   The edge fade has to go with it — nothing scrolls past scroll position 0,
	   so the first and last logo would sit under it permanently. */
	.ons3-logos__viewport {
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.ons3-logos__item {
		scroll-snap-align: center;
	}

	.ons3-logos__set[aria-hidden="true"] {
		display: none;
	}

	.ons3-logos__set {
		padding-inline-end: 0;
	}
}