/* =========================================================
   ZENITH KARATE ACADEMY
   HERO IMAGE DARKENING
   Darken the photograph only. Keep all hero content untouched.
========================================================= */

.home {
    background-image: none !important;
    box-shadow: none !important;
    isolation: isolate;
}

/*
   The hero photograph is moved onto the pseudo-element so the
   brightness filter affects only the image, never the text/buttons.
*/
.home::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-image: url("/images/HomepageImage.png") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center 42% !important;
    filter: brightness(0.62) !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* Keep the decorative hero border, but never use it as a darkening layer. */
.home::after {
    content: "" !important;
    position: absolute !important;
    inset: 1rem !important;
    z-index: 1 !important;
    border: 1px solid rgba(253, 178, 3, 0.16) !important;
    background: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* All real hero content stays above the image layer. */
.home > * {
    position: relative;
    z-index: 2 !important;
}

@media (max-width: 850px) {
    .home::before {
        background-position: 58% center !important;
        filter: brightness(0.62) !important;
    }

    .home::after {
        inset: 0.75rem !important;
    }
}

@media (max-width: 560px) {
    .home::before {
        background-position: 58% center !important;
        filter: brightness(0.62) !important;
    }

    .home::after {
        inset: 0.55rem !important;
    }
}