/* specialty-practices.css — styles specific to the Specialty Practices page (desktop, static) */

.page-specialty-practices {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: var(--color-white);
}

.page-specialty-practices section {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Shared bits ------------------------------------------------------------ */

.eyebrow {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-body-small-size);
  line-height: var(--font-body-small-line-height);
  color: var(--color-accent1-500);
  text-transform: uppercase;
  margin: 0 0 12px;
}

.text-accent {
  color: var(--color-primary-500);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 12px;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.button--primary {
  background: var(--color-primary-600);
  color: var(--color-white);
  font-family: var(--font-body-bold-family);
  font-weight: var(--font-body-bold-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  transition: background-color var(--transition-hover), color var(--transition-hover), box-shadow var(--transition-hover);
}

/* Figma "Buttons" :hover — same treatment as the header CTA; inset shadow
   stands in for Figma's 1px INSIDE stroke so the button doesn't resize. */
.button--primary:hover,
.button--primary:focus-visible {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  box-shadow: inset 0 0 0 1px var(--color-primary-600);
}

/* Keyboard focus ring — matches base.css (nav links, .nav-cta). */
.button:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.button--outline {
  background: var(--color-white);
  border: 1px solid var(--color-tertiary-400);
  color: var(--color-tertiary-700);
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-body-regular-size);
}

/* Header block ------------------------------------------------------------ */

.header-block {
  align-items: center;
  padding: 72px 32px 64px;
  background: linear-gradient(127deg, #ffffff 0%, var(--color-primary-25) 35%, var(--color-primary-50) 70%, var(--color-accent2-50) 100%);
}

.header-block__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 1160px;
  width: 100%;
  padding: 0 32px;
}

.header-block__title {
  font-family: var(--font-title-family);
  font-weight: var(--font-title-weight);
  font-size: var(--font-title-size);
  line-height: var(--font-title-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

.header-block__body {
  display: flex;
  flex-direction: column;
  max-width: 660px;
  margin-top: 4px;
}

.header-block__body p {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-500);
  margin: 0;
}

/* Carrie intro ------------------------------------------------------------ */

.carrie-intro {
  gap: 12px;
  max-width: 1160px;
  padding: 0 32px;
  align-items: flex-start;
}

.carrie-intro__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.carrie-intro__brand {
  font-family: var(--font-title-family);
  font-weight: var(--font-title-weight);
  font-size: 40px;
  line-height: 1.2;
  color: var(--color-primary-500);
  margin: 0;
}

.carrie-intro__subtitle {
  font-family: var(--font-h3-family);
  font-weight: var(--font-h3-weight);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

.carrie-intro__text {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  letter-spacing: var(--font-body-regular-letter-spacing);
  color: var(--color-neutral-500);
  margin: 0;
}

.triptych {
  display: flex;
  gap: 14px;
  width: 100%;
  padding-top: 14px;
}

.triptych__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-250);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(59, 22, 120, 0.06);
}

.triptych__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-primary-50);
  border: 1px solid var(--color-neutral-200);
}

.triptych__icon img {
  width: 22px;
  height: 22px;
}

.triptych__title {
  font-family: var(--font-h4-family);
  font-weight: var(--font-title-weight);
  font-size: var(--font-h4-size);
  color: var(--color-neutral-900);
  margin: 10px 0 0;
}

.triptych__sub {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-body-small-size);
  color: var(--color-primary-700);
  margin: 4px 0 0;
}

.triptych__list,
.triptych__list ul {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-body-small-weight);
  font-size: var(--font-body-small-size);
  color: var(--color-neutral-500);
  margin: 3px 0 0;
  padding-left: 20px;
}

.triptych__list ul {
  margin-top: 0;
}

/* Packages ------------------------------------------------------------ */

.packages {
  gap: 12px;
  max-width: 1160px;
  padding: 32px;
  align-items: flex-start;
}

.packages__title {
  font-family: var(--font-h2-family);
  font-weight: var(--font-h2-weight);
  font-size: var(--font-h2-size);
  line-height: var(--font-h2-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

.packages__subtitle {
  font-family: var(--font-h3-family);
  font-weight: var(--font-h3-weight);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

.packages__scroller {
  display: flex;
  gap: 14px;
  width: 100%;
  overflow-x: auto;
  padding: 14px 0 4px;
}

.package-card {
  flex-shrink: 0;
  width: 504px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 21px 22px 22px;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(59, 22, 120, 0.06);
}

.package-card__title {
  font-family: var(--font-h4-family);
  font-weight: var(--font-title-weight);
  font-size: var(--font-h4-size);
  color: var(--color-secondary-600);
  margin: 0;
}

.package-card__author {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-body-small-size);
  color: var(--color-neutral-900);
  margin: 0;
}

.package-card__row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.package-card__k {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-bold);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-500);
  margin: 0;
}

.package-card__v {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-body-small-weight);
  font-size: 13px;
  color: var(--color-neutral-500);
  margin: 0;
}

.packages__nav {
  display: flex;
  gap: 8px;
  align-self: flex-end;
}

.packages__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-white);
  border: 1px solid var(--color-secondary-400);
  color: var(--color-secondary-600);
  font-family: var(--font-body-regular-family);
  font-size: var(--font-size-2);
}

.packages__nav-btn--disabled {
  opacity: 0.35;
}

