/**
 * Find an Apprentice page styles
 *
 * Spec: roadmap/phase-05-training-and-calendar/artifacts/page-find-an-apprentice-spec.md
 * Figma node: 10330:67694
 *
 * Blocks: faa-intro (4), faa-feature (5), faa-form-section / faa-help-card (6).
 */

/* ==========================================================================
   Block 4 — faa-intro "Build our future workforce"
   Figma 10330:68835 layout_EZKY4V
   ========================================================================== */

.faa-intro {
	/* Figma 10330:68835 layout_EZKY4V: padding 112px 80px 0 */
	padding: 112px 80px 0; /* Figma 10330:68835 layout_EZKY4V */
}

.faa-intro__inner {
	/* Figma 10330:68837 layout_1NUKSP: row gap 64px width 1280.
	   Default `align-items: stretch` so the image column matches the text
	   column's intrinsic height (Figma 10330:68836 renders both columns
	   at equal heights). The img inside uses object-fit:cover so the
	   photograph is centred and cropped instead of dictating the row
	   height from its native ~2:1 aspect ratio (which previously made
	   the image ~925px vs ~462px text). */
	display: flex;
	flex-direction: row;
	gap: 64px; /* Figma 10330:68837 layout_1NUKSP */
	max-width: 1280px;
	margin: 0 auto;
}

/* Image column — Figma 10330:68838 layout_9NWO7Z: fixed 617×fill at desktop.
   bug-07: at desktop (≥1024) image is fixed 617 to match Figma (image-617 +
   content-599 + 64 gap = 1280). At smaller viewports the row layout shrinks,
   so allow flex re-distribution — the 768 breakpoint below switches to column. */
.faa-intro__image {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	margin: 0;
	/* Top-right 82×82 triangle physically removed from the figure so the
	   section background shows through — replaces the previous white-chip
	   overlay (`.faa-intro__chip`). Pastel R5 comment #2 — "the corner of
	   the image being cut, rather than a piece laid over the top".
	   clip-path supersedes the previous 4px border-radius; remaining three
	   corners stay square (rounding was visually negligible at 617×N). */
	clip-path: var(--corner-cut-clip); /* QA R3 #11 — rounded non-cut corners; 82px diagonal via shared --corner-cut-clip */
}

@media (min-width: 1024px) {
	.faa-intro__image {
		flex: 0 0 617px; /* Figma layout_9NWO7Z + chip at x:535 + 82 = 617 */
	}
}

.faa-intro__image img {
	/* Absolutely position the photo so it does not contribute its native
	   ~617×900 intrinsic height to the flex row. With img out of layout,
	   the figure's intrinsic height is 0 and `align-items: stretch` on
	   `.faa-intro__inner` resolves the row height from the text column,
	   then the img fills the resulting box and `object-fit: cover` crops
	   to match. Required for Figma 10330:68836 (equal column heights). */
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Was the white-triangle overlay used to fake a corner-cut. Pastel R5
   comment #2 made the cut real (clip-path on `.faa-intro__image` above);
   the element stays in DOM for backwards compat but is no longer rendered. */
.faa-intro__chip {
	display: none;
}

/* Text box column */
.faa-intro__box {
	/* Figma 10330:68840 layout_V8WGBT: fill col */
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 36px; /* Figma 10330:68843 layout_7T92X3: gap between content-top and copy */
}

/* `.faa-intro__tagline` / `.faa-feature__tagline` carry only the BEM hook for
   page-specific spacing if needed. Typography (size/weight/colour) and the
   underline + 9×7 hook decoration come from `.section-tagline` in
   typography.css — the template applies both classes to the same <p>. */

.faa-intro__heading {
	/* Figma 10330:68847 Heading/H2: 48px/120% -1% 400 */
	font-size: 48px; /* Figma 10330:68847 */
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 400;
	color: var(--color-navy-darkest); /* Figma fill_6305G9 #03060C */
	margin: 0;
}

.faa-intro__heading-accent {
	color: var(--color-tangerine); /* Figma 10330:68847 ts1 fill #FF6600 */
}

.faa-intro__copy {
	display: flex;
	flex-direction: column;
	/* Figma renders both paragraphs as one text node joined by `\n\n` —
	   the visual gap between them is one blank line (~22px at 16px/140%),
	   not the 36px we previously took from the parent Copy frame's gap
	   (that 36px is between the text block and the CTA button below).
	   16px ≈ 1em paragraph rhythm, matches Pastel R5 comment #3 (#4 same). */
	gap: 16px;
}

.faa-intro__copy p {
	/* Figma 10330:68849 Text/Regular/Normal: 16px/140% 400 #03060C */
	font-size: 16px; /* Figma 10330:68849 */
	line-height: 1.4;
	font-weight: 400;
	color: var(--color-navy-darkest); /* Figma fill_6305G9 */
	margin: 0;
}

.faa-intro__copy a {
	text-decoration: underline; /* Figma 10330:68849 ts3 textDecoration UNDERLINE */
	color: var(--color-navy-darkest);
}

/* CTA — text-link with arrow icon. Figma 10343:75204 INSTANCE of 4179:8937:
   parent has no fills/strokes, layout_24CCZD = row gap 8 hug, text style_XUSA19
   = Frutiger Bold 16px navy (#0B1628), arrow_downward_alt 24×24. */
.faa-intro__cta,
.faa-feature__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);         /* 8px — Figma layout_24CCZD */
	padding: 0;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 16px;             /* Figma style_XUSA19 fontSize */
	font-weight: 700;            /* Figma style_XUSA19 65 Bold */
	line-height: 1.5;            /* Figma style_XUSA19 lineHeight 150% */
	color: var(--color-navy);    /* #0B1628 — Figma fill_3LMK2Z */
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease;
}

