/* careers_jointeam.css — static "Join the team" section (/careers).
   Values from the spec ## Computed Styles + collage geometry measured off the
   Phase-A reference crop (the collage internals sit past the spec's depth-5
   cutoff, so they are reconstructed here — rule 26 own BEM hooks):
     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 cross-component canonical classes (c-about_info__*, c-accordion__*) are
   scoped under the component root so they never leak (rule 9). */

/* ============================ Section root ================================= */
.c-careers_jointeam__cta-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_jointeam__cta-wrap-2 {
  margin: 0;
  width: 100%;
}

/* ---- Outer padding wrapper (padding-global + padding-section-medium) ------ */
.c-careers_jointeam__cta-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_jointeam__cta-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;
}

/* ---- Columns (shared `column` canonical) --------------------------------- */
.c-careers_jointeam__cta-wrap-2 .c-careers_jointeam__column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
/* the collage+text wrapper and the text column are both centred */
.c-careers_jointeam__cta-wrap-2 .c-careers_jointeam__align-items-center {
  align-items: center;
  justify-content: center;
}
/* the collage+text wrapper: small gap between the collage box and the heading
   (source: heading ink sits ~4px below the collage box @1440) */
.c-careers_jointeam__cta-wrap-2 .c-careers_jointeam__align-items-center.c-careers_jointeam__mb-3-25 {
  gap: 4px;
}

/* ============================ Collage ===================================== */
/* two clusters pushed to the section edges by space-between (spec collage row:
   space-between, 1280px). Each cluster = a stacked pair + a single image; the
   per-column margin-top values reproduce the scattered vertical stagger. */
.c-careers_jointeam__cta-wrap-2 .c-careers_jointeam__collage-img-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.c-careers_jointeam__collage--wide {
  min-height: 460px; /* spec collage row height 460.078px @1440 */
}
/* scoped to match the .collage-img-row display:flex specificity so the toggle wins */
.c-careers_jointeam__cta-wrap-2 .c-careers_jointeam__collage--narrow {
  display: none; /* wide layout is the >=480px default */
}
.c-careers_jointeam__cluster {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-20); /* intra-cluster column gap ~20px @1440 */
}
.c-careers_jointeam__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.c-careers_jointeam__collage-img {
  display: block;
  width: 230px;
  height: auto;
  object-fit: cover;
  flex-shrink: 0;
}
/* vertical stagger (measured off the reference crop, offsets from row top) */
.c-careers_jointeam__cluster--left > .c-careers_jointeam__collage-img { margin-top: 117px; }
.c-careers_jointeam__cluster--right > .c-careers_jointeam__collage-img { margin-top: 91px; }
.c-careers_jointeam__cluster--right > .c-careers_jointeam__stack { margin-top: 33px; }

/* ============================ Heading + body ============================== */
/* fixed 668px text column centred inside the flex-centred wrapper (spec rule-1
   pattern: alignSelf center preserved so it is NOT left-pinned). */
.c-careers_jointeam__cta-wrap-2 .c-about_info__heading-wrap-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  width: 668px;
  max-width: 100%;
  gap: 16px; /* heading -> body element gap (source ink gap ~30px @1440 after line-height slack) */
  text-align: center;
}
.c-careers_jointeam__mb-3-25rem {
  margin-bottom: 52px; /* spec text column margin: 0 0 52px */
}
.c-careers_jointeam__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1-sm);   /* 36px */
  line-height: var(--line-height-h1-sm); /* 44px */
  font-weight: var(--font-weight-h1);    /* 500 */
  letter-spacing: -1px; /* measured; h1-sm token -2px runs too tight at this size */
  color: var(--color-text-body);
  text-align: center;
}
.c-careers_jointeam__body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: 20px;   /* measured; no 20px body token this run */
  line-height: 30px;
  font-weight: var(--font-weight-body); /* 400 */
  color: var(--color-text-body);
  text-align: center;
}

/* ============================ Empty collection slot ======================= */
/* Webflow renders "No items found." here on an empty CMS collection; per the
   spec pattern-gap that chrome is intentionally NOT reproduced. Kept as a
   structural 44px spacer so the CTA below lands on the source axis. */
.c-careers_jointeam__width-full {
  width: 100%;
  min-height: 44px; /* spec .w-dyn-list height 44px */
  /* Webflow's empty-collection placeholder surface (rgb(221,221,221)),
     reproduced from the reference crop for visual parity. The "No items found."
     TEXT is deliberately NOT rendered (spec pattern-gap: it is Webflow CMS
     empty-state chrome, not seedable editorial content). */
  background-color: rgb(221, 221, 221);
}

