/* =========================================================
   FEATURED-IMAGE HERO
========================================================= */

/*
 * Elementor structure:
 *
 * Outer container:       hero
 * Featured Image widget: hero__media
 * Content container:     hero__content
 * Inner wrapper:         hero__inner
 */

.hero {
    --hero-min-height:
        clamp(320px, 24vw, 420px);

    --hero-overlay:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(0, 0, 0, 0.28) 20%,
            rgba(0, 0, 0, 0.14) 45%,
            rgba(0, 0, 0, 0.04) 70%,
            rgba(0, 0, 0, 0) 100%
        );

    position: relative;
    isolation: isolate;
    min-height: var(--hero-min-height);
    overflow: hidden;
}

.hero__media {
    position: absolute !important;
    z-index: 0;
    inset: 0;
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    margin: 0 !important;
    pointer-events: none;
}

.hero__media,
.hero__media > .elementor-widget-container,
.hero__media .elementor-image,
.hero__media a,
.hero__media picture {
    width: 100%;
    height: 100%;
}

.hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position:
        var(--hero-image-position, center center);
}

.hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: var(--hero-overlay);
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    min-height: var(--hero-min-height);
    align-items: center;
}

.hero__inner {
    width: 100%;
    padding-inline: var(--site-inline-padding);
}

.hero--homepage {
    --hero-min-height:
        clamp(420px, 34vw, 560px);
}

.hero--short {
    --hero-min-height:
        clamp(260px, 20vw, 340px);
}

.hero--dark {
    --hero-overlay:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.60) 0%,
            rgba(0, 0, 0, 0.40) 35%,
            rgba(0, 0, 0, 0.16) 70%,
            rgba(0, 0, 0, 0) 100%
        );
}

.hero--light {
    --hero-overlay:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.30) 0%,
            rgba(0, 0, 0, 0.18) 35%,
            rgba(0, 0, 0, 0.06) 70%,
            rgba(0, 0, 0, 0) 100%
        );
}

@media (max-width: 767px) {
    .hero {
        --hero-min-height:
            clamp(300px, 72vw, 400px);

        --hero-overlay:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.36) 30%,
                rgba(0, 0, 0, 0.14) 68%,
                rgba(0, 0, 0, 0) 100%
            );
    }

    .hero--homepage {
        --hero-min-height:
            clamp(380px, 92vw, 520px);
    }

    .hero--short {
        --hero-min-height:
            clamp(240px, 58vw, 320px);
    }
}