/**
 * Variant CSS: logos--bordered-cells
 * Layer 2 - Path B logos role (2026-05-29).
 * Client/partner names in a bordered cell grid, a "press wall". Each name
 * sits in its own hairline-bordered cell; rows are pulled together with a
 * negative margin so neighbouring borders collapse into a single shared
 * hairline (no double lines). Cells lift to the accent on hover/focus.
 * Every selector scoped to .universal-logos--bordered-cells (no global leak).
 */

body.aibt-universal .universal-logos--bordered-cells {
	background: var(--background);
	color: var(--text-primary);
}

body.aibt-universal .universal-logos--bordered-cells .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;
}

/* ── Wall: clip the collapsed outer hairlines into one clean frame ── */
body.aibt-universal .universal-logos--bordered-cells .universal-logos__wall {
	max-width: 60rem;
	margin-inline: auto;
	border: 1px solid var(--divider-primary);
	overflow: hidden;
}

/* Rows: kill WP column gaps so cells butt up against each other. */
body.aibt-universal .universal-logos--bordered-cells .universal-logos__row {
	gap: 0 !important;
	margin-bottom: 0 !important;
}

/* ── Cell: hairline frame; -1px offsets collapse shared borders ──── */
body.aibt-universal .universal-logos--bordered-cells .universal-logos__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(6rem, 12vw, 9rem);
	padding: var(--space-lg) var(--space-md);
	margin: -1px 0 0 -1px;
	border: 1px solid var(--divider-primary);
	background: var(--background);
	transition: background var(--duration-fast) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-logos--bordered-cells .universal-logos__cell:hover {
	background: var(--background-alt);
	border-color: var(--accent);
	position: relative;
	z-index: 1;
}

/* ── Chip: the partner name inside each cell ───────────────────── */
body.aibt-universal .universal-logos--bordered-cells .universal-logos__chip {
	font-family: var(--font-display) !important;
	font-size: clamp(1.1rem, 1.9vw, 1.55rem) !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-secondary) !important;
	opacity: 0.78;
	margin: 0 !important;
	white-space: nowrap;
	transition: color var(--duration-fast) var(--ease-default),
		opacity var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-logos--bordered-cells .universal-logos__cell:hover .universal-logos__chip {
	color: var(--text-primary) !important;
	opacity: 1;
}

/* ── Mobile: two columns per row instead of three ──────────────── */
@media (max-width: 781px) {
	body.aibt-universal .universal-logos--bordered-cells .universal-logos__row {
		flex-wrap: wrap !important;
	}
	body.aibt-universal .universal-logos--bordered-cells .universal-logos__cell {
		flex-basis: 50% !important;
		flex-grow: 1;
		min-height: clamp(5rem, 18vw, 7rem);
	}
}

/* ── ≤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--bordered-cells .universal-logos__kicker {
		letter-spacing: 0 !important;
	}
}

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-logos--bordered-cells .universal-logos__cell,
	body.aibt-universal .universal-logos--bordered-cells .universal-logos__chip {
		transition: none;
	}
}