/**
 * Variant CSS: comparison--slider-toggle-static
 * Layer 2 — Path B comparison role (2026-06-06).
 *
 * A purely static "Tania opcja ↔ Premium" slider metaphor. The header shows the
 * two scale ends; each tradeoff band has its own rail (.universal-comparison__track)
 * with a decorative thumb frozen at a per-row position driven by the inline
 * --at CSS variable, plus low/high endpoint captions. No JS, no interactivity —
 * the thumb is role="img" + aria-label. Distinct from the table / cards / matrix
 * variants: this is a tradeoff spectrum, not a grid. On mobile the rails stay
 * horizontal and simply shrink (no overflow).
 *
 * All selectors scoped to .universal-comparison--slider-toggle-static — no leak.
 */

body.aibt-universal .universal-comparison--slider-toggle-static {
	background: var(--background);
	color: var(--text-primary);
	text-align: center;
	/* House section rhythm — generous vertical breathing room (was missing). */
	padding-block: calc(clamp(3rem, 7vw, 5rem) * var(--density, 1));
}

body.aibt-universal .universal-comparison.universal-comparison--slider-toggle-static .has-text-align-center {
	margin-inline: auto !important;
}

/* ── Intro ─────────────────────────────────────────────────────── */
body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__intro {
	margin-bottom: var(--space-7, 48px);
}

body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.16em) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 auto var(--space-3, 12px) auto !important;
}

body.aibt-universal .universal-comparison--slider-toggle-static h2.universal-comparison__headline,
body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 auto !important;
	max-width: 20ch;
}

body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
}

body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__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, 16px) auto 0 auto !important;
	max-width: 54ch;
}

/* ── Scale wrapper ─────────────────────────────────────────────── */
body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__scale {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--space-6, 32px) var(--space-6, 32px) var(--space-5, 24px);
	border: 1px solid var(--divider-primary);
	border-radius: var(--decor-radius);
	background: var(--background);
}

/* Endpoint header (Tania opcja / Premium). */
body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__ends {
	margin-bottom: var(--space-5, 24px) !important;
	padding-bottom: var(--space-4, 16px);
	border-bottom: 1px solid var(--divider-primary);
}

body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__end {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 700 !important;
	letter-spacing: var(--tracking-wider, 0.08em) !important;
	text-transform: uppercase !important;
	margin: 0 !important;
}

body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__end--low {
	color: var(--text-muted) !important;
}

body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__end--high {
	color: var(--accent) !important;
}

/* ── Tradeoff band ─────────────────────────────────────────────── */
body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__band {
	padding: var(--space-4, 16px) 0;
}

body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__band + .universal-comparison__band {
	border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__band-label {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	font-weight: 600 !important;
	color: var(--text-primary) !important;
	text-align: left;
	margin: 0 0 var(--space-3, 12px) 0 !important;
}

/* ── The static rail ───────────────────────────────────────────── */
body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__track {
	position: relative;
	width: 100%;
	height: 8px;
	border-radius: var(--decor-radius-pill, 999px);
	/* Neutral rail; the fill below tints the travelled portion with accent. */
	background: color-mix(in srgb, var(--ink) 12%, transparent);
	margin: 0 0 var(--space-3, 12px) 0;
}

/* Travelled (low → thumb) portion, tinted with accent. */
body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__track-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--at, 50%);
	border-radius: inherit;
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--accent) 45%, transparent),
		var(--accent)
	);
}

/* Decorative thumb frozen at --at. translateX keeps it inside the rail at both ends. */
body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__thumb {
	position: absolute;
	top: 50%;
	left: var(--at, 50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--background);
	border: 3px solid var(--accent);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 22%, transparent);
	transform: translate(-50%, -50%);
}

/* Endpoint captions under each rail. */
body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__band-ends {
	gap: var(--space-3, 12px) !important;
}

body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__band-end {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	color: var(--text-muted) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__band-end--strong {
	color: var(--text-primary) !important;
	font-weight: 600 !important;
	text-align: right;
}

/* ── Verdict + CTA ─────────────────────────────────────────────── */
body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__verdict {
	margin-top: var(--space-6, 32px);
}

body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__verdict-text {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: var(--text-secondary) !important;
	margin: 0 auto var(--space-5, 24px) auto !important;
	max-width: 52ch;
}

body.aibt-universal .universal-comparison--slider-toggle-static .wp-block-button.universal-comparison__cta .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.98rem;
	letter-spacing: var(--tracking-wide, 0.02em);
	padding: 0.9rem 2.2rem;
	color: var(--cta-text-primary);
	background: var(--cta-bg-primary);
	border: 1px solid var(--cta-border-primary, var(--cta-bg-primary));
	border-radius: var(--decor-radius);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	transition: background var(--duration-fast) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-comparison--slider-toggle-static .wp-block-button.universal-comparison__cta .wp-block-button__link:hover,
body.aibt-universal .universal-comparison--slider-toggle-static .wp-block-button.universal-comparison__cta .wp-block-button__link:focus-visible {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--cta-text-primary);
}

/* Keyboard focus ring distinct from the hover bg-swap (a11y). */
body.aibt-universal .universal-comparison--slider-toggle-static .wp-block-button.universal-comparison__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ── Mobile: tighten the rail box, keep rails horizontal ───────── */
@media (max-width: 781px) {
	body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__scale {
		padding: var(--space-5, 24px) var(--space-4, 16px) var(--space-4, 16px);
	}
	/* Endpoint captions can wrap to two lines on narrow widths. */
	body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__band-end {
		font-size: var(--text-xs) !important;
		max-width: 48%;
	}
}

/* A5 — cap letter-spacing on uppercase labels at small widths. */
@media (max-width: 640px) {
	body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__kicker,
	body.aibt-universal .universal-comparison--slider-toggle-static .universal-comparison__end {
		letter-spacing: 0 !important;
	}
}

/* Respect reduced-motion: drop the CTA transition. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-comparison--slider-toggle-static .wp-block-button.universal-comparison__cta .wp-block-button__link {
		transition: none;
	}
}