/**
 * Team Bio — Our Team section 5.
 *
 * Read off the .fig node:
 *   section   1920x766, #010101 with the dusk photo over it at 30% (STRETCH)
 *   container 1297 wide at x 240, y 120, stack gap 60
 *   title     mark 115x35, then 30, then the name at 64/72 #FFFFFF
 *   body      frame 1207 wide with 50px left padding — the green rule is that
 *             padding, the copy itself is 657 wide at 20/32 #FFFFFF
 *   portrait  905x1430 at x 990, y 102 — taller than the band, so clipped
 */

.team-bio {
	position: relative;
	overflow: hidden;
}

.team-bio__inner {
	position: relative;
	z-index: 2;
}

/* --- head ------------------------------------------------------------ */
/* 30 at the developer's instruction, down from the 60 the .fig draws. */
.team-bio__head {
	margin-bottom: var(--space-30);
}

.team-bio__heading {
	max-width: 1297px;
	margin: 0;
	color: var(--white);
}

.team-bio__heading span {
	color: var(--primary-green);
}

/* --- biography -------------------------------------------------------- */
/* The 50px inset in the design is a rule, not padding for its own sake: a 4px
 * green bar runs the full height of the copy block. */
.team-bio__text {
	position: relative;
	max-width: 707px;
	padding-left: 50px;
	color: var(--white);
}

.team-bio__text::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background-color: var(--primary-green);
	content: "";
}

.team-bio__text p {
	margin: 0;
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: var(--lh-body);
}

.team-bio__text p + p {
	margin-top: var(--space-25);
}

.team-bio__text strong,
.team-bio__text b {
	font-weight: 700;
}

.team-bio__text a {
	color: var(--primary-green);
	text-decoration: underline;
}

/* --- portrait ---------------------------------------------------------- */
/* Anchored to the container's right edge rather than the viewport's, so the
 * cut-out keeps its designed relationship to the copy as the page narrows.
 * The band clips it: the portrait is nearly twice the section's height.
 *
 * The trailing constant is how far the portrait OVERHANGS the content box.
 * The design draws it at x 990 on the 1920 canvas, so its right edge is
 * 990 + 905 = 1895 against a content box ending at 1680 — an overhang of 215,
 * not the 155 this was built with, which left it 60px left of the design
 * (measured against the export: shirt edge 1279 live vs 1338 drawn). */
.team-bio__portrait {
	position: absolute;
	top: var(--team-bio-portrait-top, 0);
	left: 50%;
	z-index: 1;
	width: var(--team-bio-portrait-w, 905px);
	height: var(--team-bio-portrait-h, auto);
	margin-left: calc(var(--container-max, 1440px) / 2 - var(--team-bio-portrait-w, 905px) + 215px);
	pointer-events: none;
}

.team-bio__portrait-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top center;
}

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1440px) {

	.team-bio__portrait {
		left: auto;
		right: 0;
		margin-left: 0;
	}
}

/* Below 1440 the portrait stops being container-anchored and pins to the
 * viewport edge (above), which walks it left onto the copy as the page narrows.
 * The pair this replaced asked for 60% portrait + 60% text — 120% of the row,
 * so an overlap was guaranteed by arithmetic, and the figure crossed the text
 * from 1440 all the way down to 992: at 1200 the last five lines ran across his
 * face and shoulder.
 *
 * 50/50 clears it. The cut-out's own figure starts ~19% into its box and ends
 * ~82% across, so half the viewport pinned right keeps the man off a text column
 * that ends at half, with room to spare at every width in the band. */
@media (max-width: 1440px) {

	/* Bottom-anchored, not top. The cut-out's own lower edge is a hard cut across
	 * the waist; at 1920 it is invisible because the 102px top offset lands that
	 * cut exactly on the band's bottom. Narrowing the portrait shortens it — 600
	 * wide renders 440 tall — while the 50% text column wraps to more lines and
	 * grows the band, so the two diverge and the cut surfaced as a straight line
	 * across the middle. Sitting it on the band's bottom edge puts the cut back
	 * where the band can clip it, at every height the copy produces. */
	.team-bio__portrait {
		top: auto;
		bottom: 0;
		/* The 1430px box comes from the row and only makes sense top-anchored:
		 * `object-position: top` paints the photo at the box's top, so keeping it
		 * while anchoring the bottom hung the 1430 box off the band's foot and
		 * put the image 198px ABOVE the band, out of sight entirely. Sized to the
		 * photo instead, so bottom:0 is the photo's bottom. */
		height: auto;
		width: 50%;
	}

	.team-bio__text {
		max-width: 50%;
	}
}

/* Below the two-column threshold the cut-out stops being a background element
 * and becomes the last block in the flow, under the biography, at the
 * developer's instruction (it used to be dropped entirely).
 *
 * It sits FLUSH on the band's bottom edge. The photo's lower boundary is a hard
 * cut across the waist — the same cut the desktop layout hides by landing it on
 * the band's foot — so left floating above the section's bottom padding it would
 * read as a chopped-off photo. The negative margin is the section rhythm token,
 * not a literal, so it stays exact as that steps 120 -> 80 -> 60.
 *
 * Capped at 600 and centred rather than filling the width. Uncapped, an iPad at
 * 834 rendered the box 834x568 — a head-and-shoulders shot blown up until it ran
 * the band to 1051px tall. 600 keeps the figure near the ~565px it is drawn at
 * on the 1920 canvas; below ~660 the viewport is the smaller of the two and the
 * container padding takes over. */
@media (max-width: 991px) {

	.team-bio__portrait {
		position: static;
		width: 100%;
		max-width: 600px;
		height: auto;
		margin: var(--space-40) auto calc(var(--section-rhythm) * -1);
		padding-inline: var(--container-pad);
	}

	.team-bio__text {
		max-width: none;
	}
}

@media (max-width: 767px) {

	.team-bio__text {
		padding-left: var(--space-25);
	}
}