/**
 * Variant CSS: benefits--icon-band-horizontal
 * Layer 2 — Path B benefits role (2026-06-06).
 * A single compact horizontal band of 4–5 icon + short-title + one-liner
 * benefits, separated by VERTICAL hairlines (left border on every item but the
 * first). Text is --ink (polarity-aware), the icon is an --accent chip, the
 * dividers use color-mix on --ink. On small screens items wrap to a 2-up grid
 * and the vertical rules become top rules so nothing overflows.
 * Every selector scoped to .universal-benefits--icon-band-horizontal.
 */

body.aibt-universal .universal-benefits--icon-band-horizontal {
	background: var(--background);
	color: var(--ink);
	padding-block: calc(clamp(2.6rem, 6vw, 4.5rem) * var(--density, 1));
}

/* Intro — centered, so horizontal margins MUST stay auto (A8/A9). */
body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__intro {
	margin: 0 auto clamp(1.8rem, 4vw, 2.8rem) auto !important;
}

body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__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 auto var(--space-sm) auto !important;
}

body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 auto !important;
	max-width: 22ch;
}

/* The band — a centered flex row; the contentSize cap keeps it tidy. The band
   itself carries top + bottom hairlines so it reads as a discrete strip. */
body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__band {
	gap: 0 !important;
	border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

/* Each item — centered column, equal flex basis, vertical divider on the left. */
body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__item {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	text-align: center;
	padding: clamp(1.4rem, 2.4vw, 2rem) clamp(0.9rem, 1.8vw, 1.6rem);
	border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__item:first-child {
	border-left: 0;
}

/* Accent icon chip, centered above the label. */
body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__icon {
	font-size: 1.2rem !important;
	line-height: 1 !important;
	width: 2.6rem;
	height: 2.6rem;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: var(--decor-radius-pill);
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	margin: 0 auto 0.75rem auto !important;
	transition: background var(--duration-fast, .18s) var(--ease-default, ease),
		transform var(--duration-fast, .18s) var(--ease-default, ease);
}

/* Subtle life on hover: the accent chip warms and lifts. The item itself is not
   a link, so this is purely a visual reassurance cue. */
body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__item:hover .universal-benefits__icon {
	background: color-mix(in srgb, var(--accent) 26%, transparent);
	transform: translateY(-2px);
}

body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__item-title {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	color: var(--ink) !important;
	margin: 0 auto 0.3rem auto !important;
}

body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__item-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: 1.4 !important;
	color: var(--ink) !important;
	opacity: 0.72;
	margin: 0 auto !important;
	max-width: 22ch;
}

/* Tablet / mobile: wrap into a 2-up grid; swap vertical rules for top rules so
   the row never overflows at narrow widths. */
@media (max-width: 781px) {
	body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__band {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__item {
		flex-basis: auto !important;
		border-left: 0;
		border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
	}
	/* First grid row has no top rule (band already carries one). */
	body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__item:nth-child(1),
	body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__item:nth-child(2) {
		border-top: 0;
	}
	/* Left column keeps a vertical seam between the two columns. */
	body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__item:nth-child(odd) {
		border-right: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
	}
}

@media (max-width: 480px) {
	body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__band {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__item {
		border-right: 0 !important;
		border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
	}
	body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__item:nth-child(1) {
		border-top: 0;
	}
	body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__item:nth-child(2) {
		border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
	}
}

/* Cap the kicker's wide uppercase tracking on small screens (A5). */
@media (max-width: 640px) {
	body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__kicker {
		letter-spacing: 0 !important;
	}
}

/* Respect users who prefer reduced motion: kill transitions/transforms. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__icon {
		transition: none;
	}
	body.aibt-universal .universal-benefits--icon-band-horizontal .universal-benefits__item:hover .universal-benefits__icon {
		transform: none;
	}
}