/**
 * Variant CSS: conversion--value-stack-panel
 * Layer 2 - two-column conversion. LEFT value stack (label + value rows with
 * checkmarks) builds the case; RIGHT tinted dark CTA card closes it.
 * Every selector is scoped to body.aibt-universal .universal-conversion--value-stack-panel.
 * Semantic tokens only; hex appears solely as var() fallback.
 */

/* ---- Section shell --------------------------------------------------------- */
body.aibt-universal .universal-conversion--value-stack-panel {
	background: var(--background-alt);
	color: var(--text-primary);
	border-top: 1px solid var(--divider-primary);
	border-bottom: 1px solid var(--divider-primary);
	padding-block: calc(clamp(var(--space-2xl), 8vw, var(--space-4xl)) * var(--density, 1));
}

/* Two-column grid. Generous gutter so the stack and the card read as two
   distinct zones rather than one crowded block. */
body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__grid {
	gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
	align-items: stretch;
}

/* WP gives each column flex:1; let the explicit flex-basis widths win on desktop. */
body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__grid > .wp-block-column {
	flex-grow: 0;
}

/* ---- LEFT: value stack ----------------------------------------------------- */
body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__kicker {
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 var(--space-sm) 0;
}

body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__stack-title {
	font-family: var(--font-display);
	color: var(--text-primary);
	margin: 0 0 var(--space-xl) 0;
	text-wrap: balance;
}

/* Each value row: checkmark in a fixed gutter, text block to its right.
   A hairline divider between rows gives the stack a ledger-like rhythm. */
body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__row {
	gap: var(--space-md);
	align-items: flex-start;
	padding-block: var(--space-md);
	border-top: 1px solid var(--divider-primary);
}

body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__row:first-of-type {
	border-top: 0;
	padding-top: 0;
}

body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__row:last-of-type {
	padding-bottom: 0;
}

/* Checkmark badge - accent disc, fixed size so all rows align. */
body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__check {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	color: var(--cta-text-primary, #ffffff);
	background: var(--accent);
	border-radius: 999px;
	margin-top: 0.15rem;
}

body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__rowtext {
	gap: 0;
}

body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__rowlabel {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin: 0 0 0.25rem 0;
}

body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__rowvalue {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	color: var(--text-primary);
	margin: 0;
	max-width: 42ch;
}

/* ---- RIGHT: dominant CTA card --------------------------------------------- */
/* Tinted dark surface gives the card visual weight against the alt section bg.
   Text on this surface uses --text-on-dark (never --bg-main as foreground).
   On light themes the dark fill + elevated shadow make the card pop. On dark
   themes --background-dark sits slightly below the lifted section tone, so the
   accent top-rule (::before) + the stronger --divider-accent edge define the
   card as a deliberate panel rather than a recession. */
body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__card {
	position: relative;
	background: var(--background-dark);
	color: var(--text-on-dark, #ffffff);
	padding: clamp(var(--space-xl), 4vw, var(--space-2xl));
	border-radius: var(--decor-radius);
	border: 1px solid var(--divider-accent);
	box-shadow: var(--decor-shadow-elevated, 0 18px 48px -24px rgba(0, 0, 0, 0.5));
}

/* Accent top-rule: a thin brand bar that reads in every theme and signals the
   card as the primary action zone (the "close" of the value stack). */
body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--accent);
	border-start-start-radius: var(--decor-radius);
	border-start-end-radius: var(--decor-radius);
}

body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__card-headline {
	font-family: var(--font-display);
	color: var(--text-on-dark, #ffffff);
	margin: 0 0 var(--space-sm) 0;
	text-wrap: balance;
}

body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__card-reassurance {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--text-on-dark-muted, rgba(255, 255, 255, 0.82));
	margin: 0 0 var(--space-xl) 0;
	max-width: 40ch;
}

body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__actions {
	margin: 0;
}

/* Primary CTA - audited CTA tokens, full-width inside the card for weight. */
body.aibt-universal .universal-conversion--value-stack-panel .wp-block-button.universal-conversion__cta {
	width: 100%;
}

body.aibt-universal .universal-conversion--value-stack-panel .wp-block-button.universal-conversion__cta .wp-block-button__link {
	width: 100%;
	justify-content: center;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: var(--tracking-wide);
	padding: 1.15rem 2.25rem;
	color: var(--cta-text-primary);
	background: var(--cta-bg-primary);
	border: 1px solid var(--cta-border-primary);
	border-radius: var(--decor-radius);
	transition: transform 200ms var(--ease-snappy), filter 200ms var(--ease-snappy);
	min-height: 56px;
	display: inline-flex;
	align-items: center;
}

body.aibt-universal .universal-conversion--value-stack-panel .wp-block-button.universal-conversion__cta .wp-block-button__link:hover {
	filter: brightness(1.08);
	transform: translateY(-2px);
}

/* Visible focus ring on the dark card surface for keyboard users (WCAG 2.4.7). */
body.aibt-universal .universal-conversion--value-stack-panel .wp-block-button.universal-conversion__cta .wp-block-button__link:focus-visible {
	outline: 3px solid var(--text-on-dark, #ffffff);
	outline-offset: 3px;
}

/* Fine-print trust line - muted but AA-legible on the dark card. */
body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__finesprint {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--text-on-dark-muted, rgba(255, 255, 255, 0.72));
	margin: var(--space-md) 0 0 0;
}

/* ---- Tablet: keep two columns but tighten the gutter ----------------------- */
@media (max-width: 959px) {
	body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__grid {
		gap: var(--space-xl);
	}
}

/* ---- Mobile: stack to one column, card below the value list ---------------- */
@media (max-width: 781px) {
	body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__grid {
		gap: var(--space-xl);
	}

	/* WP already wraps columns at 781px; force the explicit widths to 100%
	   so neither column keeps its desktop flex-basis. */
	body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__grid > .wp-block-column {
		flex-basis: 100% !important;
	}

	body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__card {
		padding: var(--space-xl);
	}
}

@media (max-width: 640px) {
	/* Drop wide kicker tracking so it never overflows narrow screens. */
	body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__kicker {
		letter-spacing: 0.12em;
	}

	body.aibt-universal .universal-conversion--value-stack-panel .universal-conversion__rowvalue {
		max-width: none;
	}
}

/* Respect reduced-motion: neutralize the CTA lift transform. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-conversion--value-stack-panel .wp-block-button.universal-conversion__cta .wp-block-button__link {
		transition: none;
	}
	body.aibt-universal .universal-conversion--value-stack-panel .wp-block-button.universal-conversion__cta .wp-block-button__link:hover {
		transform: none;
	}
}