/* =========================
   Cross Point Hero
========================= */

.cp-hero {
    --cp-hero-image-position: center center;
}

.cp-hero--focus-left {
    --cp-hero-image-position: 35% center;
}

.cp-hero--focus-more-left {
    --cp-hero-image-position: 28% center;
}

.cp-hero__masked-image,
.elementor-widget-image.cp-hero__masked-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.cp-hero__masked-image .elementor-widget-container,
.elementor-widget-image.cp-hero__masked-image .elementor-widget-container {
    height: 100%;
    max-width: 100%;
    min-width: 0;
}

.cp-hero .cp-hero__masked-image img,
.cp-hero .elementor-widget-image.cp-hero__masked-image img,
.cp-hero .cp-hero__masked-image picture img,
.cp-hero .elementor-widget-image.cp-hero__masked-image picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--cp-hero-image-position, center center);
    -webkit-mask-image: url("../shapes/icon-website.svg");
    mask-image: url("../shapes/icon-website.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: auto 82%;
    mask-size: auto 82%;
    -webkit-mask-position: calc(100% + 56px) -40px;
    mask-position: calc(100% + 56px) -40px;
}

.cp-hero__media {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    height: clamp(420px, 46vh, 620px);
}

/* .cp-hero__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: 220px;
    z-index: 10;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--cp-page-solid-bg) 100%
    );
} */

.cp-hero__bleed-image,
.elementor-widget-image.cp-hero__bleed-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-width: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.28;
    -webkit-mask-image: radial-gradient(
        circle at 45% 30%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.65) 26%,
        rgba(0, 0, 0, 0.20) 48%,
        rgba(0, 0, 0, 0) 88%
    );
    mask-image: radial-gradient(
        circle at 45% 30%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.65) 26%,
        rgba(0, 0, 0, 0.20) 48%,
        rgba(0, 0, 0, 0) 88%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.cp-hero__bleed-image .elementor-widget-container,
.elementor-widget-image.cp-hero__bleed-image .elementor-widget-container {
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-width: 0;
}

.cp-hero .cp-hero__bleed-image img,
.cp-hero .elementor-widget-image.cp-hero__bleed-image img,
.cp-hero .cp-hero__bleed-image picture img,
.cp-hero .elementor-widget-image.cp-hero__bleed-image picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--cp-hero-image-position, center center);
}

@media (min-width: 1800px) {
    .cp-hero__media {
        height: clamp(680px, 48vh, 760px);
    }
}

@media (max-width: 1024px) {
    .cp-hero__media {
        height: clamp(460px, 48vh, 560px);
    }

    .cp-hero__bleed-image,
    .elementor-widget-image.cp-hero__bleed-image {
        opacity: 0.22;
    }

    .cp-hero .cp-hero__masked-image img,
    .cp-hero .elementor-widget-image.cp-hero__masked-image img,
    .cp-hero .cp-hero__masked-image picture img,
    .cp-hero .elementor-widget-image.cp-hero__masked-image picture img {
        -webkit-mask-size: auto 86%;
        mask-size: auto 86%;
        -webkit-mask-position: calc(100% + 32px) -24px;
        mask-position: calc(100% + 32px) -24px;
    }
}

@media (max-width: 767px) {
    .cp-hero__media {
        height: clamp(320px, 48vh, 420px);
    }

    .cp-hero__bleed-image,
    .elementor-widget-image.cp-hero__bleed-image {
        opacity: 0.14;
    }

    .cp-hero .cp-hero__masked-image img,
    .cp-hero .elementor-widget-image.cp-hero__masked-image img,
    .cp-hero .cp-hero__masked-image picture img,
    .cp-hero .elementor-widget-image.cp-hero__masked-image picture img {
        -webkit-mask-size: auto 92%;
        mask-size: auto 92%;
        -webkit-mask-position: calc(100% + 16px) -12px;
        mask-position: calc(100% + 16px) -12px;
    }
}

@media (orientation: landscape) and (max-height: 760px) {
    .cp-hero .cp-hero__media,
    .elementor .cp-hero .cp-hero__media {
        height: clamp(260px, 44vh, 420px);
    }
}

@media (max-width: 560px) {
    .cp-hero,
    .elementor .e-con.cp-hero,
    .elementor .elementor-section.cp-hero {
        --flex-direction: column;
        --flex-wrap: nowrap;
        --align-items: stretch;
        --gap: 0;
        --row-gap: 0;
        --padding-top: 0;
        --padding-bottom: clamp(2.75rem, 9vw, 4rem);

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: clamp(2.75rem, 9vw, 4rem);
    }

    .elementor .e-con.cp-hero > .e-con-inner,
    .elementor .elementor-section.cp-hero > .elementor-container {
        --gap: 0;
        --row-gap: 0;

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
    }

    .cp-hero .cp-hero__content,
    .cp-hero > :not(.e-con-inner):not(.elementor-container):not(.cp-hero__media):not(.cp-hero__masked-image):not(.cp-hero__bleed-image),
    .elementor .e-con.cp-hero > :not(.e-con-inner):not(.cp-hero__media):not(.cp-hero__masked-image):not(.cp-hero__bleed-image),
    .elementor .e-con.cp-hero > .e-con-inner > :not(.cp-hero__media):not(.cp-hero__masked-image):not(.cp-hero__bleed-image),
    .elementor .elementor-section.cp-hero > .elementor-container > :not(.cp-hero__media):not(.cp-hero__masked-image):not(.cp-hero__bleed-image) {
        position: relative;
        z-index: 4;
        order: 2;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .cp-hero .cp-hero__media,
    .elementor .cp-hero .cp-hero__media {
        --height: clamp(260px, 42vh, 360px);
        --min-height: clamp(260px, 42vh, 360px);

        position: relative;
        z-index: 1;
        order: 1;
        flex: 0 0 auto;
        align-self: stretch;
        inset: auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding-top: 0;
        height: clamp(260px, 42vh, 360px);
        transform: none;
    }

    .cp-hero .cp-hero__masked-image img,
    .cp-hero .elementor-widget-image.cp-hero__masked-image img,
    .cp-hero .cp-hero__masked-image picture img,
    .cp-hero .elementor-widget-image.cp-hero__masked-image picture img {
        -webkit-mask-position: calc(100% + 32px) 12px;
        mask-position: calc(100% + 32px) 12px;
    }
}