.faa-intro__cta:hover,
.faa-feature__cta:hover {
	color: var(--color-tangerine);
}

.faa-intro__cta:focus-visible,
.faa-feature__cta:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
}

.faa-intro__cta .material-symbols-outlined,
.faa-feature__cta .material-symbols-outlined {
	font-size: 24px;             /* Figma layout_J5EOHO 24×24 */
}

/* ==========================================================================
   Block 5 — faa-feature "Help us build a quality industry"
   Figma 10330:68850 layout_DSBEYP
   ========================================================================== */

.faa-feature {
	/* Figma 10330:68850 layout_DSBEYP: padding 112px 80px */
	padding: 112px 80px; /* Figma 10330:68850 layout_DSBEYP */
}

.faa-feature__inner {
	/* Figma 10330:68851 layout_F7ECZR: row gap 10 padding 50px 48px radius 4
	   Image fill: 17ff7b63f8a7649b95b2233c38f09e7f8a09f62a */
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px; /* Figma 10330:68851 layout_F7ECZR */
	padding: 50px 48px; /* Figma 10330:68851 layout_F7ECZR */
	max-width: 1280px;
	margin: 0 auto;
	background-image: url('../images/find-an-apprentice/feature-bg.png');
	background-size: cover;
	background-position: center;
	background-color: #1a2537; /* Figma fill_30HQ9M — fallback for image */
	min-height: 400px;
	/* Real corner cut replacing the previous white-chip overlay
	   (`.faa-feature__chip`). Pastel R5 comment #5 — section bg (white)
	   shows through the cut. clip-path supersedes the previous 4px radius;
	   remaining three corners stay square (negligible at 1280×400). */
	clip-path: var(--corner-cut-clip); /* QA R3 #11 — rounded non-cut corners; 82px diagonal via shared --corner-cut-clip */
}

/* Was the white-triangle overlay used to fake a corner-cut on the feature
   panel. Pastel R5 comment #5 made the cut real (clip-path on
   `.faa-feature__inner`); element kept in DOM, no longer rendered. */
.faa-feature__chip {
	display: none;
}

/* ==========================================================================
   Block 5b — faa-atc "Apprenticeships made easy" (ATC partnership)
   Pastel FaA #15 — Figma 11329:2386 layout_KTB1HG. All text centre-aligned.
   ========================================================================== */
.faa-atc {
	padding: 48px 80px 112px; /* Figma 11329:2386 layout_KTB1HG */
	background-color: var(--color-white); /* Figma fill none → white page bg */
}

.faa-atc__inner {
	display: flex;
	flex-direction: column;
	gap: 36px; /* Figma 11329:2389 layout_541PK5 */
	max-width: 1280px;
	margin: 0 auto;
	text-align: center; /* Figma — H2 / intro / footnote all CENTER */
}

