/**
 * Variant CSS: offer--trio-tall-spotlight-cards
 * Layer 2 — Path B universal offer variant (authored 2026-06-10, count-3 expansion).
 *
 * Concept: THREE tall service cards. Each card opens with a tinted "spotlight"
 * header band (accent-fade) carrying a zero-padded ordinal + the service title,
 * then a generous body holding the description and an optional price footer
 * pinned to the bottom edge. The tinted header divides title from copy and gives
 * each card stature.
 *
 * Differentiator vs sibling offer count-3 variants:
 *   - icon-cards-3col: icon chip + learn-more text-link, no tinted header band.
 *   - trio-accent-cards: only a top accent BORDER line (no filled header zone).
 *   - bundled-packages-3tier: pricing tiers with feature lists + per-card CTA.
 *   - case-studies-with-metrics / photo-service-cards: photo-led.
 *   THIS one: tinted header strip (ordinal + title) over a long body + price foot.
 *
 * Tokens: semantic only. Cards sit on --background-card so they lift on dark
 * themes; the header tint is --accent-fade (a light wash that tracks the accent,
 * NOT an always-dark surface) so polarity-aware --text-primary / --accent text
 * stays AA on every theme. Price font is capped + overflow-wrap:normal so a long
 * label like "wycena indywidualna" never breaks mid-word in a narrow card.
 */

/* == Section shell == */
body.aibt-universal .universal-offer--trio-tall-spotlight-cards {
	background: var(--background);
	color: var(--text-primary);
	padding-block: calc(clamp(var(--space-xl), 8vw, var(--space-3xl)) * var(--density, 1));
	border-bottom: 1px solid var(--divider-primary);
}

/* == Intro (centred; direct child of constrained section → margin-inline auto) == */
body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__intro {
	margin: 0 auto clamp(var(--space-lg), 5vw, var(--space-2xl)) auto;
}

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

body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__headline em {
	font-style: italic;
	color: var(--accent);
}

body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-md) !important;
	line-height: var(--leading-normal) !important;
	color: var(--text-secondary) !important;
	max-width: 52ch;
	margin: var(--space-md) auto 0 auto !important;
}

/* == Cards row == */
body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__cards {
	gap: clamp(var(--space-sm), 2.4vw, var(--space-lg)) !important;
	align-items: stretch !important;
}

/* Card: a tall framed surface. Column flex so header sits on top, body fills,
   price footer anchors the bottom. */
body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__card {
	display: flex !important;
	flex-direction: column;
	background: var(--background-card, var(--background)) !important;
	border: 1px solid var(--divider-primary);
	border-radius: var(--radius-lg, 0px);
	overflow: hidden;
	box-shadow: var(--decor-shadow, none);
	transition:
		border-color var(--duration-fast) var(--ease-default),
		box-shadow var(--duration-fast) var(--ease-default),
		transform var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__card:hover {
	border-color: var(--accent);
	box-shadow: var(--decor-shadow-elevated, var(--decor-shadow, none));
	transform: translateY(-4px);
}

body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__card:focus-within {
	border-color: var(--accent);
}

/* == Spotlight header: tinted band (accent-fade wash) holding ordinal + title.
   A 3px accent rule at its base separates it cleanly from the body. == */
body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__spotlight {
	background: var(--accent-fade);
	padding: clamp(var(--space-md), 2.6vw, var(--space-lg));
	border-bottom: 3px solid var(--accent);
}

body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__ordinal {
	font-family: var(--font-display) !important;
	font-size: var(--text-sm) !important;
	font-weight: 700 !important;
	letter-spacing: var(--tracking-wide) !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-xs) 0 !important;
}

body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__card-title {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: clamp(1.35rem, 2.1vw, 1.7rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* == Body: description + price footer == */
body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__body {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	padding: clamp(var(--space-md), 2.6vw, var(--space-lg));
	gap: var(--space-md);
}

body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__card-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
}

/* Price footer: pinned to the card's bottom edge via margin-top:auto so prices
   align across the row. Capped font + overflow-wrap:normal protect long labels
   ("wycena indywidualna") from breaking mid-word in a narrow card. */
body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__card-price {
	margin: auto 0 0 0 !important;
	padding-top: var(--space-md);
	border-top: 1px solid var(--divider-primary);
	font-family: var(--font-display) !important;
	font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--text-primary) !important;
	overflow-wrap: normal;
	word-break: keep-all;
}

/* == Responsive: stack to a single column (Columns block stacks at 781px) == */
@media (max-width: 781px) {
	body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__cards {
		flex-direction: column !important;
		gap: var(--space-md) !important;
	}
	body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__card {
		width: 100% !important;
	}
}

/* Cap uppercase tracking on small screens (wide tracking reads as gaps). */
@media (max-width: 640px) {
	body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__kicker {
		letter-spacing: var(--tracking-wide) !important;
	}
}

/* == Motion respect == */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__card {
		transition: none;
	}
	body.aibt-universal .universal-offer--trio-tall-spotlight-cards .universal-offer__card:hover {
		transform: none;
	}
}