/**
 * Careers page styles
 *
 * New classes only — existing shared classes (.content-block__*, .advice-service-card*,
 * .btn*, .section-tagline*) are NOT redefined here; they live in about.css, advice.css,
 * buttons.css, and typography.css respectively.
 *
 * Structure (top to bottom):
 *   Block 4  — Work with us (.careers-work-with-us)
 *   Block 5  — Mission and values (.careers-mission)
 *   Block 6  — Full width image (.careers-full-width-image)
 *   Block 7  — Who we're looking for (.careers-who-looking)
 *   Block 8  — Vacancies (.careers-vacancies)
 *   Mobile overrides — @media (max-width: 768px) and @media (max-width: 402px) AFTER desktop
 *
 * css-architecture.md rules:
 *   - Desktop-first; ALL mobile @media blocks after desktop rules.
 *   - max-width queries only; never min-width.
 *   - min-width: 0 on flex ancestors above drag-scroll carousels.
 *
 * @package MBA_ACT
 */


/* ==========================================================================
   Block 4 — Work with us
   Figma node 11008:10656 (Section_Content_Work with us)
   ========================================================================== */

/* Section root: column, padding 112px 80px, white bg.
   Figma 11008:10656 layout_RG8EMV padding 112 80, fill_YH4J3J #FFFFFF */
.careers-work-with-us {
  display: flex;
  flex-direction: column; /* Figma 11008:10656 layout_RG8EMV column */
  align-items: stretch;
  padding: var(--space-28) var(--space-20); /* Figma 11008:10656 layout_RG8EMV 112px 80px */
  background-color: var(--color-white); /* Figma 11008:10656 fill_YH4J3J #FFFFFF */
}

/* Content Wrapper: column, gap 46px (raw — 11008:10657 gap token MISSING FROM CACHE).
   Figma 11008:10657 column gap:46 */
.careers-work-with-us__wrapper {
  display: flex;
  flex-direction: column; /* Figma 11008:10657 column */
  gap: 46px; /* Figma 11008:10657 gap:46 — MISSING FROM CACHE, raw value */
  width: 100%;
}

/* Intro with Image row — extends .content-block__inner (max-width:1280 row gap:64).
   No override needed beyond centering. */
.careers-work-with-us__inner {
  /* inherits .content-block__inner: max-width 1280px, flex row, gap 64px */
}

/* Image figure: clip-path 82px top-right corner cut; clip-path supersedes border-radius.
   Reuses .content-block__image (flex:1, overflow:hidden).
   Figma 11008:10659 clip-path via Vector 2 (11008:10660) at x:638 y:0, 82×82 */
.careers-work-with-us__image {
  align-self: stretch;      /* QA R4 2026-06-19 #14 — stretch image to text-column height (supersedes R3 part-2 flex-start); img object-fit:cover fills it */
  min-height: 0;            /* override base .content-block__image min-height:400 so the stretched height tracks the text column, not a forced 400 */
  border-radius: 0; /* Figma 11008:10659 — clip-path supersedes radius */
  clip-path: var(--corner-cut-clip); /* QA R3 #11 — rounded non-cut corners; 82px diagonal via shared --corner-cut-clip */
}

/* Content box: extends .content-block__box (column gap:24 width:496px).
   No override needed. */
.careers-work-with-us__box {
  /* inherits .content-block__box: flex column, gap 24px, width 496px */
}

/* Content inner: column, gap 36px.
   Figma 11008:10664 layout_U7VNJ3 column gap:36px */
.careers-work-with-us__content {
  display: flex;
  flex-direction: column; /* Figma 11008:10664 layout_U7VNJ3 column */
  gap: var(--space-9); /* Figma 11008:10664 layout_U7VNJ3 gap:36px = --space-9 */
  align-items: stretch;
  width: 100%;
  min-width: 0; /* css-architecture.md: flex child in chain */
}

/* Copy secondary: column, gap 8px.
   Figma 11008:10670 column gap:8px */
.careers-work-with-us__copy-secondary {
  display: flex;
  flex-direction: column; /* Figma 11008:10670 column */
  gap: 8px; /* Figma 11008:10670 gap:8px — raw */
}

/* Subtitle "Our ethos": 20px 700 #000000 (untokenized), width 280px.
   Figma 11008:10671 Text/Large/Bold 20px 700 fill:#000000 (untokenized) W:280 */
