/* ============================================
   Careers page — five sections, all scoped via .gs-careers-*.

     - .gs-careers-hero          Dark hero with team photo + careers
                                 bg SVG positioned to extend below
                                 the team photo into its bottom half.
     - .gs-careers-stats         3-up big-number cultural stats trio.
     - .gs-careers-values        6-up "How we work" icon grid.
     - Recruiting process       Uses the shared .gs-wgs-stepper
                                 component (stepper.css + tabs.js).
                                 No careers-specific overrides.
     - .gs-careers-jobs          Open positions grouped by category.
   ============================================ */

/* ─── 1. Hero ────────────────────────────────────────────────
   White-top, illustrated-bottom hero. The title + lede + CTA sit
   on a plain white upper section; the careers illustration SVG
   only appears behind the lower half of the team photo, extending
   below into the section's bottom padding. Implemented via a
   pseudo-element on the photo container so the illustration's
   vertical start point is locked to the photo's midpoint, not
   to any absolute pixel offset that would shift with content. */
.gs-careers-hero {
  background: var(--color-bg);
  color: var(--color-fg);
  /* No bottom padding — the photo sits flush against the section
     boundary, and the next (grey) section picks up immediately
     where the photo ends. The grey ::after on the photo container
     handles the visual transition behind the photo's lower half. */
  padding: 7rem 1.5rem 0;
  text-align: center;
  /* Contain the 100vw bg-illustration so it doesn't trigger a
     horizontal scrollbar on any viewport width. Also relied on
     (vertically) by .gs-careers-hero__photo::after below to stop
     the grey backdrop band exactly at the section's bottom edge —
     don't relax this to overflow-x only without re-solving that. */
  overflow: hidden;
}

.gs-careers-hero__inner {
  max-width: var(--content-frame);
  margin: 0 auto;
}

.gs-careers-hero__intro {
  margin-bottom: 3rem;
}

.gs-careers-hero__title {
  font-size: var(--text-h1);
  color: var(--color-fg);
  /* Slightly looser than the site-wide --leading-tight (1.15).
     This hero's title sits inside a section that needs vertical
     overflow: hidden for an unrelated reason (the bg-illustration
     backdrop trick below) — on mobile Safari the combination of a
     wrapped, `text-wrap: balance`'d heading and a very tight
     line-height can render the last line a few px taller than the
     box the browser laid out for it, and the ancestor's
     overflow: hidden then clips that sliver off the bottom of the
     headline. 1.25 gives enough headroom to absorb that without
     visibly loosening the heading. */
  line-height: 1.25;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.gs-careers-hero__lede {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  max-width: 38rem;
  margin: 0 auto 2rem;
  text-wrap: balance;
}

/* Team photo + the SVG bg layer.

   .gs-careers-hero__photo is the wrapping block. Its ::before
   pseudo-element holds the gs23-careers-bg-v1.svg illustration,
   positioned to start at the vertical midpoint of the photo and
   span the full viewport width (so the illustration extends
   beyond the photo's left/right edges into the section's sides,
   matching the live page).

   `isolation: isolate` creates a local stacking context so the
   ::before's `z-index: -1` stays scoped here — the SVG never
   slips behind the section's white bg or any global underlay. */
.gs-careers-hero__photo {
  position: relative;
  isolation: isolate;
  max-width: 1100px;
  margin: 0 auto;
}

.gs-careers-hero__photo::before {
  content: '';
  position: absolute;
  /* Center horizontally + span full viewport width. transform's
     better than negative margin here — no risk of horizontal
     scrollbars when the page has a scrollbar of its own. */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  /* Vertical anchor: top edge of the SVG sits ~250px above the
     photo's midpoint — so the illustration starts in the photo's
     upper third and extends down past the photo's lower edge,
     framing it like an architectural backdrop. */
  top: calc(50% - 250px);
  height: 420px;
  background-image: url('https://www.giantswarm.io/hubfs/Illustrations/gs23-careers-bg-v1.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  z-index: -1;
  pointer-events: none;
}

/* Grey backdrop that picks up from where the SVG ends and runs
   all the way to the section's bottom edge. Visually merges with
   the muted stats section below, so the hero "transitions out" of
   the illustration into a continuous grey band. Full viewport
   width like the SVG, clipped by the section's overflow:hidden. */
.gs-careers-hero__photo::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  /* SVG bottom edge: top + height = (50% - 250px) + 420px =
     50% + 170px from the photo container's top. Start the grey
     band there. */
  top: calc(50% + 170px);
  /* Extend far below the photo container; the section's
     overflow:hidden clips at the section boundary, so this just
     ensures we always reach it regardless of viewport height. */
  bottom: -50vh;
  background: var(--color-bg-muted);
  z-index: -2;
  pointer-events: none;
}

.gs-careers-hero__photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
}

/* ─── 2. Culture stats ───────────────────────────────────────
   Three big stats on a white bg. Coral numbers (brand-editorial),
   dark labels, body-text descriptions. */
