/**
 * Variant CSS: team--masonry-portraits
 *
 * Team as a varied-height masonry of portraits. Tiles mix 3:4 and 1:1 crops and
 * flow through a CSS multi-column layout, so the wall of faces reads with an
 * irregular, editorial rhythm rather than an even card grid. Name + role are
 * permanently overlaid on the bottom of each photo over a dark scrim, so the
 * image leads and the caption lives on it. Overlay text uses --text-on-dark
 * against the scrim (never --bg-main as foreground, KI-020); the accent lift is
 * used for the emphasised headline word. Portraits swapped by the photo system.
 * Part of the `team` role.
 */

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

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

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

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

body.aibt-universal .universal-team--masonry-portraits .universal-team__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--ink) !important;
	opacity: 0.78;
	margin: 0 !important;
}

/* Masonry — CSS multi-column drives the staggered, varied-height flow. */
body.aibt-universal .universal-team--masonry-portraits .universal-team__masonry {
	column-count: 3;
	column-gap: clamp(1rem, 2vw, 1.6rem);
}

/* Each tile is a self-contained masonry item — never split across columns. */
body.aibt-universal .universal-team--masonry-portraits .universal-team__tile {
	position: relative;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin: 0 0 clamp(1rem, 2vw, 1.6rem) 0;
	border-radius: var(--decor-radius);
	overflow: hidden;
	display: block;
}

/* Photo fills the tile; the differing aspect-ratios create the masonry stagger. */
body.aibt-universal .universal-team--masonry-portraits .universal-team__photo {
	margin: 0 !important;
	display: block;
}

body.aibt-universal .universal-team--masonry-portraits .universal-team__photo img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform var(--duration-fast, 0.18s) var(--ease-default, ease);
}

body.aibt-universal .universal-team--masonry-portraits .universal-team__tile--tall .universal-team__photo img {
	aspect-ratio: 3 / 4;
}

body.aibt-universal .universal-team--masonry-portraits .universal-team__tile--short .universal-team__photo img {
	aspect-ratio: 1 / 1;
}

body.aibt-universal .universal-team--masonry-portraits .universal-team__tile:hover .universal-team__photo img {
	transform: scale(1.05);
}

/* Caption overlaid on the photo bottom over a dark scrim (text-on-dark, KI-020). */
body.aibt-universal .universal-team--masonry-portraits .universal-team__caption {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: clamp(1.4rem, 3vw, 2rem) clamp(1rem, 2.2vw, 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%
	);
	pointer-events: none;
}

body.aibt-universal .universal-team--masonry-portraits .universal-team__name {
	font-family: var(--font-display) !important;
	font-size: clamp(1.05rem, 2vw, 1.25rem) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--text-on-dark, #fff) !important;
	margin: 0 0 0.2rem 0 !important;
}

body.aibt-universal .universal-team--masonry-portraits .universal-team__role {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: 1.35 !important;
	color: var(--text-on-dark, #fff) !important;
	opacity: 0.82;
	margin: 0 !important;
}

/* Respect reduced-motion — neutralise the portrait zoom. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-team--masonry-portraits .universal-team__photo img {
		transition: none;
	}
	body.aibt-universal .universal-team--masonry-portraits .universal-team__tile:hover .universal-team__photo img {
		transform: none;
	}
}

/* Cap wide uppercase tracking on small screens so the kicker never crowds itself (A5). */
@media (max-width: 640px) {
	body.aibt-universal .universal-team--masonry-portraits .universal-team__kicker {
		letter-spacing: 0 !important;
	}
}

/* Tablet — 2 columns. */
@media (max-width: 781px) {
	body.aibt-universal .universal-team--masonry-portraits .universal-team__masonry {
		column-count: 2;
	}
}

/* Mobile — single column; tiles stack, captions stay legible. */
@media (max-width: 480px) {
	body.aibt-universal .universal-team--masonry-portraits .universal-team__masonry {
		column-count: 1;
	}
}