/********************************************
* Sticky Link Grid
********************************************/
/* general */
.vii-sticky-link-grid {gap:var(--vii-spacing-32);}
.vii-sticky-link-grid__item {border:1px solid var(--vii-color-light-gray-5);padding:24px;}

/* sticky */
.vii-sticky-link-grid__item {
    --index:0;
    --offset: 20px;
    --title: 80px;
    top:calc(var(--admin-bar-height) + var(--offset) + var(--index) * var(--title));
}
body.scroll-up .vii-sticky-link-grid__item {
    --offset: calc(20px + var(--vii-header-main-height));
}

/* column */
.vii-sticky-link-grid__item-col {width:33.33%}
.vii-sticky-link-grid__item-col.left,
.vii-sticky-link-grid__item-col.middle {padding-right:var(--vii-gap-container);}

/* item > left */
.vii-sticky-link-grid__item-title {margin-bottom:36px;}
.vii-sticky-link-grid__item-content {max-width:374px;}

/* item > middle > link */
.vii-sticky-link-grid__item-link {border-bottom:1px solid var(--vii-color-light-gray-7);}
.vii-sticky-link-grid__item-link:before {
    background:var(--vii-color-blue); z-index:1;
    transform:translateY(100%); transition:transform 0.5s ease;
}
.vii-sticky-link-grid__item-link a {min-height:54px; padding:5px 48px 5px 0; transition-duration:0.5s}
.vii-sticky-link-grid__item-link a:after {
    font-family:var(--vii-font-icomoon), fantasy; content:"\e92f";
    width:26px; aspect-ratio:1; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--vii-color-dark); color:var(--vii-color-white);
    font-size:10px; line-height:1; text-indent:0.2em;
    position:absolute; top:50%; right:0; transform:translateY(-50%);
    transition:var(--vii-transition-slow);
}

/* item > middle > link hover */
.vii-sticky-link-grid__item-link:hover:before {transform:translateY(0);}
.vii-sticky-link-grid__item-link a:hover {color:var(--vii-color-white); padding-left:16px; padding-right:32px;}
.vii-sticky-link-grid__item-link a:hover:after {
    transform:translate(-16px, -50%);
    background:var(--vii-color-white); color:var(--vii-color-blue);
}

/* item > right */
.vii-sticky-link-grid__item-image {max-width:407px;}

/* item without link */
.vii-sticky-link-grid__item.no-link-grid .vii-sticky-link-grid__item-col.left {
    width:66.67%; max-width:431px;
}
.vii-sticky-link-grid__item.no-link-grid .vii-sticky-link-grid__item-content {max-width:100%;}

/* remove overflow hidden of full width VC Row to sticky */
.vc_row[data-vc-full-width]:has(.vii-sticky-link-grid) {overflow:visible;}


/********************************************
* Sticky Link Grid - Responsive
********************************************/
@media only screen and (max-width:1180px) {
    .vii-sticky-link-grid {gap:var(--vii-gap-container);}
    .vii-sticky-link-grid__item {padding:var(--vii-gap-container);}
    .vii-sticky-link-grid__item-title {margin-bottom:var(--vii-spacing-24);}
}
@media only screen and (max-width:1023px) {
    .vii-sticky-link-grid__item:not(.no-link-grid) {align-items:flex-start;}

    /* column */
    .vii-sticky-link-grid__item-col.left {width:50%;}
    .vii-sticky-link-grid__item-col.middle {width:100%; padding:28px 0 0;}
    .vii-sticky-link-grid__item-col.right {width:50%;}

    /* title */
    .vii-sticky-link-grid__item-content {max-width:100%;}
}
@media only screen and (max-width:1023px) and (min-width:768px) {
    .vii-sticky-link-grid__item-col.middle {order:999;}
    .vii-sticky-link-grid__item:not(.no-link-grid) .vii-sticky-link-grid__item-image {
        height:auto; aspect-ratio:407/332; max-width:100%;
    }

    /* No link grid */
    .vii-sticky-link-grid__item.no-link-grid .vii-sticky-link-grid__item-col.left {width:50%;}
}
@media only screen and (max-width:767px) {
    .vii-sticky-link-grid__item {gap:32px;position: relative; top:0; height:auto !important;}
    .vii-sticky-link-grid__item-col.left {width:100%; padding-right:0;}
    .vii-sticky-link-grid__item-col.middle {padding:0; margin-top:-20px;}
    .vii-sticky-link-grid__item-col.right {width:100%;}

    .vii-sticky-link-grid__item-title {margin-bottom:12px;}
    .vii-sticky-link-grid__item-image {max-width:100%; height:auto; aspect-ratio:16/9;}

    .vii-sticky-link-grid__item.no-link-grid .vii-sticky-link-grid__item-col.left {width:100%; max-width:100%;}
}