/* RPA · Section heading. Tokens come from the theme (tokens.css); shared atoms
   (.rpa-plate, .rpa-eyebrow, .rpa-display, .rpa-link-arrow) are styled in the theme. */

.rpa-section-head__meta {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-block-end: 1rem;
  margin-block-end: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
  border-block-end: 1px solid var(--rpa-rule-strong);
}

/* Optional note at the far end of the rule — same place, size and colour as the hero's note. */
.rpa-section-head__meta--noted { flex-wrap: wrap; row-gap: 0.35rem; } /* only with a note: heads without one are untouched */
.rpa-section-head__note {
  margin-inline-start: auto;
  color: var(--rpa-c-muted, var(--rpa-slate));
}
.rpa-section-head--center .rpa-section-head__note { margin-inline-start: 0; }
.rpa-section-head.is-tone-ink .rpa-section-head__note,
.rpa-section-head.is-tone-petrol .rpa-section-head__note { color: var(--rpa-on-dark-muted); }

.rpa-section-head__body {
  display: grid;
  gap: var(--rpa-gap) clamp(2rem, 6vw, 7rem);
}

.rpa-section-head__title {
  font-size: var(--rpa-step-4);
  max-width: 18ch;
  margin: 0;
}
/* Set as the page's h1, the heading is a page head: same size as every inner-page hero title
   (hero.css, "page-head scale"), so Insights does not open smaller than its siblings. */
h1.rpa-section-head__title {
  font-size: var(--rpa-step-5);
  max-width: 20ch;
  text-wrap: balance;
}

.rpa-section-head__intro {
  font-size: var(--rpa-step-1);
  line-height: 1.5;
  max-width: 44ch;
  margin: 0 0 1.5rem;
  color: var(--rpa-slate);
}

@media (min-width: 900px) {
  .rpa-section-head--split .rpa-section-head__body {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: end;
  }
}

.rpa-section-head--center { text-align: center; }
.rpa-section-head--center .rpa-section-head__meta { justify-content: center; }
.rpa-section-head--center .rpa-section-head__title,
.rpa-section-head--center .rpa-section-head__intro { margin-inline: auto; }

/* Dark tones */
.rpa-section-head.is-tone-ink .rpa-section-head__meta,
.rpa-section-head.is-tone-petrol .rpa-section-head__meta { border-color: var(--rpa-on-dark-rule); }
.rpa-section-head.is-tone-ink .rpa-section-head__intro,
.rpa-section-head.is-tone-petrol .rpa-section-head__intro { color: var(--rpa-on-dark-muted); }