/**
 * Variant CSS: features--bento-matrix
 *
 * A tight 3×2 feature matrix whose cells share hairline rules to read as one
 * editorial "sheet" — not floating, shadowed cards. Asymmetric left-aligned
 * intro. Each cell: an accent icon, a title, a description. Borders use
 * color-mix so they hold on any theme shade; text stays --ink (polarity-aware).
 * The native grid layout drives columns; CSS adds the shared frame + the mobile
 * collapse to a single column.
 */

body.aibt-universal .universal-features--bento-matrix {
	padding-block: calc(clamp(3rem, 7vw, 5.5rem) * var(--density, 1));
}

/* Asymmetric intro. */
body.aibt-universal .universal-features--bento-matrix .universal-features__intro {
	margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

body.aibt-universal .universal-features--bento-matrix .universal-features__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-sm) 0 !important;
}

body.aibt-universal .universal-features--bento-matrix .universal-features__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 !important;
	max-width: 20ch;
}

body.aibt-universal .universal-features--bento-matrix .universal-features__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

/* The matrix — shared hairlines via top+left on the grid, right+bottom on cells. */
body.aibt-universal .universal-features--bento-matrix .universal-features__grid {
	gap: 0 !important;
	border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
	border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

body.aibt-universal .universal-features--bento-matrix .universal-features__cell {
	border-right: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
	padding: clamp(1.5rem, 2.6vw, 2.2rem);
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	transition: background var(--duration-fast, 0.18s) var(--ease-default, ease);
}

body.aibt-universal .universal-features--bento-matrix .universal-features__cell:hover {
	background: var(--accent-fade, color-mix(in srgb, var(--accent) 6%, transparent));
}

body.aibt-universal .universal-features--bento-matrix .universal-features__icon {
	font-size: 1.65rem !important;
	line-height: 1 !important;
	margin: 0 0 0.3rem 0 !important;
}

body.aibt-universal .universal-features--bento-matrix .universal-features__card-title {
	font-family: var(--font-display) !important;
	font-size: clamp(1.1rem, 1.7vw, 1.3rem) !important;
	font-weight: 600 !important;
	line-height: 1.22 !important;
	letter-spacing: -0.01em !important;
	color: var(--ink) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-features--bento-matrix .universal-features__card-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--ink) !important;
	opacity: 0.76;
	margin: 0 !important;
}

/* Tablet: 2 columns. */
@media (max-width: 900px) {
	body.aibt-universal .universal-features--bento-matrix .universal-features__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Mobile: single column stack — the matrix becomes a clean divided list. */
@media (max-width: 600px) {
	body.aibt-universal .universal-features--bento-matrix .universal-features__grid {
		grid-template-columns: 1fr !important;
	}
}