/******************************************
* Tabbed Showcase
******************************************/
/* general */
.vii-tabbed-showcase {
    --count:5;
    --number-item:clamp(6, var(--count), 8);
}

/* heading */
.vii-tabbed-showcase__heading {gap:var(--vii-gap-container);}
.vii-tabbed-showcase__heading-title {max-width:840px;}
.vii-tabbed-showcase.no-title .vii-tabbed-showcase__heading {justify-content:flex-end}

/* slider > item > default */
.vii-tabbed-showcase__item.style-default {gap:24px;}
.vii-tabbed-showcase__item.style-default .vii-tabbed-showcase__item-col {width:calc(50% - 12px);}
.vii-tabbed-showcase__item.style-default .vii-tabbed-showcase__item-image {aspect-ratio:660/442;}
@media only screen and (min-width:768px) {
    /* title */
    .vii-tabbed-showcase.layout-default .vii-tabbed-showcase__titles {margin-top:var(--vii-spacing-40)}

    /* avoid CLS */
    .vii-tabbed-showcase.layout-default .vii-tabbed-showcase__items {
        min-height:calc((var(--vii-container) / 2 - 12px) * 442 / 660);
    }
}

/* slider > item > content overlay */
.vii-tabbed-showcase__item.style-content-overlay {display:flex;}
@media only screen and (min-width:768px) {
    .vii-tabbed-showcase__item.style-content-overlay {
        min-height:clamp(300px, calc(var(--vii-container) * 542 / 1344), 542px);
        align-items:flex-end; padding:var(--vii-spacing-48);
    }
    .vii-tabbed-showcase__item.style-content-overlay .vii-tabbed-showcase__item-image {position:absolute; inset:0;}
    .vii-tabbed-showcase__item.style-content-overlay .vii-tabbed-showcase__item-content {
        position:relative; z-index:2;
        max-width:532px; width:100%; background:#fff;
        padding:24px; border-radius:8px;
    }
    .vii-tabbed-showcase__item.style-content-overlay .vii-tabbed-showcase__item-title {display:none;}
    .vii-tabbed-showcase__item.style-content-overlay .vii-tabbed-showcase__item-description {
        font-size:var(--vii-size-body-large); line-height:1.4;
    }
    .vii-tabbed-showcase__item.style-content-overlay .vii-tabbed-showcase__item-button {
        margin-top:24px;
        box-shadow:-1px 1px 4px rgba(0, 0, 0, .26), -5px 4px 6px rgba(0, 0, 0, .23),
        -12px 9px 9px rgba(0, 0, 0, .13), -21px 16px 10px rgba(0, 0, 0, .04);
    }

    /* slider > CLS */
    .vii-tabbed-showcase.layout-content-overlay .vii-tabbed-showcase__items {
        min-height:clamp(300px, calc(var(--vii-container) * 542 / 1344), 542px);
    }

    /* button */
    .vii-tabbed-showcase__button-mobile {display:none;}

    /* animation */
    .vii-tabbed-showcase__items.is-fade .vii-tabbed-showcase__item.style-content-overlay {
        opacity:1 !important;
        border-radius:var(--vii-radius-8); overflow:hidden;
    }
    .vii-tabbed-showcase__item.style-content-overlay .vii-tabbed-showcase__item-content {
        opacity:0; transition:opacity .3s ease;
    }
    .vii-tabbed-showcase__item.style-content-overlay .vii-tabbed-showcase__item-image {
        transition:transform 0.6s ease;
    }
    .vii-tabbed-showcase__item.style-content-overlay.item-prev .vii-tabbed-showcase__item-image {
        transform:translateY(100%);
    }
    .vii-tabbed-showcase__item.style-content-overlay.item-next .vii-tabbed-showcase__item-image {
        transform:translateY(-100%);
    }
    .vii-tabbed-showcase__item.style-content-overlay.is-selected .vii-tabbed-showcase__item-content {opacity:1;}
}

/* title */
.vii-tabbed-showcase__titles-inner {
    /* hide scrollbar */
    -ms-overflow-style:none; /* IE and Edge */
    scrollbar-width:none; /* Firefox */
}
.vii-tabbed-showcase__titles-inner:before {
    content:"";
    width:100%; height:1px; background:#c8c8c8;
    position:absolute; top:2px; left:0;
}
.vii-tabbed-showcase__title {
    width:calc(100% / var(--number-item)); min-width:190px;
    padding-right:20px; scroll-snap-align:center; cursor:pointer;
}
.vii-tabbed-showcase__title:before {
    content:"";
    width:calc(100% - 20px); height:2px; background:var(--vii-color-blue);
    position:absolute; left:0; top:0; opacity:0;
    transition:opacity 0.3s ease;
}
.vii-tabbed-showcase__title:last-child:before {width:100%;}
.vii-tabbed-showcase__title button {background:rgba(0, 0, 0, 0);}