.careers-work-with-us__subtitle {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold); /* Figma 11008:10671 700 */
  font-size: 20px; /* Figma 11008:10671 Text/Large/Bold 20px */
  line-height: 1.3; /* Figma 11008:10671 130% */
  color: #000000; /* Figma 11008:10671 fill:#000000 — untokenized */
  width: 280px; /* Figma 11008:10671 W:280 */
}

/* Secondary body: 16px 400 navy-darkest — same as .content-block__copy p.
   Figma 11008:10672 Text/Regular/Normal 16px 400 fill_QVB27A #03060C */
.careers-work-with-us__body {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400; /* Figma 11008:10672 400 */
  font-size: 16px; /* Figma 11008:10672 Text/Regular/Normal 16px */
  line-height: 1.4; /* Figma 11008:10672 140% */
  color: var(--color-navy-darkest); /* Figma 11008:10672 #03060C */
}


/* ==========================================================================
   Block 5 — Mission and values
   Figma node 11008:10637 (Section_Content_Mission and values)
   ========================================================================== */

/* Section root: column, padding 112px 80px, rgba(230,231,233,0.5) bg.
   Figma 11008:10637 layout_RG8EMV padding 112 80, fill_V28B6B rgba(230,231,233,0.5) */
.careers-mission {
  display: flex;
  flex-direction: column; /* Figma 11008:10637 layout_RG8EMV column */
  align-items: stretch;
  padding: var(--space-28) var(--space-20); /* Figma 11008:10637 layout_RG8EMV 112px 80px */
  background-color: rgba(230, 231, 233, 0.5); /* Figma 11008:10637 fill_V28B6B --color-navy-lightest-50 */
}

/* Section inner: row, fill × hug, border-radius 4px.
   Figma 11008:10638 layout_81MD44 row fill×hug radius:4px */
.careers-mission__inner {
  display: flex;
  flex-direction: row; /* Figma 11008:10638 layout_81MD44 row */
  align-self: stretch;
  max-width: 1280px; /* Pastel 2026-06-15 #1 — cap inner at 1280px */
  width: 100%;
  margin-inline: auto; /* centre the capped inner */
  border-radius: var(--radius-sm); /* Figma 11008:10638 layout_81MD44 borderRadius:4px */
  min-width: 0; /* css-architecture.md: flex chain with overflow-x children */
}

/* Content box: column, fill × hug, radius 4px.
   Figma 11008:10639 layout_6AK2FJ column fill×hug radius:4px */
.careers-mission__content-box {
  display: flex;
  flex-direction: column; /* Figma 11008:10639 layout_6AK2FJ column */
  align-items: stretch;
  align-self: stretch;
  flex: 1;
  border-radius: var(--radius-sm); /* Figma 11008:10639 layout_6AK2FJ borderRadius:4px */
  min-width: 0; /* css-architecture.md */
}

/* Content: column, gap 36px, fill × hug.
   Figma 11008:10640 layout_U7VNJ3 column gap:36 fill×hug */
.careers-mission__content {
  display: flex;
  flex-direction: column; /* Figma 11008:10640 layout_U7VNJ3 column */
  gap: var(--space-9); /* Figma 11008:10640 layout_U7VNJ3 gap:36px = --space-9 */
  flex: 1;
  min-width: 0; /* css-architecture.md */
}

/* Content top: column, gap 24px, centered.
   Figma 11008:10641 layout_7LVZF9 column gap:24 fill×hug */
.careers-mission__content-top {
  display: flex;
  flex-direction: column; /* Figma 11008:10641 layout_7LVZF9 column */
  gap: var(--space-6); /* Figma 11008:10641 layout_7LVZF9 gap:24px = --space-6 */
  align-items: center;
}

/* Heading wrap: centers the two-tone H2.
   Figma 11008:10645 / 11008:10647 — column, centered */
.careers-mission__heading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* H2: 48px 400 centered, navy-darkest base color.
   Figma 11008:10648 Heading/H2 48px 400 LH:120% LS:-1% text-align:CENTER fill_5NS77J #03060C */
.careers-mission__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400; /* Figma 11008:10648 Heading/H2 400 */
  font-size: 44px; /* Pastel 2026-06-15 — H2 44px (was 48px); Figma 11008:10648 */
  line-height: 1.1; /* Pastel 2026-06-15 — H2 lh 1.1 */
  letter-spacing: -0.01em; /* Figma 11008:10648 LS:-1% */
  text-align: center; /* Figma 11008:10648 text-align:CENTER */
  color: var(--color-navy-darkest); /* Figma 11008:10648 fill_5NS77J #03060c — base */
}