.faa-atc__heading {
	margin: 0;
	font-size: 48px; /* Figma Heading/H2 */
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--color-navy); /* Figma fill_CGBXP1 #0B1628 */
}

.faa-atc__heading-accent {
	color: var(--color-tangerine); /* Figma ts1 #FF6600 */
}

.faa-atc__intro {
	margin: 0;
	font-size: 20px; /* Figma Text/Large/Bold */
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-navy); /* Figma fill_CGBXP1 */
}

.faa-atc__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px; /* Figma 11329:2400 layout_OXHP41 */
}

.faa-atc__card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-white); /* Figma fill_XBZUZ6 */
	border: 1px solid var(--color-navy-lightest); /* Figma fill_SPANOH #E6E7E9 */
	border-radius: 4px; /* Figma 11329:2456 */
	box-shadow: var(--shadow-md); /* Figma effects medium 0 3px 16px -4px rgba(0,0,0,0.09) */
	overflow: hidden;
}

.faa-atc__card-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px; /* Figma 11329:2458 layout_2K51ZS (icon → title) */
	padding: 24px; /* Figma 11329:2457 layout_Z3B6HM */
}

.faa-atc__icon {
	font-size: 40px; /* Figma 11329:2459 layout_A9Q99C 40×40 */
	color: var(--color-tangerine); /* Figma icon fill #FF6600 */
	line-height: 1;
}

.faa-atc__card-title {
	margin: 0;
	font-size: 20px; /* Figma Heading/H6 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--color-navy); /* Figma fill_CGBXP1 */
}

.faa-atc__strip {
	display: block;
	width: 100%;
	height: 8px; /* Figma 11329:2463 layout_9GB311 */
	background-color: var(--strip-color, var(--color-accent-light-orange));
	flex-shrink: 0;
}

.faa-atc__footnote {
	margin: 0;
	font-size: 18px; /* Figma Text/Medium/Normal */
	font-weight: 400;
	line-height: 1.5;
	color: #000000; /* Figma fill_P71I14 */
}

/* Mobile — derived per roadmap/mobile-derivation-catalog.md (no mobile Figma
   frame for this section; cards stack, section padding 50/20, H2 48→34). */
@media (max-width: 768px) {
	.faa-atc {
		padding: 50px 20px;
	}
	.faa-atc__inner {
		gap: 24px;
	}
	.faa-atc__heading {
		font-size: 34px;
	}
	.faa-atc__intro {
		font-size: 18px;
	}
	.faa-atc__cards {
		grid-template-columns: 1fr;
	}
}

/* White card | Figma 10330:68854 layout_3DVDIO */
.faa-feature__card {
	/* width 496, padding 36, gap 32, white bg, radius 4 */
	width: 496px; /* Figma 10330:68854 layout_3DVDIO */
	flex-shrink: 0;
	background-color: #ffffff; /* Figma 10330:68854 fill_LHJRJB */
	border-radius: 4px; /* Figma 10330:68854 */
	padding: 36px; /* Figma 10330:68854 layout_3DVDIO */
	display: flex;
	flex-direction: column;
	gap: 32px; /* Figma 10330:68854 layout_3DVDIO */
}

.faa-feature__heading {
	/* Figma 10330:68860 Heading/H2: 48px/120% -1% 400 */
	font-size: 48px; /* Figma 10330:68860 */
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 400;
	color: var(--color-navy-darkest); /* Figma fill_6305G9 */
	margin: 0;
}

.faa-feature__heading-accent {
	color: var(--color-tangerine); /* Figma 10330:68860 ts1 */
}

.faa-feature__copy {
	display: flex;
	flex-direction: column;
	/* Same reasoning as `.faa-intro__copy` above — Figma joins paragraphs
	   with `\n\n` inside a single text node; the 36px we copied was the
	   text-to-CTA gap, not paragraph-to-paragraph. Pastel R5 comment #4. */
	gap: 16px;
}

.faa-feature__copy p {
	/* Figma 10330:68862 Text/Regular/Normal: 16px/140% 400 */
	font-size: 16px; /* Figma 10330:68862 */
	line-height: 1.4;
	font-weight: 400;
	color: var(--color-navy-darkest);
	margin: 0;
}

/* .faa-feature__cta styling — see combined rule with .faa-intro__cta above */

