/**
 * Variant CSS: offer--featured-plus-trio
 * Layer 2 — Path B universal offer variant (authored 2026-06-10).
 *
 * Concept: EXACTLY FOUR services with deliberate hierarchy. One lead service is
 * a large horizontal feature card up top (tag + title + longer desc on the
 * left; price + CTA on the right), and below it the remaining three sit as
 * quiet 3-up supporting tiles. The flagship-plus-supplement pattern — for when
 * one of the four services should clearly lead.
 *
 * Differentiator vs sibling offer variants:
 *   - quad-card-grid (count-4 sibling): four equal quadrants.
 *   - four-compact-columns (count-4 sibling): equal typographic strip.
 *   - four-step-ribbon (count-4 sibling): sequential numbered steps.
 *   THIS one: asymmetric 1 large feature + 3 small supports.
 *
 * Tokens: semantic only (Layer 2 API). The feature card uses --accent-fade as a
 * tint so it leads without going dark; its CTA is the one filled accent button.
 * Supports stay on --background-card with hairline borders, subordinate.
 */

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

/* Intro pinned flush-left so kicker + headline share the feature card's left
   edge (constrained children otherwise centre via inherited auto margins). */
body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__intro {
	margin-block: 0 clamp(2rem, 5vh, 3.5rem);
	margin-inline: 0 auto !important;
	max-width: 50ch;
}

body.aibt-universal .universal-offer--featured-plus-trio .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--featured-plus-trio .universal-offer__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* == FEATURED lead card == */
body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured {
	margin-bottom: clamp(1.1rem, 2vw, 1.75rem) !important;
	padding: clamp(1.75rem, 3.5vw, 3rem) !important;
	gap: clamp(1.5rem, 3vw, 3rem) !important;
	background: var(--accent-fade) !important;
	border: 1px solid var(--divider-accent, var(--accent));
	border-radius: var(--decor-radius, 0px);
	box-shadow: var(--decor-shadow, none);
	position: relative;
	overflow: hidden;
	transition:
		box-shadow var(--duration-fast) var(--ease-snappy),
		transform var(--duration-fast) var(--ease-snappy);
}

body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured:hover {
	box-shadow: var(--decor-shadow-elevated, none);
	transform: translateY(-3px);
}

/* Tag: a small filled accent pill that brands the lead service. */
body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured-tag {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--font-body) !important;
	font-size: var(--text-2xs, var(--text-xs)) !important;
	font-weight: 700 !important;
	letter-spacing: var(--tracking-wider) !important;
	text-transform: uppercase !important;
	color: var(--on-accent, #fff) !important;
	background: var(--accent);
	padding: 0.35em 0.85em !important;
	border-radius: var(--decor-radius, 999px);
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-offer--featured-plus-trio h3.universal-offer__featured-title,
body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured-title {
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-sm) 0 !important;
	line-height: 1.12 !important;
	letter-spacing: -0.02em !important;
}

body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-md) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	max-width: 52ch;
}

/* Side rail: price stacked over the CTA, right-aligned on wide screens. */
body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured-side {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
}

body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured-price {
	font-family: var(--font-display) !important;
	font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: -0.02em !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* The single filled accent CTA in this section. */
body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured-cta .wp-block-button__link {
	background: var(--accent) !important;
	color: var(--on-accent, #fff) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	padding: 0.8em 1.6em !important;
	border: 0 !important;
	border-radius: var(--decor-radius, 0px) !important;
	transition:
		background var(--duration-fast) var(--ease-snappy),
		transform var(--duration-fast) var(--ease-snappy);
}

body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured-cta .wp-block-button__link:hover {
	background: var(--accent-hover, var(--accent)) !important;
	transform: translateY(-2px);
}

body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured-cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* == SUPPORTING trio == */
body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__trio {
	gap: clamp(1.1rem, 2vw, 1.75rem) !important;
	align-items: stretch !important;
}

body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__mini {
	display: flex !important;
	flex-direction: column;
	padding: clamp(1.4rem, 2.5vw, 2rem) !important;
	background: var(--background-card, var(--background)) !important;
	border: 1px solid var(--divider-primary);
	border-radius: var(--decor-radius, 0px);
	transition:
		border-color var(--duration-fast) var(--ease-snappy),
		transform var(--duration-fast) var(--ease-snappy);
}

body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__mini:hover {
	border-color: var(--accent);
	transform: translateY(-3px);
}

body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__mini:focus-within {
	border-color: var(--accent);
}

body.aibt-universal .universal-offer--featured-plus-trio h3.universal-offer__mini-title,
body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__mini-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;
}

body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__mini-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;
}

/* Mini price: pinned to the bottom edge so prices align across the trio. */
body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__mini-price {
	font-family: var(--font-mono, var(--font-body)) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	color: var(--text-primary) !important;
	margin: auto 0 0 0 !important;
	margin-top: auto !important;
	padding-top: var(--space-md);
	border-top: 1px solid var(--divider-primary);
}

/* == Responsive == */
/* 641-959: featured stays two-up but tightens; trio drops to a single column. */
@media (min-width: 641px) and (max-width: 959px) {
	body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__trio {
		flex-wrap: wrap !important;
	}
	body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__mini {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

/* ≤640: everything stacks; featured side rail drops below the body. */
@media (max-width: 640px) {
	body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured {
		flex-direction: column !important;
		gap: var(--space-lg) !important;
	}
	body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured-body,
	body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured-side {
		width: 100% !important;
		flex-basis: 100% !important;
	}
	body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__trio {
		flex-direction: column !important;
	}
	body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__mini {
		width: 100% !important;
	}
	body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__kicker {
		letter-spacing: var(--tracking-wide) !important;
	}
}

/* == Motion respect == */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured,
	body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured-cta .wp-block-button__link,
	body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__mini {
		transition: none;
	}
	body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured:hover,
	body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__featured-cta .wp-block-button__link:hover,
	body.aibt-universal .universal-offer--featured-plus-trio .universal-offer__mini:hover {
		transform: none;
	}
}