/**
 * Variant CSS: offer--vertical-icon-rail
 * Layer 2 - Path B universal offer variant (authored 2026-06-06).
 *
 * Concept: services rendered as a single narrow VERTICAL RAIL. Each row is a
 * circular icon node on the left threaded onto one continuous hairline spine
 * (a vertical connector), with the service name + a one/two-line description to
 * its right. The spine runs through the centre of the icon column; nodes carry
 * an opaque card background so they sit ON the line like beads, and the spine is
 * clipped to start/stop at the first/last node. Reads as a guided top-to-bottom
 * axis rather than a card grid.
 *
 * Differentiator vs sibling offer variants:
 *   - checklist-two-column: 2-column flat rows w/ tick icons, no spine/axis.
 *   - editorial-index-list / numbered-grid: big zero-padded numerals, no rail.
 *   - icon-feature-matrix: dense 4-wide connected tile table.
 *   - vertical-tabs-detail: left tab list + right detail panel (two columns).
 *   THIS one: one column, icon beads on a single connecting hairline spine.
 *
 * Tokens: semantic only. Spine + node borders are --ink hairlines; the icon
 * glyph + node accent edge use --accent. No dark band (text on --background).
 */

/* == Section shell == */
body.aibt-universal .universal-offer--vertical-icon-rail {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary);
}

/* == Intro == */
body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__intro {
	margin: 0 0 clamp(2.25rem, 5vh, 3.25rem) 0 !important;
	max-width: 44ch;
}

/* Kicker: uppercase tracked accent. Left-aligned, so 0-side margins are fine. */
body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__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-offer--vertical-icon-rail .universal-offer__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

/* Emphasized headline word takes accent. */
body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__headline em {
	color: var(--accent);
	font-style: normal;
}

body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	max-width: 56ch;
}

/* == Rail: the spine container ==
   A single continuous hairline runs down the centre of the bullet column. The
   bullet diameter is 48px, so the spine sits at 24px from the left edge of each
   node. We clip the line to span only between the first and last node centres
   via top/bottom insets that equal half a bullet. */
body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__rail {
	position: relative;
	display: flex !important;
	flex-direction: column;
	gap: clamp(1.5rem, 3.5vh, 2.5rem) !important;
}

body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__rail::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 24px;
	bottom: 24px;
	width: 2px;
	transform: translateX(-1px);
	background: color-mix(in srgb, var(--ink) 16%, transparent);
	z-index: 0;
}

/* == Node row: icon bead (left) + text (right) == */
body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__node {
	position: relative;
	z-index: 1;
	gap: clamp(1rem, 2.5vw, 1.5rem) !important;
	align-items: flex-start !important;
}

/* Icon bead: opaque circle that sits ON the spine; accent glyph, hairline ring. */
body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__bullet {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--background-card, var(--background));
	border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
	color: var(--accent);
	box-shadow: 0 0 0 6px var(--background);
	transition:
		border-color var(--duration-fast) var(--ease-default),
		transform var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__bullet svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* Node hover: bead lifts + ring goes accent (whole row is the hover target). */
body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__node:hover .universal-offer__bullet {
	border-color: var(--accent);
	transform: scale(1.06);
}

/* Text column. */
body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__node-text {
	flex: 1 1 auto;
	padding-top: 0.35rem;
	min-width: 0;
}

body.aibt-universal .universal-offer--vertical-icon-rail h3.universal-offer__node-name,
body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__node-name {
	font-family: var(--font-display) !important;
	font-size: var(--text-xl) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-xs) 0 !important;
}

body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__node-desc {
	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: 54ch;
}

/* == Responsive == */
@media (max-width: 781px) {
	/* Tighten the bead so the spine + text still breathe at tablet widths. */
	body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__bullet {
		width: 42px;
		height: 42px;
	}
	body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__bullet svg {
		width: 20px;
		height: 20px;
	}
	/* Re-centre the spine on the new 42px bead (21px). */
	body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__rail::before {
		left: 21px;
		top: 21px;
		bottom: 21px;
	}
}

@media (max-width: 640px) {
	/* Cap uppercase tracking: wide letter-spacing reads as gaps at narrow widths. */
	body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__kicker {
		letter-spacing: 0 !important;
	}
	body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__node-name {
		font-size: var(--text-lg) !important;
	}
}

/* == Motion respect == */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__bullet {
		transition: none;
	}
	body.aibt-universal .universal-offer--vertical-icon-rail .universal-offer__node:hover .universal-offer__bullet {
		transform: none;
	}
}