/**
 * Single Career — job posting detail.
 *
 * The posting is read the way a security assessment is read: skim the facts,
 * check yourself against the requirements, then act. So the page is set as a
 * document — one readable column, a persistent apply rail, and requirements
 * rendered as an audit checklist rather than bullets.
 *
 * This file also has to undo Tailwind Preflight, which strips list markers and
 * every paragraph margin. The `prose` classes the markup used to carry did
 * nothing: the site loads the Tailwind play CDN, which ships Preflight but not
 * the typography plugin.
 */

/* ─── Hero ─────────────────────────────────────────────── */

.jd-hero {
	background: var(--color-primary-dark-2);
	color: var(--color-surface-white);
	padding-block: var(--spacing-10) var(--spacing-8);
	position: relative;
	overflow: hidden;
}

.jd-hero__pattern {
	position: absolute;
	inset: 0;
	opacity: 0.08;
	pointer-events: none;
}

.jd-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 62rem;
}

.jd-back {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	color: rgba(255, 255, 255, 0.65);
	font-family: var(--font-body);
	font-size: var(--font-size-body-xs);
	font-weight: 600;
	text-decoration: none;
	margin-bottom: var(--spacing-8);
	transition: color var(--transition-fast);
}

.jd-back:hover,
.jd-back:focus-visible {
	color: var(--color-surface-white);
}

.jd-back .material-icons {
	font-size: 18px;
}

/* Eyebrow sits on an accent rule — the only accent in the hero besides the CTA. */
.jd-eyebrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-3);
	margin-bottom: var(--spacing-5);
	font-family: var(--font-heading);
	font-size: var(--font-size-body-xxs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.jd-eyebrow::before {
	content: "";
	width: 28px;
	height: 3px;
	background: var(--color-accent);
	border-radius: 2px;
	flex-shrink: 0;
}

.jd-eyebrow__dept {
	color: var(--color-accent);
}

.jd-eyebrow__sep {
	color: rgba(255, 255, 255, 0.3);
}

.jd-eyebrow__type {
	color: rgba(255, 255, 255, 0.72);
}

.jd-title {
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 var(--spacing-6);
	color: var(--color-surface-white);
	text-wrap: balance;
}

/* Fact strip — hairline dividers, no icons competing with the title. */
.jd-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-5);
	margin-bottom: var(--spacing-6);
	padding-top: var(--spacing-5);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.jd-fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.jd-fact__label {
	font-family: var(--font-heading);
	font-size: var(--font-size-body-xxs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.jd-fact__value {
	font-family: var(--font-body);
	font-size: var(--font-size-body-ms);
	font-weight: 600;
	color: var(--color-surface-white);
}

.jd-fact__value--urgent {
	color: var(--color-accent);
}

.jd-hero .cypro-btn {
	margin-top: var(--spacing-2);
}

/* Closed postings say so instead of inviting an application. */
.jd-closed {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-3) var(--spacing-5);
	border-radius: var(--border-radius-md);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	font-family: var(--font-body);
	font-size: var(--font-size-body-xs);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
}

/* ─── Body layout ──────────────────────────────────────── */

.jd-body {
	padding-block: var(--spacing-10) var(--spacing-12);
	background: var(--color-surface-white);
}

.jd-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
	gap: var(--spacing-10);
	align-items: start;
}

/* ─── Job content typography ───────────────────────────── */

.job-content {
	/* 68ch keeps lines near 70 characters. The old setup ran to ~105. */
	max-width: 68ch;
	font-family: var(--font-body);
	font-size: var(--font-size-body-md);
	line-height: 1.75;
	color: var(--color-primary);
	/* utilities.css turned on auto-hyphenation for .prose, which broke words
	   mid-line ("in-formation", "equiva-lent"). Long-form copy reads better without it. */
	hyphens: manual;
	word-break: normal;
	overflow-wrap: break-word;
}

.job-content > :first-child {
	margin-top: 0;
}

.job-content p {
	margin: 0 0 var(--spacing-5);
}

/* LinkedIn pastes leave paragraphs holding nothing but a non-breaking space. */
.job-content p:empty {
	display: none;
}

.job-content h2,
.job-content h3,
.job-content h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-primary-dark-2);
	margin: var(--spacing-8) 0 var(--spacing-4);
	letter-spacing: -0.01em;
}

.job-content h2 {
	font-size: var(--font-size-h6);
	padding-bottom: var(--spacing-3);
	border-bottom: 2px solid var(--color-surface-medium-1);
}

