/*
 * For Employers (page-for-employers.php)
 * Section styles for template-parts/employers/*. 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.
 *
 * Three inner measures sit inside .container--wide (1686px of content):
 *   .employers-hero__inner / .employers-savings__inner — 1584px (168px margins)
 *   everything from Questions down             — 1368px (276px page margins)
 */

/* ==========================================================================
   Shared to this page
   ========================================================================== */

/* Blue label that opens most sections. The hero variant adds the orange rule. */
.employers-eyebrow {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.employers-eyebrow--ruled {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, calc(0.57 * var(--vw)), 0.6875rem);
  font-size: var(--fs-ui);
  line-height: 1.283;
}
.employers-eyebrow__rule {
  flex: 0 0 auto;
  width: clamp(34px, calc(3.23 * var(--vw)), 62px);
  height: 2px;
  background: var(--c-orange);
}

.employers-hero .accent,
.employers-data .accent,
.employers-questions .accent {
  color: var(--c-orange);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.employers-hero {
  background: var(--c-white);
  padding-block: clamp(1.5rem, calc(3.8 * var(--vw)), 4.56rem);
}
.employers-hero__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 826fr) minmax(0, 758fr);
  align-items: center;
}

/* Spacing only — the pill rail itself is the global .audience-switcher */
.employers-hero__switcher {
  margin-top: clamp(1.25rem, calc(1.51 * var(--vw)), 1.8125rem);
}

