/**
 * A single job posting (template-parts/jobs/job-single.php).
 *
 * Title above, then two columns: content and a sticky facts panel.
 */

.job {
	/* Top: 64px, not the 100px --section-pad-y every other section opens with.
	   Deliberate, and not a bare number - 64 is the value --section-pad-y
	   itself steps to below 1024, so this is the step the site already has,
	   used at desktop as well. Below the breakpoint the two are identical and
	   this declaration changes nothing.

	   Scoped to the TOP of this template only. If the shorter opening is
	   wanted elsewhere, it is this one declaration moved to the templates that
	   want it, or promoted to a token if it turns out to be most of them. */
	padding-top: 4rem; /* 64px */
	padding-bottom: var(--section-pad-y);
}

/* --------------------------------------------------------------------
 * Breadcrumb
 * -------------------------------------------------------------------- */

.job__crumbs-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-line);
	font-weight: 400;
	color: var(--color-text-tertiary);
}

.job__crumbs-list li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--color-border-subtle);
}

.job__crumbs-list a {
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: color 150ms ease;
}

.job__crumbs-list a:hover,
.job__crumbs-list a:focus-visible {
	color: var(--color-heading-text);
}

/* --------------------------------------------------------------------
 * The grid
 *
 * Two columns now that the section nav is gone:
 *
 *   1fr + 64 + 320 = 1312, the container exactly, so 1fr = 928.
 *
 * The content column is 1fr rather than a literal, so the container stays the
 * single source of the width and nothing has to be recomputed when it moves.
 *
 * 320 is the facts panel's own width, not a new number. It was cut to 300 in
 * the three-column layout with the note that it "gives up 20px to pay for the
 * rest"; the nav took that space and the nav is gone, so the debt is settled
 * rather than kept. The gap stays the site's 64px step.
 * -------------------------------------------------------------------- */

.job__grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 64px;
	align-items: start;
}

/* Placed explicitly because the facts panel comes FIRST in the markup and
   auto-placement would put it in column 1. It is first in the markup so that
   when the columns stack it lands directly under the title, where it was
   asked for, without CSS order.

   order would have done the same thing visually and left the keyboard behind:
   the panel holds the Apply link, and a visitor tabbing the stacked page would
   have reached it last, after everything it sits above. Source order is the
   one arrangement both the eye and the tab key agree on. */
.job__content {
	grid-column: 1;
	grid-row: 1;
}

.job__aside {
	grid-column: 2;
	grid-row: 1;
}

/* Clears the SCROLLED compact bar rather than sitting under it.
   --header-bar-space is the published height of that bar, the same
   measurement the anchor scroll-margin consumes; a literal 32px here would be
   wrong the day the bar changes and nothing would point at why. */
.job__aside {
	position: sticky;
	top: calc(var(--header-bar-space) + 32px);
}

/* --------------------------------------------------------------------
 * Page header, above the grid and the full width of the container
 * -------------------------------------------------------------------- */

.job__header {
	margin-bottom: 64px;
}

.job__header .eyebrow {
	margin-bottom: 16px;
}

/* No scale override. The h2-scale one existed only because a 340px column
   could not hold 56px; above the grid the title has the whole container and
   takes the h1 the element already implies. */
.job__title {
	color: var(--color-heading-text);
}

/* --------------------------------------------------------------------
 * Middle column
 * -------------------------------------------------------------------- */

.job__section + .job__section {
	margin-top: 64px;
}

/* Matches the anchor convention already used for the certifications and
   partners targets, so every in-page jump on the site lands the same way. */
.job__section {
	scroll-margin-top: calc(var(--header-bar-space) + 64px);
}

/* h2 ELEMENT at h3 SCALE. The elements stay h2 because they are the sections
   of this document and the outline is right; only the size changes. At the
   default h2 they measured 40px, the same as the job title, which itself sits
   at h2 scale by design - so "Responsibilities" was as loud as the job it
   belongs to and the page had no heading step at all. Same restatement, and
   the same reason, as .job__title and .careers__title. */
.job__section-title {
	margin-bottom: 24px;
	font-size: var(--type-h3-size);
	line-height: var(--type-h3-line);
	letter-spacing: var(--type-h3-spacing);
	font-weight: var(--type-h3-weight);
	color: var(--color-heading-text);
}

/* The 65ch cap is .prose in base.css, which this element carries in the markup
   alongside .job__prose. It was written here when this was the only column
   wide enough to need it; the CFD page needed the same measure from a
   stylesheet that cannot see this one, so it was promoted rather than copied.

   The space it leaves to the right of a paragraph is margin. Only prose is
   capped: lists, the datasheet and the benefit boxes are not running text and
   keep the full 928. */
.job__prose {
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
	color: var(--color-body-text);
}

.job__prose > * + * {
	margin-top: 16px;
}

