/**
 * Variant CSS: hero--diagonal-split-clip
 * Layer 2: Variants Library (Path B Recipes architecture).
 *
 * Concept: a BOLD diagonal clip-path seam splits the hero into two energetic
 *   halves. RIGHT half is a dynamic photo (athlete / motion / product). LEFT
 *   half is a solid theme-dark panel (--background-dark) carrying kicker + H1
 *   + 1-2 line deck + ONE CTA. The dark panel is clipped on its right edge so
 *   it slices diagonally INTO the photo, and an accent stripe rides the seam:
 *   the signature. Implied motion, no animation required.
 *   Mobile (<=640): the clip-path is REMOVED (it would clip the H1/CTA on a
 *   narrow column) and the hero relaxes to a clean stack: photo on top, the
 *   dark text panel below, full-width.
 *
 * AA strategy (all 9 themes): the text side lives on --background-dark, whose
 *   on-dark contrast with white is 16.9-19.4:1 in EVERY theme. Kicker, H1, deck
 *   and CTA all derive from --text-on-dark (a light color in every theme), so
 *   small-text AA is guaranteed. The accent (which FAILS on the dark panel in
 *   white-minimal where accent==background-dark, and is weak on white-azure /
 *   white-tech-modern / paper) is used ONLY for non-text graphics: the seam
 *   stripe and a decorative underline bar - both UI graphics, not text. The
 *   primary CTA is a white fill with dark text (bulletproof on any dark panel),
 *   never the theme's --cta-bg-primary (which is --ink/dark on the white themes
 *   and would vanish on the dark panel).
 *
 * Hardcoded rgba: photo scrim only. No hardcoded hex/rgb on theme surfaces.
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-hero--diagonal-split-clip
 * because the theme loads ALL variant CSS globally (role-level = leak, fatal).
 *
 * @package AI_Base_Theme
 * @since 2026-05-29 (Path B Variants Library)
 */

/* === Section shell ========================================================
   Neutralize the default `body.aibt-universal section` padding so the photo
   reaches the viewport edge and the diagonal can bleed across the seam. The
   panel + grid own all spacing. The section background = the photo side's
   backstop (dark) so any sub-pixel gap at the seam reads as part of the photo
   edge, never a light flash. */
body.aibt-universal .universal-hero--diagonal-split-clip {
	position: relative;
	padding: 0 !important;
	background: var(--background-dark);
	overflow: hidden;
	isolation: isolate;
}

/* === 2-track grid =========================================================
   Override the columns block (flex + gap) with a hard two-track grid. The text
   track is slightly wider so the clipped panel has room for a full diagonal
   without eating the H1. gap:0 keeps the seam exact. */
body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 0;
	align-items: stretch;
	margin: 0;
	min-height: clamp(34rem, 88vh, 56rem);
	max-width: none;
}

/* wp:column wrappers - strip block defaults (flex-basis, padding, margins). */
body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__col {
	flex-basis: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0; /* allow long words to wrap inside the grid track */
	position: relative;
}

/* === LEFT - text column (holds the clipped dark panel) ==================== */
body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__col--text {
	z-index: 2; /* dark panel rides OVER the photo at the seam */
	display: flex;
}

/* The PANEL is the tokenized group that carries the diagonal clip + dark
   surface. It stretches the full column height and bleeds ~3.5rem PAST the
   column's right edge so the diagonal cut overlaps onto the photo, forming the
   seam. clip-path cuts the bottom-right corner inward → a bold diagonal edge. */
body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__panel {
	position: relative;
	width: calc(100% + 3.5rem);
	margin: 0;
	background: var(--background-dark);
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Pad more on the right so text clears the diagonal cut zone. */
	padding-block: calc(clamp(var(--space-xl), 9vh, var(--space-2xl)) * var(--density, 1));
	padding-inline: clamp(var(--space-lg), 6vw, calc(var(--space-2xl) + 1rem)) clamp(3rem, 7vw, 6rem);
	/* Diagonal seam: straight top + left + bottom, angled right edge. The two
	   right points (96% top, 82% bottom) tilt the seam; the bottom sits further
	   left so the cut leans like forward motion. */
	clip-path: polygon(0 0, 100% 0, calc(100% - 4.5rem) 100%, 0 100%);
}

