/***************************************
* Boxed process grid
****************************************/
.vii-boxed-process-grid {
    --total-items:var(--vii-count-items, 1);
    --step-offset:32px;
    --step-size:48px;
    --icon-size:64px;
    --item-shadow:var(--vii-box-shadow-3);
    --vii-spacing-heading:12px;
    --vii-spacing-paragraph:12px;

    padding:32px;
    border:1px solid var(--vii-color-light-gold);
}

/* grid items */
.vii-boxed-process-grid__items {
    --grid-col:5;
    --grid-gap-x:8px;
    --grid-gap-y:16px;
}

/* item */
.vii-boxed-process-grid__item {
    --vii-color-heading:var(--vii-color-text);

    padding:32px 24px;
    color:var(--vii-color-text);
    box-shadow:var(--item-shadow);
}
.vii-boxed-process-grid__item-content-wrapper {gap:24px;}
.vii-boxed-process-grid__item-number {
    top:calc(-1 * (var(--step-size) + var(--step-offset)));
    width:var(--step-size);
    box-shadow:inset 1px 1px 1px #fff, inset -1px 0 .6px rgba(0, 0, 0, 0.25);
}
.vii-boxed-process-grid__item-heading + .vii-boxed-process-grid__item-description {margin-top:8px;}
.vii-boxed-process-grid__item-image {width:var(--icon-size);height:var(--icon-size);}
.vii-boxed-process-grid__item-image:has( > [class*="icon"]) {font-size:var(--icon-size);color:var(--vii-color-yellow);}

/* line */
.vii-boxed-process-grid__item::before,
.vii-boxed-process-grid__item::after {
    content:"";
    display:block;
    position:absolute;
    background:var(--vii-color-linear-gold);
    z-index:-2;
    transition:var(--vii-transition);
}
.vii-boxed-process-grid.single-item .vii-boxed-process-grid__item::before,
.vii-boxed-process-grid.single-item .vii-boxed-process-grid__item::after {
    content:unset;
}


/***************************************
* Boxed process grid responsive
****************************************/
@media only screen and (min-width:1025px) {
    .vii-boxed-process-grid:not(.single-item) .vii-boxed-process-grid__items {
        padding-top:calc(var(--step-size) + var(--step-offset));
    }
    .vii-boxed-process-grid__item:first-child::before {
        height:2px;
        width:calc((var(--total-items, 1) - 1) * (100% + var(--grid-gap-x)));
        top:calc(-1 * ((var(--step-size) / 2) + var(--step-offset)));
        left:50%;
    }
    .vii-boxed-process-grid__item:not(:first-child)::before,
    .vii-boxed-process-grid__item::after {
        content:unset;
    }
}
@media only screen and (max-width:1024px) {
    .vii-boxed-process-grid__item {
        padding:32px var(--vii-gap-container);
    }
    .vii-boxed-process-grid {
        --step-offset:32px;
    }

    .vii-boxed-process-grid__items {
        --grid-col:1;
        --grid-gap-y:var(--vii-gap-container);

        padding-left:calc(var(--step-size) + var(--step-offset));
    }
    .vii-boxed-process-grid.single-item .vii-boxed-process-grid__items {padding-left:0;}
    .vii-boxed-process-grid__item-number {
        left:calc(-1 * (var(--step-size) + var(--step-offset)));
        top:50%;transform:translateY(-50%);
    }
    .vii-boxed-process-grid__item::before,
    .vii-boxed-process-grid__item::after {
        width:2px;
        height:calc((50% + var(--grid-gap-y)));
        left:calc(-1 * ((var(--step-size) / 2) + var(--step-offset)));
        transform:translateX(-50%);
    }
    .vii-boxed-process-grid__item::before {bottom:50%;}
    .vii-boxed-process-grid__item::after {top:50%;}
    .vii-boxed-process-grid__item:first-child::before,
    .vii-boxed-process-grid__item:last-child::after {content:unset;}
}
@media only screen and (max-width:768px) {
    .vii-boxed-process-grid {
        --step-size:40px;
        --icon-size:48px;
    }
    .vii-boxed-process-grid__item {padding:var(--vii-gap-container);}
}