.employers-hero__line {
  display: block;
}
.employers-hero__title {
  margin-top: clamp(1.25rem, calc(1.15 * var(--vw)), 1.375rem);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.employers-hero__body {
  max-width: 93.5%; /* 772 of 826 */
  margin-top: clamp(1.25rem, calc(2.14 * var(--vw)), 2.5625rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.employers-hero__btn {
  margin-top: clamp(1.5rem, calc(2.19 * var(--vw)), 2.625rem);
  padding-inline: clamp(1.5rem, calc(3.6 * var(--vw)), 4.3125rem);
  text-transform: uppercase;
  font-weight: 600;
}
/* Sized down ~15% and nudged further right per the launch sweep: it was
   crowding the H1. */
.employers-hero__art {
  --hero-art-w: 449;
  --hero-art-inset: 75;
}
.employers-hero__art img {
  transition: transform var(--motion) ease;
}
.employers-hero__art:hover img {
  transform: scale(1.04);
}

/* ==========================================================================
   Who owns your data
   ========================================================================== */
.employers-data {
  background: var(--c-ice);
  padding-block: clamp(1.75rem, calc(4.58 * var(--vw)), 5.496rem);
  text-align: center;
}
.employers-data__icon {
  width: clamp(88px, calc(7.03 * var(--vw)), 135px);
  height: auto;
  margin-inline: auto;
}
.employers-data__heading {
  margin-top: clamp(1.5rem, calc(2.5 * var(--vw)), 3rem);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-charcoal);
}
.employers-data__body {
  margin-top: clamp(0.75rem, calc(1.09 * var(--vw)), 1.3125rem);
  margin-inline: clamp(-2.5rem, calc(-1.7 * var(--vw)), -0.5rem);
  font-size: var(--fs-h6);
  line-height: 1.3;
  color: var(--c-charcoal);
}
.employers-data__callout {
  margin-top: clamp(1.25rem, calc(1.98 * var(--vw)), 2.375rem);
  white-space: normal;
  font-weight: 600;
}

/* ==========================================================================
   The Savings Program
   ========================================================================== */
.employers-savings {
  background: var(--c-white);
  padding-block: clamp(4rem, calc(12.24 * var(--vw)), 14.688rem);
}
.employers-savings__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 772fr) minmax(0, 676fr);
  column-gap: 8.59%; /* 136 of 1584 */
  align-items: start;
}
.employers-savings__intro {
  grid-column: 1;
  padding-top: clamp(1.5rem, calc(2.92 * var(--vw)), 3.5rem); /* 56 — the photo leads the row */
}
.employers-savings__heading {
  margin-top: clamp(1rem, calc(1.41 * var(--vw)), 1.6875rem);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-charcoal);
}
.employers-savings__body {
  margin-top: clamp(1rem, calc(2.08 * var(--vw)), 2.5rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.employers-savings__figure {
  grid-column: 2;
  margin: 0;
}
.employers-savings__figure {
  overflow: hidden;
  border-radius: min(20px, calc(1.0417 * var(--vw-inset)));
}
.employers-savings__figure img {
  width: 100%;
  aspect-ratio: 676 / 451;
  object-fit: cover;
  border-radius: min(20px, calc(1.0417 * var(--vw-inset)));
  transition: transform 0.5s var(--ease-out);
}
.employers-savings__figure:hover img {
  transform: scale(1.03);
}

/* The three pathways sit under both columns */
.employers-paths {
  grid-column: 1 / -1;
  margin: clamp(2.5rem, calc(6.04 * var(--vw)), 7.25rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4.17%; /* 66 of 1584 */
}
.employers-path {
  display: flex;
  flex-direction: column;
  min-height: clamp(220px, calc(15.94 * var(--vw)), 306px);
  padding: clamp(0.5rem, calc(0.52 * var(--vw)), 0.625rem) clamp(1.25rem, calc(1.46 * var(--vw)), 1.75rem) clamp(1.5rem, calc(3.28 * var(--vw)), 3.9375rem);
  background: var(--c-white);
  border: 1px solid rgba(57, 57, 57, 0.5);
  border-radius: min(21px, calc(1.0938 * var(--vw-inset)));
  /* Reveal target too — see .savings-card in front-page.css. */
  transition:
    var(--reveal-transition),
    transform var(--motion) ease,
    border-color var(--motion) ease,
    box-shadow var(--motion) ease;
}
.employers-path:hover {
  transform: translateY(calc(var(--lift) * -1));
  border-color: var(--c-orange);
  box-shadow: 0 calc(var(--lift) * 2) calc(var(--lift) * 4) rgba(20, 42, 56, 0.13);
}
.employers-path__number {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 1.35;
  color: var(--c-orange);
}
.employers-path__icon {
  align-self: flex-start; /* the card is a column flexbox — don't stretch the icon */
  width: auto;
  height: clamp(28px, calc(2.08 * var(--vw)), 40px);
  /* Fixed gap under the number, not auto — an auto margin here bottom-anchors
     the icon+title group, so a two-line title (PAPs) sits the icon at a
     different height than a one-line one (Alternative Sourcing, Copay
     Cards) and the row of three icons goes crooked. */
  margin-top: clamp(0.75rem, calc(1.15 * var(--vw)), 1.375rem);
  transition: transform var(--motion) ease;
}
.employers-path:hover .employers-path__icon {
  transform: scale(1.08);
}
.employers-path__title {
  margin-top: clamp(1rem, calc(1.98 * var(--vw)), 2.375rem);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.37;
  color: var(--c-charcoal);
}
/* What the pathway does, revealed on hover/focus — same opacity + max-height
   pattern as .priorauth-type__body on the Prior Auth page, so the card grows
   into the space its min-height already holds open rather than the row
   jumping when one tile opens. */
.employers-path__hover {
  font-size: var(--fs-ui);
  line-height: 1.5;
  color: var(--c-charcoal);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    opacity var(--motion) ease,
    max-height var(--motion) ease,
    margin-top var(--motion) ease;
}
.employers-path:hover .employers-path__hover,
.employers-path:focus .employers-path__hover,
.employers-path:focus-within .employers-path__hover {
  margin-top: clamp(0.5rem, calc(0.73 * var(--vw)), 0.875rem);
  max-height: 10em;
  opacity: 1;
}
.employers-path:focus {
  outline: 2px solid var(--c-orange);
  outline-offset: 4px;
}
.employers-path:focus:not(:focus-visible) {
  outline: none;
}
/* No hover on a touch screen, so the descriptions stand open there. */
@media (hover: none) {
  .employers-path__hover {
    margin-top: clamp(0.5rem, calc(0.73 * var(--vw)), 0.875rem);
    max-height: none;
    opacity: 1;
  }
}

.employers-savings__note {
  grid-column: 1 / -1;
  max-width: 94.44%; /* 1496 of 1584 */
  margin: clamp(2rem, calc(4.17 * var(--vw)), 5rem) auto 0;
  font-size: var(--fs-h6);
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
  color: var(--c-charcoal);
}

/* ==========================================================================
   Questions to ask your PBM
   ========================================================================== */
.employers-questions {
  background: var(--c-ice);
  padding-block: clamp(3.25rem, calc(7.86 * var(--vw)), 9.432rem);
}
.employers-questions__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.employers-questions__heading {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--c-charcoal);
}
/* The rows themselves are the shared .faq accordion in style.css */
.employers-questions__list {
  --faq-pad: clamp(1.5rem, calc(3.07 * var(--vw)), 3.6875rem);
  margin-top: clamp(2rem, calc(3.75 * var(--vw)), 4.5rem);
}
.employers-questions__list .faq__q {
  line-height: 1.58;
}
/* The audit links read as part of the sentence here, not as calls to action */
.employers-questions__list .faq__a a {
  color: inherit;
  text-underline-position: from-font;
}
.employers-questions__list .faq__a a:hover {
  color: var(--c-blue);
  filter: none;
}

/* ==========================================================================
   Full Disclosure and ongoing oversight
   ========================================================================== */
.employers-disclosure {
  background: var(--c-cream);
  padding-block: clamp(2.5rem, calc(5.94 * var(--vw)), 7.128rem);
}
.employers-disclosure__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.employers-disclosure__statement {
  margin-top: clamp(1.25rem, calc(2.4 * var(--vw)), 2.875rem);
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-h4);
  line-height: 1.6;
  color: var(--c-charcoal);
}
.employers-disclosure__points {
  margin: clamp(2rem, calc(3.39 * var(--vw)), 4.0625rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: clamp(1.25rem, calc(2.08 * var(--vw)), 2.5rem);
}
.employers-disclosure__point {
  display: grid;
  grid-template-columns: clamp(38px, calc(3.13 * var(--vw)), 60px) minmax(0, 1fr);
  column-gap: clamp(0.75rem, calc(1.35 * var(--vw)), 1.625rem);
  align-items: start;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-charcoal);
}
.employers-disclosure__point img {
  width: 100%;
  height: auto;
  transition: transform var(--motion) ease;
}
.employers-disclosure__point:hover img {
  transform: scale(1.1);
}

/* ==========================================================================
   Dedicated account management
   ========================================================================== */
.employers-account {
  background: var(--c-white);
  padding-top: clamp(2.5rem, calc(8.18 * var(--vw)), 9.8125rem);
}
.employers-account__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 664fr) minmax(0, 704fr);
  align-items: center;
}
.employers-account__heading {
  margin-top: clamp(1.25rem, calc(2.4 * var(--vw)), 2.875rem);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-charcoal);
}
.employers-account__body {
  margin-top: clamp(1rem, calc(2.08 * var(--vw)), 2.5rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
/* 350 wide, offset 217 into the 704 column — as drawn */
.employers-account__art {
  width: 49.72%;
  margin-left: 30.82%;
}
.employers-account__art img {
  width: 100%;
  height: auto;
  transition: transform var(--motion) ease;
}
.employers-account__art:hover img {
  transform: scale(1.04);
}

/* ==========================================================================
   Member services
   ========================================================================== */
.employers-members {
  background: var(--c-white);
  padding-top: clamp(2.5rem, calc(10.78 * var(--vw)), 12.9375rem);
}
.employers-members__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.employers-members__heading {
  margin-top: clamp(1.25rem, calc(2.4 * var(--vw)), 2.875rem);
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--c-blue);
}
.employers-members__body {
  margin-top: clamp(0.75rem, calc(1.3 * var(--vw)), 1.5rem);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-charcoal);
}
.employers-members__note {
  margin-top: clamp(1rem, calc(1.51 * var(--vw)), 1.8125rem);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-orange);
}

