/**
 * Variant CSS: offer--four-compact-columns
 * Layer 2 — Path B universal offer variant (authored 2026-06-10).
 *
 * Concept: EXACTLY FOUR services as a single wide row of compact columns
 * separated by hairline rules — no cards, no boxes, pure typography. Each
 * column: a small tracked eyebrow + service title (h3) + one-two line desc.
 * A light, editorial "spec strip" that shows the whole scope at a glance.
 *
 * Differentiator vs sibling offer variants:
 *   - quad-card-grid (count-4 sibling): 2×2 boxed cards + price.
 *   - icon-cards-3col: 3 boxed icon cards.
 *   - vertical-icon-rail: vertical spine, one per row.
 *   THIS one: a horizontal 4-up typographic strip with hairline seams.
 *
 * Tokens: semantic only (Layer 2 API). The seams use --divider-primary so they
 * stay legible on both light and dark themes; the eyebrow carries the accent.
 */

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

/* Centred intro: each centred child of a constrained alignfull section needs
   horizontal `auto` margins or it left-shifts (A8/A9). */
body.aibt-universal .universal-offer--four-compact-columns .universal-offer__intro {
	margin: 0 auto clamp(2.5rem, 6vh, 4.5rem) auto !important;
}

body.aibt-universal .universal-offer--four-compact-columns .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 auto var(--space-md) auto !important;
}

body.aibt-universal .universal-offer--four-compact-columns .universal-offer__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 auto !important;
}

/* == The strip == */
body.aibt-universal .universal-offer--four-compact-columns .universal-offer__strip {
	gap: 0 !important;
	align-items: stretch !important;
	border-top: 1px solid var(--divider-primary);
	border-bottom: 1px solid var(--divider-primary);
}

/* Column: tight padding, hairline seam on the left (suppressed on the first so
   only the three interior seams show). Vertical flex keeps the desc anchored. */
body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col {
	display: flex !important;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.1rem, 2vw, 1.75rem) !important;
	border-left: 1px solid var(--divider-primary);
	position: relative;
	transition: background var(--duration-fast) var(--ease-snappy);
}

body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col:first-child {
	border-left: 0;
	padding-left: 0 !important;
}

body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col:last-child {
	padding-right: 0 !important;
}

/* Accent base rule that scales in on hover — gives the otherwise borderless
   column a tactile "selected" affordance without turning it into a card. */
body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col::after {
	content: "";
	position: absolute;
	left: clamp(1.1rem, 2vw, 1.75rem);
	right: clamp(1.1rem, 2vw, 1.75rem);
	bottom: 0;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--duration-fast) var(--ease-snappy);
}

body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col:first-child::after {
	left: 0;
}

body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col:last-child::after {
	right: 0;
}

body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col:hover::after,
body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col:focus-within::after {
	transform: scaleX(1);
}

/* == Eyebrow: tracked accent micro-label. == */
body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col-eyebrow {
	font-family: var(--font-mono, var(--font-body)) !important;
	font-size: var(--text-2xs, var(--text-xs)) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-wider) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-sm) 0 !important;
}

/* == Column title == */
body.aibt-universal .universal-offer--four-compact-columns h3.universal-offer__col-title,
body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col-title {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: var(--text-lg) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-xs) 0 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
}

/* == Column description == */
body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-normal) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
}

/* == Responsive == */
/* 641-959: drop to a 2×2 strip — interior seams become a cross. The columns
   block stacks at 781px by default, so override to keep two-up control. */
@media (min-width: 641px) and (max-width: 959px) {
	body.aibt-universal .universal-offer--four-compact-columns .universal-offer__strip {
		flex-wrap: wrap !important;
	}
	body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col {
		flex-basis: calc(50% - 0px) !important;
		width: 50% !important;
		padding: clamp(1.5rem, 4vw, 2rem) clamp(1.25rem, 3vw, 1.75rem) !important;
	}
	/* Left seam only on the right column of each row. */
	body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col:nth-child(odd) {
		border-left: 0;
		padding-left: 0 !important;
	}
	body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col:nth-child(even) {
		padding-right: 0 !important;
	}
	/* Horizontal seam between the two rows. */
	body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col:nth-child(n+3) {
		border-top: 1px solid var(--divider-primary);
	}
}

/* ≤640: single stacked column, seams become horizontal rules. */
@media (max-width: 640px) {
	body.aibt-universal .universal-offer--four-compact-columns .universal-offer__strip {
		flex-direction: column !important;
	}
	body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col {
		width: 100% !important;
		border-left: 0;
		border-top: 1px solid var(--divider-primary);
		padding: clamp(1.4rem, 5vw, 1.75rem) 0 !important;
	}
	body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col:first-child {
		border-top: 0;
	}
	body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col::after {
		left: 0;
		right: 0;
	}
	body.aibt-universal .universal-offer--four-compact-columns .universal-offer__kicker {
		letter-spacing: var(--tracking-wide) !important;
	}
}

/* == Motion respect == */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col,
	body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col::after {
		transition: none;
	}
	body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col:hover::after,
	body.aibt-universal .universal-offer--four-compact-columns .universal-offer__col:focus-within::after {
		transform: scaleX(1);
	}
}

/* == Editor wrapper: ensure the accent rule renders at rest (hover inert). == */
.editor-styles-wrapper .universal-offer--four-compact-columns .universal-offer__col::after {
	transform: scaleX(0);
}