/* ===== CAREERS PAGE ===== */
/* Structure mirrors the Kallos careers page (image hero, navy apply band with a
   perks grid, closing nationwide band). Styling is coop-dome's own: the shared
   .page-hero component, brand tokens, .section-title, and .btn-cta-green. */

/* ---------- APPLY BAND ---------- */
/* Navy chrome fill, matching .tire-finder-strip and .perks-band. */
.careers-cta {
  background: var(--brand-primary-hover);
  padding: 40px 20px;
}

.careers-cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* display: contents so the heading, the perks grid, and the button are all
   direct flex children of the band. That lets the button order itself after the
   perks on mobile: a full-width CTA reads better once the reasons to press it
   are on screen than wedged between the heading and them. Restored to a real
   block at 992px, where the lead is its own grid column. */
.careers-cta__lead {
  display: contents;
}

.careers-cta__lead .section-title {
  order: 1;
  color: #fff;
  /* No margin while the lead is display: contents -- the flex gap above spaces
     these instead, and a margin would double it. */
  margin-bottom: 0;
  /* Both of this page's long headings stranded their last line on a phone
     ("... NOT JUST / A JOB", "... STARTED WITH / POINT S?"). Left unscoped rather
     than wrapped in a mobile query: balance is a no-op on a heading that fits one
     line, so it only acts where the heading actually wraps. */
  text-wrap: balance;
}

/* Hero title comes from the shared PageHero partial, so it is balanced here
   rather than in main.css, which would reach every hero on the site. */
.career .page-hero__overlay h1 {
  text-wrap: balance;
}

.careers-perks {
  order: 2;
}

.careers-cta__button {
  order: 3;
  width: 100%;
}

.careers-cta__button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---------- PERKS GRID ---------- */
.careers-perks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cards sit one step lighter than the band so they read as raised panels on it,
   the same primary/primary-hover pairing the band itself uses against .footer. */
.careers-perks__item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--brand-primary);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

/* Brand green on navy: decorative icons only, so the graphics contrast rule
   (3:1) applies rather than the text rule the label below has to clear. */
.careers-perks__icon {
  flex-shrink: 0;
  font-size: 40px;
  line-height: 1;
  color: var(--brand-secondary);
}

.careers-perks__label {
  font-family: var(--font-secondary);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin: 0;
}

/* ---------- CLOSING NATIONWIDE BAND ---------- */
/* Green top border matching .footer's, so the page closes on the same rule the
   site chrome uses. */
.careers-stat {
  background: #f3f4f6;
  border-top: 6px solid var(--brand-secondary);
  overflow: hidden;
}

.careers-stat__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Photo sits last on mobile so the copy leads. It runs at its natural ratio
   rather than being cropped to a band: the asset is a transparent cutout of a
   tire stack, so cropping it to a wide strip zoomed the tires up and cut their
   bottoms off. Capped and centred so it stays a modest illustration next to the
   copy instead of dominating the section. */
.careers-stat__image {
  order: 2;
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto;
}

.careers-stat__text {
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.careers-stat__sub {
  font-family: var(--font-secondary);
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin: 12px 0 0;
  text-wrap: pretty;
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 576px) {
  .careers-perks {
    grid-template-columns: 1fr 1fr;
  }

  .careers-cta__button {
    width: auto;
  }
}

@media (min-width: 992px) {
  .careers-cta {
    padding: 64px 40px;
  }

  /* Lead column narrower than the perks grid, so two cards per row still have
     room to hold their label on one line. */
  .careers-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    gap: 48px;
  }

  /* Back to a real box so the heading and button stack inside column one; the
     mobile ordering goes with it. */
  .careers-cta__lead {
    display: block;
  }

  .careers-cta__lead .section-title {
    order: 0;
    margin-bottom: 32px;
  }

  .careers-perks {
    order: 0;
  }

  .careers-perks__icon {
    font-size: 48px;
  }

  .careers-perks__label {
    font-size: 1rem;
  }

  /* Photo moves to the left column and the copy left-aligns beside it. */
  .careers-stat__inner {
    display: grid;
    grid-template-columns: 2fr 3fr;
    align-items: stretch;
    min-height: 180px;
  }

  /* Fills its column and crops to the band height; object-top keeps the whole
     tires in frame and trims only the empty space beneath them. */
  .careers-stat__image {
    order: 0;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: top;
    align-self: end;
  }

  .careers-stat__text {
    order: 0;
    padding: 72px 40px;
    text-align: left;
  }

  .careers-stat__sub {
    font-size: 1.125rem;
  }
}