.job-content h3 {
	font-size: var(--font-size-body-lg);
}

.job-content h4 {
	font-size: var(--font-size-body-md);
}

.job-content strong {
	font-weight: 700;
	color: var(--color-primary-dark-2);
}

.job-content a {
	color: var(--color-accent-dark);
	text-underline-offset: 3px;
}

/* ─── Signature: requirements as an audit checklist ────── */

.job-content ul {
	list-style: none;
	margin: 0 0 var(--spacing-6);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.job-content ul li {
	position: relative;
	padding-left: calc(var(--spacing-6) + var(--spacing-2));
	min-height: var(--spacing-6);
}

.job-content ul li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: var(--spacing-6);
	height: var(--spacing-6);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius-sm);
	background: rgba(150, 243, 129, 0.18);
	color: var(--color-accent-dark);
	font-size: var(--font-size-body-xs);
	font-weight: 700;
	line-height: 1;
}

.job-content ol {
	margin: 0 0 var(--spacing-6);
	padding-left: var(--spacing-6);
	list-style: decimal;
}

.job-content ol li {
	margin-bottom: var(--spacing-3);
}

/* ─── Apply rail ───────────────────────────────────────── */

.jd-rail {
	position: sticky;
	top: 7rem;
}

.jd-apply {
	background: var(--color-surface-2);
	border: 1px solid var(--color-surface-medium-1);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-6);
}

.jd-apply__title {
	font-family: var(--font-heading);
	font-size: var(--font-size-body-lg);
	font-weight: 700;
	color: var(--color-primary-dark-2);
	margin: 0 0 var(--spacing-2);
}

.jd-apply__note {
	font-family: var(--font-body);
	font-size: var(--font-size-body-xs);
	line-height: 1.6;
	color: var(--color-text-body-muted);
	margin: 0 0 var(--spacing-5);
}

.jd-apply .cypro-btn {
	width: 100%;
	justify-content: center;
}

.jd-apply__address {
	display: block;
	margin-top: var(--spacing-4);
	font-family: var(--font-body);
	font-size: var(--font-size-body-xs);
	text-align: center;
	color: var(--color-text-body-muted);
	word-break: break-all;
}

.jd-apply__address a {
	color: var(--color-accent-dark);
	font-weight: 600;
}

/* ─── Other positions ──────────────────────────────────── */

.jd-more {
	background: var(--color-surface-2);
	padding-block: var(--spacing-10);
	border-top: 1px solid var(--color-surface-medium-1);
}

.jd-more__title {
	font-family: var(--font-heading);
	font-size: var(--font-size-h6);
	font-weight: 700;
	color: var(--color-primary-dark-2);
	margin: 0 0 var(--spacing-6);
}

.jd-more__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--spacing-4);
}

.jd-more__card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	padding: var(--spacing-5);
	background: var(--color-surface-white);
	border: 1px solid var(--color-surface-medium-1);
	border-radius: var(--border-radius-md);
	text-decoration: none;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.jd-more__card:hover,
.jd-more__card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.jd-more__dept {
	font-family: var(--font-heading);
	font-size: var(--font-size-body-xxs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.jd-more__name {
	font-family: var(--font-heading);
	font-size: var(--font-size-body-md);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-primary-dark-2);
}

.jd-more__meta {
	font-family: var(--font-body);
	font-size: var(--font-size-body-xs);
	color: var(--color-text-body-muted);
}

/* ─── Responsive ───────────────────────────────────────── */

@media (max-width: 1023px) {
	.jd-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--spacing-8);
	}

	.jd-rail {
		position: static;
	}

	.job-content {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.jd-hero {
		padding-block: var(--spacing-8) var(--spacing-6);
	}

	.jd-back {
		margin-bottom: var(--spacing-6);
	}

	/* The separator strands itself at the end of a line once the eyebrow wraps;
	   the line break already separates the two labels. */
	.jd-eyebrow__sep {
		display: none;
	}

	.jd-facts {
		gap: var(--spacing-4);
	}

	.jd-fact {
		flex: 1 1 8rem;
	}

	.jd-hero .cypro-btn,
	.jd-closed {
		width: 100%;
		justify-content: center;
	}

	.job-content {
		font-size: var(--font-size-body-sm);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jd-more__card {
		transition: none;
	}

	.jd-more__card:hover,
	.jd-more__card:focus-visible {
		transform: none;
	}
}