/* Decorative Separators V2 — shared presentation only.
   SVG assets: /images/design-system/separators/{rosette,rope}.svg
   The Blade component provides the image; CSS controls only layout.
   No dependency on Zone Discovery or Frontend Modules. */

.decorative-separator {
    display: block;
    width: 100%;
    max-width: var(--decorative-separator-max-width, 100%);
    margin-block: var(--decorative-separator-margin-block, 16px);
    margin-inline: auto;
    line-height: 0;
    pointer-events: none;
}

.decorative-separator__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Wide divider with central rosette, for section/module transitions. */
.decorative-separator--rosette {
    --decorative-separator-max-width: 900px;
    --decorative-separator-margin-block: 16px;
}


/* The rosette inherits the editorial eyebrow color instead of a fixed SVG stroke.
   Use the external SVG as an alpha mask; the existing image is the fallback. */
@supports (mask-image: url("/images/design-system/separators/rosette.svg")) or (-webkit-mask-image: url("/images/design-system/separators/rosette.svg")) {
    .decorative-separator--rosette {
        position: relative;
    }

    .decorative-separator--rosette .decorative-separator__image {
        opacity: 0;
    }

    .decorative-separator--rosette::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--editorial-eyebrow-color, #8e4a3a);
        -webkit-mask: url("/images/design-system/separators/rosette.svg") center / contain no-repeat;
        mask: url("/images/design-system/separators/rosette.svg") center / contain no-repeat;
        pointer-events: none;
    }
}

/* Fine rope/diamond ornament for heading underlines. */
.decorative-separator--rope {
    --decorative-separator-max-width: 900px;
    --decorative-separator-margin-block: 8px;
}

@media (max-width: 767px) {
    .decorative-separator--rosette {
        --decorative-separator-margin-block: 12px;
    }
}