/* ==========================================================================
   Block 6 — faa-form-section "Find an Apprentice"
   Figma 10330:68877 layout_FKBK2H
   ========================================================================== */

.faa-form-section {
	/* Figma 10330:68877 layout_FKBK2H: column padding 112 80 bg #E6E7E9 */
	padding: 112px 80px; /* Figma 10330:68877 layout_FKBK2H */
	background-color: var(--color-navy-lightest); /* Figma fill_ACG22J #E6E7E9 */
}

.faa-form-section__inner {
	/* Figma 10330:68878 layout_TXN3S9: row gap 64 fill */
	display: flex;
	flex-direction: row;
	gap: 64px; /* Figma 10330:68878 layout_TXN3S9 */
	max-width: 1280px;
	margin: 0 auto;
	align-items: flex-start;
}

/* LEFT column: intro + help card */
.faa-form-section__intro {
	/* Figma 10330:68879 layout_W56PKO: column fixed 476 gap 48 */
	width: 476px; /* Figma 10330:68879 layout_W56PKO */
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 48px; /* Figma 10330:68879 layout_W56PKO */
}

.faa-form-section__heading-wrap {
	display: flex;
	flex-direction: column;
	gap: 36px; /* Figma 10330:68881 layout_YVPDS7: gap 36 */
}

.faa-form-section__heading {
	/* Figma 10330:68885 Heading/H2: 48px/120% -1% 400; base #000000 per OQ5 */
	font-size: 48px; /* Figma 10330:68885 */
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 400;
	color: #000000; /* Figma fill_W0M22K — OQ5: intentional raw value, not --color-navy-darkest */
	margin: 0;
}

.faa-form-section__heading-accent {
	color: var(--color-tangerine); /* Figma 10330:68885 ts1 fill #FF6600 */
}

.faa-form-section__copy {
	/* Figma 10330:68887 Text/Large/Bold: 20px/130% 700 #03060C */
	font-size: 20px; /* Figma 10330:68887 */
	line-height: 1.3;
	font-weight: 700;
	color: var(--color-navy-darkest); /* Figma fill_6305G9 */
	margin: 0;
}

/* Help card | Figma 10330:68888 layout_37K0B2 */
.faa-help-card {
	/* column, white bg, 1px stroke #E6E7E9, radius 4, shadow-md */
	display: flex;
	flex-direction: column;
	background-color: #ffffff; /* Figma 10330:68888 fill_LHJRJB */
	border: 1px solid var(--color-navy-lightest); /* Figma strokes fill_ACG22J */
	border-radius: 4px; /* Figma 10330:68888 */
	box-shadow: var(--shadow-md); /* Figma 10330:68888 effects medium 0 3px 16px -4px rgba(0,0,0,0.09) */
	overflow: hidden;
}

.faa-help-card__body {
	/* Figma 10503:9757 layout_MV6T79: column gap 18 padding 24 */
	display: flex;
	flex-direction: column;
	gap: 18px; /* Figma 10503:9757 layout_MV6T79 */
	padding: 24px; /* Figma 10503:9757 layout_MV6T79 */
}

.faa-help-card__top {
	/* Figma 10503:9758 layout_TDNW3K: column gap 12 */
	display: flex;
	flex-direction: column;
	gap: 12px; /* Figma 10503:9758 layout_TDNW3K */
}

.faa-help-card__icon {
	/* Figma 10503:9759 phone_in_talk 30×30. Icon color follows the card's
	   theme — same accent as the bottom strip, brand tangerine by default. */
	font-size: 30px; /* Figma 10503:9759 layout_9L2HQ2 */
	color: var(--color-tangerine);
	line-height: 1;
}

.faa-help-card__text-stack {
	/* Figma 10503:9760 layout_J0BXHS: column gap 16 */
	display: flex;
	flex-direction: column;
	gap: 16px; /* Figma 10503:9760 layout_J0BXHS */
}

.faa-help-card__title {
	/* Figma 10503:9761 Heading/H6: 20px/130% -1% 700 #0B1628 */
	font-size: 20px; /* Figma 10503:9761 */
	line-height: 1.3;
	letter-spacing: -0.01em;
	font-weight: 700;
	color: var(--color-navy); /* Figma fill_3LMK2Z */
	margin: 0;
}

