/**
 * "Join Our Team of Drilling Experts" — the careers band.
 *
 * WHY THERE IS NO PHOTOGRAPH HERE
 *
 * The first attempt put the copy on a panel over a rig photo, bookending the
 * hero. It was dropped because sd-badger — the only photo then unused on this
 * page — is 1080px wide and had to be upscaled ~1.33x to cover a full-bleed band,
 * reading visibly soft, worse again on a 2x display. The 1600px photos would have
 * been sharp but all appear earlier on the page, and a third showing of a rig the
 * reader has already scrolled past twice is worse than no photo.
 *
 * sd-badger and sd-grizzly are now unused theme-wide (both rigs were retired from
 * the fleet pages), so they are free — but the resolution objection stands, so
 * neither is a candidate here. Only a 1600px-or-wider photo would be.
 *
 * So: a colour block, but a built one rather than the flat primary it started as.
 * Both layers below are CSS-generated, which means they are resolution-independent
 * and cannot soften the way an upscaled bitmap does.
 *
 *   1. A diagonal gradient through three palette blues for depth.
 *   2. A very low-contrast 135deg pinstripe, echoing the angled section dividers
 *      that are this brand's signature. At 3.5% white it reads as texture rather
 *      than pattern — visible on a large screen, invisible as "stripes".
 *
 * If a crew photograph at 1600px or wider turns up later, this section is the
 * right home for it and the panel treatment can come back.
 *
 * ONE HAS SINCE TURNED UP, AND IT STILL DOES NOT FIT HERE. `careers-crew.jpg` is
 * the live Careers page's own hero photograph and is 3024x4032 at source, so the
 * resolution objection above is answered. But it is portrait, and this band is
 * full-bleed: covering it means taking a ~1600x620 horizontal slice, which of this
 * photograph is a strip of two torsos and a truck bed. It is on the Careers page
 * instead, in a frame the right shape for it. The condition for bringing the panel
 * back is therefore a LANDSCAPE crew photograph at 1600px or wider.
 */

/**
 * Angle-aware top padding — same reasoning as about.css.
 *
 * The clip-path cuts the top-LEFT corner down by --pd-angle-h (pd-angle--md, so
 * clamp(2rem, 5vw, 5rem)). Deriving padding from that variable rather than
 * hard-coding it means the copy can never collide with the cut edge, whatever
 * angle size is set on the block. The block sets padding-bottom only.
 *
 * The mirrored direction is deliberate: the about section near the top of the page
 * uses angle-top-right, so an opposing diagonal near the bottom reads as
 * intentional bookending. The same diagonal twice would read as a tic.
 */
.pd-careers {
	padding-top: calc( var( --pd-angle-h ) + var( --wp--preset--spacing--70 ) );

	/* Layer order: pinstripe first (drawn on top), gradient second (underneath).
	   The has-primary-darker-background-color class supplies the flat fallback. */
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba( 255, 255, 255, 0.035 ) 0,
			rgba( 255, 255, 255, 0.035 ) 2px,
			transparent 2px,
			transparent 14px
		),
		linear-gradient(
			135deg,
			var( --wp--preset--color--dark ) 0%,
			var( --wp--preset--color--primary-darker ) 58%,
			var( --wp--preset--color--primary-dark ) 100%
		);
}

/* Both lines are short — tighten from the shared 26ch / 56ch measures. */
.pd-careers h2.pd-section-title {
	max-width: 24ch;
}

.pd-careers p.pd-section-lede {
	max-width: 46ch;

	/* Stronger than the shared 0.82: white on saturated blue needs less recession
	   than dark text on white to read as secondary. */
	opacity: 0.9;
}

/**
 * Careers PAGE — "Why Work With Us?" and "Now Hiring".
 *
 * Everything above in this file styles the homepage careers BAND. These rules are
 * the careers page itself, kept in the same file because they are the same
 * subject and a third careers stylesheet would be filing for filing's sake.
 *
 * WHAT WAS WRONG
 *
 * The four reasons to work here were two wp:columns blocks, two columns each,
 * every heading and line centred. Centred text with nothing around it gives the
 * eye no edge to return to, and two stacked columns blocks are not a grid: at the
 * 782px breakpoint core stacks them into four full-width rows of centred text
 * that read as one long paragraph with bold bits.
 *
 * The job posting below it was three centred blocks — a heading, an italic line,
 * a sentence — with nothing marking it as a posting rather than more page copy.
 */

