/**
 * Variant CSS: team--solo-wide-banner-intro
 * Layer 2 — Path B team role (2026-06-10).
 *
 * One key person as a full-bleed horizontal banner: the portrait bleeds to the
 * left page edge (no radius, no gutter) and the rest of the band carries an
 * eyebrow, an oversized name, role and bio aligned left. Unlike
 * founder-editorial-split (a narrow, constrained two-column article with a framed
 * portrait), this is an edge-bleeding band that opens a section with a strong
 * horizontal accent. The band is a tinted surface (--background-card); all text
 * is polarity-aware (--text-primary/-secondary). Portrait swapped by the photo
 * system (team_1). The section uses a flow (default) layout so the band can span
 * the full viewport width.
 */

body.aibt-universal .universal-team--solo-wide-banner-intro {
	background: var(--background);
	color: var(--text-primary);
	/* No section padding: the banner owns the full width and bleeds edge-to-edge. */
	padding: 0 !important;
}

/* === Banner band ========================================================== */
body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__banner {
	background: var(--background-card);
	margin: 0;
	gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
	align-items: stretch;
	overflow: hidden;
}

/* === Photo side — bleeds to the left edge ================================= */
body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__media {
	padding: 0 !important;
	align-self: stretch;
}
body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__photo {
	margin: 0;
	height: 100%;
	overflow: hidden;
}
body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: clamp(360px, 42vw, 540px);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: var(--photo-filter, none);
	transition: transform var(--duration-medium) var(--ease-elegant);
}
body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__banner:hover .universal-team__photo img {
	transform: scale(1.035);
}

/* === Text side ============================================================ */
body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__body {
	/* Generous inner padding; right side keeps content off the page edge. */
	padding-block: calc(clamp(var(--space-xl), 5vw, var(--space-2xl)) * var(--density, 1)) !important;
	padding-right: clamp(var(--space-lg), 5vw, var(--space-2xl)) !important;
	padding-left: clamp(var(--space-md), 3vw, var(--space-lg)) !important;
}
body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__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(--accent) !important;
	margin: 0 0 var(--space-sm) 0 !important;
}
body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__name {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-2xs) 0 !important;
}
body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__role {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-wide) !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-md) 0 !important;
}
body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__bio {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	max-width: 56ch;
}

/* === Keyboard focus — visible ring on the focusable photo (a11y) =========== */
body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__photo:focus-within,
body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__photo img:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: calc(-1 * var(--focus-offset, 4px));
}

/* === Reduced motion — neutralise the portrait zoom ========================= */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__photo img {
		transition: none;
	}
	body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__banner:hover .universal-team__photo img {
		transform: none;
	}
}

/* === Responsive =========================================================== */
/* Mobile (WP stacks columns at 781 via isStackedOnMobile): photo on top, text
   below with comfortable padding on both sides; cap the photo height. */
@media (max-width: 781px) {
	body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__photo img {
		min-height: 0;
		aspect-ratio: 16 / 11;
		max-height: 60vh;
	}
	body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__body {
		padding-left: clamp(var(--space-md), 6vw, var(--space-lg)) !important;
		padding-right: clamp(var(--space-md), 6vw, var(--space-lg)) !important;
		padding-block: calc(clamp(var(--space-lg), 8vw, var(--space-xl)) * var(--density, 1)) !important;
	}
}

@media (max-width: 640px) {
	body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__bio {
		font-size: var(--text-base) !important;
	}
	body.aibt-universal .universal-team--solo-wide-banner-intro .universal-team__kicker {
		letter-spacing: var(--tracking-wider) !important;
	}
}