/* careers_benefits.css — "Perks & benefits" section (/careers).
   Values from the spec ## Computed Styles:
     1440 = base rules; 768 → @media(max-width:991px); 375 → @media(max-width:479px).
   Run breakpoint boundary set {479,767,991,1919}.
   Typography via var(--font-*) (framework-11 E1 lock; source family
   'Plus Jakarta Sans' resolves through the frozen tokens).
   All selectors scoped under the component root
   (.c-careers_benefits__heading-wrap-2) so the cross-component canonical
   classes (c-about_info__*, c-accordion__*) never leak (rule 9). */

/* ============================ Section root ================================= */
.c-careers_benefits__heading-wrap-2 {
  display: block;
  color: var(--color-text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes body margin on composed pages) */
  margin: -8px;
}
.region-content .c-careers_benefits__heading-wrap-2 {
  margin: 0;
  width: 100%;
}

/* ---- Outer padding wrapper (padding-global + padding-section-medium) ------ */
.c-careers_benefits__heading-wrap-2 .c-about_info__heading-wrap-5 {
  display: block;
  padding: 96px var(--space-40); /* no --space-96 token this run */
}

/* ---- Container (container-large cap) ------------------------------------- */
.c-careers_benefits__heading-wrap-2 .c-about_info__heading-wrap {
  display: block;
  width: 100%;
  max-width: 1280px; /* source container-large cap; no --container-max token this run */
  margin-inline: auto;
}

/* ============================ Work row ==================================== */
/* 1440: 2-col grid — 432px sticky heading sidebar | cards grid (spec 432px 808px). */
.c-careers_benefits__heading-wrap-3 {
  display: grid;
  grid-template-columns: 432px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-40);
  width: 100%;
}
.c-careers_benefits__heading-wrap-3 > * {
  min-width: 0;
}

/* ---- Heading sidebar (min-width-432) ------------------------------------ */
.c-careers_benefits__heading-wrap {
  display: block;
  width: 432px;
  max-width: 432px;
}

/* ---- H2 "Perks & benefits" (heading-style-h3 utility) ------------------- */
.c-careers_benefits__heading-wrap-2 .c-accordion__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 32px; /* no 32px type token this run */
  font-weight: var(--font-weight-h1); /* 500 */
  line-height: 48px; /* no 48px token this run */
  letter-spacing: var(--letter-spacing-h1); /* -1.5px */
  color: var(--color-text-primary);
}

/* ---- Doodle intro panel (position: sticky, spec ## Computed Styles) ----- */
.c-careers_benefits__doodle {
  display: flex;
  position: sticky; /* no threshold → stays in flow at initial render (spec value honoured) */
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 96px 0 0; /* no --space-96 token this run */
  width: 432px;
  min-height: 140px;
}
.c-careers_benefits__intro {
  margin: 0;
  font-family: var(--font-family-body); /* source doodle handwriting face locked to body per E1 */
  font-style: italic;
  text-transform: uppercase;
  font-size: 14px; /* no 14px type token this run */
  line-height: 22px;
  letter-spacing: 0.5px;
  color: var(--color-text-primary);
}

/* ============================ Cards grid ================================= */
/* 1440: 2 equal columns (spec 396px 396px within 808px); minmax(0,1fr) so the
   grid never inflates on an oversized child (grid-safety Patch D). */
.c-careers_benefits__grid-col-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--space-16);
  row-gap: 96px; /* no --space-96 token this run */
  width: 100%;
}
.c-careers_benefits__grid-col-2 > * {
  min-width: 0;
}

/* ============================ Perks card ================================= */
/* transparent, unbordered card (spec: no background/padding/border captured);
   horizontal flex — icon | (title + item list), 30px gap. */
.c-careers_benefits__perks-card {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 30px; /* no --space-30 token this run */
  width: 100%;
  max-width: 432px;
}
.c-careers_benefits__perks-icon {
  display: block;
  flex-shrink: 0;
  width: 40px; /* spec ## Assets: small 40x40 glyphs */
  height: 40px;
  object-fit: contain;
}
.c-careers_benefits__perks-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  min-width: 0;
}
.c-careers_benefits__perks-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 24px; /* no 24px type token this run (card title below capture depth-5) */
  line-height: 32px;
  font-weight: var(--font-weight-h1); /* 500 */
  letter-spacing: -0.5px;
  color: var(--color-text-dark);
}
.c-careers_benefits__perks-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.c-careers_benefits__perks-item {
  font-size: var(--font-size-li); /* 16px */
  line-height: var(--line-height-li); /* 24px */
  font-weight: var(--font-weight-li); /* 400 */
  color: var(--color-text-li); /* rgb(51,51,51) */
}

/* ============================ Tablet: 768 band =========================== */
@media (max-width: 991px) {
  .c-careers_benefits__heading-wrap-2 .c-about_info__heading-wrap-5 {
    padding: var(--space-64) var(--space-40);
  }
  /* work-row collapses to a single column; sidebar stacks above the grid */
  .c-careers_benefits__heading-wrap-3 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-20);
  }
  /* doodle gains bottom spacing (spec 768/375: margin 64px 0 96px) */
  .c-careers_benefits__doodle {
    margin: var(--space-64) 0 96px; /* no --space-96 token this run */
  }
  /* card grid stays 2-col (spec 324px 324px within 688px), wider column-gap */
  .c-careers_benefits__grid-col-2 {
    column-gap: var(--space-40);
    row-gap: 96px; /* no --space-96 token this run */
  }
  .c-careers_benefits__heading-wrap-2 .c-accordion__heading {
    line-height: 40px; /* spec 768: 32px / 40px */
  }
}

/* ============================ Mobile: 375 band =========================== */
@media (max-width: 479px) {
  .c-careers_benefits__heading-wrap-2 .c-about_info__heading-wrap-5 {
    padding: 48px var(--space-16); /* no --space-48 token this run */
  }
  /* sidebar loses its fixed width and fills the stacked row (spec 343px) */
  .c-careers_benefits__heading-wrap {
    width: 100%;
    max-width: 100%;
  }
  .c-careers_benefits__doodle {
    width: 100%;
  }
  /* card grid collapses to a single column (spec 343px), 64px row gap */
  .c-careers_benefits__grid-col-2 {
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--space-64);
    row-gap: var(--space-64);
  }
  /* card gap widens at mobile (spec 50px) */
  .c-careers_benefits__perks-card {
    gap: 50px; /* no --space-50 token this run */
  }
  .c-careers_benefits__heading-wrap-2 .c-accordion__heading {
    font-size: 26px; /* no 26px type token this run */
    line-height: 32px;
    letter-spacing: -1px; /* no -1px token this run */
  }
}