/* H2 lead span: navy.
   Figma 11008:10648 ts1 "Our " fill:#0B1628 = --color-navy */
.careers-mission__heading-lead {
  color: var(--color-navy); /* Figma 11008:10648 ts1 #0B1628 */
}

/* H2 accent span: tangerine.
   Figma 11008:10648 ts2 "mission and values" fill:#FF6600 = --color-tangerine */
.careers-mission__heading-accent {
  color: var(--color-tangerine); /* Figma 11008:10648 ts2 #FF6600 */
}

/* Content bottom: column, gap 36px.
   Figma 11008:10649 layout_U7VNJ3 column gap:36 fill×hug */
.careers-mission__content-bottom {
  display: flex;
  flex-direction: column; /* Figma 11008:10649 layout_U7VNJ3 column */
  gap: var(--space-9); /* Figma 11008:10649 layout_U7VNJ3 gap:36px = --space-9 */
  flex: 1;
  min-width: 0; /* css-architecture.md */
}

/* Intro paragraph: 20px 700 bold, centered, navy.
   Figma 11008:10650 Text/Large/Bold 20px 700 LH:130% fill:#0B1628 = --color-navy */
.careers-mission__intro {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold); /* Figma 11008:10650 700 */
  font-size: 20px; /* Figma 11008:10650 Text/Large/Bold 20px */
  line-height: 1.3; /* Figma 11008:10650 130% */
  color: var(--color-navy); /* Figma 11008:10650 fill:#0B1628 */
  text-align: center; /* Figma 11008:10637 section centered content */
}

/* Card row: flex row, gap 24px, fill × hug.
   Figma 11008:10651 layout_VPS0YG row gap:24 fill×hug */
.careers-mission__cards {
  display: flex;
  flex-direction: row; /* Figma 11008:10651 layout_VPS0YG row */
  gap: 24px; /* Figma 11008:10651 layout_VPS0YG gap:24px */
  align-self: stretch;
  min-width: 0; /* css-architecture.md: flex row with overflow-x children */
}

/* Each card fills equal share — .advice-service-card handles internal layout */
.careers-mission__cards .advice-service-card {
  flex: 1;
  min-width: 0; /* css-architecture.md: flex item in row */
}


/* ==========================================================================
   Block 6 — Full width image
   Figma node 11008:10636 (FRAME leaf)
   ========================================================================== */

/* Section: full-bleed, aspect-locked to the Figma frame, overflow hidden.
   Figma 11008:10636 layout_HT3IEV width:1440 height:625 (625 = 2425 − 1800).
   aspect-ratio instead of a fixed 625px: on screens wider than 1440 a fixed
   height makes object-fit:cover crop the top of the photo (QA 2026-06-10);
   locking the 1440/625 ratio keeps the visible window identical to Figma
   at any viewport width. */
