/* ==========================================================================
   Section: Partner logo wall (marquee)
   Figma: Home EN "Logo 20" 5017:104391 (in 4081:35022) — a 60px gap, py 60,
   white background. Same marquee mechanics as the ticker, slower.
   The design's cells are fixed 192/205 boxes, but see the note on
   .mada-logos__cell: we hug instead, so the 60 lands between the LOGOS.
   RTL: direction reversed in rtl.css pattern ([dir=rtl] reverse).
   ========================================================================== */

.mada-logos {
	background-color: var(--color-bg);
	overflow: hidden;
	padding-block: var(--space-15);             /* 60 → nearest token 64; Figma 60 */
}

.mada-logos__track {
	display: flex;
	inline-size: max-content;
	animation: mada-logos-scroll 80s linear infinite;
}

.mada-logos__seq {
	display: flex;
	align-items: center;
	gap: 60px;                                  /* Figma: 60 */
	padding-inline-end: 60px;                   /* seam continuity */
}

/* The cell HUGS its logo instead of being a fixed 192px box.
   Figma (Logo 20, 5017:104391) draws fixed cells on a 60px gap, but the logos
   inside them range from 93 to 192 wide, so the gap a visitor actually SEES
   swings with each logo's width. Our build made that worse: the 72px height cap
   below shrinks a square logo to 72 wide inside a 192 cell, and one source
   raster (partner-10, 48x49) never even reached the cap. Measured optical gaps
   were 60 -> 192px, which is the "spacing between logos is inconsistent" report.
   Hugging keeps Figma's 60 as the number BETWEEN LOGOS, so it is the same 60
   everywhere, and pairs it with one uniform logo height so nothing floats. */
.mada-logos__cell {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
.mada-logos__cell img {
	/* S22: "reduce the logo height to 72px" (all bands). Every logo is now
	   EXACTLY 72 tall -- previously this was a max, so wide logos hit the
	   192px cell first and rendered 36-67 tall while square ones sat at 72. */
	block-size: 72px;
	inline-size: auto;
	max-inline-size: none;
	object-fit: contain;
}

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

@keyframes mada-logos-scroll-rtl {
	from { transform: translateX(50%); }
	to   { transform: translateX(0); }
}
[dir="rtl"] .mada-logos__track {
	animation-name: mada-logos-scroll-rtl;
}

@media (prefers-reduced-motion: reduce) {
	.mada-logos__track { animation: none; }
}

/* Mobile: tighter rhythm (from M-frame proportions). S22 keeps the 72px logo
   height on mobile too, so only the gap tightens; the cell hugs as above. */
@media (max-width: 639px) {
	.mada-logos { padding-block: var(--space-11); }
	.mada-logos__seq { gap: var(--space-11); padding-inline-end: var(--space-11); }
}