.faa-help-card__text {
	/* Figma 10503:9762 Text/Small/Normal: 14px/140% 400 #0B1628 */
	font-size: 14px; /* Figma 10503:9762 */
	line-height: 1.4;
	font-weight: 400;
	color: var(--color-navy); /* Figma fill_3LMK2Z */
	margin: 0;
}

.faa-help-card__actions {
	/* Figma 10503:9763 layout_XWM9F5: row align-center gap 24 */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px; /* Figma 10503:9763 layout_XWM9F5 */
}

/* Contact us CTA — text-link with arrow icon. Figma I10330:68888;10503:9764
   INSTANCE of 4179:8937: parent has no fills/strokes, layout_24CCZD = row gap 8
   hug, text Text/Small/Bold (14px Bold) navy (#0B1628), arrow_right_alt 24×24. */
.faa-help-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);         /* 8px — Figma layout_24CCZD */
	padding: 0;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 14px;             /* Figma Text/Small/Bold */
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-navy);    /* #0B1628 — Figma fill_3LMK2Z */
	text-decoration: none;
	transition: color 0.15s ease;
}

.faa-help-card__cta:hover {
	color: var(--color-tangerine);
}

.faa-help-card__cta:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
}

.faa-help-card__cta .material-symbols-outlined {
	font-size: 24px;             /* Figma layout_J5EOHO 24×24 */
}

/* Colour strip | Figma 10503:9901 layout_PQ1W0M fill_T3JOXH #FFAD77 */
.faa-help-card__strip {
	display: block;
	width: 100%;
	height: 6px; /* Figma 10503:9901 */
	background-color: var(--strip-color, var(--color-accent-light-orange)); /* Figma fill_T3JOXH */
	flex-shrink: 0;
}

/* RIGHT column: form box */
.faa-form-section__form {
	/* Figma 10330:68889 layout_DTFTZE: column fill padding 36 white bg radius 4 */
	flex: 1 1 0;
	min-width: 0;
	background-color: #ffffff; /* Figma 10330:68889 fill_LHJRJB */
	border-radius: 4px; /* Figma 10330:68889 */
	padding: 36px; /* Figma 10330:68889 layout_DTFTZE */
}

/* GF form layout overrides — target stable GF class names */
.faa-form-section__form .gform_body {
	/* Figma 10330:68890 layout_21ZABP: column gap 24 */
}

/* Gravity Forms: 2-up rows for Name+Organisation and Email+Phone */
.faa-form-section__form .gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px; /* Figma 10330:68891 layout_JSVYLS gap 24 */
}

/* Radio groups, textarea, and submit span both columns */
.faa-form-section__form .gfield--type-radio,
.faa-form-section__form .gfield--type-textarea,
.faa-form-section__form .gform_footer {
	grid-column: 1 / -1;
}

/* Text input box | Figma 10330:68894 layout_KOTBTR
   Height locked to 44px to share the submit-button baseline (Figma 10330:68920).
   Figma drew the inputs at hug-height with 8 12 padding (~40px); client review
   2026-05-14 asked the row of fields + submit to line up on one baseline. */
.faa-form-section__form .ginput_container_text input,
.faa-form-section__form .ginput_container_email input,
.faa-form-section__form .ginput_container_phone input {
	border: 1px solid var(--color-navy-light); /* Figma fill_L2XQ65 #545B68 */
	border-radius: 2px; /* Figma 10330:68894 */
	height: 44px;
	padding: 8px 12px; /* Figma 10330:68894 layout_KOTBTR */
	background-color: transparent; /* Figma fill_LG2W0S */
	width: 100%;
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-navy-darkest);
	box-sizing: border-box;
}

/* Textarea | Figma 10330:68919 layout_I19RUN; OQ6: min-height 180px resize vertical */
.faa-form-section__form .ginput_container_textarea textarea {
	border: 1px solid var(--color-navy-light); /* Figma fill_ZZFNBV #545B68 */
	border-radius: 2px; /* Figma 10330:68919 */
	padding: 12px; /* Figma 10330:68919 layout_I19RUN */
	min-height: 180px; /* Figma y:172/176 marker approx; OQ6 */
	resize: vertical;
	width: 100%;
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-navy-darkest);
	background-color: transparent;
	box-sizing: border-box;
	/* bug-11: long unbroken strings (e.g. "sdsdsdsd…") overflow the field. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.faa-form-section__form .ginput_container_textarea textarea::placeholder {
	color: rgba(13, 11, 0, 0.6); /* Figma 10330:68919 child fill_SX339E */
}

