/* ========================================================================
   Elatrik v16 — herstel hero-beeld + zachtere fade lager geplaatst
   ========================================================================

   v15 zette de fade lager, maar in combinatie met oudere hero-lagen kon de
   hero-afbeelding achter de lichte achtergrond verdwijnen. Deze fix zet de
   lagen expliciet goed:
   0 = foto, 1 = donkere leesbaarheid-overlay, 2 = zachte fade onderaan,
   3 = tekst/content.
*/
.service-cover-hero,
.pro-hero {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: var(--dark) !important;
}

.service-cover-hero__image,
.pro-hero__image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: scale(1.015) !important;
}

.service-cover-hero__shade,
.pro-hero__shade {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 72% 42%, rgba(217,150,46,.12), transparent 38%),
        linear-gradient(90deg, rgba(18,17,15,.88) 0%, rgba(18,17,15,.68) 40%, rgba(18,17,15,.24) 72%, rgba(18,17,15,.08) 100%),
        linear-gradient(0deg, rgba(18,17,15,.24) 0%, rgba(18,17,15,.08) 35%, rgba(18,17,15,.22) 100%) !important;
}

.service-cover-hero::after,
.pro-hero::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -2px !important;
    height: clamp(95px, 11vw, 185px) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
        linear-gradient(180deg,
            rgba(251,248,242,0) 0%,
            rgba(251,248,242,0) 32%,
            rgba(251,248,242,.24) 58%,
            rgba(251,248,242,.72) 84%,
            var(--cream) 100%) !important;
}

.service-cover-hero > .container-fluid,
.pro-hero > .container-fluid,
.service-cover-hero__content,
.pro-hero__content {
    position: relative !important;
    z-index: 3 !important;
}

@media (max-width: 767.98px) {
    .service-cover-hero::after,
    .pro-hero::after {
        height: 120px !important;
        bottom: -2px !important;
    }

    .service-cover-hero__shade,
    .pro-hero__shade {
        background:
            linear-gradient(90deg, rgba(18,17,15,.86), rgba(18,17,15,.46)),
            linear-gradient(0deg, rgba(18,17,15,.20), rgba(18,17,15,.10) 42%, rgba(18,17,15,.22)) !important;
    }
}