/**
 * Variant CSS: offer--duo-wide-banner-rows
 * Layer 2 — Path B universal offer variant (authored 2026-06-10).
 *
 * Concept: EXACTLY two services as two FULL-WIDTH horizontal BANNER rows STACKED
 * vertically (not side by side). Each banner spans the content width: an oversized
 * decorative ordinal ("01"/"02") on the left, then title + meta chip + description
 * filling the middle, and the price anchored to the right edge. The second banner
 * carries a subtle accent tint (~6%) to differentiate; a hairline separates the rows.
 * Reads like two premium "feature strips" — a STACKED-ROWS silhouette.
 *
 * Differentiator vs sibling EC=2 offer variants:
 *   - duo-rows: compact list-style rows, no oversized ordinal, no right-pinned price.
 *   - duo-numbered-panels: two panels SIDE BY SIDE with numerals + a centre rule.
 *   - duo-equal-cards / duo-split-diptych / duo-zigzag-media: card/diptych silhouettes.
 *   THIS one: two full-width stacked banners, big ordinal left, price pinned right.
 *
 * Colour intent: text stays --text-primary/--text-secondary (KI-020 — never a bg
 * token as foreground); ordinal + chip + price label take --accent. The --alt row
 * uses a light accent tint (~6%) so text remains --text-primary (no --on-accent flip).
 * Tokens: area-1-* / area-2-* (title, desc, price) + area-N-meta-1 (chip).
 */

/* == Section shell == */
body.aibt-universal .universal-offer--duo-wide-banner-rows {
	padding-block: calc(clamp(var(--space-xl), 8vw, var(--space-3xl)) * var(--density, 1));
	background: var(--background);
	color: var(--text-primary);
}

/* == Intro (centred — A8/A9: keep horizontal margins auto) == */
body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__intro {
	margin: 0 auto clamp(var(--space-lg), 4vw, var(--space-2xl)) auto;
}

body.aibt-universal .universal-offer--duo-wide-banner-rows .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-sm) auto !important;
}

body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__headline {
	font-family: var(--font-display) !important;
	font-size: clamp(2rem, 4.5vw, 3.6rem) !important;
	color: var(--text-primary) !important;
	margin: 0 auto var(--space-sm) auto !important;
	max-width: 18ch;
}

body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__headline em {
	color: var(--italic-color, var(--accent));
	font-style: italic;
	font-weight: var(--italic-weight, inherit);
}

body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__deck {
	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 auto !important;
	max-width: 52ch;
}

/* == Rows: stacked banners. A hairline divider sits BETWEEN the two rows so they
   read as one continuous strip module; the gap is carried by row padding. == */
body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__row {
	background: var(--background);
	border-radius: var(--decor-radius, 0px);
	transition:
		background-color var(--duration-fast, 180ms) var(--ease-snappy, ease),
		box-shadow var(--duration-fast, 180ms) var(--ease-snappy, ease);
}

/* Hairline between the two stacked rows (only above the second row). */
body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__row + .universal-offer__row {
	border-top: 1px solid var(--divider-primary);
}

/* Second banner — subtle accent tint (~6%) to differentiate; text stays primary. */
body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__row--alt {
	background: color-mix(in srgb, var(--accent) 6%, var(--background));
}

/* Hover lift — gentle elevation, no colour flip (text contrast preserved). */
body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__row:hover {
	box-shadow: var(--decor-shadow-soft, none);
}

/* == Row internals: index | body | price on one line (desktop). minmax/min-width
   keep the flexible body from blowing out with long words. == */
body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__row-inner {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: clamp(var(--space-md), 3vw, var(--space-xl)) !important;
	padding-block: calc(clamp(var(--space-lg), 4vw, var(--space-2xl)) * var(--density, 1));
	padding-inline: clamp(var(--space-sm), 3vw, var(--space-xl));
}

/* Oversized decorative ordinal (non-bound). Fixed-ish lane so both rows align. */
body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__ordinal {
	flex: 0 0 auto;
	font-family: var(--font-display) !important;
	font-size: clamp(3rem, 7vw, 5.5rem) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: var(--tracking-tight, -0.02em) !important;
	color: color-mix(in srgb, var(--accent) 60%, transparent);
	margin: 0 !important;
	min-width: 2.4ch;
	text-align: center;
}

/* Body — the flexible middle. min-width:0 lets it shrink so the price stays in. */
body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__row-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

/* Title. */
body.aibt-universal .universal-offer--duo-wide-banner-rows h3.universal-offer__card-title,
body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__card-title {
	font-family: var(--font-display) !important;
	font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.02em !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
	overflow-wrap: break-word;
}

/* Meta chip — small pill carrying area-N-meta-1 (duration / format / scope). */
body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__chip {
	display: inline-block;
	width: fit-content;
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-wide) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
	border-radius: var(--decor-radius-pill, 999px);
	padding: 0.3rem 0.85rem !important;
	margin: var(--space-3xs, 0.25rem) 0 0 0 !important;
}

/* Description. */
body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__card-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: var(--space-2xs, 0.5rem) 0 0 0 !important;
	max-width: 62ch;
	overflow-wrap: break-word;
}

/* Price — anchored to the right edge of the banner. Never wraps mid-token. */
body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__card-price {
	flex: 0 0 auto;
	align-self: center;
	text-align: right;
	font-family: var(--font-mono, var(--font-body)) !important;
	font-size: clamp(var(--text-base), 2vw, var(--text-lg)) !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
	color: var(--accent) !important;
	margin: 0 !important;
	overflow-wrap: normal;
	word-break: keep-all;
	white-space: nowrap;
}

/* == Responsive == */
/* Tablet (641-959): keep the single-line banner, tighten gaps + ordinal size. */
@media (min-width: 641px) and (max-width: 959px) {
	body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__row-inner {
		gap: var(--space-md) !important;
	}
	body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__ordinal {
		font-size: clamp(2.6rem, 6vw, 4rem) !important;
	}
}

/* Mobile (≤640): collapse the banner to a vertical stack — ordinal on top, body,
   then the price drops below and left-aligns. No horizontal overflow at 375px. */
@media (max-width: 640px) {
	body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__row-inner {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: var(--space-sm) !important;
	}
	body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__row-body {
		width: 100%;
	}
	body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__ordinal {
		font-size: clamp(2.8rem, 14vw, 3.6rem) !important;
		min-width: 0;
		text-align: left;
	}
	body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__card-price {
		align-self: flex-start;
		text-align: left;
		white-space: normal;
		overflow-wrap: normal;
		word-break: keep-all;
	}
	/* Cap uppercase tracking at narrow widths (reads as gaps — A5). */
	body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__kicker {
		letter-spacing: var(--tracking-wider) !important;
	}
}

/* == Focus + motion respect == */
body.aibt-universal .universal-offer--duo-wide-banner-rows a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-offer--duo-wide-banner-rows .universal-offer__row {
		transition: none;
	}
}