.careers-full-width-image {
  display: block;
  width: 100%; /* Figma 11008:10636 derived — width 1440, x:0 → full-bleed */
  aspect-ratio: 1440 / 625; /* Figma 11008:10636 derived frame ratio */
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Image: fills section, object-fit cover.
   Figma 11008:10636 fill_JZOKD7 scaleMode:FILL objectFit:cover */
.careers-full-width-image__img {
  display: block; /* Figma 11008:10636 derived */
  width: 100%; /* Figma 11008:10636 fill_JZOKD7 scaleMode:FILL */
  height: 100%; /* Figma 11008:10636 fill_JZOKD7 scaleMode:FILL */
  object-fit: cover; /* Figma 11008:10636 fill_JZOKD7 objectFit:cover */
}


/* ==========================================================================
   Block 7 — Who we're looking for
   Figma node 11008:10604 (Section_Content_Who we're looking for)
   ========================================================================== */

/* Section root: column, padding 112px 80px, white bg.
   Figma 11008:10604 layout column padding:112 80, fill_9FRMR3 #FFFFFF */
.careers-who-looking {
  display: flex;
  flex-direction: column; /* Figma 11008:10604 column */
  align-items: stretch;
  padding: var(--space-28) var(--space-20); /* Figma 11008:10604 padding 112px 80px */
  background-color: var(--color-white); /* Figma 11008:10604 fill_9FRMR3 #FFFFFF */
}

/* Inner row: two columns, gap 48px.
   Figma 11008:10607 Content (row) flex row gap:48 align-self:stretch */
.careers-who-looking__inner {
  display: flex;
  flex-direction: row; /* Figma 11008:10607 row */
  gap: var(--space-12); /* Figma 11008:10607 gap:48px = --space-12 */
  align-self: stretch;
  max-width: 1280px; /* Pastel 2026-06-15 #2 — cap inner at 1280px */
  width: 100%;
  margin-inline: auto; /* centre the capped inner */
  min-width: 0; /* css-architecture.md: flex row */
}

/* Left column: column, gap 24px.
   Figma 11008:10608 LEFT col column gap:24 */
.careers-who-looking__left {
  display: flex;
  flex-direction: column; /* Figma 11008:10608 column */
  gap: var(--space-9); /* QA R3 part-2 — heading→text 36px (Figma had 24px; client override via Pastel) */
  flex: 1;
  min-width: 0; /* css-architecture.md */
}

/* Heading wrap: column, gap 36px.
   Figma 11008:10612 Heading wrap column gap:36 */
.careers-who-looking__heading-wrap {
  display: flex;
  flex-direction: column; /* Figma 11008:10612 column */
  gap: var(--space-9); /* Figma 11008:10612 gap:36px = --space-9 */
}

/* Title container: row.
   Figma 11008:10614 Title Container flex row fill×hug */
.careers-who-looking__title-container {
  display: flex;
  flex-direction: row; /* Figma 11008:10614 row */
  min-width: 0; /* css-architecture.md */
}

/* H2 title: 48px 400 left-aligned.
   Figma 11008:10615 Heading/H2 48px 400 LH:120% LS:-1% text-align:LEFT */
.careers-who-looking__title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400; /* Figma 11008:10615 Heading/H2 400 */
  font-size: 44px; /* Pastel 2026-06-15 — H2 44px (was 48px); Figma 11008:10615 */
  line-height: 1.1; /* Pastel 2026-06-15 — H2 lh 1.1 */
  letter-spacing: -0.01em; /* Figma 11008:10615 LS:-1% */
  text-align: left; /* Figma 11008:10615 text-align:LEFT */
  color: var(--color-navy-darkest); /* Figma 11008:10615 base fill #03060C */
}

/* H2 first span: navy.
   Figma 11008:10615 ts1 "Who we're " fill:#0B1628 = --color-navy */
.careers-who-looking__title--navy {
  color: var(--color-navy); /* Figma 11008:10615 ts1 #0B1628 */
}

/* H2 second span: tangerine.
   Figma 11008:10615 ts2 "looking for" fill:#FF6600 = --color-tangerine */
.careers-who-looking__title--tangerine {
  color: var(--color-tangerine); /* Figma 11008:10615 ts2 #FF6600 */
}

/* Body paragraphs: 20px 700 bold, navy.
   Figma 11008:10616 Text/Large/Bold 20px 700 LH:130% fill:#0B1628 = --color-navy */
.careers-who-looking__body {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold); /* Figma 11008:10616 700 */
  font-size: 20px; /* Figma 11008:10616 Text/Large/Bold 20px */
  line-height: 1.3; /* Figma 11008:10616 130% */
  color: var(--color-navy); /* Figma 11008:10616 fill:#0B1628 */
}

/* Right column: column, align-items center, gap 36px.
   Figma 11008:10617 RIGHT col column align-items:center gap:36 = --space-9 */
.careers-who-looking__right {
  display: flex;
  flex-direction: column; /* Figma 11008:10617 column */
  align-items: center; /* Figma 11008:10617 align-items:center */
  gap: var(--space-9); /* Figma 11008:10617 gap:36px = --space-9 */
  flex: 1;
  min-width: 0; /* css-architecture.md */
}

/* List fills full right column width.
   Reuses .content-block__list from about.css:442 — no redefinition. */
.careers-who-looking__right .content-block__list {
  align-self: stretch;
}


/* ==========================================================================
   Block 8 — Vacancies
   Figma node 11008:10582 (Section_Content_Vacancies)
   ========================================================================== */

