/* Единая композиция первых экранов информационных страниц с разными сюжетами. */

.info-visual-hero {
    position: relative;
    min-height: clamp(620px, calc(100svh - 74px), 780px);
    padding: 0;
    isolation: isolate;
    overflow: hidden;
    background-color: #07111f;
}
.info-visual-hero::before,
.info-visual-hero::after {
    position: absolute;
    inset: 0 0 -1px;
    content: "";
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0, 0, 0, 0.72) 91%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0, 0, 0, 0.72) 91%, transparent 100%);
}

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

.info-visual-hero::after {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(3, 10, 22, 0.98) 0%, rgba(3, 10, 22, 0.87) 38%, rgba(3, 10, 22, 0.38) 67%, rgba(3, 10, 22, 0.1) 100%),
        linear-gradient(180deg, rgba(7, 17, 31, 0.16) 0%, transparent 58%, rgba(7, 17, 31, 0.52) 100%);
}

.info-visual-hero .page-hero-inner,
.info-visual-hero .service-hero-inner {
    position: relative;
    z-index: 2;
    min-height: inherit;
    padding-block: 76px 106px;
}

.info-visual-hero .page-hero-inner > div:first-child,
.info-visual-hero .service-hero-inner > div:first-child {
    text-shadow: 0 3px 28px rgba(0, 0, 0, 0.64);
}

.info-visual-hero .intro-hero-card {
    border-color: rgba(255, 255, 255, 0.17);
    background: rgba(7, 17, 31, 0.78);
    box-shadow: 0 24px 68px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px);
}

.info-visual-hero--projects {
    --info-hero-image: url("/assets/images/page-heroes/projects-installation-1672.webp");
}

.info-visual-hero--about {
    --info-hero-image: url("/assets/images/page-heroes/about-team-1672.webp");
}

.info-visual-hero--contacts {
    --info-hero-image: url("/assets/images/page-heroes/contacts-dispatch-1672.webp");
}

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

    .info-visual-hero::before {
        background-image: var(--info-hero-image-mobile);
        background-position: var(--info-hero-mobile-position, 70% 100%);
        background-size: auto 62%;
    }

    .info-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.57) 75%, rgba(3, 10, 22, 0.14) 100%),
            linear-gradient(90deg, rgba(3, 10, 22, 0.62), rgba(3, 10, 22, 0.12));
    }

    .info-visual-hero .page-hero-inner,
    .info-visual-hero .service-hero-inner {
        display: block;
        padding-block: 48px 290px;
    }

    .info-visual-hero .intro-hero-card {
        margin-top: 28px;
    }

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

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

    .info-visual-hero--contacts {
        --info-hero-image-mobile: url("/assets/images/page-heroes/contacts-dispatch-960.webp");
        --info-hero-mobile-position: 77% 100%;
    }
}