/* careers_cards.css — static 3-card marketing 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_cards__section-careers-cards) so the cross-component canonical
   classes (c-about_info__*, c-accordion__*) never leak (rule 9). */

/* ============================ Section root ================================= */
.c-careers_cards__section-careers-cards {
  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_cards__section-careers-cards {
  margin: 0;
  width: 100%;
}

/* ---- Outer padding wrapper (padding-global + padding-section-medium) ------ */
.c-careers_cards__section-careers-cards .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_cards__section-careers-cards .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;
}

/* ---- Cards flex wrapper (source gap-64 — dropped class, own BEM hook) ----- */
.c-careers_cards__cards-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  width: 100%;
}

/* ============================ Card grid =================================== */
/* 1440: three equal columns in one row (spec 400px 400px 400px within 1280px);
   minmax(0,1fr) instead of fixed px so the grid never inflates (grid-safety). */
.c-careers_cards__grid-col-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-40);
  row-gap: 96px; /* no --space-96 token this run */
}
.c-careers_cards__grid-col-3 > * {
  min-width: 0;
}

/* ============================ Card ======================================== */
/* transparent, unbordered card (spec: no background/padding/border captured);
   vertical flex stack, image on top then the text group, 40px gap. */
.c-careers_cards__image-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-40);
  width: 100%;
  /* spec ## Computed Styles recorded card height (1440) — fixed-height
     flex-start card with trailing whitespace; min-height keeps card positions
     deterministic so sibling cards land on the source's row axis. */
  min-height: 478px;
}

.c-careers_cards__card-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3; /* spec rendered 400x300 / 324x243 / 343x257 — 4:3 at every viewport */
  object-fit: cover;
}

.c-careers_cards__card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  width: 100%;
}
.c-careers_cards__card-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-h3);
  letter-spacing: var(--letter-spacing-h3);
  color: var(--color-text-h3);
}
.c-careers_cards__card-body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  /* body font-size/letter-spacing sit below the capture's depth-5 cutoff (spec
     ## Typography overrides) — the source's Plus Jakarta Sans body carries a
     small negative tracking; adopting it reproduces the spec's recorded card
     heights (433/443/478px) whose text region implies a denser 4-line body. */
  letter-spacing: -0.32px;
  color: var(--color-text-body);
}

/* ============================ Tablet: 768 band ============================= */
@media (max-width: 991px) {
  .c-careers_cards__section-careers-cards .c-about_info__heading-wrap-5 {
    padding: var(--space-64) var(--space-40);
  }
  /* grid drops to 2 columns (spec 324px 324px within 688px); card 3 wraps */
  .c-careers_cards__grid-col-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-40);
    row-gap: var(--space-64);
  }
  .c-careers_cards__image-card {
    min-height: 443px; /* spec ## Computed Styles recorded card height (768) */
  }
}

/* ============================ Mobile: 375 band ============================= */
@media (max-width: 479px) {
  .c-careers_cards__section-careers-cards .c-about_info__heading-wrap-5 {
    padding: 48px var(--space-16); /* no --space-48 token this run */
  }
  /* grid collapses to a single column (spec 343px), 64px row gap */
  .c-careers_cards__grid-col-3 {
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--space-20);
    row-gap: var(--space-64);
  }
  .c-careers_cards__image-card {
    min-height: 433px; /* spec ## Computed Styles recorded card height (375: 433.25) */
  }
}