/* Section root: column, padding 112px 80px.
   Background: image (careers-vacancies-bg-2f72aa.png) + rgba(8,17,32,0.95) overlay via pseudo.
   Figma 11008:10582 layout_UQMMHO padding:112 80, fill_3PIHUY image + rgba(8,17,32,0.95) */
.careers-vacancies {
  position: relative;
  display: flex;
  flex-direction: column; /* Figma 11008:10582 column */
  align-items: stretch;
  padding: var(--space-28) var(--space-20); /* Figma 11008:10582 layout_UQMMHO 112px 80px */
  background-image: url('../images/careers/careers-vacancies-bg-2f72aa.png'); /* Figma 11008:10582 fill_3PIHUY imageRef:2d66ba9a... filenameSuffix:2f72aa */
  background-size: cover;
  background-position: center;
}

/* Dark overlay via pseudo-element — rgba(8,17,32,0.95).
   Figma 11008:10582 fill_3PIHUY rgba(8,17,32,0.95) — untokenized */
.careers-vacancies::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(8, 17, 32, 0.95); /* Figma 11008:10582 fill_3PIHUY rgba(8,17,32,0.95) — untokenized */
  z-index: 0;
}

/* Inner: positions above overlay pseudo-element */
.careers-vacancies__inner {
  position: relative;
  z-index: 1;
}

/* Content wrapper: row, gap 64px.
   Figma 11008:10584 layout_GDQ6K6 row gap:64 = --space-16 */
.careers-vacancies__content-wrapper {
  display: flex;
  flex-direction: row; /* Figma 11008:10584 layout_GDQ6K6 row */
  gap: var(--space-16); /* Figma 11008:10584 layout_GDQ6K6 gap:64px = --space-16 */
  max-width: 1280px; /* Pastel 2026-06-15 #3 — cap inner at 1280px */
  width: 100%;
  margin-inline: auto; /* centre the capped inner */
  min-width: 0; /* css-architecture.md: flex row */
}

/* Left column: column, gap 48px, width 476px fixed.
   Figma 11008:10585 layout_LHZSOE column gap:48 width:476px fixed */
.careers-vacancies__left {
  display: flex;
  flex-direction: column; /* Figma 11008:10585 layout_LHZSOE column */
  gap: var(--space-9); /* QA R3 part-2 — heading→text 36px (Figma had 48px; client override via Pastel) */
  width: 476px; /* Figma 11008:10585 layout_LHZSOE width:476px FIXED */
  flex-shrink: 0;
  border-radius: var(--radius-sm); /* Figma 11008:10585 borderRadius:4px */
}

/* Intro block: column.
   Figma 11008:10586 Intro column */
.careers-vacancies__intro {
  display: flex;
  flex-direction: column;
}

/* Content within intro: gap 36px.
   Figma 11008:10587 Content column gap:36 = --space-9 */
.careers-vacancies__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-9); /* Figma 11008:10587 gap:36px */
}

/* Section heading: 48px 400 white.
   Figma 11008:10590 Heading/H2 48px 400 LH:120% LS:-1% fill:#FFFFFF = --color-white */
.careers-vacancies__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400; /* Figma 11008:10590 Heading/H2 400 */
  font-size: 44px; /* Pastel 2026-06-15 — H2 44px (was 48px); Figma 11008:10590 */
  line-height: 1.1; /* Pastel 2026-06-15 — H2 lh 1.1 */
  letter-spacing: -0.01em; /* Figma 11008:10590 LS:-1% */
  color: var(--color-white); /* Figma 11008:10590 fill:#FFFFFF */
}

/* Copy section: column, gap 18px.
   Figma 11008:10591 Copy column gap:18 */
.careers-vacancies__copy {
  display: flex;
  flex-direction: column; /* Figma 11008:10591 column */
  gap: 18px; /* Figma 11008:10591 gap:18px — raw (no --space token for 18) */
}

/* Left-col body paragraphs: 20px 700 white.
   Figma 11008:10592 Text/Large/Bold 20px 700 LH:130% fill:#FFFFFF = --color-white */
.careers-vacancies__body {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold); /* Figma 11008:10592 700 */
  font-size: 20px; /* Figma 11008:10592 Text/Large/Bold 20px */
  line-height: 1.3; /* Figma 11008:10592 130% */
  color: var(--color-white); /* Figma 11008:10592 fill:#FFFFFF */
}

