/*********************************************
 * Overlapping Cards
*********************************************/
.vii-overlapping-cards {
    --index:0;
    --size-title:225px;
    --content-w:clamp(350px, 35%, 545px);

    gap:var(--vii-spacing-80);
}

/* background item */
.vii-overlapping-cards__item.light-pink .vii-overlapping-cards__item-title:before {color:var(--vii-color-light-pink-1)}
.vii-overlapping-cards__item.pink .vii-overlapping-cards__item-title:before {color:var(--vii-color-pink)}

/* title */
.vii-overlapping-cards__item-title {
    width:var(--size-title); min-height:calc(var(--size-title) * 79 / 225);
    padding:20px 40px 5px 12px; transform:translateX(calc(var(--size-title) * (var(--index) - 1)));
}
.vii-overlapping-cards__item-title:before {
    font-family:var(--vii-font-icomoon), fantasy; content:"\e913";
    line-height:calc(var(--size-title) * 79 / 225); font-size:var(--size-title); font-weight:400;
    position:absolute; top:10px; left:0;
}

/* item */
.vii-overlapping-cards__item {top:calc(var(--admin-bar-height) + 10px);}
.vii-overlapping-cards__item-inner {min-height:clamp(350px, calc(0.4547 * var(--vii-container)), 800px);}

/* content */
.vii-overlapping-cards__item-content {width:var(--content-w); padding:32px 0 32px var(--vii-gap-container);}
.vii-overlapping-cards__item-content-inner {max-width:343px;}

/* background */
.vii-overlapping-cards__item-image {width:calc(100% - var(--content-w));}

/* mask */
.vii-overlapping-cards__item-image-bg {
    --mask-w:90%;
    bottom:-1px; right:-1px;
}
.image-mask-half-oval .vii-overlapping-cards__item-image-bg.vii-mask {
    --mask-ratio:785/558;
    --mask-url:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3ODUiIGhlaWdodD0iNTU4IiB2aWV3Qm94PSIwIDAgNzg1IDU1OCI+PGVsbGlwc2UgY3g9IjQzNS43MiIgY3k9IjMyNC4xNjYiIHJ4PSI0NDUuMzQxIiByeT0iMzEwLjYwNyIgdHJhbnNmb3JtPSJyb3RhdGUoLTE2Ljg0NiA0MzUuNzIgMzI0LjE2NikiLz48L3N2Zz4=);
}
.image-mask-dip .vii-overlapping-cards__item-image-bg.vii-mask {
    --mask-ratio:780/546;
    --mask-url:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NzIiIGhlaWdodD0iNTQ3IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgNzcyIDU0NyI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTU0Mi42MzQgMzcuNTEzYzg3LjUzNS01Ny41OCAyMzYuMzY5LTEyLjcwNiAyMzguMDM1IDB2NTA5LjQySDEzMi43MjVjLTEwMy4wNTYtNDEuOTk5LTEzNi41NTYtMTczLjUtNzQuODYtMjMzLjIxMi0zMy43My0xNy43MDYtOTQuMTUtMTExLjI1NC0yOC42OTYtMjE0LjI4OCA1Mi4wOTEtODIgMTY4LjQ2NC02NC42MjcgMjI1LjcyMy0zMy43OTkgNzQuNDU3LTg0Ljk4NyAyMDIuNzc3LTc5LjcgMjg3Ljc0Mi0yOC4xMiIvPjwvc3ZnPg==);
}

/* enable sticky for VC Row full width */
.vc_row[data-vc-full-width]:has(.vii-overlapping-cards) {overflow:visible}


/*********************************************
 * Overlapping Cards - Responsive
*********************************************/
@media only screen and (max-width:1024px) {
    .vii-overlapping-cards {--size-title:180px;}
    .vii-overlapping-cards__item-title {font-size:16px; padding:14px 32px 5px 12px;}
}
@media only screen and (max-width:768px) {
    .vii-overlapping-cards {--size-title:50px;}
    .vii-overlapping-cards__item-inner {
        flex-direction:column; justify-content:flex-end;
        min-height:calc(100% - var(--size-title))
    }

    /* title */
    .vii-overlapping-cards__item-title {
        width:100%; min-height:var(--size-title); padding:5px var(--vii-gap-container) 10px;
        display:flex; justify-content:flex-start;
        transform:translateX(0);
    }

    /* background */
    .vii-overlapping-cards__item {
        border-radius:var(--vii-radius-12);
        box-shadow:0 0 10px 5px rgba(0, 0, 0, .025);
    }
    .vii-overlapping-cards__item.pink {background:var(--vii-color-pink);}
    .vii-overlapping-cards__item.light-pink {background:var(--vii-color-light-pink-1);}

    /* content */
    .vii-overlapping-cards__item-content {width:100%; padding:12px var(--vii-gap-container) 0; margin-bottom:12px;}
    .vii-overlapping-cards__item-content-inner {max-width:100%;}

    /* image */
    .vii-overlapping-cards__item-image {width:100%; padding-left:var(--vii-gap-container);}
    .vii-overlapping-cards__item-image-bg {
        --mask-w:clamp(300px, 550px, 100%);
        position:static; margin-left:auto;
    }

    /* sticky */
    .vii-overlapping-cards__item {top:calc(20px + var(--size-title) * (var(--index) - 1));}

    /* special layout */
    .vii-overlapping-cards__item-inner:not(:has(.vii-overlapping-cards__item-image-bg)) .vii-overlapping-cards__item-content-inner {
        max-width:100%;
    }
    .vii-overlapping-cards__item-inner:not(:has(.vii-overlapping-cards__item-image-bg)) {
        justify-content:center;
    }
}
@media only screen and (max-width:480px) {
    .vii-overlapping-cards__item-content {margin-bottom:24px;}
}