/**
 * TWO BY TWO, NOT FOUR ACROSS.
 *
 * The cards were a four-across row when they had the full 1100px band to
 * themselves. They now share it with the crew photograph — see the note on
 * $pacific_drilling_careers_crew_image in patterns/careers.php — and four across
 * 58% of the band would be 140px each, narrower than the 220px their longest title
 * needs.
 *
 * Two fixed columns rather than auto-fit: at ~300px each the cards are comfortable
 * and the block lands at about the height of the photograph beside it, which is
 * the whole point of the pairing. auto-fit at a 220px floor would give the same
 * two columns at this width, but would silently become three if the column ever
 * widened, and three of four cards in a row leaves one orphaned.
 */
.pd-benefits__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--40 );
	align-items: stretch;
}

/* One column once the cards are on their own in a phone's width. */
@media ( max-width: 560px ) {
	.pd-benefits__grid {
		grid-template-columns: 1fr;
	}
}

/**
 * The crew photograph.
 *
 * The shared `.pd-photo-card` frame (sections.css) supplies the mat, radius and
 * lift. Square, from a 3:4 photograph: at 42% of an 1100px band the frame is
 * ~460px, which is about where the 2x2 card block beside it lands, and the 25% the
 * crop trims is the empty gravel foreground the phone camera caught below the
 * work. `center 35%` keeps both crew and the rig well inside the frame.
 */
figure.pd-benefits__media img {
	aspect-ratio: 1 / 1;
	object-position: center 35%;
}

/**
 * MOBILE: WORDS FIRST — the same call as the About and New Clients bands. Core
 * stacks .wp-block-columns into a flex column at 781px, so ordering the media
 * column last puts the four reasons above the photograph rather than below it.
 */
@media ( max-width: 781px ) {
	.pd-benefits .wp-block-column:has( .pd-benefits__media ) {
		order: 1;
	}
}

/* Child selector at (0,2,0): core's flow layout margin is (0,1,0) and wins ties. */
.pd-benefits__grid > .pd-benefit {
	margin-top: 0;

	padding: 1.6rem 1.4rem;
	border-radius: 14px;
	background-color: var( --wp--preset--color--cream );

	/* Left-aligned, deliberately. Four centred cards side by side put every line
	   on a different starting x — the same raggedness the About page rig list had
	   before it was fixed. */
	text-align: left;
}

/* Gold rule at the head of each card, tying them to the section titles. */
.pd-benefits__grid > .pd-benefit::before {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	margin-bottom: 1rem;
	background-color: var( --wp--preset--color--gold );
}

h3.pd-benefit__title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.pd-benefit > .pd-benefit__copy {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	opacity: 0.85;
}

.pd-benefits__grid > .pd-benefit:nth-child( 2 ) { --pd-reveal-delay: 80ms; }
.pd-benefits__grid > .pd-benefit:nth-child( 3 ) { --pd-reveal-delay: 160ms; }
.pd-benefits__grid > .pd-benefit:nth-child( 4 ) { --pd-reveal-delay: 240ms; }

/**
 * Job posting.
 *
 * A white card on the cream band so it reads as a listing — a discrete thing that
 * could be joined by a second one — rather than as another paragraph of page copy.
 * Left-aligned for the same reason as the benefit cards.
 */
.pd-job {
	/* Containing block for the stretched link on the title. */
	position: relative;

	max-width: 720px;
	margin-inline: auto;
	padding: clamp( 1.75rem, 3vw, 2.5rem );
	border-radius: 14px;
	background-color: var( --wp--preset--color--base );
	text-align: left;

	box-shadow:
		0 1px 3px rgba( 0, 0, 0, 0.05 ),
		0 10px 24px rgba( 0, 0, 0, 0.06 );
}

