/**
 * Variant CSS: offer--quad-price-forward-cards
 * Layer 2 — Path B universal offer variant (authored 2026-06-10).
 *
 * Concept: EXACTLY FOUR services as four cards where the PRICE is the dominant
 * visual — a large accent price number sits at the TOP of each card (over a tiny
 * "już od" eyebrow), with the service title + a one-line description beneath.
 * 4-up on desktop, 2×2 on tablet, single column on phone. The "price-forward"
 * layout for price-led offerings where the buyer compares amounts first.
 *
 * Differentiator vs sibling offer count-4 variants:
 *   - quad-card-grid: big ordinal in corner, price pinned to the BOTTOM.
 *   - featured-plus-trio: one service dominates the hierarchy.
 *   - four-compact-columns: bare columns, no price emphasis.
 *   - four-step-ribbon: numbered sequential process.
 *   THIS one: the price is the hero element at the top of every card.
 *
 * Tokens: semantic only (Layer 2 API). The big price uses --accent (designed to
 * clear AA on --background / --background-card), so it reads as the loud figure
 * without becoming a same-on-same invisibility (KI-020 avoided — title keeps
 * full --text-primary contrast).
 */

/* == Section shell == */
body.aibt-universal .universal-offer--quad-price-forward-cards {
	background: var(--background);
	color: var(--text-primary);
}

/* Intro: nested constrained group centres its own content; centred children
   keep horizontal auto margins (A8/A9). */
body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__intro {
	margin: 0 auto clamp(2.5rem, 6vh, 4rem) auto;
}

body.aibt-universal .universal-offer--quad-price-forward-cards .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 auto var(--space-md) auto !important;
}

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

body.aibt-universal .universal-offer--quad-price-forward-cards .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) auto 0 auto !important;
	max-width: 54ch;
}

/* == Price-forward grid: 4 across on desktop. == */
body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__pf {
	gap: clamp(1rem, 1.8vw, 1.5rem) !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Card: filled surface that lifts on dark themes; border + resting shadow carry
   elevation on light themes. A top accent rule signals the price-led identity.
   Vertical flex keeps equal heights across the row. */
body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__pf-card {
	display: flex !important;
	flex-direction: column;
	padding: clamp(1.5rem, 2.6vw, 2.25rem) !important;
	background: var(--background-card, var(--background)) !important;
	border: 1px solid var(--divider-primary);
	border-top: 3px solid var(--accent);
	border-radius: var(--decor-radius, 0px);
	box-shadow: var(--decor-shadow, none);
	position: relative;
	overflow: hidden;
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__pf-card:hover {
	box-shadow: var(--decor-shadow-elevated, none);
	transform: translateY(-4px);
}

body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__pf-card:focus-within {
	border-color: var(--accent);
	border-top-color: var(--accent);
}

/* == "już od" eyebrow above the price == */
body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__pf-from {
	font-family: var(--font-body) !important;
	font-size: var(--text-2xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-wide) !important;
	text-transform: uppercase !important;
	color: var(--text-muted, var(--text-secondary)) !important;
	margin: 0 0 var(--space-1, 4px) 0 !important;
}

/* == The hero price: oversized accent figure, tight tracking, the loudest
   element in the card. == */
body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__pf-price {
	font-family: var(--font-display) !important;
	font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: -0.03em !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-md) 0 !important;
	font-variant-numeric: tabular-nums;
}

/* Per-unit suffix ("/ mies.") rides smaller + muted beside the figure. */
body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__pf-per {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--text-secondary);
	white-space: nowrap;
}

/* == Title beneath the price == */
body.aibt-universal .universal-offer--quad-price-forward-cards h3.universal-offer__pf-title,
body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__pf-title {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: var(--text-lg) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-xs) 0 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	padding-top: var(--space-md);
	border-top: 1px solid var(--divider-primary);
}

/* == One-line-ish description == */
body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__pf-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;
}

/* == Responsive == */
/* 641-959: 2×2. */
@media (max-width: 959px) {
	body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__pf {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1rem !important;
	}
}

/* ≤640: single column. */
@media (max-width: 640px) {
	body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__pf {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__kicker {
		letter-spacing: var(--tracking-wide) !important;
	}
}

/* == Motion respect == */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__pf-card {
		transition: none;
	}
	body.aibt-universal .universal-offer--quad-price-forward-cards .universal-offer__pf-card:hover {
		transform: none;
	}
}