/* ==========================================================================
   Component: section heading  (<x-site.section-heading>)
   --------------------------------------------------------------------------
   Quiet and editorial: a small label led by a short taupe rule, the title
   in the thin display face, an intro line, and a plain underlined "view
   all" link at the far end. --center stacks everything centred.
   ========================================================================== */

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-8);
    flex-wrap: wrap;
    margin-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
}

.section-heading__copy { max-width: 46rem; }

.section-heading__eyebrow { margin-bottom: var(--space-3); }

.section-heading__title { font-size: var(--fs-3xl); }

.section-heading__text {
    margin-top: var(--space-3);
    color: var(--ink-soft);
    font-size: var(--fs-lg);
}

.section-heading__link { flex-shrink: 0; }

/* ── On colour bands ─────────────────────────────────────────────────────── */
.band--aqua .section-heading__text   { color: var(--ink-deep); }
.band--indigo .section-heading__text,
.band--indigo .eyebrow               { color: rgb(255 255 255 / 0.85); }

/* ── Centred variant ─────────────────────────────────────────────────────── */
.section-heading--center { flex-direction: column; align-items: center; text-align: center; }
.section-heading--center .section-heading__copy { margin-inline: auto; }