/* Accent stripe riding the seam - the signature. A thin skewed bar in the
   theme accent, placed along the diagonal edge of the panel. Decorative UI
   graphic (not text) so it is exempt from the 4.5:1 text rule; on the dark
   photo backstop it reads as an energetic slash even where accent is mid-tone.
   In white-minimal accent==background-dark, so route a visible fallback there
   via the theme override at the foot of this file. */
body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__col--text::after {
	content: '';
	position: absolute;
	top: -2%;
	bottom: -2%;
	right: calc(-3.5rem - 0.55rem);
	width: 0.55rem;
	background: var(--accent);
	transform: skewX(-7.1deg);
	transform-origin: top;
	z-index: 3;
	pointer-events: none;
}

/* Thin accent rule above the kicker - small editorial signature tick. */
body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__panel::before {
	content: '';
	display: block;
	width: var(--space-lg);
	height: 3px;
	background: var(--accent);
	margin-bottom: var(--space-md);
}

/* === Kicker - white-on-dark (AA bulletproof in all 9 themes) ============== */
body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__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(--text-on-dark, #FFFFFF) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

/* === Headline - white-on-dark display, em gets an accent underline bar ====
   The H1 stays white for guaranteed legibility on the dark panel. The energy /
   accent identity comes from a decorative accent underline under the <em>
   (a graphic, not the text color), so it works even in white-minimal where the
   accent equals the panel background. font-size/line-height inherit from the
   block inline style (clamp(2.6rem,6.5vw,5rem)) - clears the display floor. */
body.aibt-universal .universal-hero--diagonal-split-clip h1.universal-hero__headline,
body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--text-on-dark, #FFFFFF) !important;
	margin: 0 0 var(--space-md) 0 !important;
	max-width: 15ch;
}

body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__headline em {
	font-style: italic;
	color: var(--text-on-dark, #FFFFFF);
	font-weight: inherit;
	position: relative;
	white-space: nowrap;
}

/* Accent underline bar under the em - the energetic signature, decorative. */
body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__headline em::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.04em;
	height: 0.1em;
	background: var(--accent);
	border-radius: 2px;
}

/* === Deck - on-dark light text, softened to a secondary tier ============== */
body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed, 1.65) !important;
	color: var(--text-on-dark, #FFFFFF) !important;
	opacity: 0.84;
	max-width: 40ch;
	margin: 0 0 var(--space-lg) 0 !important;
}

/* === Primary CTA - white fill + dark text (bulletproof on any dark panel) ==
   The theme's --cta-bg-primary is --ink (dark) on the white themes and would
   vanish on the dark panel, so this variant uses an explicit on-dark CTA: a
   light fill with the dark surface as the label. Hover inverts to a clean
   outline (white text + white border on the dark panel = ~17:1 everywhere). */
body.aibt-universal .universal-hero--diagonal-split-clip .wp-block-button.universal-hero__cta .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-base);
	letter-spacing: var(--tracking-wide);
	padding: 1.1rem 2.5rem;
	color: var(--background-dark);
	background: var(--text-on-dark, #FFFFFF);
	border: var(--decor-border-width, 1px) solid var(--text-on-dark, #FFFFFF);
	border-radius: var(--decor-radius, 0);
	transition: background var(--duration-fast, 240ms) var(--ease-default, ease),
		color var(--duration-fast, 240ms) var(--ease-default, ease),
		border-color var(--duration-fast, 240ms) var(--ease-default, ease),
		transform var(--duration-fast, 240ms) var(--ease-default, ease);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
}

body.aibt-universal .universal-hero--diagonal-split-clip .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
	background: transparent;
	color: var(--text-on-dark, #FFFFFF);
	border-color: var(--text-on-dark, #FFFFFF);
	transform: translateY(-2px);
}

body.aibt-universal .universal-hero--diagonal-split-clip .wp-block-button.universal-hero__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--text-on-dark, #FFFFFF);
	outline-offset: var(--focus-offset, 4px);
}

/* === RIGHT - media column ================================================= */
body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__col--media {
	z-index: 1;
	align-self: stretch;
	background: var(--background-dark);
}

body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Subtle scrim on the photo's left edge so the diagonal seam reads as a clean
   transition into the dark panel (hardcoded rgba allowed - photo scrim only). */
body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__col--media::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.10) 28%, rgba(0, 0, 0, 0) 55%);
	z-index: 1;
	pointer-events: none;
}

