/**
 * Logo Carousel — continuous horizontal marquee.
 *
 * Structure:
 *   .sahliyeh-logo-carousel          (overflow-hidden container)
 *     .sahliyeh-logo-carousel__track  (flex row, animated)
 *       .wp-block-image ...           (individual logo items)
 *
 * JS duplicates children for seamless looping.
 */

/* Container — hides overflow so the scrolling track is clipped.
 * Break out of constrained parent to span full viewport width.
 * !important overrides WordPress is-layout-flex inline styles that
 * constrain the carousel container width and overflow. */
.sahliyeh-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;
	padding-right: 0;
}

/* Animated track — flex row that slides left infinitely.
 * width: max-content is critical for the -50% translateX to cover
 * the full original set. !important overrides WP layout constraints. */
.sahliyeh-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: sahliyeh-logo-scroll 15s linear infinite;
}

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

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

/* Keyframes — translate the track by half its width (the original set). */
@keyframes sahliyeh-logo-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* Individual logo images inside the carousel. */
.sahliyeh-logo-carousel__track .wp-block-image {
	flex-shrink: 0;
	opacity: 0.6;
	transition: opacity 0.3s ease;
}

.sahliyeh-logo-carousel__track .wp-block-image:hover {
	opacity: 1;
}