/**
 * Variant CSS: about--quote-led-portrait
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: a LARGE pull-quote about the brand philosophy leads (LEFT, 58%),
 *   with a ratio-locked portrait (RIGHT, 42%) and a small attribution below the
 *   quote - name + role. A big decorative quotation mark anchors the quote.
 *   Distinct from founder-portrait-quote (portrait LEFT + small supporting quote
 *   + CTA): here the QUOTE is the dominant element and the portrait is the
 *   support, with no CTA. Distinct from manifesto-quote-large (one centered
 *   statement, no side portrait): this is an asymmetric quote-beside-face split.
 *
 * Semantic tokens only (--background, --text-primary, --text-secondary,
 * --accent, --font-display/body, --space-*, --tracking-*, --leading-*,
 * --decor-*). Reads premium on white and stays theme-portable: a dark theme
 * supplies darker --background + lighter text + a darker photo filter. The
 * portrait never disappears - it keeps a sized, ratio-locked frame.
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-about--quote-led-portrait
 * because the theme enqueues ALL variant CSS globally.
 *
 * @package AI_Base_Theme
 * @since 2026-06-06 (Path B Variants Library)
 */

/* === Section shell ========================================================
   Inherits the skeleton's fluid section padding. A bottom hairline matches the
   sibling about variants so stacked sections read as a sequence. */
body.aibt-universal .universal-about--quote-led-portrait {
	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 58/42 flex split + vertical centring. Give it
   an editorial gap and align-items:center so the portrait stays optically level
   with the quote block. */
body.aibt-universal .universal-about--quote-led-portrait .universal-about__grid {
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	margin: 0;
}

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

body.aibt-universal .universal-about--quote-led-portrait .universal-about__col--quote {
	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--quote-led-portrait .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-sm) 0 !important;
}

/* === Decorative quotation mark ============================================
   Oversized display-face glyph in a faded accent tint. Purely ornamental
   (aria-hidden); pulled up so the quote sits visually close beneath it. */
body.aibt-universal .universal-about--quote-led-portrait .universal-about__mark {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(3.5rem, 7vw, 6rem);
	line-height: 0.6;
	font-weight: 700;
	color: var(--accent-fade, color-mix(in srgb, var(--accent) 28%, transparent));
	margin: 0 0 0.1em -0.04em;
	user-select: none;
}

/* === The quote - display face, the focal element =========================
   Size/line-height/weight come from the block inline style.typography. Primary
   ink; cap the measure so it breaks into a confident multi-line statement. */
body.aibt-universal .universal-about--quote-led-portrait h2.universal-about__quote,
body.aibt-universal .universal-about--quote-led-portrait .universal-about__quote {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-lg) 0 !important;
	max-width: 22ch;
	text-wrap: balance;
}

/* Emphasised fragment takes the signature italic accent (matches sibling about
   variants). */
body.aibt-universal .universal-about--quote-led-portrait .universal-about__quote em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
	font-weight: var(--italic-weight, inherit);
}

/* === Attribution - name + role, set off by a short top hairline =========== */
body.aibt-universal .universal-about--quote-led-portrait .universal-about__attribution {
	margin-top: var(--space-sm);
	padding-top: var(--space-md);
	border-top: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.10));
	max-width: max-content;
}

body.aibt-universal .universal-about--quote-led-portrait .universal-about__name {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: var(--text-lg) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-about--quote-led-portrait .universal-about__role {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: 1.4 !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
}

/* === RIGHT - portrait =====================================================
   Ratio-locked 4:5 portrait frame so the photo always reads as a portrait
   regardless of the source crop. Soft radius + elevated shadow give a credible,
   human warmth. Photo colour grade comes from the theme img filter. */
body.aibt-universal .universal-about--quote-led-portrait .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--quote-led-portrait .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 quote column is short. */
	min-height: clamp(20rem, 36vw, 28rem);
}

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

	body.aibt-universal .universal-about--quote-led-portrait .universal-about__quote {
		max-width: 26ch;
	}
}

/* === Mobile - quote on top, portrait below ===============================
   The columns block stacks (isStackedOnMobile). Source order is quote-then-
   portrait, so the statement leads. Constrain the portrait height so it does
   not dominate, and re-flow the measure to full width. */
@media (max-width: 781px) {
	body.aibt-universal .universal-about--quote-led-portrait .universal-about__quote {
		max-width: none;
	}

	body.aibt-universal .universal-about--quote-led-portrait .universal-about__photo img {
		aspect-ratio: 4 / 3;
		min-height: 0;
		max-height: 22rem;
	}
}

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

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