/**
 * Member-logo carousel — two horizontal tracks scrolling in opposite directions.
 *
 * Markup:
 *   .carousel-track > .carousel-slide.animate-scroll-{left,right}
 *
 * The slide HTML is duplicated server-side (front-page.php), so the keyframe
 * `translateX(0) → translateX(-50%)` produces a seamless infinite loop:
 * when the first copy has scrolled fully out of view, the second copy is
 * exactly in place behind it, and the animation loops back to start invisibly.
 *
 * 40s per cycle is the same duration as the live reference.
 */

.carousel-track {
	overflow: hidden;
	width: 100%;
}

.carousel-slide {
	display: flex;
	gap: 16px;
	width: max-content;
	animation: cb-scroll-left 40s linear infinite;
	will-change: transform;
}

.carousel-slide.animate-scroll-right {
	animation-name: cb-scroll-right;
}

@keyframes cb-scroll-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes cb-scroll-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* Pause on hover for accessibility + readability */
.carousel-slide:hover {
	animation-play-state: paused;
}

/* Honour user motion preferences */
@media (prefers-reduced-motion: reduce) {
	.carousel-slide {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}
}

/* Card sizing — slightly smaller on narrow viewports */
@media (max-width: 640px) {
	.cb-member-card {
		width: 10rem;
	}
}

/* iPad / tablet — between mobile and desktop the desktop card (224px) overflows
   and breaks the two-row loop. Scale down proportionally. */
@media (max-width: 1024px) and (min-width: 641px) {
	.cb-member-card {
		width: 11rem;
		height: 5.5rem;
	}
}