/* Right column: column, flex 1 (fill), padding 36px, border 1px tangerine, radius 4px.
   Figma 11008:10593 layout_98GV9M column padding:36 fill, stroke fill_VK43UM #FF6600 1px, radius 4px */
.careers-vacancies__right {
  display: flex;
  flex-direction: column; /* Figma 11008:10593 column */
  flex: 1;
  padding: var(--space-9); /* Figma 11008:10593 layout_98GV9M padding:36px = --space-9 */
  border: 1px solid var(--color-tangerine); /* Figma 11008:10593 fill_VK43UM stroke:#FF6600 1px */
  border-radius: var(--radius-sm); /* Figma 11008:10593 borderRadius:4px */
  min-width: 0; /* css-architecture.md: flex item */
}

/* Vacancies jobs box: column, gap 48px.
   Figma 11008:10594 layout_N691VG column gap:48 = --space-12 */
.careers-vacancies__jobs {
  display: flex;
  flex-direction: column; /* Figma 11008:10594 layout_N691VG column */
  gap: var(--space-12); /* Figma 11008:10594 layout_N691VG gap:48px = --space-12 */
}

/* Job item: column, gap 16px.
   Figma 11008:10595 layout_BYCBC4 column gap:16px = --space-4 */
.careers-vacancies__job {
  display: flex;
  flex-direction: column; /* Figma 11008:10595 layout_BYCBC4 column */
  gap: var(--space-6); /* Pastel 2026-06-15 #4 — larger gap text↔button (was 16px / --space-4) */
}

/* "View more" hugs its label — the column's default stretch was pulling it
   full-width (QA 2026-06-10). Figma 11008:10598 layout_5JYPNW horizontal:hug */
.careers-vacancies__job .btn {
  align-self: flex-start; /* Figma 11008:10598 layout_5JYPNW sizing hug */
}

/* Job title: Heading/H4 32px 400 white.
   Figma 11008:10595/10600 Heading/H4 32px 400 LH:130% LS:-1% fill:#FFFFFF */
.careers-vacancies__job-title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400; /* Figma 11008:10595 Heading/H4 400 */
  font-size: 30px; /* Pastel 2026-06-15 — H4 30px (was 32px); Figma 11008:10595 */
  line-height: 1.3; /* Figma 11008:10595 130% */
  letter-spacing: -0.01em; /* Figma 11008:10595 LS:-1% */
  color: var(--color-white); /* Figma 11008:10595 fill:#FFFFFF */
}

/* Job meta (location/type): pending designer guidance — minimal styling until design is provided */
.careers-vacancies__job-meta {
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}

.careers-vacancies__job-location,
.careers-vacancies__job-type {
  font-size: 14px;
  color: var(--color-white);
  opacity: 0.8;
}

/* Job description: 16px 400 white.
   Figma 11008:10595/10600 Text/Regular/Normal 16px 400 LH:140% fill:#FFFFFF */
.careers-vacancies__job-description {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400; /* Figma 11008:10595 400 */
  font-size: 16px; /* Figma 11008:10595 Text/Regular/Normal 16px */
  line-height: 1.4; /* Figma 11008:10595 140% */
  color: var(--color-white); /* Figma 11008:10595 fill:#FFFFFF */
}

/* Divider between job items: 1px white line.
   Figma 11008:10599 Divider LINE strokeWeight:1px stroke:#FFFFFF */
.careers-vacancies__divider {
  margin: 0;
  border: none;
  border-top: 1px solid var(--color-white); /* Figma 11008:10599 stroke:#FFFFFF 1px */
}

/* Empty state container */
.careers-vacancies__empty {
  display: flex;
  flex-direction: column;
}

/* Empty state message: 16px 400 white.
   Figma 11008:11009 Text/Regular/Normal 16px 400 LH:140% fill:#FFFFFF W:668 */
.careers-vacancies__empty-message {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400; /* Figma 11008:11009 400 */
  font-size: 16px; /* Figma 11008:11009 Text/Regular/Normal 16px */
  line-height: 1.4; /* Figma 11008:11009 140% */
  color: var(--color-white); /* Figma 11008:11009 fill:#FFFFFF */
  max-width: 668px; /* Figma 11008:11009 W:668 FIXED — released to max-width for responsiveness */
}


