/**
 * Partner Logos block — shared front-end + editor styles.
 *
 * The logo track renders the logo list twice in the markup (the second
 * copy is aria-hidden) and animates from translateX(0) to translateX(-50%)
 * — exactly the width of one copy — so the loop has no visible seam.
 */

.eretail-partner-logos {
	padding-block: var( --eretail-space-xl, 64px );
	background-color: var( --eretail-partner-logos-bg, transparent );
}

.eretail-partner-logos__heading {
	text-align: center;
	margin-bottom: var( --eretail-space-lg, 40px );
}

/* Full-bleed: breaks out of the parent container to span the viewport,
   regardless of whether the block's own alignment is set to "full". */
.eretail-partner-logos__marquee {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc( 50% - 50vw );
	overflow: hidden;
	-webkit-mask-image: linear-gradient( to right, transparent, black 5%, black 95%, transparent );
	mask-image: linear-gradient( to right, transparent, black 5%, black 95%, transparent );
}

.eretail-partner-logos__track {
	display: flex;
	align-items: center;
	width: max-content;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var( --eretail-space-xl, 64px );
	animation: eretail-partner-logos-scroll 28s linear infinite;
}

.eretail-partner-logos__marquee:hover .eretail-partner-logos__track,
.eretail-partner-logos__marquee:focus-within .eretail-partner-logos__track {
	animation-play-state: paused;
}

.eretail-partner-logos__track li {
	flex: 0 0 auto;
}

.eretail-partner-logos__track img {
	display: block;
	max-height: 36px;
	width: auto;
	filter: grayscale( 100% );
	opacity: 0.7;
	transition: filter var( --eretail-transition-speed, 0.25s ) ease, opacity var( --eretail-transition-speed, 0.25s ) ease;
}

.eretail-partner-logos__track a:hover img,
.eretail-partner-logos__track a:focus-visible img {
	filter: grayscale( 0% );
	opacity: 1;
}

@keyframes eretail-partner-logos-scroll {
	from {
		transform: translateX( 0 );
	}
	to {
		transform: translateX( -50% );
	}
}

/* Reduced motion: drop the animation and the decorative duplicate set,
   and let the single real set wrap and center like a static row. */
@media ( prefers-reduced-motion: reduce ) {
	.eretail-partner-logos__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
	}

	.eretail-partner-logos__track li[aria-hidden='true'] {
		display: none;
	}

	.eretail-partner-logos__marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}
}