/**
 * Find an Employer page styles
 *
 * Spec: roadmap/phase-05-training-and-calendar/artifacts/page-find-an-employer-spec.md
 * Figma frame: 12050:6756 "FIND AN EMPLOYER // DESKTOP"
 * Template: templates/template-find-an-employer.php
 *
 * Blocks: fae-intro + fae-help (4), fae-how (5), form-band--find-an-employer (6).
 *
 * Block 3 (page banner) and the whole of Block 6 apart from two colour deltas are
 * already-shipped shared layers (banners.css, form-section.css) and are NOT restyled here.
 *
 * The REST-sourced cache carries no MCP `layout_<token>` identifiers, so Figma citations
 * below are `/* Figma <node-id> *\/` only, per .claude/rules/figma-spec.md.
 *
 * Desktop-first: every @media is max-width and every one of them sits after the desktop
 * rules it overrides (.claude/rules/css-architecture.md). Breakpoints 1024 / 768 / 402.
 * No Figma mobile frame exists for this page — 768 and 402 are derived per
 * roadmap/mobile-derivation-catalog.md and the client's Figma Variables scale.
 */

/* ==========================================================================
   Block 4 — fae-intro "Find the right employer for you"  Figma 12050:6770
   ========================================================================== */

.fae-intro {
	padding: 112px 80px 0; /* Figma 12050:6770 — bottom pad is a literal 0 */
}

.fae-intro__inner {
	display: flex;
	flex-direction: row;
	gap: 64px; /* Figma 12050:6772 */
	max-width: 1280px; /* Figma 12050:6771 */
	margin: 0 auto;
}

/* Image column. 617 + 64 gap + 599 content = the 1280 container.
   The photo is absolutely positioned inside so it does not contribute its native
   1333x2000 height to the flex row: the figure then stretches to the text column's
   height and object-fit crops, matching Figma's equal-height columns. Same recipe as
   find-an-apprentice.css:38. */
.fae-intro__image {
	position: relative;
	/* Pastel oxmx1n94 #4 (2026-09-24): below the 1280 container the photo gives up the
	   width, not the text — shrinks from 617 while the copy column holds 599. */
	flex: 0 1 617px; /* Figma 12050:6773 */
	min-width: 0;
	overflow: hidden;
	margin: 0;
	clip-path: var(--corner-cut-clip); /* Figma 12050:6774 — 82x82 top-right cut, 4px on the other three corners */
}

.fae-intro__image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* Figma 12050:6773 scaleMode FILL, no imageTransform — plain centred cover */
}

.fae-intro__box {
	flex: 0 0 599px; /* Figma 12050:6775 — fixed; the 1024 stack below resets it */
	min-width: 0;
	background-color: var(--color-white); /* Figma 12050:6775 */
	border-radius: var(--radius-sm); /* Figma 12050:6775 */
	padding: 0; /* Figma 12050:6775 — the card has no inner gutter */
}

.fae-intro__content {
	display: flex;
	flex-direction: column;
	gap: 36px; /* Figma 12050:6776 */
}

.fae-intro__content-top {
	display: flex;
	flex-direction: column;
	gap: 24px; /* Figma 12050:6777 */
}

.fae-intro__heading {
	max-width: 486px; /* Figma 12050:6783 — narrower than the 599 column */
	margin: 0;
	font-size: 44px; /* Figma 12050:6784 */
	line-height: 1.1; /* Figma 12050:6784 */
	letter-spacing: -0.44px; /* Figma 12050:6784 */
	font-weight: var(--font-weight-regular);
	color: var(--color-navy-darkest); /* Figma 12050:6784 base run */
}

.fae-intro__heading-accent {
	color: var(--color-tangerine); /* Figma 12050:6784 run 2 */
}

.fae-intro__copy p {
	margin: 0 0 16px;
	font-size: 16px; /* Figma 12050:6786 */
	line-height: 1.4; /* Figma 12050:6786 */
	color: var(--color-navy-darkest); /* Figma 12050:6786 */
}

.fae-intro__copy p:last-child {
	margin-bottom: 0;
}

/* --- "How we can help" checklist  Figma 12054:7061 --- */