h3.pd-job__title {
	margin: 0;
	font-size: clamp( 1.25rem, 2vw, 1.5rem );
	line-height: 1.3;
}

/**
 * The card links to the posting's own page.
 *
 * Stretched from the title's anchor, the way the rig tiles and post cards do:
 * the whole card is the hit area, but the accessibility tree holds one link with
 * the job title as its name — rather than a link on the title and another on
 * "View details", which is two tab stops per opening to the same place.
 *
 * "View details" is therefore NOT a link. It is aria-hidden text that says out
 * loud what the card already does, for people who read affordances rather than
 * tab through them.
 */
.pd-job__title a {
	color: inherit;
	text-decoration: none;
}

.pd-job__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
}

.pd-job:hover .pd-job__title a {
	color: var( --wp--preset--color--primary );
	text-decoration: underline;
}

.pd-job__title a:focus-visible {
	outline: none;
}

.pd-job__title a:focus-visible::after {
	outline: 3px solid var( --wp--preset--color--primary );
	outline-offset: 3px;
}

.pd-job > .pd-job__more {
	margin: 1rem 0 0;
	color: var( --wp--preset--color--primary-darker );
	font-weight: 700;
}

/* Arrow in CSS so the label stays exactly "View details". */
.pd-job > .pd-job__more::after {
	content: " \2192";
}

/**
 * The terms line ("Class A & B excepted. Signing Bonus Available.").
 *
 * It was italic bold centred text, which reads as an aside. It is in fact the two
 * facts an applicant scans for, so it gets a pill — the same treatment the process
 * steps give their duration.
 */
.pd-job__terms {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;

	background-color: rgba( 51, 122, 183, 0.12 );
	color: var( --wp--preset--color--primary-darker );

	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
}

/**
 * The pill's LOOK is shared between the card and the posting's own page; only
 * its spacing differs, because one sits under a left-aligned card title and the
 * other under a centred page title. Kept apart so the two can never drift into
 * looking like different components.
 *
 * Child selector for the margin: core's flow layout sets margin-block-start at
 * (0,1,0), which a lone class would only tie.
 */
.pd-job > .pd-job__terms {
	margin: 0.9rem 0 0;
}

/**
 * The description comes from the editor now, so it arrives as a wrapper around
 * whatever the client wrote — paragraphs, a list, a heading. The wrapper owns the
 * space above it and the children own the space between themselves; only the
 * first and last need correcting, or the card gains a stray gap top and bottom.
 */
.pd-job > .pd-job__copy {
	margin: 1rem 0 0;
	font-size: 1rem;
	line-height: 1.7;
}

.pd-job__copy > :first-child {
	margin-top: 0;
}

.pd-job__copy > :last-child {
	margin-bottom: 0;
}

.pd-job__copy ul,
.pd-job__copy ol {
	margin: 0.75rem 0 0;
	padding-left: 1.25rem;
}

.pd-job__copy li {
	margin-bottom: 0.35rem;
}


/**
 * A job posting's own page.
 *
 * The highlight sits under the title in the hero's shadow, centred, where the
 * card puts it under the title too — same element, same meaning, so it should
 * not look like a different component just because the page changed.
 */
.pd-job-single .pd-job-single__terms {
	/* An inline-block cannot be centred by text-align on itself — the centring
	   comes from the paragraph's own alignment, so the element needs auto
	   margins to sit in the middle of the column. */
	display: block;
	width: fit-content;
	margin: 0 auto;
}

.pd-job-single__back {
	margin-top: var( --wp--preset--spacing--50 );
	padding-top: var( --wp--preset--spacing--40 );
	border-top: 1px solid rgba( 0, 0, 0, 0.1 );
}

.pd-job-single__back a {
	color: var( --wp--preset--color--primary-darker );
	font-weight: 700;
	text-decoration: none;
}

.pd-job-single__back a:hover,
.pd-job-single__back a:focus {
	text-decoration: underline;
}

/* Arrow in CSS so the label stays exactly "Back to all openings". */
.pd-job-single__back a::before {
	/* Non-breaking space: a trailing ordinary space in a generated string is
	   collapsed, which butted the arrow against the word. */
	content: "\2190\00a0";
}