/* Employment page (Figma "Revised / Option 1", node 70:610). Values are
   Figma px at the 1440 frame; vw/% versions scale with the viewport. */

/* Hero (70:611-618). Scales like the artboard above 1440. */
.hero {
	position: relative; overflow: hidden;
	min-height: max(389px, 27.0139cqw);
	background: var(--blue) url(../img/hero-bg.webp) center / cover no-repeat;
	color: var(--white);
}
.hero__text {
	position: relative; z-index: 1;
	padding: max(135px, 9.375cqw) 0 48px var(--hero-inset);
}
.hero__title {
	color: var(--yellow);
	font-weight: 700; font-size: clamp(40px, 4.1667cqw, 60px); line-height: 1; /* 60 @1440 */
	text-transform: uppercase;
}
.hero__intro { width: 34.7222cqw; margin-top: 7px; font-size: 18px; line-height: 1.4; }
.hero__people { position: absolute; inset: 0; pointer-events: none; }
.hero__person { position: absolute; height: auto; }
/* Figma's tops, but never let a figure's cut-off bottom edge float above the band: the second
   term is the band height minus the figure's height (its width x the photo's height:width, in cqw).
   Below ~1020px the band stops being tall enough for Figma's position and the figure slides down to fit. */
.hero__person--1 { left: 49.0972%; top: max(2.2222cqw, calc(100% - 36.043cqw)); width: 21.9444%; }
.hero__person--2 { left: 60.2778%; top: max(-1.7361cqw, calc(100% - 46.805cqw)); width: 30.4861%; }

@media (max-width: 899px) {
	.hero { display: flex; flex-direction: column; min-height: 0; }
	.hero__text { padding: 48px var(--gutter) 24px; }
	.hero__title { font-size: clamp(40px, 10cqw, 60px); }
	.hero__intro { width: auto; }
	/* Same composition as desktop: the two overlap (her shoulder behind his) and the band clips
	   them at the chest. Sized from the man's height (--h2, capped so the pair fits the width),
	   the woman at desktop's 0.77 ratio, the pair centered; 0.609 / 0.651 are the photos' width:height
	   and 0.51 is desktop's overlap. Height-driven, so a swapped photo needs those ratios updated. */
	.hero__people {
		--hp: clamp(280px, 72cqw, 460px);
		--h2: min(calc(var(--hp) * 1.32), 104cqw);
		--h1: calc(var(--h2) * 0.77);
		--w1: calc(var(--h1) * 0.609);
		--left1: calc((100cqw - 0.51 * var(--w1) - 0.651 * var(--h2)) / 2);
		position: relative; inset: auto; height: var(--hp);
	}
	.hero__person { bottom: auto; width: auto; }
	.hero__person--1 { left: var(--left1); top: 10%; height: var(--h1); }
	.hero__person--2 { left: calc(var(--left1) + 0.51 * var(--w1)); top: -3%; height: var(--h2); }
}

/* Soft handoff for the in-page anchor links (skipped when the visitor asks for reduced motion). */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Role sections (70:621-666, 70:707-784). Strip + labels live in components.css. */
.role__body { padding-block: 22px 48px; }
.role__intro { width: 81.49%; }
.role__cols, .role__foot {
	display: grid; grid-template-columns: 42.1474% 1fr; column-gap: 4.4872%;
}
.role__cols { margin-top: 24px; }
.role__foot--solo { grid-template-columns: minmax(0, 1fr); }
.role__foot--solo .role__note { width: 82.05%; } /* Figma 70:647: 1024 wide */
.role__resp .bullets { width: 80.93%; margin-left: 3px; } /* Figma bullets at x681 */
.role__rule { margin: 26px 0 24px; }
.role__note { line-height: 26px; }
.role__apply { margin-top: 23px; }
.quote { align-self: start; margin-top: 26px; padding-left: 21px; border-left: 6px solid var(--yellow); }
.quote p { width: 68.23%; font-weight: 700; font-size: 20px; line-height: 1.1; }
.quote figcaption { margin-top: 11px; font-weight: 500; font-size: 18px; line-height: 1.1; }

@media (max-width: 767px) {
	.role__intro, .role__resp .bullets, .role__foot--solo .role__note, .quote p { width: auto; }
	.role__cols, .role__foot { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
	.quote { margin-top: 8px; }
}

/* Benefits (70:620, 70:719-736) */
.benefits { padding-block: 40px 52px; background: var(--ice); text-align: center; }
.benefits__title { letter-spacing: 5.25px; }
.benefits__intro { width: 62.58%; margin: 16px auto 0; line-height: 24px; }
.benefits__list { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; }
.benefits__list li {
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	min-height: 228px;
}
.benefits__list li + li::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 0; /* grows with the column; 228 @1440 */
	width: 1px;
	background: var(--dash-v);
}
.benefits__list p { width: 80.77%; margin-top: 18px; font-weight: 500; line-height: 22px; text-wrap: balance; }
.benefits__detail { display: block; font-weight: 400; }

/* Onsite hiring events (70:623-728); band layout is .feature in components.css */
.events__title { letter-spacing: 3.5px; }
.events__copy { width: 82.9%; margin-top: 15.5px; }
.events__notice { margin-top: 1.4em; }
.events__list { margin-top: 1.4em; }
.events__list li + li { margin-top: 1.4em; }
.events__list a { padding-block: 3px; color: var(--blue); } /* inline padding lifts the target past 24px (WCAG 2.5.8) */
.events__btn { min-width: min(303px, 100%); margin-top: calc(1.4em + 2px); }
/* The photo never gets flatter than itself (1278x1032), so wide screens can't
   crop the top row of heads; spare height goes to the band, and any crop that
   remains comes off the bottom. */
.events .feature__text { align-self: center; }
.events .feature__media::before { content: ""; display: block; padding-top: 80.75%; }
.events .feature__media img { object-position: 50% 0; }

@media (max-width: 899px) {
	.benefits__intro { width: auto; }
	.benefits__list { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
	.benefits__list li { min-height: 0; }
	.benefits__list li + li::before { display: none; }

	.events__copy { width: auto; }
}
@media (max-width: 559px) {
	.benefits__list { grid-template-columns: minmax(0, 1fr); }
}