.fae-help {
	display: flex;
	flex-direction: column;
	gap: 16px; /* Figma 12054:7061 */
}

.fae-help__title {
	margin: 0;
	font-size: 30px; /* Figma 12054:7058 */
	line-height: 1.3; /* Figma 12054:7058 */
	letter-spacing: -0.3px; /* Figma 12054:7058 */
	font-weight: var(--font-weight-regular);
	color: #000000; /* Figma 12054:7058 — pure black, no token in tokens.css */
}

.fae-help__intro {
	margin: 0;
	font-size: 16px; /* Figma 12054:7059 */
	line-height: 1.4; /* Figma 12054:7059 */
	color: var(--color-navy-darkest); /* Figma 12054:7059 */
}

.fae-help__list {
	display: flex;
	flex-direction: column;
	gap: 4px; /* Figma 12054:7092 */
	max-width: 560px; /* Figma 12054:7092 */
	margin: 10px 0 0; /* Figma 12054:7077 — the 10px list-wrapper gap above the list */
	padding: 0;
	list-style: none;
}

.fae-help__item {
	display: flex;
	align-items: flex-start;
	gap: 8px; /* Figma 12054:7093 */
	padding: 8px 0; /* Figma 12054:7093 */
	border-bottom: 1px solid var(--color-tangerine-lighter); /* Figma 12054:7093 — present on every row incl. the last */
}

.fae-help__icon {
	flex: 0 0 24px; /* Figma 12054:7094 */
	font-size: 24px; /* Figma 12054:7094 */
	color: var(--color-tangerine); /* Figma 12054:7094 vector fill */
}

.fae-help__text {
	min-width: 0;
	font-size: 16px; /* Figma 12054:7095 */
	line-height: 1.4; /* Figma 12054:7095 */
	color: var(--color-navy-darkest); /* Figma 12054:7095 */
}

.fae-help__text strong {
	font-weight: var(--font-weight-bold); /* Figma 12054:7095 run 1 */
}

/* ==========================================================================
   Block 5 — fae-how "How it works"  Figma 12054:7604
   Four numbered step cards. Always expanded — this frame has no chevron and no
   open/closed state, so it is a static list, not the Get a Builder's Licence
   <details> accordion it resembles.
   ========================================================================== */

/* The 88px top pad is NOT this frame's own padding — 12054:7604 has `pad T=0`. It is the
   blank canvas the designer left between the two sections: page frame 12050:6756 is
   free-positioned, not auto-layout, so Section_Intro ends at y=1197 (423 + 774, its own
   bottom pad being a literal 0) and this frame starts at y=1285. That 88px lives only as a
   Y-coordinate difference between siblings, which is why the per-frame transcription lost
   it and the two blocks shipped touching. Every other boundary on this page IS flush in
   Figma (Header ends 423 = Intro starts 423; this frame ends 2775 = Form starts 2775), so
   this is the page's one inter-frame gap. Space above a section lives in that section's
   own top padding here, matching how Intro's 112 carries the Header boundary. */
.fae-how {
	padding: 88px 80px 112px; /* Figma 12054:7604 y=1285 − 12050:6770 bottom 1197; sides + bottom from the frame's own pad */
}

.fae-how__inner {
	max-width: 1280px; /* Figma 12054:7157 */
	margin: 0 auto;
	padding: 48px; /* Figma 12054:7157 */
	border-radius: var(--radius-sm); /* Figma 12054:7157 */
	background-color: var(--color-accent-light-blue-50); /* Figma 12054:7157 */
}

.fae-how__content {
	display: flex;
	flex-direction: column;
	gap: 36px; /* Figma 12054:7161 */
}

.fae-how__heading {
	margin: 0;
	font-size: 48px; /* Figma 12054:7166 */
	line-height: 1.2; /* Figma 12054:7166 */
	letter-spacing: -0.48px; /* Figma 12054:7166 */
	font-weight: var(--font-weight-regular);
	color: var(--color-navy); /* Figma 12054:7166 */
}

.fae-how__text {
	display: flex;
	flex-direction: column;
	gap: 16px; /* Figma 12054:7167 */
}

