/**
 * Variant CSS: offer--signature-spotlight-poster
 * Layer 2 — Path B universal offer variant (authored 2026-06-10).
 *
 * Concept: ONE flagship service shown as a poster / billboard. A dark, full-width
 * panel carries an oversized outline "ghost" numeral (01) behind the content, an
 * accent kicker, an oversized display title, a generous lede, a horizontal strip
 * of three specs split by vertical hairlines, and a price + one solid CTA foot.
 * Built for Element Count: 1 (the rebuild keeps exactly one service).
 *
 * Differentiator vs sibling EC=1 offer variants:
 *   - solo-feature-statement: a LIGHT centred editorial card, accent top-rule.
 *   - feature-list-photo-split: a LIGHT 2-col split, checklist beside a photo.
 *   THIS one: a DARK spotlight poster with a ghost numeral + spec strip, no photo.
 *
 * Colour intent: the panel paints its own --background-dark surface, so ALL text
 * uses --on-dark (per CLAUDE.md anti-pattern rule — never --bg-main as foreground
 * on a self-dark band). Accent stays --accent for kicker/price/ghost/CTA bg.
 * The self-dark surface must be excluded from light ABAB alternation (recipe
 * loader detects `background:…--background-dark` in this file).
 *
 * area-1-* tokens: title, desc (lede), meta_1..3 (spec strip), price (foot).
 */

/* == Section shell == */
body.aibt-universal .universal-offer--signature-spotlight-poster {
	padding-block: calc(clamp(var(--space-xl), 8vw, var(--space-3xl)) * var(--density, 1));
}

/* The dark poster panel. */
body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__poster {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--background-dark);
	border-radius: var(--decor-radius);
	padding: clamp(var(--space-lg), 6vw, var(--space-2xl));
	border-top: 3px solid var(--accent);
}

/* Oversized outline numeral watermark — pinned to the top-right, clipped by the
   panel, sits behind content (negative z within the isolated stacking context). */
body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__ghost {
	position: absolute;
	top: -0.18em;
	right: 0.04em;
	z-index: -1;
	font-family: var(--font-display);
	font-size: clamp(9rem, 26vw, 20rem);
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px color-mix(in srgb, var(--on-dark) 16%, transparent);
	pointer-events: none;
	user-select: none;
}

/* Kicker. */
body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__kicker {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 var(--space-md) 0;
}

/* Display title. */
body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__title {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 6.2vw, 4.5rem);
	color: var(--on-dark);
	margin: 0 0 var(--space-md) 0;
	max-width: 16ch;
}

body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__title em {
	font-style: italic;
	color: var(--accent);
}

/* Lede. */
body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__lede {
	font-family: var(--font-body);
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	line-height: var(--leading-relaxed);
	color: var(--on-dark);
	opacity: 0.82;
	margin: 0 0 var(--space-lg) 0;
	max-width: 56ch;
}

/* == Spec strip == */
/* Three values in a row, separated by vertical hairlines drawn with a left border
   on every spec after the first. Flex-wrap keeps it sane when one value is long. */
body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__specs {
	gap: 0 !important;
	margin-bottom: var(--space-lg);
	border-top: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent);
	padding-block: var(--space-sm);
}

body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__spec {
	padding: var(--space-2xs) clamp(var(--space-sm), 3vw, var(--space-lg));
	border-left: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent);
}

body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__spec:first-child {
	border-left: 0;
	padding-left: 0;
}

body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__spec-value {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--on-dark);
	margin: 0;
}

/* == Foot: price + CTA == */
body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__foot {
	gap: clamp(var(--space-md), 4vw, var(--space-xl)) !important;
	row-gap: var(--space-md) !important;
}

body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__price-label {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--on-dark);
	opacity: 0.7;
	margin: 0 0 0.15rem 0;
}

body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__price {
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--on-dark);
	margin: 0;
}

/* Primary CTA — solid accent button on the dark panel. */
body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__cta .wp-block-button__link {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	color: var(--cta-text-primary, #ffffff);
	background: var(--cta-bg-primary, var(--accent));
	padding: 0.95rem 2.1rem;
	border: 1px solid transparent;
	transition:
		background-color var(--duration-fast) var(--ease-default),
		transform var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__cta .wp-block-button__link:hover {
	background: var(--accent-hover, var(--accent));
	transform: translateY(-2px);
}

/* Keyboard focus ring — light-on-dark so it stays visible over the panel. */
body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--on-dark);
	outline-offset: 2px;
}

/* == Responsive == */
/* Tablet (641-959): trim the ghost numeral so it doesn't overwhelm a narrower panel. */
@media (min-width: 641px) and (max-width: 959px) {
	body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__ghost {
		font-size: clamp(8rem, 22vw, 14rem);
	}
}

/* Mobile (≤640): single-column foot, kill uppercase tracking (reads as gaps at
   narrow widths — A5), let specs stack as full-width rows with horizontal rules. */
@media (max-width: 640px) {
	body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__kicker,
	body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__spec-value,
	body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__price-label {
		letter-spacing: 0;
	}
	body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__ghost {
		font-size: 40vw;
		top: -0.1em;
	}
	/* Specs become stacked rows: drop the vertical seams, add horizontal ones. */
	body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__specs {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__spec {
		border-left: 0;
		padding-left: 0;
		padding-block: var(--space-2xs);
		border-top: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
	}
	body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__spec:first-child {
		border-top: 0;
	}
	/* Price + CTA stack; button goes full-width for a confident mobile tap target. */
	body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__foot {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__cta-wrap,
	body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__cta {
		width: 100%;
	}
	body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__cta .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* == Motion respect == */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__cta .wp-block-button__link {
		transition: none;
	}
	body.aibt-universal .universal-offer--signature-spotlight-poster .universal-offer__cta .wp-block-button__link:hover {
		transform: none;
	}
}