/**********************************************
* Overlapping card
**********************************************/
.vii-overlapping-cards {
    --spacing-top:44px;
    --width-content:clamp(300px, 50%, 668px);
    --height-popup:calc(var(--vii-100vh) - 2 * var(--spacing-top) - var(--vii-header-height) - var(--admin-bar-height));
    --items-count:3;
    --button-height:80px;
    --active-index:0;
    --const: 1.75;

    min-height:calc(var(--vii-100vh) * var(--items-count) * var(--const))
}

/* cursor */
.vii-overlapping-cards__cursor {background:rgba(0, 0, 0, 0); transition:opacity 0.3s ease;}
.vii-overlapping-cards__cursor-wrapper {height:var(--vii-100vh);}
.vii-overlapping-cards__cursor.mouse-hide {opacity:0;}

/* item */
.vii-overlapping-cards__image-title-wrapper {
    min-height:calc(var(--vii-100vh) * var(--items-count) * var(--const));
}
.vii-overlapping-cards__item-image-content__inner,
.vii-overlapping-cards__button-inner {
    min-height:var(--vii-100vh);
    padding:calc(var(--admin-bar-height) + var(--spacing-top) + var(--vii-header-height)) var(--vii-gap-container) var(--spacing-top);
}

/* item > image */
.vii-overlapping-cards__item-image-bg:before {background:rgba(0, 0, 0, .1); z-index:1;}
.vii-overlapping-cards__item-image-bg:after {
    top:44%; background:linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
    z-index:2; opacity:0.7;
}
.vii-overlapping-cards__item-image-bg .background-mobile {display:none;}

/* item > content */
.vii-overlapping-cards__item-heading {width:var(--width-content); padding-right:20px;}

/* button */
.vii-overlapping-cards__item-open-popup {
    height:var(--button-height); width:calc(100% - var(--width-content)); max-width:437px;
    border-radius:8px; border:1px solid #c0c0be;
    background:rgba(240, 240, 240, 0.1); backdrop-filter:blur(12px);
    transition:var(--vii-transition);

    box-shadow:-2px 4px 10px rgba(145, 145, 145, .05), -7px 17px 18px rgba(145, 145, 145, .04),
    -15px 37px 24px rgba(145, 145, 145, .03), -27px 66px 29px rgba(145, 145, 145, 0.01),
    -42px 103px 31px rgba(0, 0, 0, 0), inset 0 2px 4px rgba(255, 255, 255, .25),
    inset 0 -2px 4px rgba(255, 255, 255, 0.15);
}

.vii-overlapping-cards__button-item {gap:24px; padding:12px 52px 12px 24px; height:var(--button-height);}
.vii-overlapping-cards__button-item i.line {width:1px; height:28px;}

.vii-overlapping-cards__item-open-popup span.icon {
    width:28px; right:24px; font-size:var(--vii-size-12);
    border:1px solid #fff; border-radius:6px;
}
.vii-overlapping-cards__item-open-popup span.icon i {font-weight:400;}
.vii-overlapping-cards__item-open-popup:hover {box-shadow:0 0 30px 5px rgba(255, 255, 255, .2);}

/* item > content > content popup */
.vii-overlapping-cards__popups-wrapper {
    width:100%; max-width:437px;
    right:var(--vii-gap-container); bottom:var(--spacing-top);
}
.vii-overlapping-cards__item-content-popup {
    border-radius:4px; max-height:var(--height-popup); width:100%;
}
.vii-overlapping-cards__button-item__inner {
    transform:translateY(calc(-1 * var(--active-index) * var(--button-height)));
    transition:transform 1.2s ease;
}
.vii-overlapping-cards__item-content-popup-number {
    min-height:75px; padding:5px 24px;
    background:#fff; border-bottom:1px solid var(--vii-color-gray);
}
.vii-overlapping-cards__item-content-popup-number button {
    background:rgba(0, 0, 0, 0); width:28px; color:var(--vii-color-green);
    font-size:9px;
    border:1px solid var(--vii-color-green); border-radius:6px;
}
.vii-overlapping-cards__item-content-popup-number button i {transform:translateY(0.1em)}
.vii-overlapping-cards__item-content-popup-number button:hover {
    color:var(--vii-color-on-primary); background:var(--vii-color-green);
}
.vii-overlapping-cards__item-content-popup-text {
    --vii-spacing-paragraph:16px;
    padding:95px 24px 24px; height:100%; max-height:var(--height-popup);
}
.vii-overlapping-cards__item-content-popup-text hr {border-bottom:1px solid rgba(0, 0, 0, .15);}
.vii-overlapping-cards__item-content-popup-text p:has(.heading_4) {--vii-spacing-paragraph:20px;}

/* item > content > gallery popup */
.vii-overlapping-cards__item-gallery-image:before {
    top:76.77%; background:linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
    opacity:0.6; z-index:1; pointer-events:none;
    transition:opacity 0.3s ease;
}
.vii-overlapping-cards__item-gallery-image:after {
    font-family:var(--vii-font-icomoon), fantasy; content:"\e902";
    font-size:32px; line-height:1; color:var(--vii-color-white);
    position:absolute; right:24px; bottom:24px; z-index:2; pointer-events:none;
    transition:transform 0.3s ease;
}
.vii-overlapping-cards__item-gallery-image:hover:before {opacity:0;}
.vii-overlapping-cards__item-gallery-image:hover:after {transform:scale(1.1);}