/* title hover/active */
.vii-tabbed-showcase__title:hover, .vii-tabbed-showcase__title.active {
    --vii-color-heading:var(--vii-color-blue);
    color:var(--vii-color-blue);
}
.vii-tabbed-showcase__title.active:before {opacity:1;}

/* arrow */
.vii-tabbed-showcase__title-arrow {
    width:30px; background:rgba(0, 0, 0, 0); color:var(--vii-color-blue); font-size:16px;
    top:31px; transform:translateY(-50%); z-index:2; opacity:0;
}
.vii-tabbed-showcase__title-arrow.prev {left:-40px;}
.vii-tabbed-showcase__title-arrow.next {right:-40px;}
.vii-tabbed-showcase__title-arrow:not(.disabled):hover,
.vii-tabbed-showcase__title-arrow:not(.disabled):focus {
    background:var(--vii-color-primary); color:var(--vii-color-on-primary);
}
.vii-tabbed-showcase__title-arrow.disabled i {opacity:0.3; pointer-events:none;}
.vii-tabbed-showcase:hover .vii-tabbed-showcase__title-arrow {opacity:1;}

.vii-tabbed-showcase__titles .flickity-button {
    --flkt-btn-size:30px;
    --flkt-icon-size:16px;
    --flkt-position:-40px;
    --flkt-border-color:rgba(0, 0, 0, 0);
    z-index:2; top:31px;
}
.vii-tabbed-showcase__titles:not(:hover) .flickity-button {opacity:0; pointer-events:none;}
@media only screen and (min-width:1181px) {
    .vii-tabbed-showcase__titles:before, .vii-tabbed-showcase__titles:after {
        content:"";
        position:absolute; top:0;
        width:var(--vii-gap-side); height:100%;
    }
    .vii-tabbed-showcase__titles:before {left:100%;}
    .vii-tabbed-showcase__titles:after {right:100%;}
}

/* Layout more item */
@media only screen and (min-width:1281px) {
    .vii-tabbed-showcase.more-items .vii-tabbed-showcase__title {width:auto; min-width:auto; padding:0 24px;}
    .vii-tabbed-showcase.more-items .vii-tabbed-showcase__title button {min-width:82px;}
    .vii-tabbed-showcase.more-items .vii-tabbed-showcase__title:first-child {padding-left:0}
    .vii-tabbed-showcase.more-items .vii-tabbed-showcase__title:not(:first-child):before {
        width:calc(100% - 48px); left:24px;
    }
    .vii-tabbed-showcase.more-items .vii-tabbed-showcase__title button {--vii-size-h6:var(--vii-size-body-large);}

    .vii-tabbed-showcase.has-arrow .vii-tabbed-showcase__title button {min-width:125px;}
}

/* adjust vc row color */
.vc_row.vii-bg-light-gray:has(.vii-tabbed-showcase) {background:var(--vii-color-light-gray-2)}


/******************************************
* Tabbed Showcase - Responsive
******************************************/
@media only screen and (max-width:1180px) {
    /* Item > content overlay */
    .vii-tabbed-showcase__item.style-content-overlay {padding:var(--vii-gap-container)}

    /* title */
    .vii-tabbed-showcase__titles {margin-left:calc(-1 * var(--vii-gap-side)); margin-right:calc(-1 * var(--vii-gap-side))}
    .vii-tabbed-showcase__title:first-child {padding-left:var(--vii-gap-side)}
    .vii-tabbed-showcase__title:first-child:before {
        width:calc(100% - 40px); left:var(--vii-gap-side);
    }
    .vii-tabbed-showcase__title button {font-size:var(--vii-size-body-large) !important;}

    /* arrow */
    .vii-tabbed-showcase__title-arrow {display:none;}
}
@media only screen and (max-width:767px) {
    .vii-tabbed-showcase {display:flex; flex-direction:column}
    /* heading */
    .vii-tabbed-showcase__heading {flex-direction:column; align-items:flex-start; order:1;}
    .vii-tabbed-showcase__heading-button {display:none;}

    /* item */
    .vii-tabbed-showcase__item {flex-direction:column-reverse; gap:24px !important;}
    .vii-tabbed-showcase__item-button {margin-top:16px;}

    /* style item default */
    .vii-tabbed-showcase__item.style-default .vii-tabbed-showcase__item-col {width:100%;}

    /* item overlay content */
    .vii-tabbed-showcase__item.style-content-overlay {padding:0;}
    .vii-tabbed-showcase__item.style-content-overlay .vii-tabbed-showcase__item-image {aspect-ratio:660/442;}

    /* titles */
    .vii-tabbed-showcase__titles {order:2; margin-bottom:var(--vii-spacing-32); margin-top:0;}

    /* button */
    .vii-tabbed-showcase__button-mobile {order:4; text-align:center;}

    /* avoid cls */
    .vii-tabbed-showcase__items {
        --width-slider:clamp(100px, 520px, var(--vii-container));
        min-height:calc(var(--width-slider) * 442 / 660 + 150px); order:3;
    }
}