/* ==========================================================================
   WIDE TABLET — max-width: 1200px
   QA round 2 (2026-06-11): the 4-up mission card row gets cramped well above
   1024 (~240px cards at 1100). Wrap to 2×2 from 1200; single column takes
   over in the 768 block. No carousel — cards must stay reachable for mouse
   users at desktop-ish widths.
   ========================================================================== */

@media (max-width: 1200px) {

  .careers-mission__cards {
    flex-wrap: wrap;
  }

  .careers-mission__cards .advice-service-card {
    flex: 1 1 calc(50% - 12px); /* 2-up: half row minus half of the 24px gap */
  }
}


/* ==========================================================================
   TABLET — max-width: 1024px
   QA round 2026-06-11: between 769 and 1024 the fixed 476px vacancies left
   column crushed the job card to ~150px. Catalog: large grids collapse at 1024.
   Source order: wider queries sit BEFORE the 768 block (cascade = order).
   ========================================================================== */

@media (max-width: 1024px) {

  /* ---- Block 4 — Work with us: full image, no cover-crop ----
     QA bug "image truncated in mobile view": figure min-height 300px +
     object-fit: cover cropped ~24% of the 1290×844 source width once the
     about.css 1024 stack made the figure full-width. Lock the figure to the
     image's natural ratio instead — whole picture visible, no crop. */
  .careers-work-with-us__image {
    min-height: 0;
    aspect-ratio: 1290 / 844; /* natural ratio of careers-work-with-us-6889ed.png */
    order: 2; /* Pastel 2026-06-15 #5 — image below text content when stacked (DOM has image first) */
  }

  /* ---- Block 5 — Mission and values: 2×2 wrap lives in the 1200 block. ---- */

  /* ---- Block 8 — Vacancies: column collapse at 1024 ----
     QA bug "vacancies is not change to mobile view for some screen sizes":
     fixed 476px left + 64px gap left the right panel 144px wide at 844. */
  .careers-vacancies__content-wrapper {
    flex-direction: column; /* mobile-derivation-catalog.md: large grids collapse at 1024 */
    gap: 36px;
  }

  .careers-vacancies__left {
    width: 100%; /* fixed 476px released */
  }
}


/* ==========================================================================
   Mobile overrides — max-width: 768px
   css-architecture.md: ALL mobile blocks AFTER desktop rules; max-width only.
   ========================================================================== */

