/* Components shared by every page, from Figma "Revised / Option 1". */

/* Section titles (70:719, 70:727) */
.section-title {
	color: var(--blue);
	font-weight: 700; font-size: 35px; line-height: 1.1;
	text-transform: uppercase;
}

/* Cream strip that heads a section (Figma 70:621, 70:772, 70:747).
   The route's 20% yellow line is the strip's own background across the
   content box; icon and title sit over it on solid cream, full strip height,
   so the line runs out from behind any title. Stations (cream-filled rings)
   are drawn on the flexible track after the title with 'space', so only
   whole stations ever show. */
.strip {
	--route: rgba(252, 182, 49, 0.2);
	display: flex; align-items: stretch;
	min-height: 66px;
	background:
		linear-gradient(var(--route), var(--route)) left center / 100% 4px no-repeat content-box,
		var(--cream);
}
.strip::after {
	content: ""; flex: 1 1 0; min-width: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='25' viewBox='0 0 80 25'%3E%3Ccircle cx='40' cy='12.5' r='12.2' fill='%23fff8ea'/%3E%3Ccircle cx='40' cy='12.5' r='10.2' fill='none' stroke='%23fcb631' stroke-opacity='.2' stroke-width='4'/%3E%3C/svg%3E") left center / 80px 25px space no-repeat;
}
.strip__icon, .strip__title { display: flex; align-items: center; background: var(--cream); }
.strip__icon { flex: none; justify-content: center; width: 51px; padding-right: 9px; }
.strip__icon img { width: auto; height: auto; }
.strip__title {
	flex: 0 1 auto; min-width: 0;
	padding-right: 24px;
	color: var(--ink);
	font-weight: 700; font-size: 20px; line-height: 1.1; letter-spacing: 3px;
	text-transform: uppercase;
}

/* Small blue tracked label over a list (Figma 70:638) */
.label {
	margin-bottom: 12px;
	color: var(--blue);
	font-weight: 700; font-size: 18px; line-height: 1.1; letter-spacing: 2.7px;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Blue intro band: yellow uppercase title, white copy, photo flush right.
   Used as the first section on pages without a Figma hero. */
.intro {
	display: grid; grid-template-columns: 50% 50%;
	background: var(--blue); color: var(--white);
}
.intro__text { padding: 64px 5.5556cqw 64px var(--gutter); } /* 80 @1440 on the inside edge */
.intro__text > * + * { margin-top: 1em; }
.intro__title {
	color: var(--yellow);
	font-weight: 700; font-size: clamp(36px, 3.3333cqw, 48px); line-height: 1.05; /* 48 @1440 */
	text-transform: uppercase;
}
.intro__text > .intro__title + * { margin-top: 16px; }
.intro__media { position: relative; min-height: 360px; }
.intro__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.on-blue .link { color: var(--white); }

/* Feature band: text left, photo flush to the band's top and bottom
   (Figma Onsite Hiring Events, 70:623-728) */
.feature {
	display: grid; grid-template-columns: 47.2917% 44.375% 1fr;
	min-height: 516px;
	background: var(--cream-60);
}
.feature__text { padding: 59px 0 78px var(--gutter); }
.feature__text > .section-title + * { margin-top: 15.5px; }
.feature__media { position: relative; }
.feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Cards on the --sky band (Figma position cards, 70:619, 70:678-706) */
.positions { background: var(--sky); padding-block: 29px 38px; }
.positions__grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 24px 3.125cqw;
}
/* Each card is a 5-row subgrid (image / title / wages / button / link) sharing its
   3 siblings' row tracks, so the button lands on the same line in every card no matter
   how many lines the title or wages wrap to at a given width - the fixed-line-count
   min-heights this replaced broke as soon as real copy wrapped past what they assumed. */
.card {
	display: grid; grid-template-rows: subgrid; grid-row: span 5; justify-items: center;
	min-height: 359px;
	padding: 18px 19px 25px; /* 27 in Figma, minus the link's 2px target padding */
	border-radius: var(--radius-card);
	background: var(--white);
	text-align: center;
}
.card__img {
	/* aspect-ratio sizes each card's own row-1 contribution (so the taller --tall photo still
	   decides the shared row height); height:100% then wins once that height is resolved,
	   stretching every image in the row to match it, cropped via object-fit. */
	align-self: stretch;
	width: 100%; height: 100%; aspect-ratio: 348 / 140; object-fit: cover;
	margin-bottom: 26px;
	border-radius: var(--radius-card);
}
.card--tall .card__img { aspect-ratio: 348 / 175; margin-bottom: 21px; }
.card__title {
	display: flex; align-items: center; justify-content: center;
	color: var(--blue);
	font-weight: 700; font-size: 18px; line-height: 1.1; letter-spacing: 1.8px;
	text-transform: uppercase;
	text-wrap: balance;
}
.card__wages { display: flex; flex-direction: column; justify-content: center; }
.card__meta { margin-top: 1px; }
.card .btn { align-self: start; margin-top: 16px; }
.card__link { margin-top: 16px; padding-block: 2px; color: var(--blue); font-size: 16px; line-height: 1.4; } /* 26px target, same text position */

/* Icon circle in place of a card photo (Figma benefits icons, 70:729) */
.icon-circle {
	display: grid; place-items: center;
	width: 95px; height: 95px;
	border-radius: 50%; background: var(--blue);
}
.icon-circle img { width: auto; height: auto; }

/* Text beside a rounded photo */
.split {
	display: grid; grid-template-columns: 53.85% 1fr; column-gap: 4.4872%; /* 672 | 56 | 520 @1440 */
	align-items: start;
	padding-block: 48px;
}
.split__text > * + * { margin-top: 1em; }
.split__text > .section-title + * { margin-top: 16px; }
.split__media img { width: 100%; height: auto; border-radius: var(--radius-card); }

/* Centered band on --ice (Figma benefits band, 70:620) */
.band-ice { padding-block: 40px 52px; background: var(--ice); text-align: center; }
.band-ice .btn { margin-top: 24px; }

/* Embedded third-party page (Granicus) */
.embed iframe { display: block; width: 100%; height: var(--embed-h, 555px); border: 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

@media (max-width: 899px) {
	.intro { grid-template-columns: minmax(0, 1fr); }
	.intro__text { padding: 48px var(--gutter); }
	.intro__media { order: -1; min-height: 0; aspect-ratio: 3 / 2; }

	.feature { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.feature__text { padding: 48px var(--gutter); }
	.feature__media { aspect-ratio: 639 / 516; }

	.positions__grid { grid-template-columns: minmax(0, 1fr); }
	.card { min-height: 0; }
}

@media (max-width: 767px) {
	.split { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding-block: 40px; }
	.split__media { order: -1; }

	.strip { padding-block: 10px; }
	.strip__title { font-size: 18px; letter-spacing: 2px; }
}
@media (max-width: 559px) {
	.section-title { font-size: 28px; }
}