/* Styles for SectionHeading component */
@layer components {
    .section-heading {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);

        & .section-heading__title {
            font-size: var(--size-step-3);
            /* Set explicitly: a heading must not inherit the muted body colour
               of the block it happens to sit in. */
            color: var(--color-text);
        }

        & .section-heading__subtitle {
            font-family: var(--font-body);
            font-size: var(--size-step-1);
            font-weight: 600;
            line-height: 1.2;
            color: var(--color-text-muted);
        }

        /* Exception: centred band heading - the eyebrow rule reads better when
           it is symmetrical, so it gets a second rule on the other side. */
        &[data-align="center"] {
            align-items: center;
            text-align: center;

            & .section-heading__eyebrow::after {
                content: '';
                inline-size: var(--space-m);
                block-size: 1px;
                background-color: var(--color-accent);
            }
        }
    }
}