@media (max-width: 768px) {

  /* ---- Block 4 — Work with us ---- */

  /* Section padding collapse.
     mobile-derivation-catalog.md: "Mobile section padding collapses to 50px 20px at 768" */
  .careers-work-with-us {
    padding: 50px 20px; /* catalog: Mobile section padding */
  }

  /* Column collapse: image stacks above content box.
     mobile-derivation-catalog.md: "Column collapse — 2-col content rows collapse at 768" */
  .careers-work-with-us__inner {
    flex-direction: column; /* mobile-derivation-catalog.md column collapse */
    gap: 32px; /* catalog column-collapse gap (about.css:866 pattern) */
  }

  /* Image when stacked: width only — height comes from the 1024-block
     aspect-ratio (full image, no cover-crop; QA 2026-06-11). No min-height
     here or it re-crops the picture. */
  .careers-work-with-us__image {
    width: 100%;
    --corner-cut: 60px;                  /* mobile-derivation-catalog.md:69-73 triangle 60×60 */
    clip-path: var(--corner-cut-clip);   /* QA R3 #11 — rounded non-cut corners; 60px diagonal via shared --corner-cut-clip */
  }

  /* Content box: full width when stacked */
  .careers-work-with-us__box {
    width: 100%; /* mobile-derivation-catalog.md: full width when stacked */
  }

  /* H2 font-size mobile override.
     mobile-derivation-catalog.md: "default mobile H2 = 34px" */
  .careers-work-with-us .content-block__heading {
    font-size: 32px; /* Pastel 2026-06-15 — H2 mobile 32px (was 34px) */
  }

  /* Subtitle width: release fixed 280px on mobile */
  .careers-work-with-us__subtitle {
    width: 100%;
  }

  /* ---- Block 5 — Mission and values ---- */

  /* Section padding collapse */
  .careers-mission {
    padding: 50px 20px; /* mobile-derivation-catalog.md: Mobile section padding */
  }

  /* H2 mobile size */
  .careers-mission__heading {
    font-size: 32px; /* Pastel 2026-06-15 — H2 mobile 32px (was 34px) */
  }

  /* Card row: single column on phones (QA round 2: no carousel — cards wrap
     2×2 from the 1024 block, then one per row here). */
  .careers-mission__cards .advice-service-card {
    flex: 1 1 100%;
  }

  /* ---- Block 6 — Full width image ---- */

  /* Keep full-bleed; height pending Figma mobile frame.
     mobile-derivation-catalog.md: full-bleed bands stay full-bleed; no height ladder. */
  .careers-full-width-image {
    height: auto; /* pending Figma mobile frame — no catalog ladder for standalone image section */
    aspect-ratio: auto; /* desktop ratio lock off — height comes from the image below */
    padding: 0;
  }

  .careers-full-width-image__img {
    height: auto;
    min-height: 300px; /* reasonable floor until designer provides mobile frame height */
  }

  /* ---- Block 7 — Who we're looking for ---- */

  /* Section padding collapse */
  .careers-who-looking {
    padding: 50px 20px; /* mobile-derivation-catalog.md: Mobile section padding */
  }

  /* Column collapse.
     mobile-derivation-catalog.md: "Column collapse — 2-col content rows collapse at 768" */
  .careers-who-looking__inner {
    flex-direction: column; /* mobile-derivation-catalog.md column collapse */
    gap: 32px; /* catalog column-collapse gap */
  }

  /* Both columns full width when stacked */
  .careers-who-looking__left,
  .careers-who-looking__right {
    width: 100%; /* mobile-derivation-catalog.md: full width when stacked */
  }

  /* H2 mobile size */
  .careers-who-looking__title {
    font-size: 32px; /* Pastel 2026-06-15 — H2 mobile 32px (was 34px) */
  }

  /* ---- Block 8 — Vacancies ---- */

  /* Section padding collapse */
  .careers-vacancies {
    padding: 50px 20px; /* mobile-derivation-catalog.md: catalog: Container caps */
  }

  /* Column collapse + left width release — moved to the 1024 block above
     (QA 2026-06-11: collapse must happen from 1024, not 768). */

  .careers-vacancies__right {
    padding: 24px; /* mobile-derivation-catalog.md: proportionally reduced from 36px */
  }

  /* Job titles/desc: release fixed widths */
  .careers-vacancies__job-title,
  .careers-vacancies__job-description,
  .careers-vacancies__empty-message {
    max-width: 100%; /* fixed 668px released */
  }

  /* H2 mobile size */
  .careers-vacancies__heading {
    font-size: 32px; /* Pastel 2026-06-15 — H2 mobile 32px (was 34px) */
  }

  /* Job title H4: 32px → 28px.
     mobile-derivation-catalog.md: proportional H4 scale (confirm with designer) */
  .careers-vacancies__job-title {
    font-size: 24px; /* Pastel 2026-06-15 — H4 mobile 24px (was 28px) */
  }

  /* Left-col body: 20px → 18px.
     mobile-derivation-catalog.md: proportional Text/Large/Bold (confirm with designer) */
  .careers-vacancies__body {
    font-size: 18px; /* mobile-derivation-catalog.md: proportional reduction */
  }

  /* Pastel 2026-06-15 #6 — mission intro 18px on mobile */
  .careers-mission__intro {
    font-size: 18px;
  }

  /* Pastel 2026-06-15 #7/#8 — who-looking body paragraphs 18px on mobile */
  .careers-who-looking__body {
    font-size: 18px;
  }

  /* Pastel 2026-06-15 #9 — who-looking attribute row items 16px on mobile */
  .careers-who-looking__right .content-block__list-label {
    font-size: 16px;
  }
}


/* ==========================================================================
   Mobile overrides — max-width: 402px
   css-architecture.md: ALL mobile blocks AFTER desktop rules; max-width only.
   ========================================================================== */

@media (max-width: 402px) {

  /* ---- Block 8 — Vacancies (402 tightened horizontal padding) ---- */

  /* Section padding: tighten horizontal to 16px.
     mobile-derivation-catalog.md: find-an-apprentice.css:726 pattern */
  .careers-vacancies {
    padding: 50px 16px; /* mobile-derivation-catalog.md: 402 tighten horizontal */
  }

  /* Right panel padding: further reduced.
     mobile-derivation-catalog.md: 402 further reduction */
  .careers-vacancies__right {
    padding: 24px; /* Pastel 2026-06-15 #10 — vacancies box padding 24px on mobile (was 16px at 402) */
  }
}