/* === Tablet / mid widths (641-959) - KEEP the diagonal but tame the angle ==
   At mid widths the column is narrow; a steep cut would eat the H1. Shrink the
   bleed + cut depth and tighten the right padding so the headline + CTA always
   clear the diagonal. */
@media (max-width: 959px) {
	body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__grid {
		grid-template-columns: 1.15fr 0.85fr;
		min-height: clamp(28rem, 72vh, 44rem);
	}

	body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__panel {
		width: calc(100% + 2.25rem);
		padding-inline: clamp(var(--space-md), 5vw, var(--space-xl)) clamp(2.25rem, 6vw, 4rem);
		clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0 100%);
	}

	body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__col--text::after {
		right: calc(-2.25rem - 0.45rem);
		width: 0.45rem;
		transform: skewX(-6deg);
	}

	body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__headline {
		max-width: 13ch;
	}
}

/* === Mobile (<=640) - REMOVE clip-path, clean photo-top / text-below stack ==
   A diagonal clip on a single narrow column clips the content; relax to a flat
   horizontal stack. Photo leads (source order is text-then-media, so reorder),
   dark text panel sits below at full width with no cut. */
@media (max-width: 640px) {
	body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__grid {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	/* Photo becomes a fixed-ratio banner on top; absolute fill needs a sized parent. */
	body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__col--media {
		order: 0;
		width: 100%;
		position: relative;
		height: clamp(15rem, 46vh, 22rem);
	}

	body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__col--text {
		order: 1;
		width: 100%;
		display: block;
	}

	/* Drop the clip + horizontal bleed; full-width flat dark panel. */
	body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__panel {
		width: 100%;
		clip-path: none;
		padding-block: calc(clamp(var(--space-xl), 9vh, var(--space-2xl)) * var(--density, 1));
		padding-inline: clamp(var(--space-md), 7vw, var(--space-xl));
	}

	/* Seam stripe relaxes to a horizontal accent bar between photo and panel. */
	body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__col--text::after {
		top: 0;
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 4px;
		transform: none;
	}

	/* Photo scrim shifts to the bottom edge (transition into the panel below). */
	body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__col--media::before {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%);
	}

	/* Cap uppercase tracking on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__kicker {
		letter-spacing: 0 !important;
	}

	body.aibt-universal .universal-hero--diagonal-split-clip .universal-hero__headline {
		max-width: 18ch;
	}

	body.aibt-universal .universal-hero--diagonal-split-clip .wp-block-button.universal-hero__cta .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* === Reduced motion ======================================================= */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--diagonal-split-clip .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--diagonal-split-clip .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === white-minimal: accent == background-dark == #1A1715, so the accent seam
   stripe, kicker tick + em underline are INVISIBLE on the dark panel. Route
   those three accent GRAPHICS to the on-dark light color in this theme only so
   the signature stays visible. Loaded after this file via the theme stylesheet
   would be cleaner, but the theme CSS does not know the variant; scope it here
   with the theme body class (zero text impact - graphics only). 2026-05-29. == */
body.aibt-universal.aibt-theme-white-minimal .universal-hero--diagonal-split-clip .universal-hero__col--text::after,
body.aibt-universal.aibt-theme-white-minimal .universal-hero--diagonal-split-clip .universal-hero__panel::before,
body.aibt-universal.aibt-theme-white-minimal .universal-hero--diagonal-split-clip .universal-hero__headline em::after {
	background: var(--text-on-dark, #FFFFFF);
}