/**
 * Variant CSS: offer--vertical-tabs-detail
 * Layer 2 - Path B universal offer variant (authored 2026-06-06).
 *
 * Concept: a master/detail offer browser. A LEFT vertical rail lists service
 * names as static "tabs" (each = number + name); the first carries .is-active
 * (accent left-edge + filled number + raised surface). A RIGHT detail panel
 * renders the active service in full: eyebrow label, title, descriptive copy,
 * a bullet list of inclusions, then a price + CTA foot row. Reads as a larger
 * catalogue inspected one entry at a time.
 *
 * Differentiator vs sibling offer variants:
 *   - tabbed-service-groups: a HORIZONTAL centred tab row + a 2x3 grid below.
 *   - accordion-categories: a stacked vertical accordion, NO side detail panel.
 *   - two-tier / pricing-list: priced rows/cards, no master/detail split.
 *   THIS one: a left vertical tab rail + a right rich detail card.
 *
 * Tokens: semantic only. No dark band (text on --background). Inactive rail
 * tabs are muted; the active one lifts via --accent. KI-020 safe (accent edge,
 * never --bg-main as text).
 */

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

/* Intro: left-aligned (asymmetric layout); not centred → no auto-margin rule. */
body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__intro {
	margin: 0 0 clamp(2rem, 5vh, 3rem) 0 !important;
}

body.aibt-universal .universal-offer--vertical-tabs-detail .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-tabs-detail .universal-offer__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-sm) 0 !important;
}

body.aibt-universal .universal-offer--vertical-tabs-detail .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;
}

/* == Split: left rail + right detail == */
body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__split {
	gap: clamp(1.5rem, 4vw, 3rem) !important;
	align-items: stretch !important;
}

/* == Left rail: stacked tab list == */
body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__rail {
	display: flex !important;
	flex-direction: column;
	gap: 0.5rem !important;
}

/* Tab row (inactive): muted hairline, accent edge appears only when active. */
body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__tab {
	gap: 0.9rem !important;
	padding: clamp(0.95rem, 1.6vw, 1.25rem) clamp(1rem, 1.8vw, 1.4rem) !important;
	border: 1px solid var(--divider-primary);
	border-left: 3px solid transparent;
	border-radius: var(--decor-radius, 0px);
	background: transparent;
	cursor: default;
	transition:
		border-color var(--duration-fast) var(--ease-default),
		background var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__tab:hover {
	border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Active tab: accent left edge + raised card surface. */
body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__tab.is-active {
	border-color: var(--divider-primary);
	border-left-color: var(--accent);
	background: var(--background-card, var(--background));
}

body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__tab-num {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 700 !important;
	letter-spacing: var(--tracking-wide) !important;
	line-height: 1 !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}

/* Active number reads as accent — the current selection cue. */
body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__tab.is-active .universal-offer__tab-num {
	color: var(--accent) !important;
}

body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__tab-name {
	font-family: var(--font-display) !important;
	font-size: var(--text-lg) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* == Right detail panel == */
body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail {
	display: flex !important;
	flex-direction: column;
	padding: clamp(1.75rem, 3.5vw, 2.75rem) !important;
	background: var(--background-card, var(--background)) !important;
	border: 1px solid var(--divider-primary);
	border-top: 3px solid var(--accent);
	border-radius: var(--decor-radius, 0px);
}

body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-label {
	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-offer--vertical-tabs-detail h3.universal-offer__detail-title,
body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-title {
	font-family: var(--font-display) !important;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important;
	font-weight: 600 !important;
	line-height: 1.12 !important;
	letter-spacing: -0.02em !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-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 0 var(--space-lg) 0 !important;
	max-width: 58ch;
}

/* Inclusions list: hairline-divided rows with an accent tick marker. */
body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-list {
	list-style: none !important;
	margin: 0 0 var(--space-lg) 0 !important;
	padding: 0 !important;
}

body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-list li {
	position: relative;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: 1.45 !important;
	color: var(--text-primary) !important;
	padding: 0.7rem 0 0.7rem 1.6rem !important;
	margin: 0 !important;
	border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-list li:first-child {
	border-top: 0;
}

/* Accent tick — pure CSS, no extra markup. */
body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.05rem;
	width: 0.6rem;
	height: 0.34rem;
	border-left: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(-45deg);
}

/* Foot: price + CTA, pushed to the bottom of the panel. */
body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-foot {
	gap: 1rem !important;
	margin-top: auto !important;
	padding-top: var(--space-md) !important;
	border-top: 1px solid var(--divider-primary);
}

body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-price {
	font-family: var(--font-display) !important;
	font-size: var(--text-xl) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* Solid accent CTA. */
body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-cta .wp-block-button__link {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	background: var(--cta-bg-primary, var(--accent)) !important;
	color: var(--cta-text-primary, #fff) !important;
	padding: 0.8rem 1.6rem !important;
	border: 1px solid var(--cta-bg-primary, var(--accent)) !important;
	transition: background var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-cta .wp-block-button__link:hover {
	background: var(--accent-hover, var(--accent)) !important;
	border-color: var(--accent-hover, var(--accent)) !important;
}

/* Keyboard focus ring on the detail CTA (a11y). */
body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: inherit;
}

/* == Responsive == */
@media (max-width: 781px) {
	/* Columns stack: rail above, detail panel below, full width each. */
	body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__split {
		flex-direction: column !important;
		gap: 1.25rem !important;
	}
	body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__rail,
	body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail {
		flex-basis: auto !important;
		width: 100% !important;
	}
}

@media (max-width: 640px) {
	/* Cap uppercase tracking: wide letter-spacing reads as gaps at narrow widths. */
	body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__kicker,
	body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-label {
		letter-spacing: 0 !important;
	}
	/* Foot wraps price over CTA cleanly; CTA stretches full width for the thumb. */
	body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-cta {
		width: 100%;
	}
	body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-cta .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* == Motion respect == */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__tab,
	body.aibt-universal .universal-offer--vertical-tabs-detail .universal-offer__detail-cta .wp-block-button__link {
		transition: none;
	}
}