/* ===== Recruiting page ===== */

/* Hero: pale band, two-column (title + carbon quote card) */
.rec-hero {
  padding-block: var(--space-2xl) var(--space-3xl);   /* tightened from s-9/s-10 — hero was too tall */
  border-bottom-left-radius: 140px;   /* Figma: Header radii [0,0,0,140] */
}
.rec-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}
.rec-hero__intro {
  container-type: inline-size;   /* proportional hero: title + tagline scale in cqi of this column */
}
.rec-hero__intro .hero__title {
  margin: 0;
  font-size: clamp(2rem, 20cqi, 6rem);   /* "Recruiting" ≈ box width at any size */
}
.rec-hero__sub {
  margin-top: var(--space-md);
  color: var(--c-eclipse);
  font-size: clamp(1.1rem, 6.2cqi, 1.85rem);   /* scales with the title so it keeps matching "Recruiting" width */
  font-weight: 500;
}

/* Carbon quote card inside the pale hero */
.rec-quote {
  margin: 0;
  background: var(--c-carbon);
  color: var(--c-white);
  /* CLI signature diagonal sweep (measured from Figma: 48/0/48/0) — rounded
     top-left + bottom-right, sharp top-right + bottom-left. Same language as the photos. */
  border-radius: var(--r-2xl) 0 var(--r-2xl) 0;
  padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
}
.rec-quote__mark {
  display: block;
  font-size: var(--fs-h1);
  line-height: 0.6;
  font-weight: 700;
  color: var(--c-blue);
  margin-bottom: var(--space-sm);
}
.rec-quote__text {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.18;
}
.rec-quote__cite {
  margin-top: var(--space-lg);
  text-align: right;
  font-weight: 700;
  color: var(--c-blue);
  font-size: var(--fs-sm);
}

/* Centered intro statement */
.rec-statement__text {
  text-align: center;
  font-size: var(--fs-h4);   /* §5 token (~28.8px@1440) — matches Figma statement size */
  font-weight: 600;
  line-height: 1.28;              /* Figma: ~3 tight lines at full width (was 1.45) */
  color: var(--c-white);
}
/* The Figma 3-line break (blue clause alone on line 3) is a designer-forced break:
   proven impossible by natural wrap (L1 needs box ≥1151px, but "all" only drops off
   L2 below 1146px — no overlap). So force it, but ONLY when the text box is actually
   at its widest via a CONTAINER query on the box's own width. Below that the break is
   suppressed and the text reflows naturally — no stranded line at any in-between width. */
.rec-statement > .container{ container-type: inline-size; }
.rec-statement__text .br-max{ display:none; }
@container (min-width: 1156px){ .rec-statement__text .br-max{ display:inline; } }

/* Story: photo + paragraph */
.rec-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;   /* text is short here — center it beside the min-height photo */
}
.rec-story__media {
  min-height: 360px;     /* keep the photo a proper ~7:5, not a squished letterbox strip */
}
.rec-story__media .img-ph {
  border-radius: var(--r-xl);
}
.rec-story__body p {
  font-size: var(--fs-body);   /* unified body size (matches the other pages) */
  line-height: 1.6;
  color: var(--c-white);
  margin: 0;
}

/* Engine grid of carbon cards */
.rec-engine__title {
  text-align: center;
  font-size: var(--fs-h2);
  margin: 0 0 var(--space-3xl);
  color: var(--c-pale);   /* Figma: pale #BEE3FA, not the inherited white */
}
.rec-engine__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}
.rec-card {
  padding: var(--space-2xl);
  border-radius: var(--r-xl);
}
.rec-card__title {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.15;
}
.rec-card__body {
  margin: 0;
  line-height: 1.6;
  color: var(--c-white);
}
/* Fifth card centered under the 2x2 grid — exactly ONE column wide (same as the
   others), not a wider 560px block. Column width = (row - gap) / 2. */
.rec-card--center {
  grid-column: 1 / -1;
  width: calc((100% - var(--space-xl)) / 2);
  margin-inline: auto;
}

/* Engine card grid: unchanged tier (≤979.98) — a 2x2+1 card grid, not a photo
   row, so it doesn't need the laptop stretch/tablet crop treatment below. */
@media (max-width:979.98px) {
  .rec-engine__grid {
    grid-template-columns: 1fr;
  }
  .rec-card--center {
    width: auto;   /* 1-col grid: fill the row like the other cards */
  }
}

/* Hero + story rows stack on Tablet + Mobile (≤767); 2-col only on Laptop + Desktop.
   minmax(0,1fr) lets the column shrink below the item's min-content. */
@media (max-width:767.98px) {
  .rec-hero__grid,
  .rec-story__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Hero foot: the quote IS the bottom edge — drop the hero's pale padding + corner
     so there's ZERO gap before P3S2; the quote carries the corner look instead. */
  .rec-hero { padding-bottom: 0; border-bottom-left-radius: 0; }
  /* Story photo -> fixed 200px band, full width, centered cover-crop (like the other
     pages). min-height:0 overrides the base 360. */
  .rec-story__media {
    width: 100%;
    height: 200px;
    min-height: 0;
    aspect-ratio: auto;
  }
  .rec-story__media .pmedia__bg { background-position: center center; }

  /* P3S1 redesign: the quote is a full-bleed carbon band that IS the hero's bottom
     edge — same 48/0/48/0 sweep as D/L. It dips r-2xl into P3S2 (margin-bottom) and
     sits above it (z-index), so the rounded bottom-right corner reveals P3S2's dark bg.
     Compact layout: the blue mark is a LEFT-hand icon, vertically centred to the text
     (incl. when it wraps to 2 lines); tight block padding + name gap. */
  .rec-quote {
    position: relative;
    z-index: 1;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-bottom: calc(-1 * var(--r-2xl));
    border-radius: var(--r-2xl) 0 var(--r-2xl) 0;
    padding-block: var(--space-lg);
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-md);
    align-items: center;
  }
  .rec-quote__mark { grid-area: 1 / 1; margin: 0; align-self: center; line-height: 1; transform: translateY(0.22em); }   /* " hangs high in its em; nudge to optically centre against the text */
  .rec-quote__text { grid-area: 1 / 2; }
  .rec-quote__cite { grid-area: 2 / 1 / 3 / 3; margin-top: var(--space-xs); }

  /* P3S2: the quote overlaps this section's top, so add real space before the
     statement text (r-2xl sits UNDER the quote, + 80px clear below it). */
  .rec-statement { padding-top: calc(var(--r-2xl) + 80px); }
}

/* MOBILE (<480): center the hero intro + story copy so the stacked column
   reads as a focused, centered block rather than left-hugging text. */
@media (max-width:479.98px) {
  .rec-hero__intro {
    text-align: center;
  }
  .rec-story__body {
    text-align: center;
  }
}