/* Phone-only automatic Hero tint (resources/js/website/hero-auto-tint.js).
   The script sets --bb-v2-hero-auto-tint and data-bb-hero-auto-tint on a
   full-width photo Hero when its text needs help on a phone; this layer paints
   it over the photo + stored overlay and under the Hero's copy. Desktop and
   tablet never get the attribute, and the query below repeats the guard. */
@media (max-width: 767.98px) {
    .bb-v2-structural-hero[data-bb-hero-auto-tint] {
        position: relative;
        isolation: isolate;
    }

    .bb-v2-structural-hero[data-bb-hero-auto-tint]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--bb-v2-hero-auto-tint, transparent);
        /* Behind the in-flow copy, above the Hero's own background
           (isolation keeps -1 inside the Hero), like the split-hero ::before. */
        z-index: -1;
        pointer-events: none;
    }
}