/**
 * Partner Logos block — shared front-end + editor styles.
 *
 * view.js measures one complete logo group, repeats it as needed for the
 * current viewport, and sets --eretail-partner-logo-distance. Animating by
 * exactly that distance eliminates the visual jump at the loop boundary.
 */

.eretail-partner-logos {
	--eretail-partner-logos-bg: #F9F8F8;
	--eretail-partner-logo-gap: 72px;
	--eretail-partner-logo-height: 42px;
	--eretail-partner-logo-padding: 28px;
	--eretail-partner-logo-speed: 34;
	--eretail-partner-logo-distance: 800px;
	--eretail-partner-logo-duration: 24s;
	padding-block: var( --eretail-partner-logo-padding );
	background-color: var( --eretail-partner-logos-bg );
	position: relative;
	max-width: 100%;
	min-width: 0;
	contain: paint;
}

.eretail-partner-logos__heading {
	text-align: center;
	margin: 0 0 22px;
}

.eretail-partner-logos__marquee {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.eretail-partner-logos--edge-fade .eretail-partner-logos__marquee {
	-webkit-mask-image: linear-gradient( to right, transparent, #000 4%, #000 96%, transparent );
	mask-image: linear-gradient( to right, transparent, #000 4%, #000 96%, transparent );
}

.eretail-partner-logos__track {
	display: flex;
	align-items: center;
	width: max-content;
	min-width: max-content;
	will-change: transform;
	animation-name: eretail-partner-logos-scroll;
	animation-duration: var( --eretail-partner-logo-duration );
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

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

.eretail-partner-logos__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	list-style: none;
	margin: 0;
	padding: 0 var( --eretail-partner-logo-gap ) 0 0;
	gap: var( --eretail-partner-logo-gap );
}

.eretail-partner-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
}

.eretail-partner-logos__item a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.eretail-partner-logos__item img {
	display: block;
	width: auto;
	height: auto;
	max-height: var( --eretail-partner-logo-height );
	max-width: clamp( 130px, 13vw, 235px );
	object-fit: contain;
	filter: none;
	opacity: 1;
}

/* Logo sizing normalization: keep partner marks centered and uncropped. */
.eretail-partner-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.eretail-partner-logos__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.eretail-partner-logos__item img {
	display: block;
	width: auto;
	height: auto;
	max-width: 180px;
	max-height: 64px;
	object-fit: contain;
}

.eretail-partner-logos__item img[src*="Lightedge"],
.eretail-partner-logos__item img[src*="lightedge"] {
	width: 180px;
	height: auto;
	max-height: none;
}

@keyframes eretail-partner-logos-scroll {
	from { transform: translate3d( 0, 0, 0 ); }
	to { transform: translate3d( calc( -1 * var( --eretail-partner-logo-distance ) ), 0, 0 ); }
}

@media ( max-width: 767.98px ) {
	.eretail-partner-logos {
		/* Keep the band compact on phones even when an older block instance
		   was saved before the padding control existed. */
		padding-block: min( var( --eretail-partner-logo-padding ), 22px );
	}

	.eretail-partner-logos__heading {
		margin-bottom: 16px;
	}

	.eretail-partner-logos__item img {
		max-width: 180px;
		max-height: min( var( --eretail-partner-logo-height ), 38px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.eretail-partner-logos__track {
		animation: none;
		width: 100%;
		min-width: 0;
	}

	.eretail-partner-logos__group {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		padding-right: 0;
	}

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

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