/**
 * Variant CSS: about--story-photo-split
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: the fundamental "about us". ONE warm portrait (founder / team /
 *   premises) on the LEFT, the story on the RIGHT - kicker + display headline
 *   + 2-3 short paragraphs at a comfortable reading measure + an optional
 *   signature line (name + role) + ONE primary CTA. Warm, credible, human.
 *   Mobile: the photo stacks ABOVE the story (it is first in source order, so
 *   `isStackedOnMobile` does the reorder for free - no CSS `order` hack).
 *
 * Semantic tokens only (--background, --text-primary, --text-secondary,
 * --accent, --font-display/body, --space-*, --tracking-*, --leading-*,
 * --decor-*, --cta-*). Reads premium on white and stays theme-portable: a
 * dark theme just supplies darker --background + lighter text + a darker photo
 * filter. The photo never disappears - it keeps a sized, ratio-locked frame.
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-about--story-photo-split
 * because the theme enqueues ALL variant CSS globally.
 *
 * @package AI_Base_Theme
 * @since 2026-05-29 (Path B Variants Library)
 */

/* === Section shell ========================================================
   Inherits the skeleton's fluid section padding (--space-3xl block). A bottom
   hairline matches the sibling about variants so stacked sections read as a
   sequence, not a single block. */
body.aibt-universal .universal-about--story-photo-split {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.08));
}

/* === Split grid ===========================================================
   The columns block supplies the 46/54 flex split + vertical centring. Give it
   an editorial gap and stop the inner content from sitting cramped against the
   seam. align-items:center keeps a shorter story optically balanced beside the
   tall portrait. */
body.aibt-universal .universal-about--story-photo-split .universal-about__grid {
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	margin: 0;
}

/* wp:column wrappers - let the block flex-basis hold; just clear stray margins
   and allow long words to wrap inside the track. */
body.aibt-universal .universal-about--story-photo-split .universal-about__col {
	margin: 0;
	min-width: 0;
}

/* === LEFT - portrait ======================================================
   Ratio-locked 4:5 portrait frame so the founder/team/premises photo always
   reads as a portrait regardless of the source crop. Soft radius + elevated
   shadow give the "credible, human" warmth. Photo colour grade comes from the
   theme `img { filter: var(--photo-filter) }` rule - not re-applied here. */
body.aibt-universal .universal-about--story-photo-split .universal-about__photo {
	margin: 0;
	border-radius: var(--decor-radius-photo, 8px);
	overflow: hidden;
	box-shadow: var(--decor-shadow-elevated, 0 14px 40px rgba(0, 0, 0, 0.12));
}

body.aibt-universal .universal-about--story-photo-split .universal-about__photo img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
	/* Keep the portrait substantial even when the story column is short. */
	min-height: clamp(20rem, 38vw, 30rem);
}

/* === RIGHT - story ======================================================== */
body.aibt-universal .universal-about--story-photo-split .universal-about__col--story {
	display: flex;
	flex-direction: column;
}

/* Kicker - small uppercase label. --text-secondary (not --accent) per the
   small-text contrast rule; weight + tracking carry the editorial signal. */
body.aibt-universal .universal-about--story-photo-split .universal-about__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-secondary) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

/* Headline - display face, primary ink. Size/line-height/weight come from the
   block inline style.typography (clamp(2rem, 4vw, 3.25rem)); cap the measure so
   it breaks into a confident 2-3 line statement, not one long ribbon. */
body.aibt-universal .universal-about--story-photo-split h2.universal-about__headline,
body.aibt-universal .universal-about--story-photo-split .universal-about__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-md) 0 !important;
	max-width: 18ch;
}

body.aibt-universal .universal-about--story-photo-split .universal-about__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
	font-weight: var(--italic-weight, 500);
}

/* Story paragraphs - comfortable long-form reading. Secondary ink, relaxed
   leading, measure capped near 62ch so lines never run too wide. */
body.aibt-universal .universal-about--story-photo-split .universal-about__para {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed, 1.65) !important;
	color: var(--text-secondary) !important;
	max-width: 62ch;
	margin: 0 0 var(--space-sm) 0 !important;
}

/* Lead paragraph carries a touch more presence than the supporting lines. */
body.aibt-universal .universal-about--story-photo-split .universal-about__para:first-of-type {
	font-size: var(--text-lg) !important;
	color: var(--text-primary) !important;
}

/* === Signature - name + role, set off by a short top hairline ============= */
body.aibt-universal .universal-about--story-photo-split .universal-about__signature {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.10));
	gap: 0;
}

body.aibt-universal .universal-about--story-photo-split .universal-about__sign-name {
	font-family: var(--font-display) !important;
	font-style: italic !important;
	font-weight: var(--italic-weight, 500) !important;
	font-size: var(--text-lg) !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* === Primary CTA - solid, high-contrast, theme-driven ===================== */
body.aibt-universal .universal-about--story-photo-split .universal-about__cta {
	margin-top: var(--space-lg);
}

body.aibt-universal .universal-about--story-photo-split .wp-block-button.universal-about__cta .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-base);
	letter-spacing: var(--tracking-wide);
	padding: 0.95rem 2.25rem;
	color: var(--cta-text-primary, #fff);
	background: var(--cta-bg-primary, var(--text-primary));
	border: var(--decor-border-width, 1px) solid var(--cta-border-primary, var(--text-primary));
	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;
	justify-content: center;
}

body.aibt-universal .universal-about--story-photo-split .wp-block-button.universal-about__cta .wp-block-button__link:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent, var(--cta-text-primary, #fff));
	transform: translateY(-2px);
}

body.aibt-universal .universal-about--story-photo-split .wp-block-button.universal-about__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: var(--focus-offset, 4px);
}

/* === Tablet - keep the split but ease the gap ============================= */
@media (max-width: 959px) {
	body.aibt-universal .universal-about--story-photo-split .universal-about__grid {
		gap: clamp(1.75rem, 4vw, 3rem);
	}
}

/* === Mobile - photo on top, story below =================================
   The columns block already stacks (isStackedOnMobile). Source order is
   photo-then-story, so the portrait naturally leads. Constrain the portrait
   height so it does not dominate the fold, and re-flow the measure to full
   width. */
@media (max-width: 781px) {
	body.aibt-universal .universal-about--story-photo-split .universal-about__photo img {
		aspect-ratio: 4 / 3;
		min-height: 0;
		max-height: 24rem;
	}

	body.aibt-universal .universal-about--story-photo-split .universal-about__headline {
		max-width: 20ch;
	}

	body.aibt-universal .universal-about--story-photo-split .universal-about__para {
		max-width: none;
	}
}

@media (max-width: 640px) {
	/* Drop uppercase kicker tracking on the smallest screens (KI-003) - wide
	   tracking fragments a 12px label at phone widths. */
	body.aibt-universal .universal-about--story-photo-split .universal-about__kicker {
		letter-spacing: 0 !important;
	}

	/* Comfortable full-width tap target on phones. */
	body.aibt-universal .universal-about--story-photo-split .wp-block-button.universal-about__cta .wp-block-button__link {
		width: 100%;
	}
}

/* === Reduced motion ======================================================= */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-about--story-photo-split .wp-block-button.universal-about__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-about--story-photo-split .wp-block-button.universal-about__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor wrapper - content stays visible in the block editor =========== */
.editor-styles-wrapper .universal-about--story-photo-split .universal-about__photo,
.editor-styles-wrapper .universal-about--story-photo-split .universal-about__col {
	opacity: 1 !important;
	transform: none !important;
}