/* careers.css - /careers/ hub (Velvet Cinema)
   Page-specific layers only; primitives (.section, .container, .eyebrow,
   .btn, tokens) come from style.css / design-tokens.css. Mobile-first. */

/* DOMINANT MOMENT: Oversized fluid heading with accent-colored em on typographic hero - .chero__title */

/* -- Hero ------------------------------------------------------------------ */
.chero {
  /* 192px of block padding (112 top + 80 bottom) made this the tallest hero on
     the site at 781px, running 138px past the first fold at 1280x800 and 218px
     at 1280x720. Its peers carry ~100-106px: .team-hero 106, .reviews-hero 101.
     This was pure dead space, not composition - the grid itself is only 589px.

     NOT the --header-h drift family, despite looking like it in a fold audit:
     .chero has no min-height and never tried to fill the fold, so there was no
     header subtraction to get wrong. Trimming to peer level is the fix; adding
     a fold-aware floor would be inventing an intent this hero never had.

     Tuned to clear the CTA, not to hit a number. At ~110px of padding the hero
     landed 55px past the fold, which put "SEE OPEN POSITIONS" half-sliced by
     the viewport edge - worse than being cleanly below it, because a cut button
     reads as broken. ~55px clears it: 589px grid + 55 = 644 against a 643 fold.

     Now keyed to svh, not vw. The constraint here is viewport HEIGHT, so
     width-based padding was the wrong axis: a 1280x720 laptop and a 1280x1080
     monitor paid identical padding despite having 360px difference in room.
     svh reclaims ~16px at 720 (closing the last 12px the copy trim left) and
     is MORE generous than the old fixed value above ~1000px tall. */
  padding-block: clamp(1rem, 3svh, 3rem) clamp(0.875rem, 2.4svh, 2.5rem);
  background: var(--color-bg);
}

.chero__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 900px) {
  /* minmax(0,...) on both tracks - PREVENTIVE, not a repair. The 768-1023 sweep filed this as a
     latent copy of the bio-hero starvation, waiting for the day /careers/ gets a hero photo.
     It is not: `_qa/b1-chero-latent.js` arms the defect (strips `.chero--text`, injects the
     exact <picture> + 720px img careers.php:54-58 emits) and the UNFIXED rule resolves a clean
     1.22 ratio - 440/360 at 900, 505/414 at 1024, 642/526 at 1280, no spill. The photo cannot
     floor its track because `.chero__media img` is `width:100%`, whose min-content contribution
     is zero; bio-hero starved for a different reason (an `auto` track whose max-content came
     from a height-derived portrait frame). Kept anyway because it is free and the numbers are
     byte-identical with it - but do not record this as one of the sweep's 21 fixed defects. */
  .chero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .chero--text .chero__grid { grid-template-columns: minmax(0, 1fr); }
  .chero--text .chero__copy { max-width: 64ch; margin-inline: auto; text-align: center; }
  /* Batch 4 alignment: the lede's `margin-inline: auto` belongs HERE, with the
     centring it depends on. It used to sit unconditionally further down the file,
     so below 900 a 46ch lede was block-centred inside a copy column that was
     neither centred nor text-centred, and its ragged left edge floated off the
     left-aligned title above it. Centred block plus left-aligned text is the
     mismatch; the two declarations now switch on together. */
  .chero--text .chero__lede { margin-inline: auto; }
  .chero--text .chero__trust,
  .chero--text .chero__actions { justify-content: center; }
}

.chero__title {
  /* Velvet Cinema editorial serif hero (matches .svcs-hero__title). */
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(2.6rem, 1.6rem + 5vw, 5rem);
  font-weight: 350;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin-top: var(--space-sm);
  text-wrap: balance;
}

.chero__title em {
  font-style: italic;
  font-weight: 480;
  color: var(--color-rose-deep);
}

.chero__lede {
  font-size: var(--text-lg);
  max-width: 46ch;
  margin-top: var(--space-lg);
}

.chero__trust {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.chero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-muted);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.5em 1em;
}

.chero__chip-icon { width: 1.05em; height: 1.05em; color: var(--color-accent); }

.chero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.chero__media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* Grid items default to `min-width: auto`, which re-imposes on the ITEM the min-content floor
     that minmax(0,...) just removed from the TRACK. Without this the minmax above is a no-op. */
  min-width: 0;
}

/* img_webp() emits a bare <picture>, which is an inline box - so the img inside it sits on a
   text baseline and leaves a few px of dead space under the photo inside a rounded, clipped,
   shadowed frame. Blocking the picture removes that. */
.chero__media picture { display: block; }
.chero__media img { width: 100%; max-width: 100%; height: auto; }

/* -- Shared section head --------------------------------------------------- */
.careers-sectionhead {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.careers-sectionhead__title {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 350;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin-top: var(--space-sm);
  text-wrap: balance;
}
.careers-sectionhead__title em { font-style: italic; font-weight: 480; color: var(--color-rose-deep); }

/* Bespoke "Since 2009" stat - the page's signature moment + a break in the
   otherwise all-centered rhythm. Heading-weight numeral (matches the site's
   other oversized stats), rose accent lives in the caption word. */
.careers-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  max-width: 46ch;
  margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
  text-align: left;
}
.careers-stat__num {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: clamp(3.25rem, 2.25rem + 4.5vw, 5.5rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--color-heading);
  font-variant-numeric: lining-nums;
}
.careers-stat__text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  line-height: 1.5;
  color: var(--color-body);
  max-width: 22ch;
}
.careers-stat__text em { font-style: italic; font-weight: 480; color: var(--color-rose-deep); }

.careers-sectionhead__lede {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
  margin-inline: auto;
}