/* ============================ CTA ========================================= */
.c-careers_jointeam__cta-wrap-2 .c-about_info__heading-wrap-7 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.c-careers_jointeam__cta-wrap {
  margin-top: var(--space-20); /* mt-20 */
}
.c-careers_jointeam__cta {
  display: inline-block;
  font-family: var(--font-family-body);
  font-size: 16px; /* spec CTA link width 160.56px at 16px/600 */
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
  text-decoration: underline;
  color: var(--color-text-dark); /* rgb(18,18,18) */
  background-color: transparent; /* rgba(250,250,250,0) — transparent, not a filled button */
}

/* ============================ Tablet: 768 band ============================ */
@media (max-width: 991px) {
  .c-careers_jointeam__cta-wrap-2 .c-about_info__heading-wrap-5 {
    padding: var(--space-64) var(--space-40);
  }
  .c-careers_jointeam__cta-wrap-2 .c-careers_jointeam__collage-img-row {
    min-height: 255px; /* spec collage row height 254.703px @768 */
  }
  .c-careers_jointeam__collage-img { width: 122px; }
  .c-careers_jointeam__cluster { gap: var(--space-10); }
  .c-careers_jointeam__cluster--left > .c-careers_jointeam__collage-img { margin-top: 79px; }
  .c-careers_jointeam__cluster--right > .c-careers_jointeam__collage-img { margin-top: 53px; }
  .c-careers_jointeam__cluster--right > .c-careers_jointeam__stack { margin-top: 18px; }
  /* tighter vertical rhythm below the collage @768 (heading sits directly under
     the collage box; body line-height compresses to 26px) */
  .c-careers_jointeam__cta-wrap-2 .c-careers_jointeam__align-items-center.c-careers_jointeam__mb-3-25 {
    gap: 0;
  }
  .c-careers_jointeam__cta-wrap-2 .c-about_info__heading-wrap-2 {
    gap: 10px;
  }
  .c-careers_jointeam__body {
    font-size: 18px; /* source body compresses to ~18px @768 */
    line-height: 26px;
  }
}

/* ============================ Mobile: 375 band =========================== */
@media (max-width: 479px) {
  .c-careers_jointeam__cta-wrap-2 .c-about_info__heading-wrap-5 {
    padding: 48px var(--space-16); /* no --space-48 token this run */
  }
  /* wrapper gains an explicit 50px gap between collage and text (spec @375) */
  .c-careers_jointeam__cta-wrap-2 .c-careers_jointeam__align-items-center.c-careers_jointeam__mb-3-25 {
    gap: 50px; /* spec wrapper gap: 50px @375 */
  }
  /* swap to the narrow collage: three stacked pairs across the full 343px,
     matching the source's mobile 3-column reflow (spec collage height 267.7px
     @375 emerges naturally from the tallest middle stack). */
  .c-careers_jointeam__cta-wrap-2 .c-careers_jointeam__collage--wide { display: none; }
  .c-careers_jointeam__cta-wrap-2 .c-careers_jointeam__collage--narrow { display: flex; }
  .c-careers_jointeam__collage--narrow .c-careers_jointeam__collage-img { width: 107px; }
  .c-careers_jointeam__collage--narrow .c-careers_jointeam__stack { gap: var(--space-10); }
  /* per-column vertical stagger (measured off the reference crop @375) */
  .c-careers_jointeam__collage--narrow .c-careers_jointeam__stack:nth-child(1) { margin-top: 26px; }
  .c-careers_jointeam__collage--narrow .c-careers_jointeam__stack:nth-child(2) { margin-top: 0; }
  .c-careers_jointeam__collage--narrow .c-careers_jointeam__stack:nth-child(3) { margin-top: 42px; }
  /* text column drops to full container width (spec 343px) */
  .c-careers_jointeam__cta-wrap-2 .c-about_info__heading-wrap-2 {
    gap: 8px; /* source heading->body ink gap ~23px @375 after line-height slack */
  }
  .c-careers_jointeam__heading {
    font-size: 30px; /* measured @375 (smaller than 1440) */
    line-height: 36px;
  }
  .c-careers_jointeam__body {
    font-size: 18px; /* measured @375 */
    line-height: 26px;
  }
}