/**
 * Variant CSS: logos--mono-grid-static
 * Layer 2 - Path B logos role (2026-05-29).
 * Static, evenly-spaced grid of client/partner name-chips. No animation:
 * a calm "wall of trust". Chips sit muted (lowered opacity + secondary
 * colour, evoking a grayscale logo wall) and resolve to full primary
 * intensity on hover/focus. Reduced-motion just drops the transition.
 * Every selector scoped to .universal-logos--mono-grid-static (no global leak).
 */

body.aibt-universal .universal-logos--mono-grid-static {
	background: var(--background-alt);
	color: var(--text-primary);
	border-block: 1px solid var(--divider-primary);
}

body.aibt-universal .universal-logos--mono-grid-static .universal-logos__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--text-muted) !important;
	margin: 0 auto var(--space-xl) auto !important;
	text-align: center;
}

/* ── Static grid: even, wrapping rows centred in the content area ─── */
body.aibt-universal .universal-logos--mono-grid-static .universal-logos__grid {
	gap: clamp(var(--space-lg), 4vw, var(--space-2xl)) clamp(var(--space-xl), 6vw, calc(var(--space-2xl) * 1.5)) !important;
	align-items: center;
	justify-content: center;
	max-width: 64rem;
	margin-inline: auto;
}

/* ── Chip: muted "grayscale wall" by default, full colour on hover ───
   grayscale(1) carries the monochrome-logo metaphor (a no-op on the already
   achromatic --text-secondary, so it never costs contrast). Opacity stays at
   0.85: high enough that the name clears WCAG AA on every theme (lightest
   case white-tech-modern ~4.6:1, darkest dark-industrial ~6:1), low enough to
   still read as a calm, recessed wall. The hover lift (to --text-primary, full
   opacity, grayscale off) supplies the perceptible state change. */
body.aibt-universal .universal-logos--mono-grid-static .universal-logos__chip {
	font-family: var(--font-display) !important;
	font-size: clamp(1.15rem, 2vw, 1.6rem) !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-secondary) !important;
	opacity: 0.85;
	margin: 0 !important;
	white-space: nowrap;
	filter: grayscale(1);
	transition: opacity var(--duration-fast) var(--ease-default),
		color var(--duration-fast) var(--ease-default),
		filter var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-logos--mono-grid-static .universal-logos__chip:hover,
body.aibt-universal .universal-logos--mono-grid-static .universal-logos__chip:focus-visible {
	opacity: 1;
	color: var(--text-primary) !important;
	filter: grayscale(0);
}

/* ── Mobile: tighter rhythm, smaller gaps ──────────────────────── */
@media (max-width: 781px) {
	body.aibt-universal .universal-logos--mono-grid-static .universal-logos__grid {
		gap: var(--space-md) var(--space-lg) !important;
	}
}

/* ── ≤640px: drop the kicker's wide tracking to 0 so the uppercase eyebrow
       doesn't fragment / overflow on narrow phones. ─────────────── */
@media (max-width: 640px) {
	body.aibt-universal .universal-logos--mono-grid-static .universal-logos__kicker {
		letter-spacing: 0 !important;
	}
}

/* ── Reduced motion: keep the static design, drop the transition ── */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-logos--mono-grid-static .universal-logos__chip {
		transition: none;
	}
}