/**
 * Variant CSS: about--team-collage-story
 * Layer 2 - Path B universal ABOUT variant (narrative beside a 4-photo collage).
 *
 * Concept: a left text column (kicker + headline + lead deck + one body paragraph
 * + a single CTA) sits beside a right-hand collage of FOUR photos at varied sizes,
 * arranged on a 2-col CSS grid: a tall portrait spans both rows on the left, while
 * a square, a wide and a detail crop fill the right side and bottom. The mosaic
 * conveys "the team and the place" - distinct from dual-image-story (two overlapping
 * frames) and from the plain story-photo-split (single portrait).
 *
 * Surface contract: section on --background; every crop uses aspect-ratio +
 * object-fit so any Unsplash source fills cleanly. Headline/body = --text-primary
 * / --text-secondary, kicker + CTA accent = --accent. Semantic tokens only; never
 * color:var(--bg-main) as foreground (KI-020). Mobile: columns stack, the collage
 * reflows to a single full-width column.
 */

/* === Section shell ======================================================== */
body.aibt-universal .universal-about--team-collage-story {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary);
}

/* === Row: text + media ==================================================== */
body.aibt-universal .universal-about--team-collage-story .universal-about__row {
	margin: 0 !important;
	align-items: center;
}

/* === Text column ========================================================== */
body.aibt-universal .universal-about--team-collage-story .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(--accent) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-about--team-collage-story h2.universal-about__headline,
body.aibt-universal .universal-about--team-collage-story .universal-about__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-about--team-collage-story .universal-about__headline em {
	font-style: italic;
	color: var(--accent);
}

body.aibt-universal .universal-about--team-collage-story .universal-about__deck {
	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 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-about--team-collage-story .universal-about__body {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 0 var(--space-lg) 0 !important;
}

/* CTA: solid accent pill reusing the global cta tokens. */
body.aibt-universal .universal-about--team-collage-story .universal-about__actions {
	margin: 0 !important;
}

body.aibt-universal .universal-about--team-collage-story .universal-about__cta .wp-block-button__link {
	background: var(--cta-bg-primary) !important;
	color: var(--cta-text-primary) !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: var(--text-sm) !important;
	letter-spacing: var(--tracking-wide) !important;
	padding: 0.85em 1.9em !important;
	border-radius: var(--decor-radius-pill, 999px) !important;
	transition: background var(--duration-fast, 0.18s) var(--ease-default, ease);
}

body.aibt-universal .universal-about--team-collage-story .universal-about__cta .wp-block-button__link:hover,
body.aibt-universal .universal-about--team-collage-story .universal-about__cta .wp-block-button__link:focus-visible {
	background: var(--accent-hover, var(--accent)) !important;
}

/* Keyboard focus ring (a11y) - visible outline distinct from the hover tint. */
body.aibt-universal .universal-about--team-collage-story .universal-about__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: inherit;
}

/* === Collage =============================================================== */
/* Mobile-first: a single full-width column. The 2-col mosaic engages at the
   desktop breakpoint below. */
body.aibt-universal .universal-about--team-collage-story .universal-about__collage {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(0.75rem, 1.6vw, 1.15rem);
}

/* Each crop fills its grid cell; aspect-ratio set inline per image keeps a
   pleasant default shape on small screens. */
body.aibt-universal .universal-about--team-collage-story .universal-about__photo {
	margin: 0 !important;
	width: 100%;
}

body.aibt-universal .universal-about--team-collage-story .universal-about__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--decor-radius, 0px);
}

/* === Desktop: asymmetric 2-col mosaic (>=782px) =========================== */
@media (min-width: 782px) {
	/* Two columns, three rows. The tall portrait owns the left column across the
	   first two rows; square + wide stack on the right; the detail spans the
	   full width along the bottom for a varied, editorial rhythm. */
	body.aibt-universal .universal-about--team-collage-story .universal-about__collage {
		grid-template-columns: 1.05fr 0.95fr;
		grid-template-rows: auto auto auto;
		gap: clamp(0.85rem, 1.4vw, 1.25rem);
	}

	body.aibt-universal .universal-about--team-collage-story .universal-about__photo--tall {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	body.aibt-universal .universal-about--team-collage-story .universal-about__photo--tall img {
		aspect-ratio: 3 / 4;
	}

	body.aibt-universal .universal-about--team-collage-story .universal-about__photo--square {
		grid-column: 2;
		grid-row: 1;
	}
	body.aibt-universal .universal-about--team-collage-story .universal-about__photo--square img {
		aspect-ratio: 1;
	}

	body.aibt-universal .universal-about--team-collage-story .universal-about__photo--wide {
		grid-column: 2;
		grid-row: 2;
	}
	body.aibt-universal .universal-about--team-collage-story .universal-about__photo--wide img {
		aspect-ratio: 4 / 3;
	}

	/* Detail runs full width under the pair, tying the collage together. */
	body.aibt-universal .universal-about--team-collage-story .universal-about__photo--detail {
		grid-column: 1 / -1;
		grid-row: 3;
	}
	body.aibt-universal .universal-about--team-collage-story .universal-about__photo--detail img {
		aspect-ratio: 16 / 7;
	}
}

/* === Mobile guards ======================================================== */
@media (max-width: 781px) {
	/* Stack columns; media moves below the story. */
	body.aibt-universal .universal-about--team-collage-story .universal-about__textcol,
	body.aibt-universal .universal-about--team-collage-story .universal-about__mediacol {
		flex-basis: 100% !important;
	}
}

@media (max-width: 640px) {
	/* A5: a wide uppercase kicker fragments on phones; cap tracking to 0. */
	body.aibt-universal .universal-about--team-collage-story .universal-about__kicker {
		letter-spacing: 0 !important;
	}
}

/* === Reduced motion ======================================================= */
/* Respect users who prefer no motion: drop the CTA background transition. */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-about--team-collage-story .universal-about__cta .wp-block-button__link {
		transition: none;
	}
}