/**
 * Variant CSS: logos--headline-beside-grid
 * Layer 2 - Path B logos role (2026-06-06).
 * Asymmetric two-column split: a headline-dominant left intro ("Zaufali nam"
 * + one stat line, no deck paragraph) sits beside a right grid of bordered
 * name cells, separated by a vertical hairline rule. The headline gives the
 * roster weight; the grid confirms it. Distinct from logos--statement-and-grid
 * (kicker+headline+deck, plain chips, no divider) and logos--editorial-statement
 * (centred flowing row). Names are typography only (no logo files).
 * Every selector scoped to .universal-logos--headline-beside-grid (no leak).
 */

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

/* ── Columns: ~42 / 58 split with a hairline divider between ──────── */
body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__cols {
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) 1px minmax(0, 1fr);
	align-items: center;
	gap: clamp(var(--space-xl), 5vw, var(--space-2xl)) !important;
}

/* The middle grid track is the divider rule itself. */
body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__cols::before {
	content: "";
	grid-column: 2;
	grid-row: 1;
	align-self: stretch;
	width: 1px;
	background: color-mix(in srgb, var(--ink) 14%, transparent);
}

/* ── Left intro: kicker + oversized headline + stat ───────────────── */
body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__intro {
	grid-column: 1;
}

body.aibt-universal .universal-logos--headline-beside-grid .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(--accent) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__stat {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	max-width: 22rem;
}

/* ── Right grid: bordered name cells, two per row ─────────────────── */
body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__grid {
	grid-column: 3;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 !important;
	/* Outer hairline frame; inner edges come from each cell. */
	border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
	border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__chip {
	font-family: var(--font-display) !important;
	font-size: clamp(1rem, 1.6vw, 1.35rem) !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 5.5rem;
	padding: var(--space-md) !important;
	border-right: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
	transition: color var(--duration-fast) var(--ease-default),
		background var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__chip:hover,
body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__chip:focus-visible {
	color: var(--text-primary) !important;
	background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ── Tablet/phone: stack columns, hide the vertical rule ─────────── */
@media (max-width: 781px) {
	body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__cols {
		grid-template-columns: 1fr;
		gap: var(--space-xl) !important;
	}
	body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__cols::before {
		display: none;
	}
	body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__intro,
	body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__grid {
		grid-column: 1;
	}
	body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__stat {
		max-width: none;
	}
}

/* ── ≤640px: drop kicker tracking (A5); chips can wrap if needed ──── */
@media (max-width: 640px) {
	body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__kicker {
		letter-spacing: 0 !important;
	}
	body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__chip {
		min-height: 4.5rem;
	}
}

/* ── Reduced motion: drop hover transitions ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-logos--headline-beside-grid .universal-logos__chip {
		transition: none;
	}
}