/*
 * Careers (page-careers.php)
 * Section styles for template-parts/careers/*. Loaded after style.css, which
 * owns the tokens, base, buttons, tag, header and footer.
 *
 * Lengths are the Figma values converted to the theme's fluid scale
 * (px / 1920 * 100 = vw), so the page tracks the 1920px design canvas.
 *
 * Two inner measures sit inside .container--wide (1686px of content):
 *   .careers-hero__inner                        — 1584px (168px page margins)
 *   family / values / photo / work              — 1496px (212px page margins)
 * The benefits grid uses the full 1686px measure, so it has no inner wrapper.
 */

/* ==========================================================================
   Shared to this page
   ========================================================================== */
.careers-eyebrow {
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.283;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.careers-eyebrow--ruled {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, calc(0.57 * var(--vw)), 0.6875rem);
}
.careers-eyebrow__rule {
  flex: 0 0 auto;
  width: clamp(34px, calc(3.23 * var(--vw)), 62px);
  height: 2px;
  background: var(--c-orange);
}

.careers-hero .accent,
.careers-family .accent,
.careers-values .accent,
.careers-benefits .accent,
.careers-work .accent {
  color: var(--c-orange);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.careers-hero {
  background: var(--c-white);
  padding-block: clamp(2.25rem, calc(5.47 * var(--vw)), 6.564rem) clamp(2.5rem, calc(5.99 * var(--vw)), 7.188rem);
}
.careers-hero__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 858fr) minmax(0, 621fr);
  column-gap: 6.63%; /* 105 of 1584 */
  align-items: center;
}
.careers-hero__title {
  margin-top: clamp(1.25rem, calc(1.51 * var(--vw)), 1.8125rem);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.careers-hero__line {
  display: block;
}
.careers-hero__body {
  max-width: 90%; /* 772 of 858 */
  margin-top: clamp(1.25rem, calc(2.29 * var(--vw)), 2.75rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.careers-hero__btn {
  margin-top: clamp(1.5rem, calc(3.02 * var(--vw)), 3.625rem);
  padding-inline: clamp(1.5rem, calc(3.6 * var(--vw)), 4.3125rem);
  text-transform: uppercase;
  font-weight: 600;
}
.careers-hero__art {
  --hero-art-w: 524;
}

/* ==========================================================================
   We're a family helping families
   ========================================================================== */
.careers-family {
  background: var(--c-ice);
  padding-block: clamp(2rem, calc(5.21 * var(--vw)), 6.252rem);
}
.careers-family__inner {
  max-width: var(--measure-mid);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, calc(9.9479 * var(--vw)), 11.9375rem); /* 191 */
}
.careers-family__copy {
  max-width: min(728px, calc(37.9167 * var(--vw-inset)));
}
.careers-family__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-charcoal);
}
.careers-family__line {
  display: block;
}
.careers-family__body {
  margin-top: clamp(1.25rem, calc(1.98 * var(--vw)), 2.375rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.careers-family__body p + p {
  margin-top: clamp(1rem, calc(1.2 * var(--vw)), 1.4375rem);
}
.careers-family__art img {
  display: block;
  width: 100%;
  max-width: min(406px, calc(21.1458 * var(--vw-inset)));
  height: auto;
  transition: transform 0.5s var(--ease-out);
}
.careers-family__art:hover img {
  transform: scale(1.03);
}

/* ==========================================================================
   Our values
   ========================================================================== */
.careers-values {
  background: var(--c-white);
  padding-block: clamp(2.75rem, calc(6.82 * var(--vw)), 8.184rem);
}
.careers-values__inner {
  max-width: var(--measure-mid);
  margin-inline: auto;
}
.careers-values__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-charcoal);
}
.careers-values__intro {
  max-width: 48.66%; /* 728 of 1496 */
  margin-top: clamp(0.75rem, calc(1.51 * var(--vw)), 1.8125rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.careers-values__list {
  margin: clamp(2rem, calc(3.07 * var(--vw)), 3.6875rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: clamp(2rem, calc(3.33 * var(--vw)), 4rem);
}
.careers-value {
  display: grid;
  grid-template-columns: clamp(64px, calc(5.21 * var(--vw)), 100px) minmax(0, 1fr);
  column-gap: clamp(1rem, calc(3.28 * var(--vw)), 3.9375rem); /* 63 */
  align-items: center;
}
.careers-value__icon {
  width: 100%;
  height: auto;
  transition: transform var(--motion) ease;
}
.careers-value:hover .careers-value__icon {
  transform: scale(1.08);
}
.careers-value__title {
  font-size: var(--fs-h6);
  font-weight: 800;
  line-height: 1.35;
  color: var(--c-charcoal);
}
.careers-value__body {
  margin-top: clamp(0.5rem, calc(0.94 * var(--vw)), 1.125rem); /* 18 — the comp runs the copy flush under the title, no bullets */
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.careers-value__body p + p {
  margin-top: clamp(0.25rem, calc(0.42 * var(--vw)), 0.5rem);
}

/* ==========================================================================
   Benefits
   ========================================================================== */
.careers-benefits {
  background: var(--c-cream);
  padding-block: clamp(2rem, calc(5.26 * var(--vw)), 6.312rem) clamp(3.75rem, calc(9.64 * var(--vw)), 11.568rem);
}
.careers-benefits__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.26;
  text-align: center;
  color: var(--c-charcoal);
}
.careers-benefits__grid {
  margin: clamp(2rem, calc(3.44 * var(--vw)), 4.125rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, calc(1.46 * var(--vw)), 1.75rem) 1.25%; /* 28 / 21 of 1686 */
}
.careers-benefit {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, calc(3.39 * var(--vw)), 4.0625rem) clamp(1.5rem, calc(1.88 * var(--vw)), 2.25rem) clamp(1.75rem, calc(2.5 * var(--vw)), 3rem);
  background: var(--c-white);
  border-radius: min(28px, calc(1.4583 * var(--vw-inset)));
  /* Reveal target too — see the home page's .savings-card. */
  transition:
    var(--reveal-transition),
    transform var(--motion) ease,
    box-shadow var(--motion) ease;
}
.careers-benefit:hover {
  transform: translateY(calc(var(--lift) * -1));
  box-shadow: 0 calc(var(--lift) * 2) calc(var(--lift) * 4) rgba(20, 42, 56, 0.13);
}
.careers-benefit__icon {
  align-self: flex-start; /* the card is a column flexbox — don't stretch the icon */
  width: auto;
  height: clamp(34px, calc(2.6 * var(--vw)), 50px);
  transition: transform var(--motion) ease;
}
.careers-benefit:hover .careers-benefit__icon {
  transform: scale(1.08);
}
.careers-benefit__title {
  margin-top: clamp(1rem, calc(1.67 * var(--vw)), 2rem);
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.44;
  color: var(--c-charcoal);
}
/* ==========================================================================
   What the work feels like
   ========================================================================== */
.careers-work {
  background: var(--c-white);
  padding-block: clamp(3rem, calc(7.4 * var(--vw)), 8.88rem);
}
.careers-work__inner {
  max-width: var(--measure-mid);
  margin-inline: auto;
}
.careers-work__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.26;
  text-align: center;
  color: var(--c-charcoal);
}
.careers-work__intro {
  margin-top: clamp(0.75rem, calc(1.61 * var(--vw)), 1.9375rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  text-align: center;
  color: var(--c-charcoal);
}
.careers-work__slots {
  margin: clamp(2rem, calc(3.8 * var(--vw)), 4.5625rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.87%; /* 13 of 1496 */
}
.careers-slot {
  min-height: clamp(200px, calc(14.58 * var(--vw)), 280px);
  padding: clamp(1.25rem, calc(1.46 * var(--vw)), 1.75rem) clamp(1.25rem, calc(1.56 * var(--vw)), 1.875rem);
  background: var(--c-white);
  border: 3px dashed var(--c-blue);
  border-radius: min(11px, calc(0.5729 * var(--vw-inset)));
  /* Reveal target too — see the home page's .savings-card. */
  transition:
    var(--reveal-transition),
    transform var(--motion) ease,
    border-color var(--motion) ease;
}
.careers-slot:hover {
  transform: translateY(calc(var(--lift) * -1));
  border-color: var(--c-orange);
}
.careers-slot__label {
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--c-blue);
}
.careers-slot__body {
  margin-top: clamp(0.5rem, calc(0.89 * var(--vw)), 1.0625rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}

/* Find Your Role — blue card */
/* That top margin separates the role card from the quote block above it. With
   the quotes held back the card is first in the section and the section's own
   padding already does the job. */
.careers-work__inner > .careers-role:first-child {
  margin-top: 0;
}
.careers-role {
  margin-top: clamp(2.5rem, calc(6.15 * var(--vw)), 7.375rem);
  padding: clamp(2rem, calc(5.47 * var(--vw)), 6.5625rem) clamp(1.5rem, calc(3.65 * var(--vw)), 4.375rem) clamp(2rem, calc(5.31 * var(--vw)), 6.375rem) clamp(1.5rem, calc(6.61 * var(--vw)), 7.9375rem);
  background: var(--c-blue);
  border-radius: min(35px, calc(1.8229 * var(--vw-inset)));
  display: grid;
  grid-template-columns: minmax(0, 766fr) minmax(0, 317fr);
  column-gap: clamp(1.5rem, calc(5.36 * var(--vw)), 6.4375rem);
  align-items: center;
  color: var(--c-white);
}
.careers-role__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.24;
}
.careers-role__body {
  margin-top: clamp(1rem, calc(2.03 * var(--vw)), 2.4375rem);
  font-size: var(--fs-body);
  line-height: 1.8;
}
.careers-role__btn {
  margin-top: clamp(1.5rem, calc(3.02 * var(--vw)), 3.625rem);
  padding-inline: clamp(1.5rem, calc(3.28 * var(--vw)), 3.9375rem);
  background: transparent;
  /* Same 1px stroke as .btn--outline, so this sits at the shared button
     height instead of 2px taller than every other outline button. */
  border-color: var(--c-white);
  color: var(--c-white);
  text-transform: uppercase;
  font-weight: 600;
}
.careers-role__btn:hover {
  background: rgba(255, 255, 255, 0.14);
  filter: none;
}
.careers-role__art img {
  width: 100%;
  height: auto;
  transition: transform 0.5s var(--ease-out);
}
.careers-role:hover .careers-role__art img {
  transform: scale(1.03);
}

.careers-work__eeo {
  max-width: 71.32%; /* 1067 of 1496 */
  margin: clamp(2rem, calc(3.7 * var(--vw)), 4.4375rem) auto 0;
  font-size: var(--fs-body);
  line-height: 1.8;
  text-align: center;
  color: var(--c-charcoal);
}

/* ==========================================================================
   Closing call to action
   ========================================================================== */
.careers-cta {
  background: var(--c-navy);
  color: var(--c-white);
  padding-block: clamp(2rem, calc(4.74 * var(--vw)), 5.688rem);
}
.careers-cta__inner {
  max-width: var(--measure-mid);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 816fr) minmax(0, 542fr);
  column-gap: 9.22%; /* 138 of 1496 */
  align-items: center;
}
.careers-cta__heading {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.5;
}
.careers-cta__line {
  display: block;
}
.careers-cta__line--serif {
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
  color: var(--c-orange);
}
.careers-cta__body {
  max-width: 79.41%; /* 648 of 816 */
  margin-top: clamp(1rem, calc(1.56 * var(--vw)), 1.875rem);
  font-size: var(--fs-body);
  line-height: 1.56;
}
.careers-cta__btn {
  padding-inline: clamp(1.5rem, calc(1.72 * var(--vw)), 2.0625rem);
  text-transform: uppercase;
  font-weight: 600;
}
.careers-cta__contact {
  max-width: 88.19%; /* 478 of 542 */
  margin-top: clamp(1rem, calc(1.41 * var(--vw)), 1.6875rem);
  font-size: var(--fs-body);
  line-height: 1.81;
}
.careers-cta__contact a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-position: from-font;
}
.careers-cta__email {
  display: block;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .careers-benefits__grid,
  .careers-work__slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .careers-benefit,
  .careers-slot {
    min-height: 0;
  }
}

@media (max-width: 991px) {
  .careers-hero__inner,
  .careers-role,
  .careers-cta__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }
  .careers-family__inner {
    flex-direction: column;
    gap: 2.5rem;
  }
  .careers-hero__body,
  .careers-values__intro,
  .careers-cta__body,
  .careers-cta__contact,
  .careers-work__eeo {
    max-width: none;
  }
  .careers-hero__art,
  .careers-family__art,
  .careers-role__art {
    width: min(100%, 460px);
    margin-inline: auto;
  }
  .careers-value {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: start;
  }
}

@media (max-width: 767px) {
  .careers-benefits__grid,
  .careers-work__slots {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A visitor who has asked for reduced motion still gets the feedback, just not
   the movement — see the same block in front-page.css. */
@media (prefers-reduced-motion: reduce) {
  .careers-family__art:hover img,
  .careers-value:hover .careers-value__icon,
  .careers-benefit:hover,
  .careers-benefit:hover .careers-benefit__icon,
  .careers-slot:hover,
  .careers-role:hover .careers-role__art img {
    transform: none;
  }
}