/* =========================================================================
 * Careers page.
 *
 * Loaded only on the page with the slug "careers" (see zouma_enqueue_assets).
 * Section numbering matches page-careers.php.
 *
 * Built from the Figma frame rather than from measured tokens: the shared
 * scale in style.css is already calibrated against the same file, so sizes
 * here lean on those variables wherever the design agrees with them and only
 * break out where this page genuinely differs.
 * ====================================================================== */

/* =========================================================================
 * 01 · Hero.
 *
 *   Section  #121212 · the header floats over it, dotted world map right,
 *            #0E85B6 wash rising from the bottom edge
 *   Copy     224px in, matching the About hero's proportional inset
 *   Foot     intro left, outlined button held to the right on the same row
 *   Bar      badge strip across the foot, hairline rules
 * ====================================================================== */

.zouma-crhero {
	/* Same proportional inset as the About hero, so the two pages start their
	 * copy on the same line at any width. */
	--zouma-crhero-pad: clamp(1.5rem, calc(11 * var(--zouma-vw)), 14rem);

	/* The widest the hero content ever gets: the 1248 copy row plus its inset
	 * either side.
	 *
	 * --zouma-vw is min(1vw, 14.4px), so every proportional size in the theme
	 * stops growing at the 1440 design width. That is deliberate, but it left
	 * this hero pinned to a 158px inset while the viewport kept widening — on
	 * a 2560 screen the copy and its button sat in the left half with 1150px
	 * of empty space beside them, and the badge strip stretched the full
	 * width underneath. Capping the content here and centring it keeps the
	 * hero proportioned past the design width; below it the cap is wider than
	 * the screen, so nothing about the existing layout changes. */
	--zouma-crhero-max: calc(1248px + 2 * var(--zouma-crhero-pad));

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Content height, not a screenful.
	 *
	 * Stated as 0 rather than simply dropped: the theme gives every direct
	 * child of <main> a `min-height: 100svh` floor, so deleting this would
	 * hand the hero straight back to that rule and change nothing. */
	min-height: 0;
	/* The header floats over the hero rather than sitting above it, so pull the
	 * section up under it and add the height back as padding. */
	margin-top: calc(-1 * var(--zouma-header-h));
	padding-top: calc(var(--zouma-header-h) + 56px);
	background: var(--zouma-dark);
	color: #fff;
	overflow: hidden;
}

.zouma-crhero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* The world map is artwork, not a background pattern — it is anchored to the
 * right half and allowed to run off the frame, as the Figma layer does. */
.zouma-crhero__map {
	position: absolute;
	top: 50%;
	right: -4%;
	width: min(62%, 60rem);
	aspect-ratio: 2 / 1;
	background: url("../images/world-dots.svg") right center / contain no-repeat;
	opacity: 0.5;
	transform: translateY(-52%);
}

/* A radial wash centred on the bottom edge, #0E85B6 fading out. */
.zouma-crhero__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 655px 320px at 52% 100%,
		rgba(14, 133, 182, 0.8) 0%,
		rgba(14, 133, 182, 0.3) 46%,
		rgba(14, 133, 182, 0) 100%
	);
}

.zouma-crhero__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(173, 219, 243, 0.14) 1.4px, transparent 1.6px);
	background-size: 30.5px 29.5px;
}

.zouma-crhero__inner {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
	/* Overrides .zouma-shell: this column is measured from its own inset rather
	 * than the page grid, and only centres once the viewport outgrows the cap. */
	width: 100%;
	max-width: var(--zouma-crhero-max);
	margin-inline: auto;
	padding-inline: var(--zouma-crhero-pad);
}

.zouma-crhero .zouma-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #fff;
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.zouma-crhero .zouma-eyebrow .zouma-icon--spark {
	color: var(--zouma-cyan);
}

.zouma-crhero__title {
	max-width: 18ch;
	margin: 0;
	color: #fff;
	font-family: var(--zouma-font-heading);
	font-size: clamp(2rem, 1.1rem + calc(3 * var(--zouma-vw)), 3.125rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.02em;
}

/* Intro and button share a row. The button is pushed to the far edge of the
 * copy column rather than sitting under the text, which is what gives the hero
 * its wide, shallow proportion. */
.zouma-crhero__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, calc(4 * var(--zouma-vw)), 4rem);
	width: 100%;
	max-width: calc(1280px - 2rem);
	margin-top: 6px;
}