.fae-how__disclaimer {
	margin: 0;
	font-size: 14px; /* Figma 12970:1640 */
	line-height: 1.4; /* Figma 12970:1640 */
	color: #000000; /* Figma 12970:1640 — pure black, no token in tokens.css */
}

.fae-how__list {
	display: flex;
	flex-direction: column;
	gap: 24px; /* Figma 12054:7170/7179/7188/7197 — measured from the card y-deltas; the GRID gap=0 on 12054:7169 is a REST artifact */
	margin: 0;
	padding: 0;
	list-style: none;
}

.fae-how__card {
	background-color: var(--color-white); /* Figma 12054:7170 */
	border: 1px solid var(--color-navy-lightest); /* Figma 12054:7170 */
	border-radius: var(--radius-sm); /* Figma 12054:7170 */
	box-shadow: var(--shadow-md); /* Figma 12054:7170 */
}

.fae-how__step {
	display: flex;
	flex-direction: column;
	gap: 18px; /* Figma 12054:7171 */
	padding: 24px; /* Figma 12054:7171 */
}

.fae-how__step-title {
	display: flex;
	align-items: center; /* Figma 12054:7172 counter=CENTER */
	gap: 18px; /* Figma 12054:7172 */
}

.fae-how__number {
	display: flex;
	flex: 0 0 44px; /* Figma 12054:7173 */
	align-items: center;
	justify-content: center;
	width: 44px; /* Figma 12054:7173 */
	height: 44px; /* Figma 12054:7173 */
	border-radius: 50%; /* Figma 12054:7173 radius 27 on a 44 box draws a full circle */
	background-color: var(--color-tangerine-lighter); /* Figma 12054:7173 */
	font-size: 20px; /* Figma 12054:7174 */
	line-height: 1.3; /* Figma 12054:7174 */
	font-weight: var(--font-weight-bold); /* Figma 12054:7174 */
	color: var(--color-tangerine-dark); /* Figma 12054:7174 */
}

.fae-how__step-heading {
	margin: 0;
	min-width: 0;
	font-size: 20px; /* Figma 12054:7175 */
	line-height: 1.3; /* Figma 12054:7175 */
	letter-spacing: -0.2px; /* Figma 12054:7175 */
	font-weight: var(--font-weight-bold); /* Figma 12054:7175 */
	color: var(--color-navy); /* Figma 12054:7175 */
}

/* The body is editor rich text, so its top-level <p>/<ul> become the flex children
   Figma spaces at 16 (12054:7177). The 24 on 12054:7176 wraps a single child and is
   therefore inert — not reproduced. */
.fae-how__step-body {
	display: flex;
	flex-direction: column;
	gap: 16px; /* Figma 12054:7177 */
	font-size: 16px; /* Figma 12054:7178 */
	line-height: 1.4; /* Figma 12054:7178 */
	color: var(--color-navy); /* Figma 12054:7178 */
}

.fae-how__step-body > p,
.fae-how__step-body > ul,
.fae-how__step-body > ol {
	margin: 0;
}

.fae-how__step-body > ul,
.fae-how__step-body > ol {
	padding-left: 20px; /* Figma 12969:1293 indent level 1 */
}

/* The cards are an <ol>, so this <ul> nests at depth 2 and the UA default drops from the
   filled `disc` to the hollow `circle`. Figma 12969:1293 draws one solid navy bullet per
   lineTypes UNORDERED row at every level, so the level is pinned here. QA round 10. */
.fae-how__step-body > ul {
	list-style-type: disc; /* Figma 12969:1293 lineTypes UNORDERED */
}

/* Figma separates the paragraphs of one TEXT node by an empty line box — 22.4px at LH 22.4
   (12054:7178 / 7196 / 7205). The column's own gap already contributes 16, so the remainder
   is 6.4. Not applied to a list or the tip: those are separate Figma nodes inside the
   Content frame and its plain 16px gap is the whole distance. */
.fae-how__step-body > p + p {
	margin-top: 6.4px; /* Figma 12054:7177 gap 16 + 6.4 = 22.4 empty line box */
}

.fae-how__step-body li + li {
	margin-top: 6px; /* Figma 12969:1293 listSpacing */
}