/* Confirmation message (post-submit) | bug-12: GF default is plain text in
   place of the form. Centre the message inside the existing
   `.faa-form-section__form` card (which already provides the white bg +
   border + 36px padding) and prepend a check-circle icon. Do NOT add card
   chrome here — that would render a second nested box because the outer
   form wrapper already is a card. */
.faa-form-section__form .gform_confirmation_message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 240px;
	text-align: center;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--color-navy-darkest);
}

.faa-form-section__form .gform_confirmation_message::before {
	content: "check_circle";
	font-family: 'Material Symbols Outlined';
	font-size: 56px;
	line-height: 1;
	color: var(--color-tangerine);
	font-weight: 400;
}

/* Submit button | Figma 10330:68920 layout_WWOOQ6 */
.faa-form-section__form .gform_footer input[type="submit"],
.faa-form-section__form .gform_button {
	/* row justify+align center gap 12 padding 10 24 hug×44 bg #FF6600 radius 2 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px; /* Figma 10330:68920 layout_WWOOQ6 */
	padding: 10px 24px; /* Figma 10330:68920 layout_WWOOQ6 */
	height: 44px; /* Figma 10330:68920 fixed 44 height */
	background-color: var(--color-tangerine); /* Figma fill_7O3D8H */
	color: #ffffff; /* Figma 10330:68920 child fill_LHJRJB */
	border: none;
	border-radius: 2px; /* Figma 10330:68920 */
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
}

/* ==========================================================================
   Responsive — 1199px (form-section collapse, ahead of intro)
   Bug R5-followup (1024-1199 window): the 476px fixed intro column squeezes
   the form column below ~500px, and `.gform_fields` two-up grid produces
   per-input columns ~200-230px — narrow enough that "Organisation / Company"
   wraps to two lines while "Name" stays on one. Inputs in the same row no
   longer share a vertical baseline. Collapse the form-section to a single
   column from 1199 down so the form takes full width and the 2-up grid has
   ~940px+ to work with. Intro stack stays at the 1024 breakpoint (bug-15
   below — different concern). 1199 picked over 1024 to repair this band.
   ========================================================================== */

@media (max-width: 1199px) {
	.faa-form-section__inner {
		flex-direction: column;
		gap: 48px;
	}

	.faa-form-section__intro {
		width: 100%;
	}

	.faa-form-section__form {
		width: 100%;
	}
}

/* ==========================================================================
   Responsive — 1024px (iPad-range intro stack)
   bug-15: at 820px (iPad Air) the intro image + text 2-col layout overflows
   because the image figure inherits the parent height in row-flex. Stack at
   1024 so both columns get full breathing room on tablets.
   ========================================================================== */

@media (max-width: 1024px) {
	/* Intro: image above text (above-fold visual lead retained) */
	.faa-intro__inner {
		flex-direction: column;
		gap: 48px;
	}

	.faa-intro__image {
		/* Override desktop `flex: 1 1 0` — in a column-flex container the
		   flex-basis:0 wins over `height` and collapses the figure to 0
		   (same root cause as the 768 fix below). */
		flex: 0 0 auto;
		width: 100%;
		height: 420px;
	}

	.faa-intro__box {
		width: 100%;
	}

	/* Feature: keep dark-bg + card, but let the card take full width */
	.faa-feature__card {
		width: 100%;
	}
}

/* ==========================================================================
   Responsive — 768px
   ========================================================================== */

