/**
 * Variant CSS: guarantee--compare-guarantees
 *
 * A "us vs standard" guarantee comparison built from wp:columns rows: intro
 * (kicker + headline + one line), a framed table with a header row (aspect /
 * "Z nami" / "Standard"), then aspect rows where the middle column carries our
 * commitment with a green check and the right column the typical standard with a
 * muted red cross. A centered CTA closes it. Shows the guarantee advantage point
 * by point instead of a plain promise list. Text is --ink (polarity-aware);
 * kicker, em and the "yes" marks use --accent. The "us" column is lifted with an
 * accent tint so the eye lands on our side. Part of the `guarantee` role.
 *
 * Mobile: wp:columns keeps 3 columns at our widths, so under 781px each row is
 * re-stacked to a labeled card (aspect title on top, then the two sides), which
 * guarantees 0 horizontal overflow at 375px.
 */

body.aibt-universal .universal-guarantee--compare-guarantees {
	padding-block: calc(clamp(3.4rem, 7vw, 5.5rem) * var(--density, 1));
}

/* Intro. */
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__intro {
	margin-bottom: clamp(2.2rem, 4.5vw, 3.2rem);
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.18em) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 auto var(--space-sm) auto !important;
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 auto !important;
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: var(--ink) !important;
	opacity: 0.78;
	margin: var(--space-sm) auto 0 auto !important;
}

/* Table frame. */
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__table {
	border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
	border-radius: var(--decor-radius, 14px);
	overflow: hidden;
	background: color-mix(in srgb, var(--ink) 2%, transparent);
}

/* Header + data rows share the columns grid + cell padding. */
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__head,
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__row {
	margin: 0 !important;
	gap: 0 !important;
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__head .wp-block-column,
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__row .wp-block-column {
	box-sizing: border-box;
	padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 2.2vw, 1.5rem);
	min-width: 0;
}

/* Aspect column a touch narrower; the two value columns share the rest. */
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__head-aspect,
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__cell-aspect {
	flex-basis: 26% !important;
}

/* "Us" column lifted with an accent tint so it reads as the recommended side. */
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__head-us,
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__cell-us {
	background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* Header row. */
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__head {
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__head-label {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-wide, 0.04em) !important;
	text-transform: uppercase !important;
	color: var(--ink) !important;
	opacity: 0.55;
	margin: 0 !important;
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__head-name {
	font-family: var(--font-display) !important;
	font-size: clamp(1rem, 1.8vw, 1.18rem) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	margin: 0 !important;
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__head-name--us {
	color: var(--accent) !important;
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__head-name--them {
	color: var(--ink) !important;
	opacity: 0.62;
}

/* Data rows — hairline separators between them. */
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__row + .universal-guarantee__row {
	border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__aspect-title {
	font-family: var(--font-display) !important;
	font-size: clamp(0.98rem, 1.7vw, 1.1rem) !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	color: var(--ink) !important;
	margin: 0 !important;
}

/* Value cell — mark + text. */
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__val {
	gap: 0.6rem !important;
	align-items: flex-start !important;
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	margin-top: 0.1rem;
	border-radius: var(--decor-radius-pill, 999px);
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__mark svg {
	width: 0.95rem;
	height: 0.95rem;
	display: block;
}

/* Yes = accent; No = muted danger that still reads on light + dark themes. */
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__mark--yes {
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 16%, transparent);
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__mark--no {
	color: color-mix(in srgb, #d4513b 75%, var(--ink));
	background: color-mix(in srgb, #d4513b 14%, transparent);
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__val-text {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: 1.45 !important;
	color: var(--ink) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__val--us .universal-guarantee__val-text {
	opacity: 0.92;
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__val--them .universal-guarantee__val-text {
	opacity: 0.6;
}

/* CTA. */
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__cta-wrap {
	margin-top: clamp(1.8rem, 4vw, 2.6rem) !important;
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__cta .wp-block-button__link {
	background: var(--cta-bg-primary, var(--accent)) !important;
	color: var(--cta-text-primary, var(--on-dark, #fff)) !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-wide, 0.04em) !important;
	border-radius: var(--decor-radius-pill, 999px) !important;
	padding: 0.85rem 1.9rem !important;
	transition: background var(--duration-fast, 150ms) var(--ease-default, ease),
		transform var(--duration-fast, 150ms) var(--ease-default, ease);
}

body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__cta .wp-block-button__link:hover {
	background: var(--accent-hover, var(--accent)) !important;
	transform: translateY(-2px);
}

/* Keyboard focus ring (a11y) — no visual change for mouse users. */
body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: inherit;
}

/*
 * Mobile re-stack: wp:columns keeps 3 columns at our widths, so collapse each row
 * into a labeled card. The aspect title goes full-width on top; the two value
 * cells stack underneath, each gaining a small "Z nami / Standard" prefix label.
 */
@media (max-width: 781px) {
	body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__row {
		display: flex !important;
		flex-wrap: wrap !important;
	}
	body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__row .wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
	/* Hide the desktop header; each card carries its own inline labels instead. */
	body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__head {
		display: none !important;
	}
	body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__cell-aspect {
		padding-bottom: 0.3rem !important;
	}
	body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__cell-us {
		border-radius: var(--decor-radius, 14px);
		margin: 0 clamp(0.9rem, 2vw, 1.25rem) 0.5rem;
	}
	body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__val::before {
		flex: 0 0 auto;
		font-family: var(--font-body);
		font-size: var(--text-2xs, 11px);
		font-weight: 600;
		letter-spacing: var(--tracking-wide, 0.04em);
		text-transform: uppercase;
		align-self: center;
		opacity: 0.7;
	}
	body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__val--us::before {
		content: "Z nami";
		color: var(--accent);
		opacity: 1;
	}
	body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__val--them::before {
		content: "Standard";
		color: var(--ink);
	}
}

/* Phone — kill uppercase tracking to avoid clipping (A5). */
@media (max-width: 480px) {
	body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__kicker,
	body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__head-label {
		letter-spacing: 0 !important;
	}
}

/* Respect reduced-motion: drop the CTA hover lift. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__cta .wp-block-button__link {
		transition: background var(--duration-fast, 150ms) var(--ease-default, ease);
	}
	body.aibt-universal .universal-guarantee--compare-guarantees .universal-guarantee__cta .wp-block-button__link:hover {
		transform: none;
	}
}