.zouma-crhero__text {
	max-width: 62ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.75;
}

.zouma-crhero__cta {
	flex: 0 0 auto;
}

.zouma-crhero__bar {
	position: relative;
	/* A real gap, not `auto`. Auto pushed the strip to the floor of a
	 * full-screen hero by soaking up the spare height; now that the hero is
	 * only as tall as its content there is no spare height for it to soak up,
	 * so it resolved to 0 and the strip sat against the copy above it. */
	margin-top: clamp(2rem, calc(4 * var(--zouma-vw)), 3.5rem);
	background: rgba(255, 255, 255, 0.03);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* The five badges fit across the strip with no slack, so the gap shrinks
 * rather than the row wrapping. Inset to match the copy above it rather than
 * to the centred container — the bar belongs to the hero, not to the page
 * grid, and the two reading straight down one line is the point. */
.zouma-crhero__bar ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(10px, calc(2.2 * var(--zouma-vw)), 36px);
	/* Same cap and centring as the copy above, so the strip keeps reading down
	 * one line with it instead of spreading to the screen edges. */
	width: 100%;
	max-width: var(--zouma-crhero-max);
	margin: 0 auto;
	padding: 15px var(--zouma-crhero-pad);
	list-style: none;
}

.zouma-crhero__bar li {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, 0.88);
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
	font-weight: 400;
	white-space: nowrap;
}

/* A plain bullet, as on the homepage info bar and the About hero. At this
 * size the mark competed with the five short claims it introduces; a dot
 * separates them without asking to be looked at. */
.zouma-crhero__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	background: var(--zouma-cyan-soft);
	border-radius: 50%;
}

/* Only the hero keeps a screen-height floor, and it sets its own above rather
 * than relying on the theme's shared `main > section` rule. Every other band
 * on this page is as tall as its own content and padding: the theme floor was
 * padding the closing band out to a full screen from 283px of content, and
 * "life" to 900px from 729px. A class outranks that two-element selector. */
.zouma-crben,
.zouma-crlife,
.zouma-crjobs,
.zouma-crjoin {
	min-height: 0;
}

/* =========================================================================
 * 02 · Why work with us.
 *
 *   Section  #FFF with the faint lattice over it, centred head
 *   Grid     one bordered block split into four by hairlines — not four
 *            separate cards, which is why the rules are borders on the cells
 *            rather than gaps between them
 * ====================================================================== */

.zouma-crben {
	position: relative;
	padding-block: clamp(3rem, calc(6 * var(--zouma-vw)), 5.5rem);
	background: #fff;
	overflow: hidden;
}

.zouma-crben__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(14, 133, 182, 0.07) 1.2px, transparent 1.4px);
	background-size: 30px 30px;
	pointer-events: none;
}

.zouma-crben__inner {
	position: relative;
}

.zouma-crben__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: 640px;
	margin: 0 auto clamp(1.75rem, calc(3.5 * var(--zouma-vw)), 2.75rem);
	text-align: center;
}

.zouma-crben .zouma-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.zouma-crben .zouma-eyebrow .zouma-icon--spark {
	color: var(--zouma-cyan);
}

.zouma-crben__title {
	margin: 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.375rem, 1rem + calc(1.2 * var(--zouma-vw)), 1.875rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.zouma-crben__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	border: 1px solid var(--zouma-color-border, #dbe4ec);
	list-style: none;
}

.zouma-crben__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: clamp(1.75rem, calc(3 * var(--zouma-vw)), 2.5rem) clamp(1rem, calc(1.8 * var(--zouma-vw)), 1.75rem);
	text-align: center;
}

/* Hairlines between cells, never on the outside — the block's own border
 * already draws that edge, and doubling them thickens the frame. */
