/**
 * Variant CSS: pricing--duo-stepped-ladder
 * Layer 2 — Path B pricing role (brief-bound, Element Count 2, 2026-06-10).
 *
 * Exactly two priced tiers shown as an ASCENDING LADDER / STAIRCASE: the second
 * (higher) tier is visibly stepped UP relative to the first via a desktop-only
 * raise (translateY), with a short connecting "riser" drawn between the two
 * cards so the upgrade path reads as a single staircase rather than two loose
 * panels. Tier 2 is the recommended one — slightly larger, accent border, an
 * accent-tinted price, and a decorative "Polecany" badge.
 *
 * Theme-safe colour choice: the featured card stays a LIGHT bordered panel
 * (background var(--background-alt), text var(--text-primary)). Accent is used
 * only on the border, the badge fill and the price — so nothing depends on
 * --on-dark and the card is legible on every theme, including light-accent ones
 * (charcoal-mono-luxe / butter / peach). The badge text is var(--on-accent)
 * because the badge fill IS var(--accent).
 *
 * The tier container is a wp:group with a 2-col grid layout; CSS pins it to an
 * explicit 2-column grid so the duo is deterministic. The step-up transform is
 * applied at desktop ONLY — at <=640px both cards stack flat (no transform),
 * full width, no horizontal overflow.
 */

body.aibt-universal .universal-pricing--duo-stepped-ladder {
	background: var(--background);
	color: var(--text-primary);
}

/* ── Intro ─────────────────────────────────────────────────────── */
body.aibt-universal .universal-pricing--duo-stepped-ladder .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 not overridden. */
body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 auto var(--space-3) auto !important;
}

body.aibt-universal .universal-pricing--duo-stepped-ladder h2.universal-pricing__headline,
body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 auto !important;
	max-width: 22ch;
}

body.aibt-universal .universal-pricing--duo-stepped-ladder .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) auto 0 auto !important;
	max-width: 54ch;
}

/* ── The duo grid ──────────────────────────────────────────────── */
body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tiers {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-5);
	/* Align to the bottom so the raised featured card steps UP from a shared
	   baseline rather than both cards centering on each other. */
	align-items: end;
	position: relative;
}

/* ── Shared card chrome ────────────────────────────────────────── */
body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier {
	position: relative;
	background: var(--background-alt);
	border: 1px solid var(--divider-primary);
	border-radius: var(--decor-radius);
	box-shadow: var(--decor-shadow-soft, var(--decor-shadow));
	padding: var(--space-6) var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	transition: transform var(--duration-fast, 180ms) var(--ease-standard, ease),
		border-color var(--duration-fast, 180ms) var(--ease-standard, ease),
		box-shadow var(--duration-fast, 180ms) var(--ease-standard, ease);
}

body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier-name {
	font-family: var(--font-display) !important;
	font-size: var(--text-xl) !important;
	font-weight: 600 !important;
	line-height: var(--leading-tight, 1.2) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}
body.aibt-universal .universal-pricing--duo-stepped-ladder h3.universal-pricing__tier-name {
	color: var(--text-primary) !important;
}

/* Price — the hero of each card. Font capped + keep-all so a long text price
   ("wycena indywidualna") wraps at the space rather than breaking mid-word
   against the base.css overflow-wrap floor; no 375px overflow. */
body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier-price {
	font-family: var(--font-display) !important;
	font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important;
	font-weight: 700 !important;
	line-height: 1.04 !important;
	letter-spacing: var(--tracking-tight, -0.02em) !important;
	color: var(--text-primary) !important;
	margin: var(--space-2) 0 0 0 !important;
	font-variant-numeric: tabular-nums;
	overflow-wrap: normal;
	word-break: keep-all;
}

body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier-price span {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--text-muted);
}

body.aibt-universal .universal-pricing--duo-stepped-ladder .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: var(--space-1) 0 0 0 !important;
}

/* ── Featured (tier 2) — accent emphasis, light card (theme-safe) ── */
body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier--featured {
	border-color: var(--accent);
	/* Double-ring so the accent border reads even when --accent is pale. */
	box-shadow: 0 0 0 1px var(--accent), var(--decor-shadow-elevated, var(--decor-shadow));
}

/* Price carries the accent on the featured card. */
body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier--featured .universal-pricing__tier-price {
	color: var(--accent) !important;
}

/* Decorative "Polecany" badge — fill is var(--accent), so text MUST be
   var(--on-accent) (never --on-dark) to stay legible on light-accent themes. */
body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier-badge {
	align-self: flex-start;
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--on-accent, #fff) !important;
	background: var(--accent);
	border-radius: 999px;
	padding: var(--space-1) var(--space-3);
	margin: 0 0 var(--space-2) 0 !important;
}

/* ── Desktop: the staircase — raise the featured card + draw the riser ── */
@media (min-width: 641px) {
	/* Step UP: featured card lifts a full step above tier 1's baseline. */
	body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier--featured {
		transform: translateY(calc(-1 * var(--space-7)));
	}

	/* Connecting riser: a short vertical accent stroke bridging the gap between
	   the lower card's top edge and the raised card, reading as the step's
	   vertical face. Sits in the grid gutter, centered, behind the cards. */
	body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tiers::before {
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: var(--space-4);
		width: var(--space-1);
		height: var(--space-8);
		background: var(--accent);
		border-radius: 999px;
		opacity: 0.55;
		z-index: 0;
	}

	/* Keep cards above the riser. */
	body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier {
		z-index: 1;
	}

	/* Featured reads a touch larger to reinforce "one step up". */
	body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier--featured {
		padding: var(--space-7) var(--space-6);
	}
}

/* ── Hover: subtle lift layered on top of any step transform ───────── */
body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier--base:hover {
	transform: translateY(-3px);
	border-color: var(--accent);
	box-shadow: var(--decor-shadow-elevated, var(--decor-shadow));
}
@media (min-width: 641px) {
	/* Featured already raised by --space-7 — nudge a little further on hover. */
	body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier--featured:hover {
		transform: translateY(calc(-1 * var(--space-7) - 3px));
		box-shadow: 0 0 0 1px var(--accent), var(--decor-shadow-elevated, var(--decor-shadow));
	}
}

/* Keyboard focus affordance on any interactive descendant. */
body.aibt-universal .universal-pricing--duo-stepped-ladder a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* ── Tablet: keep the duo but tighten padding a touch ──────────── */
@media (min-width: 641px) and (max-width: 959px) {
	body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier {
		padding: var(--space-5) var(--space-4);
	}
	body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier--featured {
		padding: var(--space-6) var(--space-5);
	}
}

/* ── Mobile: stack flat — NO step transform, full width, no overflow ── */
@media (max-width: 640px) {
	body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tiers {
		grid-template-columns: 1fr;
		align-items: stretch;
	}
	/* Cancel the raise — both cards sit flat and full width when stacked. */
	body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier--featured {
		transform: none;
	}
	/* A5: drop the wide tracking on the uppercase kicker at narrow widths. */
	body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__kicker {
		letter-spacing: 0 !important;
	}
}

/* Respect reduced-motion — keep the static step, drop the animation only. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier {
		transition: none;
	}
	body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier--base:hover {
		transform: none;
	}
	body.aibt-universal .universal-pricing--duo-stepped-ladder .universal-pricing__tier--featured:hover {
		transform: translateY(calc(-1 * var(--space-7)));
	}
}