/**
 * Variant CSS: offer--quad-alt-accent-bands
 * Layer 2 — Path B universal offer variant (authored 2026-06-10).
 *
 * Concept: EXACTLY FOUR services as four wide, softly-tinted bands stacked top
 * to bottom. The accent EDGE alternates side band-to-band (ABAB): odd bands take
 * an accent rail on the LEFT with the ordinal on the left; even bands flip the
 * rail to the RIGHT with the ordinal on the right. Inside each band the title +
 * description sit inline (side by side), with an optional price. An editorial,
 * rhythmic "alternating breath" — more dynamic than a plain list.
 *
 * Differentiator vs sibling offer count-4 variants:
 *   - quad-ledger-rows: uniform hairline rows, left ordinal, price flush-right.
 *   - quad-card-grid: balanced 2×2 card matrix.
 *   - featured-plus-trio: one service dominates.
 *   - four-step-ribbon: sequential numbered ribbon.
 *   THIS one: filled tinted bands with a migrating left/right accent edge.
 *
 * Tokens: semantic only (Layer 2 API). Bands use --background-alt (the section
 * alternation tint) so they read as filled blocks on every theme; the accent
 * rail + ordinal carry the alternating rhythm.
 */

/* == Section shell == */
body.aibt-universal .universal-offer--quad-alt-accent-bands {
	background: var(--background);
	color: var(--text-primary);
}

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

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

body.aibt-universal .universal-offer--quad-alt-accent-bands .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;
}

/* == Bands stack == */
body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__bands {
	display: flex !important;
	flex-direction: column;
	gap: clamp(0.85rem, 1.6vw, 1.25rem) !important;
}

/* Band: filled tinted block. [num | body] flex row; the accent rail lives in
   ::before, default LEFT. overflow:hidden clips the rail to the rounded band. */
body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band {
	gap: clamp(1rem, 2.5vw, 2rem) !important;
	align-items: center !important;
	/* Keep [num | body] on ONE flex line — the body shrinks via min-width:0 and
	   wraps its own title/desc/price internally. Without this, WP's flexWrap:wrap
	   lets a long body (e.g. 2-line title + wide price) drop below the ordinal,
	   detaching the number from its band (band-4 misalignment, fixed 2026-06-10). */
	flex-wrap: nowrap !important;
	padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1.6rem, 3vw, 2.5rem) !important;
	background: var(--background-alt, var(--background-card, var(--background))) !important;
	border: 1px solid var(--divider-primary);
	border-radius: var(--decor-radius, 0px);
	position: relative;
	overflow: hidden;
	transition: transform var(--duration-fast) var(--ease-standard);
}

/* Accent rail — default LEFT edge. */
body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--accent);
}

/* EVEN bands: flip the order so the ordinal sits on the RIGHT, and move the
   accent rail to the RIGHT edge — the ABAB alternation. */
body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band:nth-child(even) {
	flex-direction: row-reverse !important;
}

body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band:nth-child(even)::before {
	inset: 0 0 0 auto;
}

body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band:hover {
	transform: translateX(2px);
}

body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band:nth-child(even):hover {
	transform: translateX(-2px);
}

/* == Ordinal: large accent marker, fixed width, opposite side each band. == */
body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band-num {
	flex: 0 0 auto !important;
	width: 2.4ch;
	font-family: var(--font-display) !important;
	font-size: clamp(2rem, 3.4vw, 2.75rem) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: -0.02em !important;
	color: var(--accent) !important;
	opacity: 0.7;
	margin: 0 !important;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* == Band body: title + desc inline (+ price). Grows to fill; min-width:0 keeps
   long Polish words wrapping inside the flex item. On even bands the body text
   stays left-aligned for readability even though the band order is reversed. == */
body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band-body {
	flex: 1 1 auto !important;
	min-width: 0;
	gap: clamp(0.4rem, 1.5vw, 1.75rem) !important;
	/* center (not baseline): when the title wraps to 2 lines the desc + price stay
	   vertically centred against it instead of pinning to the first baseline. */
	align-items: center !important;
}

body.aibt-universal .universal-offer--quad-alt-accent-bands h3.universal-offer__band-title,
body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band-title {
	flex: 0 1 16rem;
	min-width: 0;
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: var(--text-xl) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
}

body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band-desc {
	flex: 1 1 18rem;
	min-width: 0;
	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: small inline meta pushed to the end of the body row. == */
body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band-price {
	flex: 0 0 auto !important;
	margin: 0 0 0 auto !important;
	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;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* == Responsive == */
/* 641-959: keep bands, let title + desc wrap within the body as needed. */
@media (max-width: 959px) {
	body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band-title {
		flex-basis: 13rem;
	}
}

/* ≤640: stack everything left. All bands read top-to-bottom identically; the
   accent rail stays on the left for every band so the phone layout is calm, and
   the ordinal + body stack vertically. Price drops below and aligns left. */
@media (max-width: 640px) {
	body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band,
	body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band:nth-child(even) {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.4rem !important;
	}
	body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band:nth-child(even)::before {
		inset: 0 auto 0 0;
	}
	body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band-num {
		text-align: left;
		width: auto;
	}
	body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band-body {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.35rem !important;
		width: 100%;
	}
	body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band-title,
	body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band-desc {
		flex: 1 1 100%;
	}
	body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band-price {
		margin: var(--space-1, 4px) 0 0 0 !important;
		white-space: normal;
		overflow-wrap: anywhere;
	}
	body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__kicker {
		letter-spacing: var(--tracking-wide) !important;
	}
}

/* == Motion respect == */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band {
		transition: none;
	}
	body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band:hover,
	body.aibt-universal .universal-offer--quad-alt-accent-bands .universal-offer__band:nth-child(even):hover {
		transform: none;
	}
}