/* ==========================================================================
   Co-founder quote card
   ========================================================================== */
.employers-quote {
  background: var(--c-white);
  padding-top: clamp(1.25rem, calc(1.8 * var(--vw)), 2.1875rem);
  padding-bottom: clamp(2.5rem, calc(5.94 * var(--vw)), 7.128rem);
}
.employers-quote__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.employers-quote__card {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 531fr) minmax(0, 836fr);
  background: var(--c-white);
  border-radius: min(33px, calc(1.7188 * var(--vw-inset)));
  box-shadow: 6px 6px 6.8px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
/* Navy portrait panel with the orange spine down its leading edge */
.employers-quote__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(360px, calc(35.57 * var(--vw)), 683px);
  background: var(--c-navy);
  border-left: clamp(6px, calc(0.52 * var(--vw)), 10px) solid var(--c-orange);
}
.employers-quote__portrait-frame {
  width: 80.42%; /* 419 of 521 */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
.employers-quote__portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--motion) ease;
}
.employers-quote__panel:hover .employers-quote__portrait {
  transform: scale(1.04);
}
.employers-quote__copy {
  margin: 0;
  padding: clamp(1.75rem, calc(3.8 * var(--vw)), 4.5625rem) clamp(1.5rem, calc(2.03 * var(--vw)), 2.4375rem) clamp(1.75rem, calc(3.13 * var(--vw)), 3.75rem) clamp(1.5rem, calc(2.45 * var(--vw)), 2.9375rem);
  display: flex;
  flex-direction: column;
}
.employers-quote__eyebrow {
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.283;
  text-transform: uppercase;
  color: var(--c-orange);
}
.employers-quote__headline {
  max-width: min(700px, calc(36.4583 * var(--vw-inset)));
  margin-top: clamp(0.75rem, calc(1.3 * var(--vw)), 1.5625rem);
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.283;
  color: var(--c-orange);
}
.employers-quote__text {
  max-width: min(750px, calc(39.0625 * var(--vw-inset)));
  margin-top: clamp(1rem, calc(1.35 * var(--vw)), 1.625rem);
  font-size: var(--fs-body);
  line-height: 1.79;
  color: var(--c-charcoal);
}
.employers-quote__attribution {
  margin-top: clamp(0.75rem, calc(1.64 * var(--vw)), 1.96875rem);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.79;
  color: var(--c-charcoal);
}
.employers-quote__more {
  margin-top: clamp(1.25rem, calc(1.82 * var(--vw)), 2.1875rem);
  margin-left: 2.93%; /* 40 of 1367 */
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.79;
  color: var(--c-orange);
}
.employers-quote__more a {
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color var(--motion-quick) ease;
}
.employers-quote__more a:hover {
  color: var(--c-blue);
}

