/* ===========================================================================
   intro-photo-pair — the work and the person, one laid over the other
   ---------------------------------------------------------------------------
   Scope: .vbs-intro-photo-pair
   Depends on: css/tokens.css, css/base.css
   Contains no literal colour, font, size, radius, shadow or duration.

   The move: two portraits, and the second is laid over the first. The
   building sits back and large; the person sits forward, smaller, over its
   lower-right third, on the pop shadow. Both carry the card radius so they
   read as two prints on a desk rather than a collage. The copy is a
   headline, a lead and one paragraph — no figures, no timeline.
   ========================================================================= */

.vbs-intro-photo-pair__layout {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 64rem) {
	.vbs-intro-photo-pair__layout {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		column-gap: clamp(3rem, 7vw, 7rem);
	}
}

.vbs-intro-photo-pair__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}
.vbs-intro-photo-pair__title {
	max-inline-size: 14ch;
	text-wrap: balance;
}
.vbs-intro-photo-pair__lead,
.vbs-intro-photo-pair__text { max-inline-size: 42ch; }

/* --- the pair ------------------------------------------------------------- */
.vbs-intro-photo-pair__pair {
	position: relative;
	/* room below and right for the front print to overhang */
	padding-block-end: 18%;
	padding-inline-end: 22%;
}
.vbs-intro-photo-pair__photo {
	border-radius: var(--vb-radius-card);
	box-shadow: var(--vb-shadow-card);
}
.vbs-intro-photo-pair__photo--back { inline-size: 100%; }
.vbs-intro-photo-pair__photo--front {
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: 0;
	inline-size: 46%;
	box-shadow: var(--vb-shadow-pop);
	border: calc(var(--vb-border-hair) * 3) solid var(--vb-surface);
}