/**
 * Variant CSS: team--hover-bio-cards
 *
 * Portrait cards where the bio is styled as a reveal-on-hover overlay. The
 * STATIC base state reads fully on its own: a clean portrait with an always-
 * visible caption band (name + role) anchored at the bottom. The bio panel is
 * an absolutely-positioned dark overlay that slides up on :hover / :focus-within
 * (keyboard + touch reachable), so the grid stays calm until you engage with a
 * card. Overlay is an always-dark surface → bio text uses --text-on-dark and an
 * accent→on-dark lift (never --bg-main as foreground, KI-020). Outside the
 * card text stays --ink (polarity-aware). Portraits swapped by the photo system.
 * Part of the `team` role.
 */

body.aibt-universal .universal-team--hover-bio-cards {
	padding-block: calc(clamp(3rem, 7vw, 5rem) * var(--density, 1));
}

/* Intro. */
body.aibt-universal .universal-team--hover-bio-cards .universal-team__intro {
	margin-bottom: clamp(2rem, 4.5vw, 3rem);
}

body.aibt-universal .universal-team--hover-bio-cards .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--hover-bio-cards .universal-team__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-team--hover-bio-cards .universal-team__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

body.aibt-universal .universal-team--hover-bio-cards .universal-team__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: var(--ink) !important;
	opacity: 0.78;
	margin: var(--space-md) 0 0 0 !important;
}

/* Grid. */
body.aibt-universal .universal-team--hover-bio-cards .universal-team__grid {
	gap: clamp(1.2rem, 2.6vw, 1.8rem);
	align-items: stretch;
}

/* Card = positioning context for the bio overlay. */
body.aibt-universal .universal-team--hover-bio-cards .universal-team__card {
	position: relative;
	border-radius: var(--decor-radius, 14px);
	overflow: hidden;
	background: color-mix(in srgb, var(--ink) 6%, transparent);
	transition: transform var(--duration-fast, 0.18s) var(--ease-default, ease),
		box-shadow var(--duration-fast, 0.18s) var(--ease-default, ease);
}

body.aibt-universal .universal-team--hover-bio-cards .universal-team__card:hover,
body.aibt-universal .universal-team--hover-bio-cards .universal-team__card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 20px 44px -24px color-mix(in srgb, var(--ink) 46%, transparent);
}

/* Portrait fills the card. */
body.aibt-universal .universal-team--hover-bio-cards .universal-team__photo {
	margin: 0 !important;
	display: block;
}

body.aibt-universal .universal-team--hover-bio-cards .universal-team__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/*
 * Caption band — ALWAYS visible (the static-readable layer). Sits over the
 * bottom of the portrait with a gradient scrim so name/role read on any photo.
 */
body.aibt-universal .universal-team--hover-bio-cards .universal-team__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1rem, 2.4vw, 1.4rem) clamp(0.9rem, 2vw, 1.2rem);
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--background-dark, #141414) 88%, transparent) 0%,
		color-mix(in srgb, var(--background-dark, #141414) 60%, transparent) 55%,
		transparent 100%
	);
	transition: opacity var(--duration-fast, 0.18s) var(--ease-default, ease);
}

body.aibt-universal .universal-team--hover-bio-cards .universal-team__name {
	font-family: var(--font-display) !important;
	font-size: clamp(1.1rem, 2.1vw, 1.3rem) !important;
	font-weight: 600 !important;
	line-height: 1.18 !important;
	color: var(--text-on-dark, #fff) !important;
	margin: 0 0 0.2rem 0 !important;
}

body.aibt-universal .universal-team--hover-bio-cards .universal-team__role {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-wide) !important;
	text-transform: uppercase !important;
	/* Accent lifted toward on-dark so it stays legible on the dark scrim (KI-020). */
	color: color-mix(in srgb, var(--accent) 55%, var(--text-on-dark, #fff)) !important;
	margin: 0 !important;
}

/*
 * Bio panel — the REVEAL layer. Hidden at rest (slid down + transparent),
 * covers the whole card on hover / focus-within. Always-dark surface.
 */
body.aibt-universal .universal-team--hover-bio-cards .universal-team__bio-panel {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(1.2rem, 2.6vw, 1.6rem);
	padding-bottom: calc(clamp(4.2rem, 9vw, 5.4rem) * var(--density, 1)); /* clear the caption band */
	background: color-mix(in srgb, var(--background-dark, #141414) 90%, transparent);
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity var(--duration-fast, 0.2s) var(--ease-default, ease),
		transform var(--duration-fast, 0.2s) var(--ease-default, ease);
}

body.aibt-universal .universal-team--hover-bio-cards .universal-team__card:hover .universal-team__bio-panel,
body.aibt-universal .universal-team--hover-bio-cards .universal-team__card:focus-within .universal-team__bio-panel {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

body.aibt-universal .universal-team--hover-bio-cards .universal-team__bio {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: var(--text-on-dark, #fff) !important;
	opacity: 0.92;
	margin: 0 !important;
}

/* On reveal, dim the caption slightly so the bio is the focus. */
body.aibt-universal .universal-team--hover-bio-cards .universal-team__card:hover .universal-team__caption,
body.aibt-universal .universal-team--hover-bio-cards .universal-team__card:focus-within .universal-team__caption {
	opacity: 0.92;
}

/* Tablet — 2-up grid. */
@media (max-width: 781px) {
	body.aibt-universal .universal-team--hover-bio-cards .universal-team__grid {
		flex-wrap: wrap;
	}
	body.aibt-universal .universal-team--hover-bio-cards .universal-team__grid .universal-team__card {
		flex-basis: calc(50% - clamp(0.6rem, 1.3vw, 0.9rem));
	}
}

/*
 * Mobile — single column. Touch has no hover, so SHOW the bio panel statically
 * (always-on, no scrim transform) and stack it below the portrait visually by
 * keeping it as a readable dark footer. We make it part of the flow-feel by
 * pinning it to the lower portion but fully opaque. Cap uppercase tracking.
 */
@media (max-width: 640px) {
	body.aibt-universal .universal-team--hover-bio-cards .universal-team__grid {
		flex-direction: column;
	}
	body.aibt-universal .universal-team--hover-bio-cards .universal-team__grid .universal-team__card {
		flex-basis: auto;
		width: 100%;
	}
	/* Reveal-on-hover does not work on touch → keep bio visible at rest. */
	body.aibt-universal .universal-team--hover-bio-cards .universal-team__bio-panel {
		opacity: 1;
		transform: none;
		pointer-events: auto;
		background: linear-gradient(
			to top,
			color-mix(in srgb, var(--background-dark, #141414) 92%, transparent) 40%,
			color-mix(in srgb, var(--background-dark, #141414) 30%, transparent) 100%
		);
		justify-content: flex-end;
	}
	body.aibt-universal .universal-team--hover-bio-cards .universal-team__role {
		letter-spacing: 0 !important;
	}
	body.aibt-universal .universal-team--hover-bio-cards .universal-team__kicker {
		letter-spacing: 0 !important;
	}
}