.packages__disclaimer {
  font-family: var(--font-body-bold-family);
  font-weight: var(--font-body-bold-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

/* Impact ------------------------------------------------------------ */

.impact {
  gap: 18px;
  max-width: 1160px;
  padding: 0 32px;
  align-items: flex-start;
}

.impact__title {
  font-family: var(--font-h2-family);
  font-weight: var(--font-h2-weight);
  font-size: var(--font-h2-size);
  line-height: var(--font-h2-line-height);
  color: var(--color-primary-500);
  margin: 0;
}

.impact__subtitle {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  letter-spacing: var(--font-body-regular-letter-spacing);
  color: var(--color-neutral-500);
  margin: 0;
}

.impact__subtitle sup {
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-350);
}

.impact__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0 30px;
  width: 100%;
}

.impact__stat {
  display: flex;
  flex-direction: column;
}

.impact__stat-value {
  font-family: var(--font-title-family);
  font-weight: var(--font-title-weight);
  font-size: 34px;
  letter-spacing: -0.01em;
  color: var(--color-neutral-900);
  margin: 0;
}

.impact__stat-label {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-body-small-weight);
  font-size: var(--font-body-small-size);
  color: var(--color-neutral-500);
  margin: 0;
}

/* Path ------------------------------------------------------------ */

.path {
  gap: 18px;
  max-width: 1160px;
  padding: 32px;
  align-items: flex-start;
}

.path__title {
  font-family: var(--font-h2-family);
  font-weight: var(--font-h2-weight);
  font-size: var(--font-h2-size);
  line-height: var(--font-h2-line-height);
  color: var(--color-primary-500);
  margin: 0;
}

.path__subtitle {
  font-family: var(--font-h3-family);
  font-weight: var(--font-h3-weight);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

.path__steps {
  display: flex;
  gap: 14px;
  width: 100%;
  padding-top: 2px;
}

.path__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 3px solid var(--color-primary-200);
}

.path__step--2 {
  border-top-color: var(--color-primary-500);
}

.path__step--3 {
  border-top-color: var(--color-primary-700);
}

.path__step-label {
  font-family: var(--font-body-bold-family);
  font-weight: var(--font-body-bold-weight);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin: 0;
}

.path__step-text {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-body-small-weight);
  font-size: var(--font-body-small-size);
  color: var(--color-neutral-500);
  margin: 0;
}

.path__note {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

.path__actions {
  display: flex;
  gap: 12px;
}

/* Footnotes ------------------------------------------------------------ */

.page-footnotes {
  max-width: 1160px;
  width: 100%;
  padding: 0 32px 40px;
  font-family: var(--font-body-regular-family);
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-neutral-500);
}

/* ==========================================================================
   RESPONSIVE — tablet (≤768px) and mobile (≤480px).
   Desktop-first cascade: the 768px block covers both tablet and mobile;
   the 480px block layers mobile-only refinements on top of it. Heading
   sizes shrink automatically via the --font-*-size tokens redefined in
   tokens.css. This section handles layout direction, the triptych/package
   card stacking, and the impact stats/rollout-path reflow.
   ========================================================================== */

@media (max-width: 768px) {
  /* Header block --------------------------------------------------------- */
  .header-block {
    padding: 56px var(--space-lg) 48px;
  }

  .header-block__inner {
    padding: 0 var(--space-lg);
  }

  /* Carrie intro / triptych ------------------------------------------------ */
  .carrie-intro {
    padding: 0 var(--space-lg);
  }

  /* Two even columns with the third card spanning full width avoids an
     awkward single orphan card sharing a lopsided row with empty space
     (same treatment as the Health Systems page's triptych). */
  .triptych {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .triptych__card:last-child {
    grid-column: 1 / -1;
  }

  /* Packages (specialty program cards) ------------------------------------ */
  .packages {
    padding: var(--space-lg);
  }

  /* Each card carries the same kind of dense, multi-section prose as the
     Health Systems chronic-condition cards (title, author line, four
     labeled rows) rather than something meant to be skimmed at a glance.
     A fixed-width horizontal carousel would force readers into combined
     horizontal-then-vertical scrolling to get through one card; stacking
     into a plain full-width list keeps every word on-screen and scrolls
     in one direction, matching the call made for that page's cards. */
  .packages__scroller {
    flex-direction: column;
    overflow-x: visible;
    padding: var(--space-lg) 0 4px;
  }

  .package-card {
    width: 100%;
  }

  .packages__nav {
    display: none;
  }

  /* Impact ----------------------------------------------------------------- */
  .impact {
    padding: 0 var(--space-lg);
  }

  .impact__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md) var(--space-lg);
  }

  /* Rollout path ------------------------------------------------------------- */
  .path {
    padding: var(--space-lg);
  }

  .path__steps {
    flex-direction: column;
    gap: var(--space-md);
  }

  .path__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Footnotes ---------------------------------------------------------------- */
  .page-footnotes {
    padding: 0 var(--space-lg) 32px;
  }
}

@media (max-width: 480px) {
  /* Header block --------------------------------------------------------- */
  .header-block {
    padding: 40px var(--space-md) 40px;
  }

  .header-block__inner {
    padding: 0 var(--space-md);
  }

  /* Carrie intro / triptych ------------------------------------------------ */
  .carrie-intro {
    padding: 0 var(--space-md);
  }

  .triptych {
    grid-template-columns: 1fr;
  }

  .triptych__card:last-child {
    grid-column: auto;
  }

  /* Packages (specialty program cards) ------------------------------------ */
  .packages {
    padding: var(--space-md);
  }

  /* Impact ----------------------------------------------------------------- */
  .impact {
    padding: 0 var(--space-md);
  }

  .impact__stats {
    grid-template-columns: 1fr;
  }

  /* Rollout path ------------------------------------------------------------- */
  .path {
    padding: var(--space-md);
  }

  /* Footnotes ---------------------------------------------------------------- */
  .page-footnotes {
    padding: 0 var(--space-md) 32px;
  }
}