/**
 * Variant CSS: pricing--scalable-accent-price-chips
 * Layer 2 — Path B pricing role (brief-bound, Element Count 6 → renders as 5+).
 *
 * A longer price list: each row is one service — name + one-line tagline on the
 * left, and the PRICE on the right rendered as a bold, filled accent pill/chip.
 * The colored price chips are the signature: the price reads as a confident
 * brand-colored tag rather than plain text. Distinct from rate-sheet-leaders
 * (bare price at the end of a dotted leader) and from plain rate rows.
 *
 * Layout: six stacked wp:group rows (NO wp:columns). Each row is an internal
 * flex (body | chip) that collapses below 520px — the chip drops under the body,
 * left-aligned. Scalable: the loader trims to the brief's actual service count,
 * so the same row markup repeats N times (5+).
 *
 * Contrast (CRITICAL): the chip background is var(--accent); its text is
 * var(--on-accent,#fff) — NEVER --on-dark (white is invisible on light-accent
 * themes such as charcoal-mono-luxe / butter / peach). The chip bg is a SURFACE,
 * so coloring its text with --on-accent is correct, not a KI-020 bg-as-fg slip.
 */

body.aibt-universal .universal-pricing--scalable-accent-price-chips {
	background: var(--background);
	color: var(--text-primary);
}

/* ── Intro ─────────────────────────────────────────────────────── */
body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__intro {
	margin-bottom: var(--space-6);
}

/* A8/A9: centered intro children keep horizontal margins auto so the
   constrained-layout centering injected by WordPress is never overridden. */
body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-wide, 0.16em) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-3) 0 !important;
}

body.aibt-universal .universal-pricing--scalable-accent-price-chips h2.universal-pricing__headline,
body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
	max-width: 20ch;
}

body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: var(--text-secondary) !important;
	margin: var(--space-4) 0 0 0 !important;
	max-width: 54ch;
}

/* ── The stacked list of rows ──────────────────────────────────── */
body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__tiers {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Each row: body (left) | accent price chip (right), nowrap on desktop. */
body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__tier {
	display: flex !important;
	flex-direction: row;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	background: var(--background-alt);
	border: 1px solid var(--divider-primary);
	border-radius: var(--decor-radius);
	padding: var(--space-4) var(--space-5);
	transition: border-color var(--duration-fast) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard);
}

body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__tier:hover {
	border-color: var(--accent);
	background: var(--background);
}

/* Body takes the slack; min-width:0 lets long taglines wrap instead of
   forcing overflow against the nowrap chip. */
body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__tier-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

body.aibt-universal .universal-pricing--scalable-accent-price-chips h3.universal-pricing__tier-name,
body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__tier-name {
	font-family: var(--font-display) !important;
	font-size: var(--text-lg) !important;
	font-weight: 600 !important;
	line-height: var(--leading-snug, 1.2) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__tier-tagline {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-normal, 1.5) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
}

/* ── The signature: bold filled accent price chip ──────────────── */
/* Chip is its own surface (bg = accent). Text MUST be --on-accent so it stays
   legible on BOTH dark- and light-accent themes. Font capped + keep-all so a
   long price ("wycena indywidualna") never breaks mid-number. */
body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__tier-price {
	flex: none;
	align-self: center;
	display: inline-block;
	background: var(--accent);
	color: var(--on-accent, #fff) !important;
	font-family: var(--font-display) !important;
	font-size: clamp(1.05rem, 2.2vw, 1.45rem) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: var(--tracking-tight, -0.01em) !important;
	padding: var(--space-2) var(--space-4) !important;
	border-radius: var(--decor-radius);
	margin: 0 !important;
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: keep-all;
	font-variant-numeric: tabular-nums;
}

/* Optional unit suffix inside the chip (e.g. "/ mies."), if AI wraps it. */
body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__tier-price span {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--on-accent, #fff);
	opacity: 0.85;
}

body.aibt-universal .universal-pricing--scalable-accent-price-chips a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* ── Narrow rows: chip drops below the body, left-aligned ──────── */
@media (max-width: 520px) {
	body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__tier {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
	}
	body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__tier-price {
		align-self: flex-start;
		white-space: normal; /* allow a very long text price to wrap on tiny screens */
	}
	/* A5: drop the wide tracking on the uppercase kicker at narrow widths. */
	body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__kicker {
		letter-spacing: 0 !important;
	}
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-pricing--scalable-accent-price-chips .universal-pricing__tier {
		transition: none;
	}
}