/**
 * Variant CSS: hero--offset-card-straddle-photo
 * Layer 2 — one wide 2:1 landscape photo, with a solid theme-surface copy
 * card pulled UP by a negative margin so it STRADDLES the photo's bottom
 * edge (top half over the photo, bottom half on the page surface), offset
 * to the left. Distinct from overlap-card-on-photo (card fully ON the
 * photo) and overlap-headline-pull (bare type, no card).
 * Scope: body.aibt-universal .universal-hero--offset-card-straddle-photo
 */

body.aibt-universal .universal-hero--offset-card-straddle-photo {
	padding-block-start: clamp(var(--space-lg), 5vw, var(--space-2xl));
	/* Bottom padding leaves room for the card's protruding lower half. */
	padding-block-end: clamp(var(--space-xl), 7vw, var(--space-3xl));
}

body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__photo {
	margin: 0;
}

body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: var(--decor-radius);
}

/* The straddling card: solid theme surface (bg-main-aware via --background),
   shadow lifts it off both the photo and the page. Negative top margin is
   the straddle; left offset keeps it editorial. */
body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__card {
	position: relative;
	z-index: 2;
	background: var(--background);
	border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
	border-radius: var(--decor-radius);
	box-shadow: var(--decor-shadow-elevated);
	max-width: min(34rem, 92%);
	margin-block-start: clamp(-7rem, -9vw, -4.5rem);
	margin-inline-start: clamp(var(--space-md), 4vw, var(--space-2xl));
	padding: clamp(var(--space-md), 3.5vw, var(--space-xl));
}

body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__kicker {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 var(--space-xs) 0;
}

body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__headline {
	font-family: var(--font-display);
	color: var(--text-primary);
	margin: 0 0 var(--space-sm) 0;
	overflow-wrap: break-word;
}

body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__headline em {
	font-style: italic;
	color: var(--accent);
}

body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__deck {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--text-secondary);
	margin: 0 0 var(--space-md) 0;
}

body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__cta .wp-block-button__link {
	background: var(--cta-bg-primary, var(--accent));
	color: var(--cta-text-primary, var(--on-accent, #FFFFFF));
	font-family: var(--font-body);
	font-weight: 600;
	padding: 1rem 2.2rem;
	border-radius: var(--decor-radius);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__cta .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--decor-shadow-elevated);
}

body.aibt-universal .universal-hero--offset-card-straddle-photo a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* ── Mobile: straddle softens, card centers full-width. ──────────── */
@media (max-width: 640px) {
	body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__photo img {
		aspect-ratio: 4 / 3;
	}
	body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__card {
		max-width: 100%;
		margin-inline: 0;
		margin-block-start: -2.5rem;
	}
	body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__kicker {
		letter-spacing: var(--tracking-wide);
	}
	body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__actions,
	body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__cta,
	body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__cta .wp-block-button__link {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--offset-card-straddle-photo .universal-hero__cta .wp-block-button__link {
		transition: none;
	}
}