@layer components {
    .section-heading {
        position: relative;
        margin: 0;
        width: 100%;
    }

    /* ── Fade ── */
    .section-heading--fade .section-heading__container::after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--sh-c-bg, transparent);
        border: var(--sh-c-border, none);
        border-top: var(--sh-c-border-top, var(--sh-c-border, none));
        border-bottom: var(--sh-c-border-bottom, var(--sh-c-border, none));
        border-left: var(--sh-c-border-left, var(--sh-c-border, none));
        border-right: var(--sh-c-border-right, var(--sh-c-border, none));
        border-radius: inherit;
        mask-image: var(--sh-fade-mask, linear-gradient(to right, transparent, black var(--sh-fade), black calc(100% - var(--sh-fade)), transparent));
        pointer-events: none;
        z-index: -1;
    }

    /* ── Container width: full viewport ── */
    .section-heading--container-full {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }

    /* ── Container ── */
    .section-heading__container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .section-heading--rule .section-heading__container {
        flex-direction: row;
        align-items: center;
        gap: var(--sh-rule-gap, 0);
    }

    /* ── Text contained within content-width (when container is full) ── */
    .section-heading--text-contained .section-heading__text {
        width: 100%;
        max-width: var(--content-width);
        margin-inline: auto;
        padding-inline: var(--gutter);
        flex-shrink: 0;
    }

    .section-heading--text-contained.section-heading--rule .section-heading__text {
        margin-inline: 0;
    }

    /* ── Alignment ── */
    .section-heading--center .section-heading__container {
        align-items: center;
        text-align: center;
    }

    .section-heading--right .section-heading__container {
        align-items: flex-end;
        text-align: right;
    }

    /* ── Rule (inline flex items) ── */
    .section-heading__rule {
        flex: 1 1 0;
        height: var(--sh-rule-width, 1px);
        background: var(--sh-rule-color, var(--color-border));
        min-width: 0;
        align-self: var(--sh-rule-align, center);
    }

    /* Fixed-length accent — absolute inside text box, extends outward */
    .section-heading__rule--fixed {
        position: absolute;
        top: 50%;
        transform: translateY(round(down, -50%, 1px));
        width: var(--sh-rule-length);
    }

    .section-heading__rule--fixed.section-heading__rule--left {
        right: calc(100% + var(--sh-rule-gap, 0px));
    }

    .section-heading__rule--fixed.section-heading__rule--right {
        left: calc(100% + var(--sh-rule-gap, 0px));
    }

    /* Custom vertical position (rule_position CSS value) */
    .section-heading__rule--absolute {
        top: auto;
        bottom: var(--sh-rule-bottom, 0);
        transform: none;
    }

    .section-heading--fade .section-heading__rule--left:not(.section-heading__rule--fixed) {
        mask-image: linear-gradient(to right, transparent, black var(--sh-fade));
    }

    .section-heading--fade .section-heading__rule--right:not(.section-heading__rule--fixed) {
        mask-image: linear-gradient(to left, transparent, black var(--sh-fade));
    }

    /* ── Offset — shifts text within the rule row ── */
    .section-heading__rule--left {
        flex-basis: var(--sh-offset, 0);
    }

    /* ── Text box ── */
    .section-heading__text {
        position: relative;
        z-index: 1;
        box-shadow: var(--sh-text-fade, 0) 0 var(--sh-text-fade, 0) 0 var(--sh-text-bg, transparent),
                    calc(-1 * var(--sh-text-fade, 0)) 0 var(--sh-text-fade, 0) 0 var(--sh-text-bg, transparent);
    }

    .section-heading:not(.section-heading--rule):not(.section-heading--text-contained) .section-heading__text {
        margin-inline-start: var(--sh-offset, 0);
    }

    /* Border clip — pseudo-element border clipped to top or bottom half */
    .section-heading__text--border-clip {
        border: none !important;
    }

    .section-heading__text--border-clip::before {
        content: '';
        position: absolute;
        inset: -1px;
        border: var(--sh-text-border);
        border-radius: inherit;
        pointer-events: none;
    }

    .section-heading__text--clip-top::before {
        clip-path: inset(0 0 calc(50% - var(--sh-rule-width, 1px) + 1px) 0);
    }

    .section-heading__text--clip-bottom::before {
        clip-path: inset(50% 0 0 0);
    }

    /* ── Title ── */
    .section-heading__title {
        font-family: var(--sh-font, var(--font-section-heading, var(--font-heading)));
        font-weight: var(--sh-font-weight, var(--font-weight-section-heading, var(--font-weight-heading)));
        font-size: var(--sh-font-size, var(--heading-font-size, var(--font-size-xl)));
        line-height: var(--sh-line-height, 1.2);
        letter-spacing: var(--sh-letter-spacing, var(--heading-letter-spacing, normal));
        color: var(--sh-color, inherit);
        text-shadow: var(--sh-text-shadow, none);
        margin: 0;
    }

    .section-heading--uppercase .section-heading__title {
        text-transform: uppercase;
        letter-spacing: var(--sh-letter-spacing, var(--heading-letter-spacing, 0.05em));
        font-size: var(--sh-font-size, var(--heading-font-size, var(--font-size-md)));
        margin-top: -0.1em;
    }

    .section-heading--italic .section-heading__title {
        font-style: italic;
    }

    /* ── Text gradient ── */
    .section-heading--gradient .section-heading__title {
        background: var(--sh-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* ── Underline decoration ── */
    .section-heading__underline {
        display: block;
        width: var(--sh-ul-width, 40px);
        height: var(--sh-ul-height, 2px);
        background: var(--sh-ul-color, var(--color-primary));
        border-radius: var(--sh-ul-radius, 0);
        margin-block-start: var(--sh-ul-gap, var(--spacing-sm));
        transform: translateX(var(--sh-ul-offset, 0));
    }

    .section-heading--vertical .section-heading__underline {
        width: var(--sh-ul-height, 2px);
        height: var(--sh-ul-width, 40px);
        margin-block-start: 0;
        margin-inline-start: var(--sh-ul-gap, var(--spacing-sm));
    }

    .section-heading--vertical .section-heading__text {
        overflow: visible;
    }

    .section-heading--underline-abs .section-heading__text {
        overflow: visible;
    }

    .section-heading--underline-abs .section-heading__underline {
        position: absolute;
        top: var(--sh-ul-top);
        bottom: var(--sh-ul-bottom);
        left: var(--sh-ul-left);
        right: var(--sh-ul-right);
        translate: var(--sh-ul-translate, none);
        margin: 0;
    }

    .section-heading--center .section-heading__underline {
        margin-inline: auto;
    }

    .section-heading--right .section-heading__underline {
        margin-inline-start: auto;
    }

    /* ── Accent: inline left/right — border-style, shifts content ── */
    .section-heading--accent-left .section-heading__text {
        border-left: var(--sh-ul-height, 2px) solid var(--sh-ul-color, var(--color-primary));
        padding-left: var(--sh-ul-gap, var(--spacing-sm));
    }

    .section-heading--accent-right .section-heading__text {
        border-right: var(--sh-ul-height, 2px) solid var(--sh-ul-color, var(--color-primary));
        padding-right: var(--sh-ul-gap, var(--spacing-sm));
    }

    /* ── Subtitle ── */
    .section-heading__subtitle {
        font-family: var(--sh-subtitle-font, var(--font-excerpt));
        font-weight: var(--sh-subtitle-weight, var(--font-weight-excerpt));
        font-size: var(--sh-subtitle-size, var(--font-size-body));
        color: var(--sh-subtitle-color, var(--color-muted));
        margin: 0;
    }

    .section-heading--subtitle-italic .section-heading__subtitle {
        font-style: italic;
    }

    .section-heading--subtitle-uppercase .section-heading__subtitle {
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .section-heading--subtitle-gradient .section-heading__subtitle {
        background: var(--sh-subtitle-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Gap between title and subtitle */
    .section-heading__text > * + * {
        margin-block-start: var(--sh-gap, var(--spacing-xs));
    }

    /* ── Icon: background (decorative, bleeds vertically) ── */
    .section-heading__icon {
        color: var(--sh-icon-color, currentColor);
    }

    .section-heading__icon .section-heading__icon-svg {
        width: 100%;
        height: 100%;
        scale: var(--sh-icon-scale-x, 1) var(--sh-icon-scale-y, 1);
        rotate: var(--sh-icon-rotate, 0);
    }

    .section-heading--icon-bg .section-heading__icon-svg * {
        vector-effect: non-scaling-stroke;
    }

    .section-heading--icon-bg .section-heading__container {
        overflow: visible;
    }

    .section-heading--icon-bg > .section-heading__container > .section-heading__icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: var(--sh-icon-size, 80px);
        height: var(--sh-icon-size, 80px);
        opacity: var(--sh-icon-opacity, 0.08);
        pointer-events: none;
        margin-top: var(--sh-icon-offset, 0);
    }

    .section-heading--icon-right > .section-heading__container > .section-heading__icon {
        right: 0;
    }

    .section-heading--icon-left > .section-heading__container > .section-heading__icon {
        left: 0;
    }

    .section-heading--icon-center > .section-heading__container > .section-heading__icon {
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* ── Icon: inline (next to title) ── */
    .section-heading--icon-inline .section-heading__title {
        display: inline;
    }

    .section-heading__icon--inline {
        display: inline;
        width: var(--sh-icon-size, 1em);
        height: var(--sh-icon-size, 1em);
        vertical-align: middle;
    }

    .section-heading__icon--inline .section-heading__icon-svg {
        width: var(--sh-icon-size, 1em);
        height: var(--sh-icon-size, 1em);
        vertical-align: middle;
    }

    .section-heading--icon-inline .section-heading__text > .section-heading__icon--inline + .section-heading__title {
        margin-inline-start: var(--sh-icon-gap, var(--spacing-xs));
    }

    .section-heading--icon-inline .section-heading__text > .section-heading__title + .section-heading__icon--inline {
        margin-inline-start: var(--sh-icon-gap, var(--spacing-xs));
    }

    /* ── First letter ── */
    .section-heading--first-letter .section-heading__title::first-letter {
        color: var(--sh-fl-color, inherit);
        background: var(--sh-fl-bg, transparent);
        font-size: var(--sh-fl-size, inherit);
        font-weight: var(--sh-fl-weight, inherit);
        font-family: var(--sh-fl-font, inherit);
        padding: var(--sh-fl-padding, 0);
        border-radius: var(--sh-fl-radius, 0);
        font-style: var(--sh-fl-style, inherit);
    }

    /* ── Overlap — heading bleeds into content below ── */
    .section-heading--overlap {
        margin-bottom: calc(-1 * var(--sh-overlap));
        position: relative;
        z-index: 2;
    }

    /* ── Vertical / Rotated ── */
    .section-heading--vertical {
        writing-mode: var(--sh-writing-mode);
    }

    .section-heading--vertical .section-heading__title {
        white-space: nowrap;
    }

    .section-heading--rotated {
        rotate: var(--sh-rotate);
        transform-origin: var(--sh-transform-origin, center);
    }

    /* ── Inside position — sits inside the section, absolutely positioned ── */
    .section-heading--inside {
        position: absolute;
        top: var(--sh-inside-top, 50%);
        translate: var(--sh-inside-translate, 0 -50%);
        z-index: 2;
    }

    .section-heading--inside-left {
        left: var(--sh-inside-offset, var(--gutter));
    }

    .section-heading--inside-right {
        right: var(--sh-inside-offset, var(--gutter));
    }

    /* ── Edge position ── */
    .section-heading--edge {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        transform: translateY(round(down, -50%, 1px));
        z-index: 1;
    }

    /* ── Anchor — vertical alignment within section (top/center/bottom) ── */
    .section-heading--anchored {
        display: flex;
        flex-direction: column;
        justify-content: var(--sh-anchor, flex-start);
    }

    .section-heading--anchored:not(.section-heading--inside) {
        height: 100%;
    }

    .section-heading--inside.section-heading--anchored {
        top: 0;
        bottom: 0;
        translate: none;
        padding-top: var(--sh-anchor-inset, 0);
        padding-bottom: var(--sh-anchor-inset, 0);
        pointer-events: none;
    }

    .section-heading--inside.section-heading--anchored .section-heading__text {
        pointer-events: auto;
    }

    .section-heading--vertical.section-heading--anchored {
        writing-mode: horizontal-tb;
    }

    .section-heading--vertical.section-heading--anchored .section-heading__text {
        writing-mode: var(--sh-writing-mode);
    }

    .section-heading--anchored.section-heading--rotated {
        rotate: none;
    }

    .section-heading--anchored.section-heading--rotated .section-heading__text {
        rotate: var(--sh-rotate);
        transform-origin: var(--sh-transform-origin, center);
    }
}