/*
 * Careers page — a dark hero stating that the company is hiring, the owner's
 * optional prose, and the light closing band with the one button to the jobs
 * site.
 *
 * Deliberately a short page: no listing grid and no form, because open
 * positions live on the separate jobs project.
 *
 * Mobile-first: every block is a single column and only gains a side-by-side
 * layout at a breakpoint, so nothing can scroll sideways at 320px. Every
 * colour, size, radius, shadow and transition comes from the design tokens in
 * assets/css/design-tokens.css (mirrored in style.css). The button itself is
 * the shared .btn / .btn--primary from style.css — the same look as the Home
 * page call to action — so nothing here restyles it.
 */

/* ==========================================================================
   Hero — dark band, alternating with the light call-to-action band below
   ========================================================================== */

.careers-hero {
	background: var(--color-surface-dark);
	color: var(--color-text-invert);
}

.careers-hero__inner {
	padding-block: clamp(var(--space-12), 9vw, var(--space-20));
}

/*
 * Breadcrumbs come from Yoast SEO and sit on the dark hero, so their links
 * cannot use the default link colour (primary-600 on primary-900 is 2.0:1, far
 * below the contrast floor). This page loads only careers.css, so the inverted
 * rules have to be here too.
 */
.breadcrumbs--invert {
	margin-bottom: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-neutral-100);
}

.breadcrumbs--invert a {
	color: var(--color-accent-300);
	text-decoration: underline;
}

.breadcrumbs--invert a:hover,
.breadcrumbs--invert a:focus {
	color: var(--color-neutral-50);
}

.careers-hero__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-accent-300);
}

.careers-hero__title {
	margin: 0 0 var(--space-5);
	max-width: 24ch;
	font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl));
	color: var(--color-neutral-50);
}

.careers-hero__lead {
	max-width: 58ch;
	margin: 0 0 var(--space-6);
	font-size: clamp(var(--text-base), 2.2vw, var(--text-lg));
	color: var(--color-neutral-100);
}

.careers-hero__meta {
	max-width: 58ch;
	margin: 0;
	padding-top: var(--space-5);
	border-top: 1px solid rgba(248, 249, 250, 0.25);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-neutral-200);
}

/* ==========================================================================
   Owner-written body copy, shown only when the page has content
   ========================================================================== */

.careers-body {
	background: var(--color-bg);
	color: var(--color-text);
}

.careers-body__inner {
	padding-block: clamp(var(--space-10), 7vw, var(--space-16));
}

.careers-body__inner > :first-child {
	margin-top: 0;
}

.careers-body__inner > :last-child {
	margin-bottom: 0;
}

.careers-body__inner h2,
.careers-body__inner h3 {
	max-width: 30ch;
	font-size: clamp(var(--text-lg), 3vw, var(--text-2xl));
}

.careers-body__inner p,
.careers-body__inner li {
	max-width: var(--measure);
	font-size: var(--text-base);
	color: var(--color-text-muted);
}

/* ==========================================================================
   The one call to action
   ========================================================================== */

.careers-cta {
	background: var(--color-surface);
	color: var(--color-text);
	border-top: 1px solid var(--color-border);
}

.careers-cta__inner {
	padding-block: var(--space-section);
}

.careers-cta__title {
	margin: 0 0 var(--space-4);
	max-width: 30ch;
	font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
}

.careers-cta__text {
	max-width: 58ch;
	margin: 0 0 var(--space-8);
	font-size: var(--text-lg);
	color: var(--color-text-muted);
}

.careers-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin: 0 0 var(--space-5);
	max-width: none;
}

.careers-cta__meta {
	max-width: 58ch;
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

@media (min-width: 768px) {
	.careers-cta__inner {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		grid-template-areas:
			"title actions"
			"text  meta";
		column-gap: var(--space-12);
		align-items: start;
	}

	.careers-cta__title {
		grid-area: title;
	}

	.careers-cta__text {
		grid-area: text;
		margin-bottom: 0;
	}

	.careers-cta__actions {
		grid-area: actions;
		justify-content: flex-end;
		margin-bottom: var(--space-4);
	}

	.careers-cta__meta {
		grid-area: meta;
		text-align: right;
	}
}