/* ==========================================================================
   Page: Career (Figma 1841:6587)
   Hero + culture text reuse .expertise-hero / .expertise-text (page-expertise-
   single.css, also enqueued here). This file only adds the image grid and the
   dark "Work With Us" section. Built on tokens.css.
   ========================================================================== */

.career { background: var(--bg-primary); }

/* ── Content sections ─────────────────────────────────────────────────────
   Text widget on top, collage rows underneath — the same structure the About
   page and the Always On pages use. The rows bring their OWN .container (or
   go full-bleed), which is why the media sits outside the text's container.
   One knob owns both the widget's internal rhythm and the gap down to the
   media. The old .career-images grid is gone: the layout is the editor's now,
   picked in the shared media builder. */
.career-section { --career-row-gap: var(--space-60); }

/* Two sections on the SAME background must only pay the section rhythm ONCE.
   .section gives every section --section-py top AND bottom, which is right
   between differently coloured bands (there the two paddings read as each
   band's own inside) but wrong here: both sections sit on the same light
   ground, so the paddings merged into one 240px void between the first
   section's last image and the second section's heading (measured 120 + 120,
   nothing else). Dropping the top one leaves exactly --section-py, and it
   keeps scaling itself: 120 desktop, 80 tablet, 60 phone, straight from the
   token. No magic number, and it stays correct if the token ever moves.
   The gap DOWN to the dark band is untouched - different background, so the
   two paddings there are supposed to stack. */
.career-section + .career-section { padding-top: 0; }

.career-section__text {
  padding-bottom: 0;   /* .container's own bottom padding would double it */
}
.career-section__text .text-grid {
  --tw-row-gap: var(--career-row-gap);
  --tw-pad-bottom: 0;
}

.career-section__media {
  margin-top: var(--career-row-gap);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The opening block carries the <h1> and Figma's Title/XL (6941:7273). This
   page has NO hero, so this padding is also what clears the fixed header —
   it beats .section's padding-top on source order, this file loading after
   tokens.css. */
.career-section--lead {
  --career-row-gap: var(--space-100);
  padding-top: calc(var(--header-h) + var(--space-100));
}
.career-section--lead .text-grid {
  --tw-heading-size: var(--title-xl);
  --tw-heading-lh: var(--title-xl-lh);
  /* All FOUR columns, not the widget's default three. At Title/XL the first
     line measures 1057px and the 3-column span is only 910, so it broke over
     three lines instead of Figma's two. The body stays at cols 3-4 below it. */
  --tw-heading-col: 1 / span 4;
}

/* ── Work With Us (dark) ─────────────────────────────────────────────────── */
.career-work {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary);
  padding-block: var(--space-100);
  color: var(--text-light);
}
/* Curve is the shared .work-with-us__curve (sections/section-work-with-us.css). */

/* Heading + body are the text widget now (2026-10-09), so the copy sits UNDER
   the heading rather than beside it. The widget brings its own 4-column grid;
   this one exists only to line the role rows up with the body column, so it
   repeats the same four columns and the same 20px gutter. */
.career-work__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 80px;
  align-items: start;
}
.career-work__inner > .text-grid {
  grid-column: 1 / -1;
  --tw-pad-bottom: 0;   /* the grid's row-gap owns the space down to the roles */
}
.career-work__roles { grid-column: 3 / span 2; }

.career-work__roles {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.career-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.career-role__label {
  font-size: var(--title-xs);
  line-height: var(--title-xs-lh);
  letter-spacing: -0.01em;
  color: var(--text-light);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* The widget stacks itself here; the roles follow it at full width. */
  .career-work__inner { row-gap: 40px; }
  .career-work__roles { grid-column: 1 / -1; }
  /* --title-xl has no tablet step in tokens.css, so 100/110 would sit in a
     half-width column and break the heading over four lines. Size and leading
     always move together. Same fix the About hero needed. */
  .career-section--lead .text-grid {
    --tw-heading-size: var(--title-lg);
    --tw-heading-lh: var(--title-lg-lh);
  }
}
@media (max-width: 767px) {
  .career-section { --career-row-gap: 40px; }
  .career-section--lead {
    --career-row-gap: 60px;
    padding-top: calc(var(--header-h) + 60px);
  }
  .career-work { padding-block: 56px; }
  .career-work__right { gap: 48px; }
  /* Figma 3213:5924 mobile: rows stay side-by-side (label left, compact button
     right) with the larger 32px title-xs label. */
  .career-role { gap: 16px; }
  .career-role__label { font-weight: 400; }
}