/* ==================================== Partners marquee ====================================
 * Markup: inc/partners-marquee.php
 * The track holds two identical copies of the logo list and moves left by one
 * copy (-50%) per cycle, which makes the loop seamless.
 */
.our-partners-sec .partners-marquee {
	--partners-marquee-gap: 80px;
	--partners-marquee-logo-h: 90px;
	--partners-marquee-logo-w: 240px;

	padding-top: 75px;
	overflow: hidden;
	/* Fade logos in/out at the edges */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.partners-marquee__track {
	display: flex;
	width: max-content;
	animation: fb-partners-marquee var(--partners-marquee-duration, 30s) linear infinite;
	will-change: transform;
}

.partners-marquee:hover .partners-marquee__track,
.partners-marquee:focus-within .partners-marquee__track {
	animation-play-state: paused;
}

.partners-marquee__group {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--partners-marquee-gap);
	/* Same spacing after the last logo so the two copies join evenly */
	padding: 0 var(--partners-marquee-gap) 0 0;
	margin: 0;
	list-style: none;
}

.partners-marquee__item {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.partners-marquee__item::before {
	content: none;
}

.partners-marquee__item img {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--partners-marquee-logo-w);
	max-height: var(--partners-marquee-logo-h);
}

@keyframes fb-partners-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (max-width: 767px) {
	.our-partners-sec .partners-marquee {
		--partners-marquee-gap: 48px;
		--partners-marquee-logo-h: 64px;
		--partners-marquee-logo-w: 160px;

		padding-top: 50px;
	}
}

/* Visitors who prefer reduced motion get a static, wrapping row of all logos */
@media (prefers-reduced-motion: reduce) {
	.our-partners-sec .partners-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.partners-marquee__track {
		width: auto;
		animation: none;
		transform: none;
	}

	.partners-marquee__group {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 40px;
		width: 100%;
		padding: 0;
	}

	.partners-marquee__group[aria-hidden="true"],
	.partners-marquee__item.is-repeat {
		display: none;
	}
}
