/*********************************************
 * Destination Slider
**********************************************/
.vii-destination-slider {
    --item-width:clamp(200px,37.78vw,580px);
    --item-gap:6px;
    --width-content:calc(var(--item-width) * .7);
    --height-content:200px;
}

/* slider */
.vii-destination-slider__item {width:var(--item-width); padding-left:var(--item-gap);}
.vii-destination-slider__item:last-child {
    width:calc(var(--item-width) + var(--item-gap)); padding-right:var(--item-gap);
}

/* item */
.vii-destination-slider__item-inner {
    height:calc((var(--item-width) - var(--item-gap)) * 482 / 541);
}
.vii-destination-slider__item-info {width:var(--width-content);}
.vii-destination-slider__item-info-inner {
    padding:12px 24px 20px; border-top-right-radius:var(--vii-radius-4);
    transform:translateY(calc(var(--height-content) + 5px));
    transition:transform 0.6s ease-in-out, opacity .3s ease;
}
.vii-destination-slider__item-title {--vii-spacing-heading:var(--vii-spacing-8);}
.vii-destination-slider__item-content {padding-top:10px; opacity:0;}
.vii-destination-slider__item-description {
    overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;
}

/* item > hover */
.vii-destination-slider__item-inner:hover .vii-destination-slider__item-thumbnail {transform:scale(1.05);}
.vii-destination-slider__item-inner:hover .vii-destination-slider__item-info-inner {transform:translateY(0);}
.vii-destination-slider__item-inner:hover .vii-destination-slider__item-content {padding-top:0; opacity:1;}

/* item > decoration */
.vii-destination-slider__item-info:before {
    content:""; display:block; pointer-events:none; opacity:.4;
    width:clamp(200px, 64%, 240px); aspect-ratio:241/77;
    background-image:var(--vii-pattern-white); background-repeat:no-repeat;
    background-size:256px auto; background-position:left top;
    position:absolute; bottom:0; right:0; z-index:1;
}

/* progress bar */
.vii-destination-slider__progress-bar {padding-left:var(--vii-gap-side); padding-right:var(--vii-gap-side);}
.vii-destination-slider__progress-bar-fill {
    width:calc(100% - 48px - 78px); height:2px;
    background:#e4e4e4; position:relative;
}
.vii-destination-slider__progress-bar-fill i {
    position:absolute; left:0; top:0; bottom:0; width:50.7%;
    background:var(--vii-color-light-blue);
}
.vii-destination-slider__arrow {padding-left:48px;}
.vii-bg-gray .vii-destination-slider__progress-bar-fill,
.bg-light-gray .vii-destination-slider__progress-bar-fill {background:rgba(34, 34, 34, .05);}

/* hide progress bar if no slider */
.vii-destination-slider:has(.is-cannot-slide) .vii-destination-slider__progress-bar {display:none;}

/* animation */
.vii-destination-slider.original-screen .vii-destination-slider__item-info {opacity:0;}

/* avoid cls slider */
.vii-destination-slider__slider {min-height:calc((var(--item-width) - var(--item-gap)) * 482 / 541);}

/* layout 2 items */
@media only screen and (min-width:921px) {
    .vii-destination-slider.has-2-items {
        padding-left:var(--vii-gap-side); padding-right:var(--vii-gap-side);
    }
    .vii-destination-slider.has-2-items .vii-destination-slider__slider {margin:0 calc(-1 * var(--item-gap) / 2)}
    .vii-destination-slider.has-2-items .vii-destination-slider__item {padding:0 calc(var(--item-gap) / 2);}
    .vii-destination-slider.has-2-items .vii-destination-slider__item:last-child {width:var(--item-width);}
}


/*********************************************
 * Destination Slider Responsive
**********************************************/
@media only screen and (max-width:1180px) {
    .vii-destination-slider {
        --item-width:45vw;
        --width-content:calc(100% - 20px);
    }
}
@media only screen and (max-width:920px) {
    .vii-destination-slider {--item-width:60vw;}
    .vii-destination-slider__item-info-inner {padding-left:var(--vii-gap-container); padding-right:var(--vii-gap-container);}

    /* hide progress bar */
    .vii-destination-slider__progress-bar {display:none;}
}
@media only screen and (max-width:767px) {
    .vii-destination-slider {--item-width:75vw;}

    /* Layout has 1 items */
    .vii-destination-slider.has-1-item {--item-width:calc(var(--vii-container) + var(--item-gap));}
}
@media only screen and (max-width:480px) {
    .vii-destination-slider {--item-width:var(--vii-container);}
    .vii-destination-slider__item-info-inner {padding:12px var(--vii-gap-container); transform:translateY(0);}
    .vii-destination-slider__item-title {--vii-spacing-heading:0;}
    .vii-destination-slider__item-number {margin-bottom:0;}
    .vii-destination-slider__item-content {display:none;}
}