/**
 * Variant CSS: offer--quad-ledger-rows
 * Layer 2 — Path B universal offer variant (authored 2026-06-10).
 *
 * Concept: EXACTLY FOUR services as four full-width horizontal rows stacked top
 * to bottom. Each row = ordinal (left) + title/desc stack (center, flex-grow) +
 * price pinned to the right edge. Hairline --divider-primary rules separate the
 * rows; a top + bottom rule frame the ledger. The itemized "service ledger /
 * menu" rhythm — the eye runs the list and pairs each name with its price.
 *
 * Differentiator vs sibling offer count-4 variants:
 *   - quad-card-grid: balanced 2×2 card matrix.
 *   - featured-plus-trio: asymmetric 1 large + 3 small.
 *   - four-compact-columns: single horizontal strip of 4 columns.
 *   - four-step-ribbon: sequential numbered process ribbon.
 *   THIS one: vertical itemized rows, price flush-right, hairline-ruled.
 *
 * Tokens: semantic only (Layer 2 API). No card fill — the rhythm comes from the
 * dividers + ordinals, so it stays editorial on every theme (light + dark).
 */

/* == Section shell == */
body.aibt-universal .universal-offer--quad-ledger-rows {
	background: var(--background);
	color: var(--text-primary);
	border-block: 1px solid var(--divider-primary);
}

/* Intro: constrained-layout direct children inherit `margin-inline:auto`. Pin
   flush-left and cap width so the kicker + headline share the ledger's left
   edge (resetting the inherited centring margin in the process). */
body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__intro {
	margin-block: 0 clamp(2.25rem, 5vh, 3.75rem);
	margin-inline: 0 auto !important;
	max-width: 48ch;
}

body.aibt-universal .universal-offer--quad-ledger-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 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-offer--quad-ledger-rows .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) 0 0 0 !important;
	max-width: 56ch;
}

/* == Ledger: a top hairline frames the first row; each row carries its own
   bottom hairline so the four rows read as ruled entries. == */
body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__ledger {
	border-top: 1px solid var(--divider-primary);
}

/* Row: ordinal | body (grows) | price (pushed right). flex-wrap so on narrow
   widths the price drops below the body instead of crushing it. */
body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row {
	gap: clamp(1rem, 3vw, 2.25rem) !important;
	align-items: baseline !important;
	padding-block: calc(clamp(1.25rem, 3vh, 2rem) * var(--density, 1)) !important;
	border-bottom: 1px solid var(--divider-primary);
	position: relative;
	transition: background-color var(--duration-fast) var(--ease-standard);
}

/* Accent left rail: a thin bar that scales in on hover so the active row reads
   as a deliberate, interactive entry without a heavy card chrome. */
body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 calc(-1 * clamp(0.5rem, 1.5vw, 1rem));
	width: 2px;
	background: var(--accent);
	transform: scaleY(0);
	transform-origin: center top;
	transition: transform var(--duration-fast) var(--ease-standard);
}

body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row:hover {
	background-color: var(--accent-fade, transparent);
}

body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row:hover::before,
body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row:focus-within::before {
	transform: scaleY(1);
}

/* == Ordinal: fixed-width accent marker, tabular feel via the display font. == */
body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row-num {
	flex: 0 0 auto !important;
	width: 2.75ch;
	font-family: var(--font-display) !important;
	font-size: var(--text-lg) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: 0.01em !important;
	color: var(--accent) !important;
	margin: 0 !important;
	font-variant-numeric: tabular-nums;
}

/* == Body: the title + desc stack; grows to fill the middle. min-width:0 lets
   long Polish words wrap inside the flex item instead of forcing overflow. == */
body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row-body {
	flex: 1 1 22rem !important;
	min-width: 0;
}

body.aibt-universal .universal-offer--quad-ledger-rows h3.universal-offer__row-title,
body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row-title {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: var(--text-xl) !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--quad-ledger-rows .universal-offer__row-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;
	max-width: 52ch;
}

/* == Price: pushed flush-right via margin-left:auto, top-aligned to the title.
   Mono-ish tabular figures so prices read as a tidy column down the ledger. == */
body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row-price {
	flex: 0 0 auto !important;
	margin: 0 0 0 auto !important;
	align-self: baseline;
	font-family: var(--font-mono, var(--font-body)) !important;
	font-size: var(--text-md) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	color: var(--text-primary) !important;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* == Responsive == */
/* 641-959: tighten the ordinal column + gutters. */
@media (max-width: 959px) {
	body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row {
		gap: 1rem !important;
	}
}

/* ≤640: the row wraps — price drops to a new line under the body. Let it span
   the full width and sit left under the title (no longer flush-right), and let
   the price wrap rather than overflow if the label is long ("wycena ..."). */
@media (max-width: 640px) {
	body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row {
		gap: 0.5rem 1rem !important;
		align-items: flex-start !important;
	}
	body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row-price {
		flex: 1 1 100% !important;
		margin: var(--space-xs) 0 0 0 !important;
		text-align: left;
		white-space: normal;
		overflow-wrap: anywhere;
	}
	body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__kicker {
		letter-spacing: var(--tracking-wide) !important;
	}
}

/* == Motion respect == */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row,
	body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row::before {
		transition: none;
	}
	body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row:hover::before,
	body.aibt-universal .universal-offer--quad-ledger-rows .universal-offer__row:focus-within::before {
		transform: scaleY(1);
	}
}

/* == Editor wrapper: hover-only accent rail must render at rest, not stuck. == */
.editor-styles-wrapper .universal-offer--quad-ledger-rows .universal-offer__row::before {
	transform: scaleY(0);
}