/* Тематические фоны первых экранов внутренних страниц услуг. */

.service-visual-hero {
    position: relative;
    min-height: clamp(680px, calc(100svh - 74px), 860px);
    padding: 0;
    isolation: isolate;
    overflow: hidden;
    background-color: transparent;
}

.service-visual-hero::before,
.service-visual-hero::after {
    content: "";
    position: absolute;
    inset: 0 0 -1px;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 75%,
        rgba(0, 0, 0, 0.88) 83%,
        rgba(0, 0, 0, 0.46) 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 75%,
        rgba(0, 0, 0, 0.88) 83%,
        rgba(0, 0, 0, 0.46) 92%,
        transparent 100%
    );
}

.service-visual-hero::before {
    z-index: 0;
    background-color: #07111f;
    background-image: var(--service-hero-image);
    background-repeat: no-repeat;
    background-position: var(--service-hero-position, center center);
    background-size: cover;
}

.service-visual-hero::after {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(3, 10, 22, 0.99) 0%, rgba(3, 10, 22, 0.91) 34%, rgba(3, 10, 22, 0.48) 57%, rgba(3, 10, 22, 0.08) 100%),
        linear-gradient(180deg, rgba(7, 17, 31, 0.18) 0%, transparent 56%, rgba(7, 17, 31, 0.48) 100%);
}

.service-visual-hero .service-hero-inner {
    position: relative;
    z-index: 2;
    min-height: inherit;
    grid-template-columns: minmax(0, 720px);
    justify-content: start;
    align-items: center;
    padding-block: 78px 112px;
}

.service-visual-hero .service-hero-copy {
    max-width: 720px;
    text-shadow: 0 3px 28px rgba(0, 0, 0, 0.62);
}

.service-visual-hero .hero-badge {
    color: #eff6ff;
    border-color: rgba(191, 219, 254, 0.26);
    background: rgba(30, 64, 175, 0.34);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
}

.service-visual-hero p {
    color: rgba(226, 232, 240, 0.94);
}

/* Старый маршрут работ заменён визуальным сюжетом и больше не показывается. */
.service-visual-hero .service-offer-panel {
    display: none;
}

.service-visual-hero.service-visual-hero--gasification {
    --service-hero-image: url("/assets/images/service-heroes/gasification-1672.webp");
}

.service-visual-hero.service-visual-hero--heating {
    --service-hero-image: url("/assets/images/service-heroes/heating-1672.webp");
}

.service-visual-hero.service-visual-hero--commercial {
    --service-hero-image: url("/assets/images/service-heroes/commercial-1672.webp");
}

.service-visual-hero.service-visual-hero--refueling {
    --service-hero-image: url("/assets/images/service-heroes/refueling-1672.webp");
}

.service-visual-hero.service-visual-hero--boiler-rooms {
    --service-hero-image: url("/assets/images/service-heroes/boiler-rooms-1672.webp");
}

.service-visual-hero.service-visual-hero--service {
    --service-hero-image: url("/assets/images/service-heroes/service-1672.webp");
}

.service-visual-hero.service-visual-hero--gasholders {
    --service-hero-image: url("/assets/images/service-heroes/gasholders-1672.webp");
}

.service-visual-hero.service-visual-hero--montage {
    --service-hero-image: url("/assets/images/service-heroes/montage-1672.webp");
}

.service-visual-hero.service-visual-hero--septic {
    --service-hero-image: url("/assets/images/service-heroes/septic-1672.webp");
}

@media (max-width: 1180px) {
    .service-visual-hero .service-hero-inner {
        grid-template-columns: minmax(0, 680px);
    }
}

@media (max-width: 760px) {
    .service-visual-hero {
        min-height: max(880px, calc(100svh - 68px));
    }

    .service-visual-hero::before {
        background-size: auto 61%;
        background-position: var(--service-hero-mobile-position, 72% 100%);
    }

    .service-visual-hero::after {
        background:
            linear-gradient(180deg, rgba(3, 10, 22, 0.99) 0%, rgba(3, 10, 22, 0.95) 54%, rgba(3, 10, 22, 0.6) 72%, rgba(3, 10, 22, 0.16) 100%),
            linear-gradient(90deg, rgba(3, 10, 22, 0.72), rgba(3, 10, 22, 0.12));
    }

    .service-visual-hero .service-hero-inner {
        display: block;
        padding-block: 54px 310px;
    }

    .service-visual-hero .service-hero-copy {
        max-width: 100%;
    }

    .service-visual-hero.service-visual-hero--gasification {
        --service-hero-image: url("/assets/images/service-heroes/gasification-960.webp");
    }

    .service-visual-hero.service-visual-hero--heating {
        --service-hero-image: url("/assets/images/service-heroes/heating-960.webp");
        --service-hero-mobile-position: 76% 100%;
    }

    .service-visual-hero.service-visual-hero--commercial {
        --service-hero-image: url("/assets/images/service-heroes/commercial-960.webp");
    }

    .service-visual-hero.service-visual-hero--refueling {
        --service-hero-image: url("/assets/images/service-heroes/refueling-960.webp");
        --service-hero-mobile-position: 78% 100%;
    }

    .service-visual-hero.service-visual-hero--boiler-rooms {
        --service-hero-image: url("/assets/images/service-heroes/boiler-rooms-960.webp");
        --service-hero-mobile-position: 78% 100%;
    }

    .service-visual-hero.service-visual-hero--service {
        --service-hero-image: url("/assets/images/service-heroes/service-960.webp");
        --service-hero-mobile-position: 78% 100%;
    }

    .service-visual-hero.service-visual-hero--gasholders {
        --service-hero-image: url("/assets/images/service-heroes/gasholders-960.webp");
    }

    .service-visual-hero.service-visual-hero--montage {
        --service-hero-image: url("/assets/images/service-heroes/montage-960.webp");
        --service-hero-mobile-position: 76% 100%;
    }

    .service-visual-hero.service-visual-hero--septic {
        --service-hero-image: url("/assets/images/service-heroes/septic-960.webp");
    }
}