@layer components {
	/* Logo carousel: [logo_carousel] shortcode (inc/logo-carousel.php).
	 *
	 * Pure-CSS infinite marquee. The markup is two identical <ul> tracks
	 * side by side in a clipped flex row; each track is at least as wide
	 * as the viewport and slides by exactly its own width (-100%), so
	 * when the first track leaves, the second is exactly where the first
	 * started and the loop is seamless. Spacing is padding on the items,
	 * not `gap`, so each track's width includes its trailing space -- a
	 * `gap` would leave the loop one gap short and cause a visible jump.
	 *
	 * CLS: every <img> carries width/height attributes and the CSS fixes
	 * the rendered height, so the row's block size is known before any
	 * logo loads. Animation runs on `transform` only (compositor thread).
	 *
	 * RTL: the direction reverses under [dir="rtl"] so logos travel
	 * toward the reading direction's end, mirroring the English page.
	 *
	 * No box-shadow (tonal elevation only, like the rest of the theme).
	 */

	.tf-logo-carousel {
		--tf-logo-height: 2.5rem;
		--tf-logo-gap: var(--tf-space-xl);

		display: flex;
		overflow: hidden;
		padding-block: var(--tf-space-l);
		/* Soft fade at both edges so logos enter and leave gracefully. */
		-webkit-mask-image: linear-gradient(to right, transparent, var(--tf-text) 10%, var(--tf-text) 90%, transparent);
		mask-image: linear-gradient(to right, transparent, var(--tf-text) 10%, var(--tf-text) 90%, transparent);
	}

	.tf-logo-carousel__track {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: space-around;
		min-inline-size: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		animation: tf-marquee var(--tf-marquee-duration, 30s) linear infinite;
	}

	.tf-logo-carousel__item {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		margin: 0;
		padding-inline: calc(var(--tf-logo-gap) / 2);
	}

	/* Grayscale and slightly faded by default, full colour on hover or
	 * keyboard focus within the carousel. */
	.tf-logo-carousel__img {
		display: block;
		inline-size: auto;
		/* !important: Elementor emits `.elementor img { height: auto;
		 * max-width: 100% }` unlayered, which a layered rule cannot beat. */
		block-size: var(--tf-logo-height) !important;
		max-inline-size: none !important;
		object-fit: contain;
		filter: grayscale(1);
		opacity: 0.6;
		transition: filter 300ms ease, opacity 300ms ease;
	}

	.tf-logo-carousel__item:hover .tf-logo-carousel__img {
		filter: grayscale(0);
		opacity: 1;
	}

	/* Hovering the carousel pauses it so a logo can be read. */
	.tf-logo-carousel:hover .tf-logo-carousel__track {
		animation-play-state: paused;
	}

	.tf-logo-carousel__notice {
		margin: 0;
		padding: var(--tf-space-s);
		text-align: center;
		color: var(--tf-text-muted);
	}

	@keyframes tf-marquee {
		from { transform: translateX(0); }
		to   { transform: translateX(-100%); }
	}

	@keyframes tf-marquee-rtl {
		from { transform: translateX(0); }
		to   { transform: translateX(100%); }
	}

	[dir="rtl"] .tf-logo-carousel__track {
		animation-name: tf-marquee-rtl;
	}

	/* The mask is a horizontal gradient; flip it with the direction. */
	[dir="rtl"] .tf-logo-carousel {
		-webkit-mask-image: linear-gradient(to left, transparent, var(--tf-text) 10%, var(--tf-text) 90%, transparent);
		mask-image: linear-gradient(to left, transparent, var(--tf-text) 10%, var(--tf-text) 90%, transparent);
	}

	@media (max-width: 767px) {
		.tf-logo-carousel {
			--tf-logo-height: 2rem;
			--tf-logo-gap: var(--tf-space-l);
		}
	}

	@media (min-width: 1024px) {
		.tf-logo-carousel {
			--tf-logo-height: 3rem;
		}
	}

	/* Motion-sensitive users get a static, wrapping row of logos
	 * instead of an endless scroll (WCAG 2.2.2). The duplicate track is
	 * hidden so nothing appears twice. */
	@media (prefers-reduced-motion: reduce) {
		.tf-logo-carousel {
			-webkit-mask-image: none;
			mask-image: none;
		}

		.tf-logo-carousel__track {
			animation: none;
			flex-wrap: wrap;
			justify-content: center;
			row-gap: var(--tf-space-s);
		}

		.tf-logo-carousel__track[aria-hidden="true"] {
			display: none;
		}
	}
}