/* ==========================================================================
   Trailer prompt
   ========================================================================== */
.employers-trailer {
  background: var(--c-white);
  padding-block: clamp(1.75rem, calc(4.64 * var(--vw)), 5.568rem) clamp(2rem, calc(5.26 * var(--vw)), 6.312rem);
}
.employers-trailer__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.employers-trailer__text {
  max-width: 96.64%; /* 1324 of 1370 */
  margin-inline: auto;
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.8;
  text-align: center;
  color: var(--c-charcoal);
}
.employers-trailer__lead {
  display: block;
}
.employers-trailer__link {
  color: var(--c-orange);
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color var(--motion-quick) ease;
}
.employers-trailer__link:hover {
  color: var(--c-blue);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .employers-savings__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }
  .employers-savings__intro {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0;
  }
  .employers-savings__figure {
    grid-column: 1;
    grid-row: 2;
  }
  .employers-quote__headline,
  .employers-quote__text {
    max-width: none;
  }
}

@media (max-width: 991px) {
  .employers-hero__inner,
  .employers-account__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }
  .employers-hero__body {
    max-width: none;
  }
  .employers-hero__art,
  .employers-account__art {
    width: min(100%, 420px);
    margin-inline: auto;
    margin-left: auto;
  }
  .employers-paths {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
  .employers-path {
    min-height: 0;
  }
  .employers-quote__card {
    grid-template-columns: minmax(0, 1fr);
  }
  .employers-quote__panel {
    min-height: 0;
    padding-block: 2.5rem;
    border-left: 0;
    border-top: 10px solid var(--c-orange);
  }
  .employers-quote__portrait-frame {
    width: min(70%, 320px);
  }
  .employers-quote__more {
    margin-left: 0;
  }
}

@media (max-width: 575px) {
  .employers-disclosure__point {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 0.75rem;
  }
  .employers-trailer__text {
    max-width: none;
  }
}

/* A visitor who has asked for reduced motion still gets the feedback, just not
   the movement — see the matching block in front-page.css. */
@media (prefers-reduced-motion: reduce) {
  .employers-hero__art:hover img,
  .employers-savings__figure:hover img,
  .employers-path:hover,
  .employers-path:hover .employers-path__icon,
  .employers-disclosure__point:hover img,
  .employers-account__art:hover img,
  .employers-quote__panel:hover .employers-quote__portrait {
    transform: none;
  }
}