/* ==========================================================================
   Clunky Design System (CDS)
   Section Heading
   File: /assets/css/components/section-heading.css

   Sprint 1 canonical reusable component.
========================================================================== */

.section-heading {
  width: 100%;
  max-width: 760px;
  margin-inline: 0;
  margin-bottom: var(--space-7);
}

.section-eyebrow {
  display: block;
  margin: 0 0 var(--space-3);
  color: var(--color-primary);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-bold, 700);
  line-height: var(--lh-body, 1.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section-heading > h1,
.section-heading > h2,
.section-heading > h3,
.section-heading > h4,
.section-heading > h5,
.section-heading > h6 {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.section-heading > :is(h1, h2, h3, h4, h5, h6):last-child {
  margin-bottom: 0;
}

.section-intro {
  max-width: 68ch;
  margin: 0;
  color: var(--color-text-light);
  font-size: var(--fs-lg, 1.125rem);
  line-height: var(--lh-body, 1.75);
}

.section-heading > :is(h1, h2, h3, h4, h5, h6) + .section-intro {
  margin-top: var(--space-4);
}

@media (max-width: 600px) {
  .section-heading {
    margin-bottom: var(--space-6);
  }

  .section-intro {
    font-size: var(--fs-base, 1rem);
  }
}