/* ============================================================
   Client Logos Block ("We Love Our Clients") — build 3

   All sitewide tokens emitted at :root by inc/logo-marquee-tokens.php:
     --logo-marquee-grayscale:            1 | 0
     --lm-duration-mobile/tablet/desktop/desktop-lg:  Ns
     --lm-logo-gap:                       Nrem
     --lm-visible-mobile/tablet/desktop/desktop-lg:   N

   .cl-marquee is always full-width (100vw) via the negative-margin
   bleed trick so the marquee escapes any page-width tier, while the
   title above stays in the normal content column.

   Each logo slot is square (aspect-ratio: 1) — logos are contained
   inside via object-fit: contain, never cropped.
   ============================================================ */

.client-logos {
	padding-top:    clamp(40px, 6vw, 100px);
	padding-bottom: clamp(40px, 6vw, 100px);
}

/* ── Title ─────────────────────────────────────────────────── */

.client-logos .cl-title {
	margin-top:    0;
	margin-bottom: clamp(2rem, 5vw, 4rem);
	text-align:    center;
}

#SD .client-logos[data-cl-title-role] .cl-title {
	font-family:    var(--cl-title-family, var(--h2-font));
	font-weight:    var(--cl-title-weight, var(--h2-weight));
	font-style:     var(--cl-title-style, normal);
	font-size:      var(--cl-title-size, var(--h2Size));
	line-height:    var(--cl-title-line-height, normal);
	letter-spacing: var(--cl-title-letter-spacing, var(--h2-tracking));
	text-transform: var(--cl-title-text-transform, none);
	color:          var(--cl-title-color, inherit);
}

/* ── Marquee container — always full-bleed ─────────────────── */

.client-logos .cl-marquee {
	display:        flex;
	flex-direction: column;
	gap:            clamp(0.75rem, 2vw, 1.5rem);
	overflow:       hidden;
	width:          100vw;
	margin-left:    calc(50% - 50vw);
	margin-right:   calc(50% - 50vw);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
	mask-image:         linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

/* ── Tracks ────────────────────────────────────────────────── */
/* Each .cl-track contains the logo set duplicated once, so
   translateX(-50%) = exactly one pass → seamless loop.
   Linear only — constant speed, no easing. */

.client-logos .cl-track {
	display:     flex;
	align-items: center;
	gap:         var(--lm-logo-gap, 2rem);
	width:       max-content;
	animation:   cl-scroll var(--lm-duration-mobile, 30s) linear infinite;
}

@media screen and (min-width: 768px) {
	.client-logos .cl-track {
		animation-duration: var(--lm-duration-tablet, 30s);
	}
}

@media screen and (min-width: 1024px) {
	.client-logos .cl-track {
		animation-duration: var(--lm-duration-desktop, 30s);
	}
}

@media screen and (min-width: 1440px) {
	.client-logos .cl-track {
		animation-duration: var(--lm-duration-desktop-lg, 30s);
	}
}

/* Even rows reverse direction when data-lm-alternate is present */
.client-logos[data-lm-alternate] .cl-track:nth-child(even) {
	animation-direction: reverse;
}

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

/* ── Logo slots — always square ────────────────────────────── */
/* Slot width = 100vw ÷ N per breakpoint (defaults: 3/4/6/8).
   aspect-ratio: 1 makes the slot square so every logo occupies the
   same square area regardless of its own proportions. The img uses
   object-fit: contain so nothing is ever cropped. */

.client-logos .cl-logo {
	flex:         0 0 calc(100vw / var(--lm-visible-mobile, 3));
	aspect-ratio: 1;
	display:      flex;
	align-items:  center;
	justify-content: center;
}

@media screen and (min-width: 768px) {
	.client-logos .cl-logo {
		flex-basis: calc(100vw / var(--lm-visible-tablet, 4));
	}
}

@media screen and (min-width: 1024px) {
	.client-logos .cl-logo {
		flex-basis: calc(100vw / var(--lm-visible-desktop, 6));
	}
}

@media screen and (min-width: 1440px) {
	.client-logos .cl-logo {
		flex-basis: calc(100vw / var(--lm-visible-desktop-lg, 8));
	}
}

.client-logos .cl-logo img {
	width:      100%;
	height:     100%;
	object-fit: contain;
	filter:     grayscale(calc(var(--logo-marquee-grayscale, 1) * 100%)) contrast(1.6);
}

@media (prefers-reduced-motion: reduce) {
	.client-logos .cl-track {
		animation: none;
	}
}