@media (max-width: 768px) {
	/* Block 4 — intro */
	.faa-intro {
		padding: 80px 40px 0; /* derived from desktop 112/80, halve horizontal */
	}

	.faa-intro__inner {
		/* Mobile 10519:9248: column gap 48; text-box ABOVE image */
		flex-direction: column-reverse; /* Figma 10519:9248 order: Content Box before Image */
		gap: 32px;
	}

	.faa-intro__image {
		/* Override desktop `flex: 1 1 0` — flex-basis:0 in column-flex
		   collapses the figure to height:0 because the parent has no fixed
		   height for `flex-grow:1` to grow into. */
		flex: 0 0 auto;
		width: 100%;
		height: 420px; /* derived from desktop layout; replaced by 310px at ≤402 */
		/* Mobile corner cut at 60×60 to match Figma 10519:9250 (was 82×82
		   white chip pre-R5). Section bg shows through. */
		--corner-cut: 60px;
		clip-path: var(--corner-cut-clip);   /* QA R3 #11 — rounded non-cut corners; 60px diagonal via shared --corner-cut-clip */
	}

	.faa-intro__box {
		width: 100%;
		gap: 24px; /* Figma 10519:9252 layout_41MRW3 */
	}

	.faa-intro__heading {
		font-size: 38px; /* Figma 10519:9237 mobile H2 */
	}

	/* Block 5 — feature */
	.faa-feature {
		padding: 80px 40px;
	}

	.faa-feature__inner {
		padding: 32px;
		/* Figma mobile (10519:9268) drops the corner-cut entirely.
		   Reset the desktop clip-path so the feature card keeps all
		   four square corners on small viewports. */
		clip-path: none;
	}

	.faa-feature__card {
		width: 100%;
		padding: 24px;
		gap: 32px; /* Figma 10519:9272 layout_7CF8E0 */
	}

	.faa-feature__heading {
		font-size: 34px; /* Figma mobile Heading/H2 */
	}

	.faa-form-section__heading {
		font-size: 34px; /* Figma mobile Heading/H2 — was missing mobile override */
	}

	/* Block 6 — form section */
	.faa-form-section {
		padding: 80px 40px;
	}

	.faa-form-section__inner {
		flex-direction: column;
		gap: 48px; /* Figma 10519:9290 layout_P1IRWR */
	}

	.faa-form-section__intro {
		width: 100%;
		gap: 48px;
	}

	.faa-form-section__form {
		width: 100%;
		padding: 32px;
	}

	/* Collapse 2-col grid to 1-col */
	.faa-form-section__form .gform_fields {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Responsive — 480px (mobile bg flip per designer comment #24 / OQ3)
   ========================================================================== */

@media (max-width: 480px) {
	.faa-form-section {
		/* Designer comment #24 (F015), OQ3: bg flips to white on phones */
		background-color: #ffffff; /* Figma 10519:9289 fill_50LQI9 — mobile override */
		padding: 50px 20px; /* Figma 10519:9289 layout_8I14DA */
	}

	/* Figma 10519:9301 layout_UB4IEE — form box has no padding on mobile;
	   section padding (50px 20px) provides the side margins. bg is white-on-white
	   so the card chrome is invisible. */
	.faa-form-section__form {
		padding: 0; /* Figma layout_UB4IEE — no padding */
	}
}

/* ==========================================================================
   Responsive — 402px
   ========================================================================== */

@media (max-width: 402px) {
	/* Block 4 */
	.faa-intro {
		padding: 50px 20px 0; /* Figma 10519:9246 layout_DOFWHZ */
	}

	.faa-intro__inner {
		gap: 48px; /* Figma 10519:9248 layout_P1IRWR */
	}

	.faa-intro__image {
		height: 310px; /* Figma 10519:9249 layout_HPYJCG */
		object-fit: cover;
	}

	.faa-intro__heading {
		font-size: 34px; /* Figma mobile Heading/H2 fontSize 34 */
	}

	/* Block 5 — on mobile the bg image moves from __inner to the outer section
	   (Figma 10519:9268 fill_7HOJL0 = IMAGE on outer, Section Inner transparent).
	   __inner has padding:0 so the white card would cover any bg set there.
	   The corner-cut chip stays hidden at mobile per Figma — `.faa-feature__chip`
	   `display: none` from the 768 block carries through unchanged.
	   `margin-top: 48px` keeps a white gap between the white intro section
	   and this dark-bg section; otherwise the dark photo butts directly
	   against the intro's bottom edge because the intro's padding-bottom is 0
	   and this section's padding-top is filled by the bg image. */
	.faa-feature {
		margin-top: 48px;
		padding: 80px 20px; /* Figma 10519:9268 layout_HC8MBJ */
		background-image: url('../images/find-an-apprentice/feature-bg.png');
		background-size: cover;
		background-position: center;
		background-color: #1a2537; /* Figma fill_7HOJL0 fallback */
	}

	.faa-feature__inner {
		padding: 0;
		background-image: none;    /* reset — outer section owns bg at mobile */
		background-color: transparent;
	}
}