/**
 * Variant CSS: offer--quad-outline-ghost-cards
 * Layer 2 — Path B universal offer variant (authored 2026-06-10).
 *
 * Concept: EXACTLY FOUR services as four "ghost" outline cards — border only,
 * transparent fill, no shadow — each with an OVERSIZED watermark ordinal
 * bleeding behind the text. 4-up row on desktop, 2×2 on tablet, single column
 * on phone. Architectural, restrained, theme-agnostic (the outline reads on
 * light AND dark backgrounds because it never relies on a card fill).
 *
 * Differentiator vs sibling offer count-4 variants:
 *   - quad-card-grid: filled cards on --background-card, small corner ordinal.
 *   - featured-plus-trio: asymmetric 1 large + 3 small.
 *   - four-compact-columns: bare columns, no border.
 *   - four-step-ribbon: sequential numbered ribbon.
 *   THIS one: transparent outline cards + giant ordinal watermark behind copy.
 *
 * Tokens: semantic only (Layer 2 API). The watermark is an --accent glyph held
 * at low opacity so it never competes with the title for contrast (the title
 * keeps full --text-primary contrast, layered above via z-index).
 */

/* == Section shell == */
body.aibt-universal .universal-offer--quad-outline-ghost-cards {
	background: var(--background);
	color: var(--text-primary);
}

/* Intro: nested constrained group centres its own content. Centred children
   keep horizontal auto margins (A8/A9 — never zero a centred element's sides). */
body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__intro {
	margin: 0 auto clamp(2.5rem, 6vh, 4rem) auto;
}

body.aibt-universal .universal-offer--quad-outline-ghost-cards .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--quad-outline-ghost-cards .universal-offer__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 auto !important;
}

body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-md) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: var(--space-md) auto 0 auto !important;
	max-width: 56ch;
}

/* == Ghost grid: 4 across on desktop. == */
body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghosts {
	gap: clamp(1rem, 1.8vw, 1.5rem) !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Ghost card: outline only, transparent fill, no resting shadow. Vertical flex
   so the price anchors the bottom edge and paired cards share equal height.
   overflow:hidden clips the watermark to the card bounds. */
body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghost {
	display: flex !important;
	flex-direction: column;
	padding: clamp(1.5rem, 2.6vw, 2.25rem) !important;
	background: transparent !important;
	border: 1px solid var(--divider-primary);
	border-radius: var(--decor-radius, 0px);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghost:hover {
	border-color: var(--accent);
	transform: translateY(-3px);
}

body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghost:focus-within {
	border-color: var(--accent);
}

/* == Watermark ordinal: oversized, parked bottom-right, held BEHIND the copy
   via z-index:-1 + low opacity so it's texture, not a competing element. The
   isolation:isolate on the card scopes the negative z-index to the card. == */
body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghost-mark {
	position: absolute;
	z-index: -1;
	right: -0.06em;
	bottom: -0.22em;
	margin: 0 !important;
	font-family: var(--font-display) !important;
	font-size: clamp(5rem, 9vw, 8rem) !important;
	font-weight: 800 !important;
	line-height: 0.8 !important;
	letter-spacing: -0.04em !important;
	color: var(--accent) !important;
	opacity: 0.10;
	pointer-events: none;
	transition: opacity var(--duration-fast) var(--ease-standard);
}

body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghost:hover .universal-offer__ghost-mark {
	opacity: 0.18;
}

/* == Card title (layered above the watermark) == */
body.aibt-universal .universal-offer--quad-outline-ghost-cards h3.universal-offer__ghost-title,
body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghost-title {
	position: relative;
	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;
}

/* == Card description == */
body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghost-desc {
	position: relative;
	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;
}

/* == Price: pinned to the card's bottom edge via margin-top:auto. A short
   accent rule above ties it to the card's outline language. == */
body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghost-price {
	position: relative;
	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);
	font-variant-numeric: tabular-nums;
}

body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghost-price::before {
	content: "";
	display: block;
	width: 2rem;
	height: 2px;
	background: var(--accent);
	margin-bottom: var(--space-sm);
	opacity: 0.7;
}

/* == Responsive == */
/* 641-959: 2×2. */
@media (max-width: 959px) {
	body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghosts {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1rem !important;
	}
}

/* ≤640: single column; shrink the watermark so it does not dominate the wider
   single-column card. */
@media (max-width: 640px) {
	body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghosts {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghost-mark {
		font-size: clamp(4.5rem, 22vw, 7rem) !important;
	}
	body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__kicker {
		letter-spacing: var(--tracking-wide) !important;
	}
}

/* == Motion respect == */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghost,
	body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghost-mark {
		transition: none;
	}
	body.aibt-universal .universal-offer--quad-outline-ghost-cards .universal-offer__ghost:hover {
		transform: none;
	}
}