/* --------------------------------------------------------------------
 * Prose lists
 *
 * The marker itself is .marker-list in base.css, which these lists carry in
 * the markup alongside .job-list. It lived here while this was the only
 * section with a list; the references table needed the same treatment, and
 * references.css cannot see this file, so it was promoted rather than copied.
 * The reasoning for the shape moved with it.
 *
 * What stays here is what is particular to a job posting: body type and the
 * spacing between items.
 * -------------------------------------------------------------------- */

.job-list li {
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
	color: var(--color-body-text);
}

.job-list li + li {
	margin-top: 12px;
}

/* --------------------------------------------------------------------
 * The specs datasheet
 *
 * Derived from .cd__row exactly: 170px label column, 24px gap, 16px
 * padding-block, a hairline between rows and nothing under the last.
 * -------------------------------------------------------------------- */

.job__specs {
	margin: 0;
}

.job__spec-row {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 24px;
	align-items: baseline;
	padding-block: 16px;
}

.job__spec-row + .job__spec-row {
	border-top: 1px solid var(--color-border-subtle);
}

.job__spec-row:first-child {
	padding-top: 0;
}

.job__spec-row:last-child {
	padding-bottom: 0;
}

.job__spec-label {
	margin: 0;
	font-size: var(--type-card-body-size);
	line-height: 1.45;
	font-weight: var(--type-card-body-weight);
	color: var(--color-text-secondary);
}

.job__spec-value {
	margin: 0;
	font-size: var(--type-card-body-size);
	line-height: 1.45;
	font-weight: var(--type-card-body-weight);
	color: var(--color-heading-text);
}

/* 64px, the site's step, rather than 32. The groups inside Requirements are
   separate labelled blocks, not paragraphs of one, and at 32 the datasheet
   above ran straight into "Required". */
.job__group {
	margin-top: 64px;
}

.job__group-title {
	margin-bottom: 16px;
	color: var(--color-text-tertiary);
}

/* --------------------------------------------------------------------
 * Benefits
 *
 * Two per row: (928 - 16) / 2 = 456 a box. They were one per row when the
 * content column was 524 and two-up would have left about 230px a box, which
 * is not enough for a sentence. The column is 928 now and that constraint is
 * gone.
 *
 * 32px padding is the card idiom for a card under half the container, which a
 * 456px box in a 1312 container still is.
 * -------------------------------------------------------------------- */

.job__benefits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.job__benefit {
	padding: 32px;
	border-radius: 6px;
	background-color: var(--color-surface-card);
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
	color: var(--color-body-text);
}

/* --------------------------------------------------------------------
 * Facts panel
 * -------------------------------------------------------------------- */

.job__facts {
	padding: 32px;
	border-radius: 6px;
	background-color: var(--color-surface-card);
}

.job__apply-link {
	width: 100%;
	justify-content: center;
	margin-bottom: 8px;
}

.job__specs--facts .job__spec-row {
	/* Narrower column than the middle datasheet: 170px of a 320px panel
	   leaves the value nowhere to go. */
	grid-template-columns: 1fr;
	gap: 4px;
}

.job__specs--facts .job__spec-row:first-child {
	padding-top: 24px;
}

/* --------------------------------------------------------------------
 * Apply block
 * -------------------------------------------------------------------- */

.job-apply {
	padding-block: var(--section-pad-y);
	scroll-margin-top: calc(var(--header-bar-space) + 64px);
}

/* The same grey box the careers listing uses: inside the container, not a
   band and not full width. It was a full-bleed gradient; on this surface the
   copy, the controls and the button all take their normal light-surface
   treatment, which is why every on-gradient variant below could go. */
.job-apply__box {
	padding: 48px;
	border-radius: 6px;
	background-color: var(--color-surface-card);
	align-items: start;
}

.job-apply .eyebrow {
	margin-bottom: 16px;
}

.job-apply__title {
	color: var(--color-heading-text);
}

/* --------------------------------------------------------------------
 * One column at 1024
 *
 * Back on the site's single layout switch. This query was at 1200, and the
 * reason it gave was that three columns ran out of room before 1024. There are
 * two columns now, and 1fr + 64 + 320 still leaves 513px of content at a
 * 1025px viewport, so the exception has nothing left to stand on and the house
 * rule applies again.
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.job__grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	/* Placement released so both flow in source order, which puts the facts
	   panel under the title and above the content. */
	.job__content,
	.job__aside {
		grid-column: auto;
		grid-row: auto;
	}

	.job__aside {
		position: static;
	}

	.job__section + .job__section {
		margin-top: 48px;
	}

	/* Back to one box per row. Two-up in a stacked single column is the 230px
	   case the desktop rule exists to avoid. */
	.job__benefits {
		grid-template-columns: 1fr;
	}

	.job__benefit,
	.job__facts {
		padding: 24px;
	}

	.job-apply__box {
		padding: 32px;
	}
}