/* -- Pillars --------------------------------------------------------------- */
.careers-pillars {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .careers-pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .careers-pillars { grid-template-columns: repeat(4, 1fr); } }

.careers-pillar {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-card);
}

/* Muted to heading tone - four teal icons read as a rash; teal is reserved for
   interactive/hover + the single focal beat per viewport (accent discipline). */
.careers-pillar__icon { width: 44px; height: 44px; color: var(--color-heading); margin-bottom: var(--space-md); }
.careers-pillar__title { font-size: var(--text-lg); margin-bottom: var(--space-sm); text-wrap: balance; }
.careers-pillar__text { font-size: var(--text-base); }

/* Editorial raised/lowered stagger on the 4-up pillars (playbook item 2 - apply
   the offset rhythm consistently, matching staff/bio/hub). Exactly 4 uniform
   grid-stretch cards in one row with no reveal transform, so nth-child(even) =
   cols 2+4 take the lower offset. 4-col breakpoint only; reduced-motion opts out. */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 980px) {
    .careers-pillars .careers-pillar:nth-child(even) {
      transform: translateY(var(--space-2xl));
    }
  }
}

/* -- Position cards -------------------------------------------------------- */
.careers-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .careers-grid { grid-template-columns: 1fr 1fr; }
  /* An odd number of position cards (e.g. 2 open + 1 waitlist) left the last
     card alone on its row with a hollow void beside it. Span the orphan full
     width so the trailing row reads as a deliberate feature, not a gap. */
  .careers-grid > .careers-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.careers-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
}

.careers-card__main {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* DOMINANT MOMENT: rose serif stat trio in the programme aside - .careers-aside__stats */
/* The full-width orphan card (the apprentice role) previously left its right ~40%
   empty but for a floating status tag. It now carries a programme aside: eyebrow,
   serif lede with a rose-italic accent, then three bordered stat tiles. The group is
   vertically centred against the taller copy column (Ben's call, variant E). */
.careers-card--split {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 760px) {
  .careers-card--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: stretch;
  }
}

.careers-card__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
  min-width: 0;
}

@media (min-width: 760px) {
  .careers-card__aside {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-2xl);
  }
}

.careers-aside__eyebrow {
  margin: 0 0 var(--space-sm);
}

.careers-aside__lede {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.9rem);
  font-weight: 350;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}

.careers-aside__lede em {
  font-style: italic;
  color: var(--color-rose-deep);
}

.careers-aside__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.careers-aside__stat {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  min-width: 0;
}

.careers-aside__n {
  display: block;
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  font-weight: 350;
  line-height: 0.9;
  color: var(--color-rose-deep);
}

.careers-aside__l {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-muted);
}

@media (hover: hover) {
  @media (prefers-reduced-motion: no-preference) {
    .careers-card { transition: transform var(--transition-smooth), box-shadow var(--transition-smooth); }
    .careers-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
    .careers-card:hover .careers-card__arrow { transform: translateX(3px); }
  }
}

.careers-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.careers-card__title { font-size: var(--text-xl); text-wrap: balance; }
.careers-card__title a { color: var(--color-heading); text-decoration: none; }
.careers-card__title a:hover { color: var(--color-link); }

.careers-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 0.8em;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.careers-tag--hiring {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
}

.careers-tag--waitlist {
  color: var(--color-rose-deep);
  background: color-mix(in srgb, var(--color-rose-deep) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-rose-deep) 30%, transparent);
}

.careers-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.careers-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--text-xs);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.35em 0.8em;
}

.careers-chip__icon { width: 1em; height: 1em; color: var(--color-accent); }

.careers-card__excerpt { font-size: var(--text-base); margin-bottom: var(--space-lg); flex: 1; }

.careers-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-link);
  text-decoration: none;
  align-self: flex-start;
  min-height: 48px;
}

.careers-card__arrow { width: 1.1em; height: 1.1em; }

@media (prefers-reduced-motion: no-preference) {
  .careers-card__arrow { transition: transform var(--transition-smooth); }
}

.careers-empty { text-align: center; max-width: 56ch; margin-inline: auto; }

/* -- Future openings ------------------------------------------------------- */
.careers-futurelist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) { .careers-futurelist { grid-template-columns: 1fr 1fr; } }

.careers-futureitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}

.careers-futureitem__title { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.careers-futureitem__meta { color: var(--color-muted); font-size: var(--text-xs); }

.careers-futureitem__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-link);
  text-decoration: none;
  white-space: nowrap;
  min-height: 48px;
}

.careers-futureitem__caret { width: 1em; height: 1em; }

/* Hover: caret nudge, mirrors .svc-nav__arrow pattern in style.css */
@media (prefers-reduced-motion: no-preference) {
  .careers-futureitem__caret { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
}

@media (hover: hover) {
  .careers-futureitem__link:hover .careers-futureitem__caret { transform: translateX(3px); }
}

/* -- Dark theme depth ------------------------------------------------------
   The hero, why and open sections were flat navy slabs. Add a soft accent
   glow anchored to the top of the hero + why sections, and lift the cards off
   the field so the dark theme reads as authored, not a flat fill. -------- */
[data-theme="dark"] .chero,
[data-theme="dark"] .careers-why {
  position: relative;
  isolation: isolate;
}
[data-theme="dark"] .chero::before,
[data-theme="dark"] .careers-why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 65% 55% at 50% 0%, color-mix(in srgb, var(--color-accent-glow) 12%, transparent) 0%, transparent 62%);
}
[data-theme="dark"] .careers-pillar,
[data-theme="dark"] .careers-card,
[data-theme="dark"] .careers-futureitem {
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}