/* ========== Section heading ========== */
/*
 * The two-tone heading used across marketing sections: a muted lead-in, then an ink emphasis.
 *   <h2 class="exa-section-heading">
 *     <span class="exa-section-heading__muted">Reclaim</span>
 *     <span class="exa-section-heading__accent">Your Life</span>
 *   </h2>
 * Stacked below 768px, one wrapped line above. .exa-section-heading--stacked keeps two lines.
 * Written in Title Case. Port of ExaLife SectionHeading.
 */

.exa-section-heading {
  font-family: var(--exa-font-heading);
  font-size: var(--exa-text-heading-size);
  font-weight: var(--exa-font-weight-bold);
  line-height: var(--exa-text-heading-line-height);
  letter-spacing: var(--exa-text-heading-tracking);
  text-wrap: balance;
}

.exa-section-heading__muted,
.exa-section-heading__accent {
  display: block;
}

.exa-section-heading__muted {
  color: var(--exa-color-text-tertiary);
}

.exa-section-heading__accent {
  color: var(--exa-color-text-primary);
}

@media (min-width: 768px) {
  .exa-section-heading {
    font-size: var(--exa-text-heading-size-md);
    letter-spacing: var(--exa-text-heading-tracking-md);
  }

  .exa-section-heading:not(.exa-section-heading--stacked) > .exa-section-heading__muted,
  .exa-section-heading:not(.exa-section-heading--stacked) > .exa-section-heading__accent {
    display: inline;
  }
}