/* Keep the navigation band dark, then fade over 160px into existing shading.
   Define on each image owner so measured navigation heights resolve locally. */
body,
.event-background-cover-photo,
.group-today-hero,
.blog-directory-hero,
.blog-article-detail-hero {
    --wol-hero-navigation-mask: linear-gradient(
        180deg,
        rgba(14, 27, 43, var(--wol-hero-menu-opacity, .75)) 0,
        rgba(14, 27, 43, var(--wol-hero-menu-opacity, .75)) var(--group-hero-navigation-height, var(--blog-hero-navigation-height, 7.5rem)),
        rgba(14, 27, 43, 0) calc(var(--group-hero-navigation-height, var(--blog-hero-navigation-height, 7.5rem)) + 10rem)
    );
}
/* Combine with the existing cover masks for at least 75% top shading. */
.group-today-hero { --wol-hero-menu-opacity: .6875; }
.blog-directory-hero,
.blog-article-detail-hero { --wol-hero-menu-opacity: .45; }

/* Public event covers have no overlaid title: keep their tint light and uniform. */
.event-background-cover-photo { position: relative; }
.event-background-cover-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(14, 27, 43, .12);
    pointer-events: none;
}