.gs-careers-stats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

/* Stats sizing matches the homepage .gs-outcomes__stat-* recipe:
   chrome-less stats sitting directly on a section bg, with a big
   4rem coral number as the brand-editorial focal point + H4 title
   + body-base description. The card-chrome .gs-stat-card variant
   (3rem value, border, padding) is for grid-of-cards contexts; the
   careers cultural stats are the bigger no-border treatment. */
.gs-careers-stat__number {
  font-size: 4rem;
  font-weight: var(--weight-bold);
  color: var(--color-brand-accent);
  line-height: 1;
  margin: 0 0 0.75rem;
}

.gs-careers-stat__label {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0 0 0.75rem;
  text-wrap: pretty;
}

.gs-careers-stat__desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0;
  text-wrap: pretty;
}

/* ─── 3. "How we work" values grid ──────────────────────────
   6 cards in a 3×2 grid. No card chrome — just icon + title +
   paragraph, well-spaced. Icons in the brand accent for a touch
   of warmth in an otherwise text-heavy section. */
.gs-careers-values__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
}

.gs-careers-value__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--color-bg-muted);
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}

.gs-careers-value__icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.8;
}

.gs-careers-value__title {
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0 0 0.75rem;
}

.gs-careers-value__desc {
  font-size: 0.9375rem;
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0;
  text-wrap: pretty;
}

/* ─── 4. Recruiting process ─────────────────────────────────
   Uses the shared .gs-wgs-stepper component (stepper.css +
   tabs.js) on a dark blue section — same recipe as the platform-
   team-enablement and SPE "how to get started" sections. No
   careers-specific overrides needed; the stepper handles the
   layout, mobile scroll-snap, and tab-switching behavior. */

/* ─── 5. Open positions ─────────────────────────────────────
   Heading + lede + grouped position cards. Each category gets
   its own <h3> + list of rows. Each row is a white pill with
   title + meta on the left, chevron on the right. */
.gs-careers-jobs__group {
  margin-top: 2.5rem;
}

.gs-careers-jobs__category {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 0 0 1.25rem;
}

.gs-careers-jobs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gs-careers-job {
  /* Hover lift handled on the inner link so the whole card area
     is the click target. */
}

/* Card chrome — white tile with a 1px grey border. No box-shadow
   at rest (the section's muted bg provides enough contrast). On
   hover the title + chevron turn coral, a soft shadow appears,
   and the card lifts ~4px. Transitions on all three are kept on
   the same 0.2s curve so they feel like one motion, not three.

   Title + chevron color is animated via `transition: color` on
   the matching elements; the chevron uses `currentColor` on its
   <i data-lucide> SVG so it inherits the link's color naturally. */
.gs-careers-job__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease,
              box-shadow 0.2s ease,
              border-color 0.2s ease;
}

.gs-careers-job__link:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 27, 49, 0.08);
}

.gs-careers-job__link:hover .gs-careers-job__title,
.gs-careers-job__link:hover .gs-careers-job__chev {
  color: var(--color-brand-accent);
}

.gs-careers-job__title {
  font-size: 1.125rem;
  font-weight: var(--weight-medium);
  color: var(--color-fg);
  margin: 0 0 0.25rem;
  transition: color 0.2s ease;
}

.gs-careers-job__meta {
  font-size: 0.9375rem;
  color: var(--color-fg-body);
  margin: 0;
}

.gs-careers-job__chev {
  /* Default chevron color is dark fg (near-black) — matches the
     title at rest. Coral on hover (rule above). */
  color: var(--color-fg);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.gs-careers-job__chev svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.gs-careers-jobs__empty {
  display: flex;
  justify-content: center;
  padding: 3rem 1.5rem;
  margin: 0;
}

/* Muted, not coral. Same geometry as .gs-cs-tag so it belongs to the
   same pill family, but neutral colours: an empty jobs list is a plain
   status, and coral is reserved for brand-editorial emphasis. */
.gs-careers-jobs__empty-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.125rem;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-fg-body);
  line-height: var(--leading-snug);
}

/* ─── Responsive ───────────────────────────────────────────── */

@media (max-width: 900px) {
  .gs-careers-stats__list {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 480px;
    margin: 0 auto;
  }
  .gs-careers-values__list {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
  }
}

@media (max-width: 600px) {
  .gs-careers-values__list {
    grid-template-columns: 1fr;
  }
  .gs-careers-hero {
    padding-top: 5rem;
  }
  .gs-careers-hero__title { font-size: var(--text-h2); }
  /* The bg-illustration's top offset is calc(50% - 250px) relative
     to .gs-careers-hero__photo's own (shorter, on mobile) height -
     250px can land well above the photo's top edge and into the
     intro block's space above it. More clearance here keeps the
     illustration from visually overlapping the title/lede. */
  .gs-careers-hero__intro {
    margin-bottom: 5rem;
  }
  .gs-careers-job__link {
    padding: 1rem 1.25rem;
  }
}