/* ==========================================================================
   SNIPPET 4: HOME HERO (INLINE)
   Klasse staat op het Afbeelding-widget in de container "Left"
   ========================================================================== */

.hero-image-home {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 500px;
    max-height: 65vh;

    /* SVG Blob Mask (desktop) */
    -webkit-mask-image: var(--bubble);
    mask-image: var(--bubble);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom right;
    mask-position: bottom right;
    -webkit-mask-size: 100% 130%;
    mask-size: 100% 130%;
}

/* Overlay gradient */
.hero-image-home::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.25) 10%,
        rgba(0, 0, 0, 0.5) 65%
    );
}

/* -- Desktop (1025px+): gradient tweak -- */
@media (min-width: 1025px) {
    .hero-image-home::after {
        background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.17) 50%,
            rgba(0, 0, 0, 0.35) 85%
        );
    }
}

/* -- Ultra-wide screens (1720px+): cap width for balance -- */
@media (min-width: 1720px) {
    .hero-image-home {
        max-width: 980px;
        margin-inline: auto;
    }
}

/* -- Tablet Portrait (768px - 1024px) -- */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero-image-home {
        /* Blob-masker uit: afbeelding vult het hele vlak, ook linksboven */
        -webkit-mask-image: none;
        mask-image: none;

        /* Zachte ronding onderaan: links iets lager, rechts iets hoger */
        -webkit-clip-path: ellipse(300% 100% at 10% 0);
        clip-path: ellipse(300% 100% at 10% 0);

        width: 100%;
        height: 73vw;
        min-height: 480px;
        max-height: 70vh;
    }

    .hero-image-home .elementor-widget-container {
        height: 100%;
    }

    .hero-image-home img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* -- Mobile Portrait (up to 767px) -- */
@media (max-width: 767px) {
    .hero-image-home {
        /* Blob-masker uit: afbeelding vult het hele vlak, ook linksboven */
        -webkit-mask-image: none;
        mask-image: none;

        /* Zachte ronding onderaan: links iets lager, rechts iets hoger */
        -webkit-clip-path: ellipse(270% 100% at 10% 0);
        clip-path: ellipse(270% 100% at 10% 0);

        width: 100%;
        height: 115vw;
        min-height: 420px;
        max-height: 70vh;
    }

    .hero-image-home .elementor-widget-container {
        height: 100%;
    }

    .hero-image-home img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}