.zouma-crben__card + .zouma-crben__card {
	border-left: 1px solid var(--zouma-color-border, #dbe4ec);
}

.zouma-crben__icon {
	display: grid;
	place-items: center;
	margin-bottom: 8px;
	color: var(--zouma-cyan);
}

.zouma-crben__name {
	margin: 0;
	color: var(--zouma-blue);
	font-family: var(--zouma-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

.zouma-crben__copy {
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	line-height: 1.6;
}

/* =========================================================================
 * 03 · Life at Zouma.
 *
 *   Section  #E1EDF9 · copy left, the benefits listed out on the right
 *   Rows     rule above each, so the list opens with a line and leaves none
 *            hanging under the last item
 * ====================================================================== */

.zouma-crlife {
	padding-block: clamp(3rem, calc(6 * var(--zouma-vw)), 5.5rem);
	background: var(--zouma-blue-pale);
}

.zouma-crlife__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
	gap: clamp(2rem, calc(5 * var(--zouma-vw)), 4.5rem);
	align-items: start;
}

/* The copy rides down with the reader.
 *
 * The list opposite runs well over twice the height of this column, so without
 * this the heading scrolls away and the rows lose the thing they are answering.
 * As a grid item it sticks inside its own grid area — the full height of the
 * row — so it releases again at the foot of the list rather than escaping the
 * section. The offset clears the sticky site header. */
.zouma-crlife__copy {
	position: sticky;
	top: calc(var(--zouma-header-h, 76px) + 24px);
}

.zouma-crlife .zouma-eyebrow,
.zouma-crjobs .zouma-eyebrow,
.zouma-crjoin .zouma-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 1.125rem;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.zouma-crlife .zouma-eyebrow .zouma-icon--spark,
.zouma-crjobs .zouma-eyebrow .zouma-icon--spark,
.zouma-crjoin .zouma-eyebrow .zouma-icon--spark {
	color: var(--zouma-cyan);
}

.zouma-crlife__title,
.zouma-crjobs__title {
	margin: 0 0 1rem;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.5rem, 1rem + calc(1.4 * var(--zouma-vw)), 2.125rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.02em;
}

.zouma-crlife__lede,
.zouma-crjobs__lede {
	max-width: 42ch;
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
	line-height: 1.7;
}

.zouma-crlife__list {
	margin: 0;
}

.zouma-crlife__row {
	display: grid;
	grid-template-columns: 40% minmax(0, 1fr);
	column-gap: 4%;
	align-items: start;
	padding-block: clamp(1.125rem, calc(2 * var(--zouma-vw)), 1.625rem);
	border-top: 1px solid rgba(18, 18, 18, 0.12);
}

.zouma-crlife__name {
	margin: 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

.zouma-crlife__text {
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	line-height: 1.65;
}

/* =========================================================================
 * 04 · Current openings.
 *
 *   Section  #FFF · copy left, filters and the role list on the right
 *   Filters  three menus across, native selects with the caret drawn over
 *   Role     title and meta left, the apply button held to the top right
 * ====================================================================== */

.zouma-crjobs {
	padding-block: clamp(3rem, calc(6 * var(--zouma-vw)), 5.5rem);
	background: #fff;
	/* The hero's "View Open Roles" links here, and the header floats over the
	 * page, so the anchor needs to clear it. */
	scroll-margin-top: calc(var(--zouma-header-h) + 24px);
}

.zouma-crjobs__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
	gap: clamp(2rem, calc(5 * var(--zouma-vw)), 4.5rem);
	align-items: start;
}

.zouma-crjobs__filters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: clamp(1.25rem, calc(2.4 * var(--zouma-vw)), 1.75rem);
}

/* The caret is drawn over a native select rather than replacing it: the menu
 * itself stays the platform's, which is the one that behaves properly on a
 * phone and with a keyboard. */
.zouma-crjobs__filter {
	position: relative;
	margin: 0;
}

.zouma-crjobs__filter select {
	width: 100%;
	padding: 9px 34px 9px 12px;
	background: #fff;
	border: 1px solid var(--zouma-color-border, #dbe4ec);
	border-radius: 4px;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	line-height: 1.5;
	appearance: none;
	cursor: pointer;
}

.zouma-crjobs__filter select:focus-visible {
	outline: 2px solid var(--zouma-blue);
	outline-offset: 1px;
}

.zouma-crjobs__filter .zouma-icon {
	position: absolute;
	top: 50%;
	right: 12px;
	color: var(--zouma-color-muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.zouma-crjobs__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.zouma-crjobs__job {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: clamp(1.125rem, calc(2 * var(--zouma-vw)), 1.5rem);
	border-top: 1px solid var(--zouma-color-border, #dbe4ec);
}

/* Hidden by the filter script. Also collapses the rule above it, so a
 * filtered list never opens on a stray line. */
.zouma-crjobs__job[hidden] {
	display: none;
}

.zouma-crjobs__body {
	min-width: 0;
}

.zouma-crjobs__role {
	margin: 0 0 8px;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.zouma-crjobs__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	line-height: 1.5;
}

.zouma-crjobs__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.zouma-crjobs__meta .zouma-icon {
	flex: 0 0 auto;
	color: var(--zouma-color-muted);
}

.zouma-crjobs__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.zouma-crjobs__tags li {
	padding: 4px 9px;
	background: var(--zouma-blue-pale);
	border-radius: 3px;
	color: var(--zouma-blue);
	font-family: var(--zouma-font-body);
	font-size: 0.5625rem;
	font-weight: 500;
	line-height: 1.4;
}

.zouma-crjobs__apply {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--zouma-blue);
	border-radius: 4px;
	color: #fff;
	font-family: var(--zouma-font-body);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background var(--zouma-transition);
}

.zouma-crjobs__apply:hover {
	background: var(--zouma-teal);
	color: #fff;
}

.zouma-crjobs__empty {
	margin: 0;
	padding-block: clamp(1.5rem, calc(3 * var(--zouma-vw)), 2.5rem);
	border-top: 1px solid var(--zouma-color-border, #dbe4ec);
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
	line-height: 1.6;
	text-align: center;
}

.zouma-crjobs__all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: clamp(1.25rem, calc(2.4 * var(--zouma-vw)), 1.75rem);
	padding: 11px 16px;
	background: #fff;
	border: 1px solid var(--zouma-color-border, #dbe4ec);
	border-radius: 4px;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	transition: background var(--zouma-transition), border-color var(--zouma-transition);
}

.zouma-crjobs__all:hover {
	background: var(--zouma-blue-pale);
	border-color: var(--zouma-sky);
	color: var(--zouma-color-text);
}

/* =========================================================================
 * 05 · Join Zouma.
 *
 *   Section  #E1EDF9 · copy left, the CV button held to the right
 * ====================================================================== */

.zouma-crjoin {
	padding-block: clamp(2.5rem, calc(5 * var(--zouma-vw)), 4.5rem);
	background: var(--zouma-blue-pale);
}

.zouma-crjoin__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, calc(4 * var(--zouma-vw)), 4rem);
}

.zouma-crjoin__title {
	margin: 0 0 0.625rem;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.5rem, 1rem + calc(1.4 * var(--zouma-vw)), 2.125rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.02em;
}

.zouma-crjoin__lede {
	max-width: 62ch;
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
	line-height: 1.7;
}

.zouma-crjoin__cta {
	flex: 0 0 auto;
}

/* =========================================================================
 * Responsive.
 * ====================================================================== */

@media (max-width: 1024px) {
	/* The strip cannot hold five badges on one line at this width, so it wraps
	 * and centres rather than shrinking the type below reading size.
	 *
	 * Stated at 1024 rather than 760, where it used to sit. Five badges need
	 * about 1100px, so between 761 and 1024 the row was still nowrap: it ran
	 * past the screen and .zouma-crhero clips, so the last badge and a half
	 * were cut off with no sign anything was missing. */
	.zouma-crhero__bar ul {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 10px 20px;
		padding-block: 14px;
	}

	.zouma-crlife__inner,
	.zouma-crjobs__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* One column now — the copy sits above the list it introduces, so there is
	 * nothing for it to ride alongside. */
	.zouma-crlife__copy {
		position: static;
	}

	.zouma-crben__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* With two per row the "every cell but the first" rule draws a line down
	 * the wrong edges, so the hairlines are redrawn per position. */
	.zouma-crben__card + .zouma-crben__card {
		border-left: 0;
	}

	.zouma-crben__card:nth-child(2n) {
		border-left: 1px solid var(--zouma-color-border, #dbe4ec);
	}

	.zouma-crben__card:nth-child(n + 3) {
		border-top: 1px solid var(--zouma-color-border, #dbe4ec);
	}
}

@media (max-width: 760px) {
	.zouma-crhero {
		padding-block: calc(var(--zouma-header-h) + 48px) 0;
	}

	.zouma-crhero__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.zouma-crhero__map {
		opacity: 0.28;
	}

	.zouma-crjobs__filters {
		grid-template-columns: minmax(0, 1fr);
	}

	.zouma-crjobs__job {
		flex-direction: column;
		gap: 14px;
	}

	.zouma-crjoin__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 560px) {
	.zouma-crben__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.zouma-crben__card:nth-child(2n) {
		border-left: 0;
	}

	.zouma-crben__card:nth-child(n + 2) {
		border-top: 1px solid var(--zouma-color-border, #dbe4ec);
	}

	.zouma-crlife__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 6px;
	}
}