/**
 * Variant CSS: pricing--featured-plus-trio
 * Layer 2 — Path B pricing role (brief-bound, Element Count 4, 2026-06-10).
 *
 * One featured tier + a supporting trio, dedicated to exactly four priced
 * services. The first tier (`--featured`, also DOM :first-child) is a bold,
 * accent-filled panel that spans the full content width and lays its name +
 * large price + tagline out horizontally, topped by a "recommended" flag. The
 * remaining three tiers (2-4) form a compact 3-up row beneath it: name, price,
 * one-line tagline. NO feature lists. Tablet keeps the featured full-width and
 * drops the trio to a 2-up then stack; mobile stacks everything. The featured
 * panel paints its own accent background and uses --on-accent for text so it
 * stays legible across all themes (KI-020 safe). Scoped to the variant class.
 */

body.aibt-universal .universal-pricing--featured-plus-trio {
	background: var(--background);
	color: var(--text-primary);
}

/* ── Intro ─────────────────────────────────────────────────────── */
body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__intro {
	margin-bottom: var(--space-6);
}

body.aibt-universal .universal-pricing--featured-plus-trio .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 0 var(--space-3) 0 !important;
}

body.aibt-universal .universal-pricing--featured-plus-trio h2.universal-pricing__headline,
body.aibt-universal .universal-pricing--featured-plus-trio .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--featured-plus-trio .universal-pricing__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: 1.6 !important;
	color: var(--text-secondary) !important;
	margin: var(--space-4) 0 0 0 !important;
	max-width: 56ch;
}

/* ── Layout: featured spans the full row, trio wraps to a 3-up below ─ */
body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tiers {
	/* !important: WP-core forces .wp-block-columns to nowrap at >=782px, which
	   collapsed the intended featured-full-width + trio-below into one cramped
	   row (squeezing the trio cards until long text prices broke mid-word). */
	flex-wrap: wrap !important;
	gap: var(--space-4);
	align-items: stretch;
}

/* Shared base for every tier card. */
body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier {
	position: relative;
	background: var(--background-alt);
	border: 1px solid var(--divider-primary);
	border-radius: var(--decor-radius);
	padding: var(--space-6) var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	transition: transform var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier:hover {
	transform: translateY(-3px);
	box-shadow: var(--decor-shadow-elevated, var(--decor-shadow));
}

body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* ── The featured panel (tier 1) — full width, accent-filled ───── */
body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier--featured {
	flex: 1 1 100%;
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent, #ffffff);
	padding: var(--space-7) var(--space-6);
	/* Lay name + price out side by side on wide screens. */
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"flag flag"
		"name price"
		"tagline price";
	column-gap: var(--space-6);
	row-gap: var(--space-2);
	align-items: baseline;
}

/* "Recommended" flag chip at the top of the featured panel. */
body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier-flag {
	grid-area: flag;
	justify-self: 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, #ffffff) !important;
	margin: 0 0 var(--space-2) 0 !important;
	padding: 0.35em 0.9em;
	border: 1px solid var(--on-accent, #ffffff);
	border-radius: var(--radius-pill);
	opacity: 0.92;
}

body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier--featured h3.universal-pricing__tier-name,
body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier--featured .universal-pricing__tier-name {
	grid-area: name;
	font-size: clamp(1.6rem, 3.2vw, 2.2rem) !important;
	color: var(--on-accent, #ffffff) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier--featured .universal-pricing__tier-price {
	grid-area: price;
	align-self: center;
	font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
	color: var(--on-accent, #ffffff) !important;
	margin: 0 !important;
	text-align: right;
	white-space: nowrap;
}

body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier--featured .universal-pricing__tier-price span {
	color: var(--on-accent, #ffffff);
	opacity: 0.85;
}

body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier--featured .universal-pricing__tier-tagline {
	grid-area: tagline;
	color: var(--on-accent, #ffffff) !important;
	opacity: 0.92;
	max-width: 48ch;
}

/* ── The supporting trio (tiers 2-4) — compact 3-up row ────────── */
body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier:not(.universal-pricing__tier--featured) {
	flex: 1 1 calc((100% - 2 * var(--space-4)) / 3);
	max-width: calc((100% - 2 * var(--space-4)) / 3);
}

body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier:not(.universal-pricing__tier--featured):hover {
	border-color: var(--accent);
}

body.aibt-universal .universal-pricing--featured-plus-trio h3.universal-pricing__tier-name,
body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier-name {
	font-family: var(--font-display) !important;
	font-size: var(--text-lg) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* Price for the compact trio. overflow-wrap:normal so a long text price
   ("wycena indywidualna") wraps at the space instead of breaking mid-word
   against the base.css overflow-wrap floor. */
body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier-price {
	font-family: var(--font-display) !important;
	font-size: clamp(1.5rem, 2.6vw, 1.9rem) !important;
	font-weight: 700 !important;
	line-height: 1.04 !important;
	letter-spacing: -0.02em !important;
	color: var(--accent) !important;
	margin: var(--space-1) 0 0 0 !important;
	font-variant-numeric: tabular-nums;
	overflow-wrap: normal;
}

body.aibt-universal .universal-pricing--featured-plus-trio .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--featured-plus-trio .universal-pricing__tier-tagline {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: 1.5 !important;
	color: var(--text-secondary) !important;
	margin: var(--space-1) 0 auto 0 !important;
}

/* ── Tablet: featured full-width; trio drops to 2-up then a lone card ─ */
@media (min-width: 641px) and (max-width: 959px) {
	body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier--featured {
		grid-template-columns: 1fr;
		grid-template-areas:
			"flag"
			"name"
			"price"
			"tagline";
		row-gap: var(--space-3);
	}
	body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier--featured .universal-pricing__tier-price {
		text-align: left;
	}
	body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier:not(.universal-pricing__tier--featured) {
		flex-basis: calc(50% - (var(--space-4) / 2));
		max-width: none;
	}
}

/* ── Mobile: stack everything ──────────────────────────────────── */
@media (max-width: 640px) {
	body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier--featured {
		grid-template-columns: 1fr;
		grid-template-areas:
			"flag"
			"name"
			"price"
			"tagline";
		row-gap: var(--space-3);
		padding: var(--space-6) var(--space-5);
	}
	body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier--featured .universal-pricing__tier-price {
		text-align: left;
	}
	body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier:not(.universal-pricing__tier--featured) {
		flex-basis: 100%;
		max-width: 100%;
	}
	/* A5: drop the wide tracking on the uppercase kicker at narrow widths. */
	body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__kicker {
		letter-spacing: 0 !important;
	}
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier {
		transition: none;
	}
	body.aibt-universal .universal-pricing--featured-plus-trio .universal-pricing__tier:hover {
		transform: none;
	}
}