/* show popup */
.vii-overlapping-cards.show-popup .vii-overlapping-cards__item-content-popup.active {transform:scale(1); pointer-events:auto;}
.vii-overlapping-cards.show-popup .vii-overlapping-cards__item-content-popup-number {transform:translateY(0); opacity:1;}
.vii-overlapping-cards.show-popup .vii-overlapping-cards__item-content-popup-text {opacity:1}
.vii-overlapping-cards.show-popup .vii-overlapping-cards__button {pointer-events:auto;}
.vii-overlapping-cards.show-popup .vii-overlapping-cards__cursor {pointer-events:none;}

@media only screen and (min-width:1025px) {
    .vii-overlapping-cards__image-title-wrapper-inner {height:var(--vii-100vh);}
    .vii-overlapping-cards__item-image-content {
        transform:translateY(100%); position:absolute; inset:0;
        transition:transform 1s ease;
    }
    .vii-overlapping-cards__item-image {transition:transform 1.6s ease, opacity 1.6s ease;}
    .vii-overlapping-cards__item-image-content.active {transform:translateY(0);}
    body.scroll-down .vii-overlapping-cards__item-image-content.hide-image .vii-overlapping-cards__item-image {
        transform:scale(1.4); opacity:0.6;
    }
    .vii-overlapping-cards__item-content-popup {
        transform:scale(0); transition:transform 0.6s ease; transform-origin:bottom right;
    }
    .vii-overlapping-cards__item-content-popup-number {
        opacity:0; transform:translateY(0);
        transition:all 0.3s ease 0.6s;
    }
    .vii-overlapping-cards__item-content-popup-text {
        opacity:0; transition:all 0.3s ease 0.8s;
    }

    .vii-overlapping-cards__item-heading {overflow:hidden;}
    .vii-overlapping-cards__item-heading > * {
        opacity:0; transform:translateY(100%);
        transition:all 1s ease 1s;
    }
    .vii-overlapping-cards__item-image-content.show-title .vii-overlapping-cards__item-heading > * {
        opacity:1; transform:translateY(0);
    }
}

@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    .vii-overlapping-cards__item-content-popup-number {
        background:#fff;
    }
}


/**********************************************
* Overlapping card - Responsive
**********************************************/
@media only screen and (min-width:1700px) {
    .vii-overlapping-cards {
        --width-content:42.5vw;
        --button-height:clamp(75px, 3.6vw, 200px);
    }
    .vii-overlapping-cards__item-open-popup, .vii-overlapping-cards__popups-wrapper {max-width:25vw;}
    .vii-overlapping-cards__button-item i.line {height:40px;}
    .vii-overlapping-cards__item-open-popup span.icon {width:1.6vw;}
    .vii-overlapping-cards__item-content-popup-number button {width:1.8vw; font-size:0.6vw;}
}
@media only screen and (max-width:1024px) {
    .vii-overlapping-cards {--const: 1.5;}
    .vii-overlapping-cards__item-image-content {
        position:sticky; top:0; left:0;
        min-height:calc(var(--const) * var(--vii-100vh));
    }
    .vii-overlapping-cards__image-title-wrapper-inner {position:absolute; inset:0; overflow:visible;}
    .vii-overlapping-cards__button .vii-overlapping-cards__item-open-popup {display:none;}
    .vii-overlapping-cards__item-image-content__inner {justify-content:space-between;}
    .vii-overlapping-cards__popup {width:calc(100% - var(--width-content)); max-width:437px;}
    .vii-overlapping-cards__item-open-popup {width:100%; max-width:100%; padding:8px 44px 8px 16px; gap:16px;}
    .vii-overlapping-cards__item-open-popup span.icon {width:24px; right:16px; font-size:10px;}
    .vii-overlapping-cards__item-open-popup i.line {width:1px; height:28px;}
    .vii-overlapping-cards__item-heading br {display:none;}
    .vii-overlapping-cards__item-heading br + span {display:inline;}
    .vii-overlapping-cards__item-heading br + span:before {content:" ";}

    /* popup */
    .easy-popup:has(.vii-overlapping-cards__item-content-popup) .easy-popup-container {padding:0;}
    .easy-popup .vii-overlapping-cards__item-content-popup {
        opacity:1; pointer-events:auto; overflow-y:auto;
        height:calc(var(--vii-100vh) - var(--admin-bar-height) - 40px);
        border-radius:0;padding:0; position:relative;
        max-width:768px; margin:auto;
    }
    .vii-overlapping-cards__item-content-popup-number {
        padding-left:var(--vii-gap-side); padding-right:var(--vii-gap-side);
        min-height:56px;
    }
    .vii-overlapping-cards__item-content-popup-text {padding:84px var(--vii-gap-side) var(--vii-gap-side)}
}
@media only screen and (max-width:768px) {
    .vii-overlapping-cards {
        --spacing-top:32px;
        --button-height:64px;
    }
    .vii-overlapping-cards__item-image-content__inner {
        flex-direction:column;align-items:flex-start; justify-content:flex-end;
    }
    .vii-overlapping-cards__item-heading {width:100%; padding-right:0; margin-bottom:24px;}
    .vii-overlapping-cards__popup {width:100%; max-width:100%;}

    .easy-popup .vii-overlapping-cards__item-content-popup {
        height:calc(var(--vii-100vh) - var(--admin-bar-height));
    }


    /* show/hide image */
    .vii-overlapping-cards__item-image-bg:has(.background-mobile) .background-desktop {display:none;}
    .vii-overlapping-cards__item-image-bg .background-mobile {display:block;}
}