/**
 * "Join the Team!" hub page.
 *
 * Figures are sized from a 1920px design canvas: the photo is 872.86x597.82
 * inset ~177px from the page edge, rows are ~200px apart, and the type scales
 * are expressed in vw against 1920 so the layout holds at other widths.
 */

/* #content is a flex row and GeneratePress leaves <main> at flex 0 1 auto, so
   without this it shrink-wraps its widest row instead of filling the viewport.
   The clip keeps the overhanging dots from ever scrolling the page. */
.rth-jointeam {
	flex: 1;
	min-width: 0;
	overflow-x: clip;
}

/* Same gutter as the header's gold bar, so page content lines up with it. */
.jointeam {
	position: relative;
	margin-inline: var(--header-gutter);
	padding-block: var(--space-xl) var(--space-2xl);
}

/* Head */
.jointeam__head {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(1rem, 3vw, 3.5rem);
	margin-bottom: clamp(2.5rem, 5vw, 5.5rem);
}

/* The paws flank the title and sit low against it, as in the design. */
.jointeam__paw {
	flex: 0 0 auto;
	align-self: flex-end;
}

.jointeam__paw--left {
	width: 65px;
	height: 64px;
}

.jointeam__paw--right {
	width: 47.64px;
	height: 46.91px;
	margin-bottom: clamp(0.25rem, 1vw, 1rem);
}

/* Rows */
.jointeam__rows {
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 10.4vw, 200px);
}

/* The photo track caps at its design width but may shrink, so a narrow viewport
   trims the photo rather than pushing the button out of the row. */
.jointeam__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 870px) 1fr;
	align-items: center;
	gap: var(--space-lg);
}

.jointeam__row--media-last {
	grid-template-columns: 1fr minmax(0, 870px);
}

.jointeam__row--media-last .jointeam__media {
	grid-column: 2;
}

.jointeam__row--media-last .jointeam__cta {
	grid-column: 1;
	grid-row: 1;
}

/* Both sit above the dots, which are absolutely placed behind them. The figure
   is also the dots' containing block, so they position off the photo's edges. */
.jointeam__media,
.jointeam__cta {
	position: relative;
	z-index: 1;
}

.jointeam__media {
	margin: 0;
}

.jointeam__img {
	display: block;
	width: 100%;
	max-width: 870px;
	aspect-ratio: 870 / 595.86; /* the design's 872.86 x 597.82, scaled to 870 */
	object-fit: cover;
	border-radius: var(--radius);
}

/* Button */
.jointeam__cta {
	display: flex;
	justify-content: center;
}

/* Appearance comes from .rth-btn-olive in style.css. */

/* Scattered dots behind the first and last photos. Decorative, so they never
   take pointer events or affect layout. Offsets are percentages of the dots'
   own box (via transform) so the placement holds as the artwork scales. */
.jointeam__dots {
	position: absolute;
	z-index: -1;
	width: clamp(240px, 30.7vw, 536px);
	height: auto;
	pointer-events: none;
}

.jointeam__row:first-child .jointeam__dots {
	left: -8%;
	top: 45%;
}

/* Wraps the photo's top-right corner: anchored to it, then pushed out past
   both edges so the dots fall above the photo and down its right side. */
.jointeam__row:last-child .jointeam__dots {
	right: 0;
	top: 0;
	transform: translate(34.8%, -26%);
}

/* One column once the fixed photo width no longer fits beside a button. */
@media (max-width: 1300px) {
	.jointeam__row,
	.jointeam__row--media-last {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: var(--space-lg);
	}

	.jointeam__row--media-last .jointeam__media,
	.jointeam__row--media-last .jointeam__cta {
		grid-column: 1;
		grid-row: auto;
	}

	.jointeam__img {
		max-width: none;
	}

	.jointeam__dots {
		display: none;
	}
}