.fae-how__step-body a {
	color: inherit; /* Figma 12969:1293 — the link runs carry no colour override, only the underline */
	text-decoration: underline; /* Figma 12969:1293 run decoration UNDERLINE */
}

.fae-how__tip {
	display: flex;
	align-items: flex-start;
	gap: 8px; /* Figma 12969:1635 */
}

.fae-how__tip-icon {
	flex: 0 0 24px; /* Figma 12969:1636 */
	font-size: 24px; /* Figma 12969:1636 */
	color: var(--color-navy-darkest); /* Figma I12969:1636;7044:35126 */
}

.fae-how__tip p {
	margin: 0;
	min-width: 0;
}

.fae-how__tip strong {
	font-weight: var(--font-weight-bold); /* Figma 12969:1637 — the whole run is 700 */
}

/* ==========================================================================
   Block 6 — form-band--find-an-employer  Figma 12050:6842
   Everything else in this band is assets/css/form-section.css (global,
   functions.php:123). Only the two values this frame changes live here.
   ========================================================================== */

.form-band--find-an-employer {
	background-color: var(--color-navy-lightest-50); /* Figma 12050:6842 — #e6e7e9 at 50% */
}

.form-band--find-an-employer .form-band__heading,
.form-band--find-an-employer .form-band__copy {
	color: var(--color-navy); /* Figma 12050:6849 / 12050:6851 — navy here, not the shared band's navy-darkest */
}

/* ==========================================================================
   1024 — Block 4 column collapse
   Breakpoint deviation from the project's dominant 768: the intro row is a
   617 + 64 + 599 three-part track, which runs out of room well above 768.
   Spec "Breakpoint deviations".
   ========================================================================== */

@media (max-width: 1024px) {
	.fae-intro__inner {
		flex-direction: column; /* image already comes first in the DOM — no column-reverse */
	}

	.fae-intro__image {
		flex: 0 0 420px; /* derived — mobile-derivation-catalog.md:105 image height ladder */
		width: 100%;
	}

	.fae-intro__box {
		flex: 1 1 auto;
		width: 100%;
	}

	.fae-intro__heading {
		max-width: none; /* the 486 cap is column-relative and stops applying once the row stacks */
	}
}

/* ==========================================================================
   768 — tablet / phone
   ========================================================================== */

@media (max-width: 768px) {
	.fae-intro {
		padding: 50px 20px 0; /* derived — Section Padding large 112 -> 50, .claude/rules/css-architecture.md */
	}

	.fae-intro__content {
		gap: 24px; /* Pastel oxmx1n94 #1 (2026-09-23) — designer-set mobile value */
	}

	.fae-intro__heading {
		font-size: 32px; /* derived — H2 44 -> 32 */
	}

	.fae-help__title {
		font-size: 24px; /* derived — H4 30 -> 24 */
	}

	.fae-how {
		/* 88 is not a Section Padding token, so the scale has no row for it; this page has no
		   mobile Figma frame either. Derived at the same ratio the scale uses for the outer
		   vertical step, 50/112: 88 × 0.446 = 39.3 -> 40. */
		padding: 40px 20px 50px; /* top derived from the 88px desktop gap; bottom Section Padding large 112 -> 50 */
	}

	.fae-how__inner {
		padding: 24px; /* Pastel oxmx1n94 #3 (2026-09-23) — designer-set, replaces the derived 36 */
	}

	.fae-how__step-body {
		font-size: 14px; /* Pastel oxmx1n94 #2 (2026-09-23) — designer-set mobile body size; line-height 1.4 kept */
	}

	.fae-how__heading {
		font-size: 32px; /* derived — H2 -> 32 */
	}

	.fae-how__step-heading {
		font-size: 18px; /* derived — Text Large 20 -> 18 */
	}

	.fae-how__number {
		font-size: 18px; /* derived — Text Large 20 -> 18; the 44x44 box is unchanged */
	}
}

/* ==========================================================================
   402 — small phone
   ========================================================================== */

@media (max-width: 402px) {
	.fae-intro__image {
		flex-basis: 310px; /* derived — mobile-derivation-catalog.md:105 image height ladder */
		--corner-cut: 60px; /* derived — mobile-derivation-catalog.md:83 */
	}
}