/**
 * Partner Logo Carousel — continuous horizontal marquee.
 *
 * Structure:
 *   .jsf-logo-carousel          (overflow-hidden, breaks to 100vw)
 *     .jsf-logo-carousel__track  (flex row, animated)
 *       .wp-block-image ...       (individual logo items)
 *
 * JS clones children for seamless looping. Ported from the sahliyeh
 * theme; see assets/js/jsf-logo-carousel.js.
 */

/* Container — hides overflow so the scrolling track is clipped.
 * Break out of constrained parent to span full viewport width.
 * !important overrides the WP `is-layout-flex` inline styles that
 * would otherwise constrain width / justify-content. */
.jsf-logo-carousel {
	overflow: hidden !important;
	justify-content: flex-start !important;
	width: 100vw !important;
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Animated track — flex row that slides left infinitely.
 * width: max-content lets the keyframe translate by the full
 * original set width. !important overrides WP layout constraints. */
.jsf-logo-carousel__track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	width: max-content !important;
	max-width: none !important;
	animation: jsf-logo-scroll 25s linear infinite;
}

/* Lock partner-logo size inside the carousel — beats the responsive
 * `.jsf-partner-logo { flex: 0 0 calc(33.333% - 16px) }` rule that lives
 * in theme.json styles.css and would otherwise resolve % units against
 * the max-content track width (circular sizing). */
.jsf-logo-carousel__track .jsf-partner-logo {
	flex: 0 0 207px !important;
	width: 207px !important;
	height: 83px !important;
	max-width: 207px !important;
}

/* Pause animation on hover / focus for accessibility and readability. */
.jsf-logo-carousel:hover .jsf-logo-carousel__track,
.jsf-logo-carousel:focus-within .jsf-logo-carousel__track {
	animation-play-state: paused;
}

/* Reduced motion — stop the animation entirely. */
@media (prefers-reduced-motion: reduce) {
	.jsf-logo-carousel__track {
		animation: none;
	}
}

/* Keyframes — translate the track by half its width (the original set).
 * The JS replaces this with a pixel-based keyframe for sub-pixel accuracy
 * after measuring the actual rendered track width. */
@keyframes jsf-logo-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}