/* =========================================================
   BLOOM VERTICAL STEPS PROCESS
   Container: 1080px
   Normal CSS — no variables
========================================================= */

.vsp-section{
    padding:48px 0;
    overflow:hidden;
}

.vsp-section *,
.vsp-section *::before,
.vsp-section *::after{
    box-sizing:border-box;
}

.vsp-container{
    width:100%;
    max-width:1080px;
    margin:0 auto;
    padding:0;
}


/* =========================================================
   PROCESS LAYOUT
========================================================= */

.vsp-process-pairs{
    position:relative;
    width:100%;
    max-width:1080px;
    margin:0 auto;
    overflow:visible;
}

.vsp-process-spine{
    position:absolute;
    top:52px;
    bottom:61px;
    left:50%;
    z-index:0;
    width:0;
    border-left:2px dashed #667080;
    transform:translateX(-50%);
}

.vsp-step-pair{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:320px 200px 320px;
    column-gap:120px;
    align-items:start;
    min-height:280px;
    margin-bottom:34px;
    overflow:visible;
}

.vsp-step-pair:last-child{
    margin-bottom:0;
}

.vsp-card,
.vsp-card-placeholder{
    width:320px;
    height:280px;
    min-height:280px;
}

.vsp-card-left,
.vsp-card-placeholder-left{
    grid-column:1;
    grid-row:1;
}

.vsp-center-area{
    grid-column:2;
    grid-row:1;
}

.vsp-card-right,
.vsp-card-placeholder-right{
    grid-column:3;
    grid-row:1;
}

/* =========================================================
   CARDS
========================================================= */

.vsp-card{
    position:relative;
    z-index:3;
    padding:18px;
    background:#ffffff;
    border:1px solid #2f97ed;
    border-radius:16px;
    box-shadow:none;
    overflow:visible;
    isolation:isolate;
    transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.vsp-card:hover{
    border-color:#128ff0;
    background:linear-gradient(180deg,#ffffff 0%,#f8fcff 100%);
    box-shadow:0 14px 32px rgba(47,151,237,.15);
}

.vsp-card-inner{
    position:relative;
    z-index:5;
    display:flex;
    flex-direction:column;
    height:100%;
}

.vsp-card-head{
    display:flex;
    align-items:flex-start;
    gap:12px;
    min-height:48px;
    margin-bottom:10px;
}

.vsp-card-icon{
    position:relative;
    display:block;
    flex:0 0 48px;
    width:48px;
    height:48px;
    background:#2f97ed;
    border-radius:8px;
    overflow:hidden;
}

.vsp-card-icon img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.vsp-card-title{
    margin:0;
    padding-top:2px;
    color:#050812;
    font-size:18px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-0.018em;
    transition:color .3s ease;
    max-width: 186px;
}

.vsp-card:hover .vsp-card-title{
    color:#086fc7;
}

.vsp-card-content{
    display:flex;
    flex:1;
    flex-direction:column;
    min-height:0;
    margin:0;
    color:#050812;
    font-size:16px;
    line-height:1.4;
    font-weight:400;
}

.vsp-card-content p{
    margin:0;
}

.vsp-card-content .vsp-quick-note,
.vsp-card-content .quick-note,
.vsp-card-content > span:last-child,
.vsp-card-content p:last-child > span:last-child{
    display:block;
    width:100%;
    margin-top:auto;
    padding:6px 10px;
    color:#0b1728;
    background:#e7f3ff;
    border-radius:999px;
    font-size:15px;
    line-height:1.25;
    font-weight:400;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
}

.vsp-card-content .vsp-quick-note strong,
.vsp-card-content .quick-note strong,
.vsp-card-content > span:last-child strong,
.vsp-card-content p:last-child > span:last-child strong{
    font-weight:700;
}

/* =========================================================
   CARD PINS
========================================================= */

.vsp-card-pin{
    position:absolute;
    top:calc(50% - 4px);
    z-index:7;
    display:block;
    width:8px;
    height:8px;
    background:#2f97ed;
    border-radius:50%;
    transition:background .3s ease, box-shadow .3s ease;
}

.vsp-card-pin::after{
    content:"";
    position:absolute;
    inset:-9px;
    border:1px solid rgba(47,151,237,.48);
    border-radius:50%;
    opacity:0;
    transform:scale(.35);
}

.vsp-card-left .vsp-card-pin{
    right:-8px;
}

.vsp-card-right .vsp-card-pin{
    left:-8px;
}

.vsp-card:hover .vsp-card-pin{
    background:#128ff0;
    box-shadow:0 0 0 5px rgba(47,151,237,.15), 0 0 18px rgba(47,151,237,.45);
}

.vsp-card:hover .vsp-card-pin::after{
    animation:vspPinPulse 1.15s ease-out infinite;
}

/* =========================================================
   CENTER NODES
========================================================= */

.vsp-center-area{
    position:relative;
    z-index:4;
    width:200px;
    height:280px;
    min-height:280px;
    overflow:visible;
}

.vsp-node{
    position:absolute;
    left:50%;
    z-index:8;
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    color:#ffffff;
    background:#2f97ed;
    border-radius:50%;
    font-size:20px;
    line-height:1;
    font-weight:800;
    transform:translateX(-50%);
    transition:background .35s ease, box-shadow .35s ease;
}

.vsp-node-left{
    top:29px;
}

.vsp-node-right{
    top:196px;
}

.vsp-step-pair:has(.vsp-card-left:hover) .vsp-node-left,
.vsp-step-pair:has(.vsp-card-right:hover) .vsp-node-right{
    background:#128ff0;
    box-shadow:0 0 0 8px rgba(47,151,237,.16), 0 12px 26px rgba(47,151,237,.30);
}

/* =========================================================
   CONNECTORS
========================================================= */

.vsp-card-connector{
    position:absolute;
    z-index:2;
    display:block;
    pointer-events:none;
    overflow:visible;
}

.vsp-card-connector svg{
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}

.vsp-card-connector-left{
    top:51px;
    left:calc(100% + 6px);
    width:214px;
    height:88px;
}

.vsp-card-connector-right{
    top:139px;
    right:calc(100% + 4px);
    width:218px;
    height:80px;
}

.vsp-card-connector-base,
.vsp-card-connector-fill,
.vsp-card-connector-glow{
    fill:none;
    /*vector-effect:non-scaling-stroke;*/
    stroke-linecap:round;
    stroke-linejoin:round;
    shape-rendering:geometricPrecision;
}

/* Normal connector line */
.vsp-card-connector-base{
    stroke:#667080;
    stroke-width:1.4;
    opacity:1;
    transition:opacity .12s linear;
}

/* Blue line draws completely from the card pin to the step node */
.vsp-card-connector-fill{
    stroke:#2f97ed;
    stroke-width:3;
    stroke-dasharray:1 1;
    stroke-dashoffset:1;
    opacity:0;
    filter:drop-shadow(0 0 5px rgba(47,151,237,.45));
    transition:stroke-dashoffset .55s ease-out, opacity .01s linear;
    will-change:stroke-dashoffset;
}

.vsp-card-connector-glow{
    stroke:#bfe7ff;
    stroke-width:1.25;
    stroke-dasharray:.08 .92;
    stroke-dashoffset:1;
    opacity:0;
}

/* Hide the grey line while the blue line fills */
.vsp-card:hover .vsp-card-connector-base{
    opacity:0;
}

/* Complete connector fill on hover */
.vsp-card:hover .vsp-card-connector-fill{
    stroke-dashoffset:0;
    opacity:1;
}

.vsp-card:hover .vsp-card-connector-glow{
    animation:vspConnectorGlow .65s ease-out .05s both;
}

/* =========================================================
   BLOCK EDITOR
========================================================= */

.vsp-editor .vsp-step-editor{
    margin:24px 0;
    padding:20px;
    background:#ffffff;
    border:1px solid #d0d5dd;
    border-radius:10px;
}

/* =========================================================
   TABLET: 900px TO 1199px
========================================================= */

@media (min-width:900px) and (max-width:1199px){
    .vsp-section{
        padding:38px 0 48px;
    }

    .vsp-container{
        max-width:900px;
        padding:0;
    }

    .vsp-process-pairs{
        max-width:900px;
    }

    .vsp-step-pair{
        grid-template-columns:280px 190px 280px;
        column-gap:75px;
        min-height:280px;
        margin-bottom:32px;
    }

    .vsp-card,
    .vsp-card-placeholder{
        width:280px;
        height:280px;
        min-height:280px;
    }

    .vsp-card{
        padding:17px;
        border-radius:15px;
    }

    .vsp-card-head{
        gap:10px;
        min-height:42px;
        margin-bottom:10px;
    }

    .vsp-card-icon{
        flex-basis:42px;
        width:42px;
        height:42px;
    }

    .vsp-card-title{
        font-size:17px;
        line-height:1.2;
    }

    .vsp-card-content{
        font-size:16px;
        line-height:1.38;
    }

    .vsp-card-content .vsp-quick-note,
    .vsp-card-content .quick-note,
    .vsp-card-content > span:last-child,
    .vsp-card-content p:last-child > span:last-child{
        padding:6px 9px;
        font-size:15px;
        line-height:1.22;
    }

    .vsp-center-area{
        width:190px;
        height:280px;
        min-height:280px;
    }

    .vsp-node{
        width:40px;
        height:40px;
        font-size:17px;
    }

    .vsp-node-left{
        top:24px;
    }

    .vsp-node-right{
        top:194px;
    }

    .vsp-process-spine{
        top:44px;
        bottom:66px;
    }

    .vsp-card-connector-left{
        top:44px;
        left:calc(100% + 4px);
        width:168px;
        height:96px;
    }

    .vsp-card-connector-right{
        top:139px;
        right:calc(100% + 4px);
        width:168px;
        height:75px;
    }
}

/* =========================================================
   MOBILE + SMALL TABLET: 899px AND BELOW
========================================================= */

@media (max-width:899px){
    .vsp-section{
        padding:42px 0;
    }

    .vsp-container{
        max-width:100%;
        padding:0 16px;
    }

    .vsp-process-pairs{
        max-width:560px;
    }

    .vsp-process-spine,
    .vsp-center-area,
    .vsp-card-pin,
    .vsp-card-placeholder,
    .vsp-card-connector{
        display:none;
    }

    .vsp-step-pair{
        display:block;
        min-height:0;
        margin:0;
    }

    .vsp-card{
        width:100%;
        height:auto;
        min-height:0;
        margin:0 0 16px;
        padding:18px 18px 18px 66px;
        border-radius:14px;
    }

    .vsp-card::before{
        content:attr(data-step);
        position:absolute;
        top:18px;
        left:18px;
        display:flex;
        align-items:center;
        justify-content:center;
        width:34px;
        height:34px;
        color:#ffffff;
        background:#2f97ed;
        border-radius:50%;
        font-size:15px;
        line-height:1;
        font-weight:800;
    }

    .vsp-card-head{
        gap:12px;
        min-height:0;
        margin-bottom:12px;
    }

    .vsp-card-icon{
        flex-basis:38px;
        width:38px;
        height:38px;
    }

    .vsp-card-title{
        font-size:18px;
        line-height:1.25;
    }

    .vsp-card-content{
        font-size:16px;
        line-height:1.5;
    }

    .vsp-card-content .vsp-quick-note,
    .vsp-card-content .quick-note,
    .vsp-card-content > span:last-child,
    .vsp-card-content p:last-child > span:last-child{
        margin-top:14px;
        padding:7px 10px;
        font-size:15px;
        line-height:1.3;
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
    }
}

@media (max-width:420px){
    .vsp-card{
        padding:16px 16px 16px 58px;
    }

    .vsp-card::before{
        top:16px;
        left:14px;
        width:32px;
        height:32px;
        font-size:14px;
    }

    .vsp-card-title{
        font-size:17px;
    }

    .vsp-card-content,
    .vsp-card-content .vsp-quick-note,
    .vsp-card-content .quick-note,
    .vsp-card-content > span:last-child,
    .vsp-card-content p:last-child > span:last-child{
        font-size:16px;
    }
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes vspConnectorGlow{
    0%{
        opacity:0;
        stroke-dashoffset:1;
    }
    12%,75%{
        opacity:1;
    }
    100%{
        opacity:0;
        stroke-dashoffset:0;
    }
}

@keyframes vspPinPulse{
    0%{
        opacity:.65;
        transform:scale(.35);
    }
    100%{
        opacity:0;
        transform:scale(1.55);
    }
}

@media (prefers-reduced-motion:reduce){
    .vsp-card,
    .vsp-card-title,
    .vsp-card-pin,
    .vsp-card-pin::after,
    .vsp-node,
    .vsp-card-connector-base,
    .vsp-card-connector-fill,
    .vsp-card-connector-glow{
        transition:none !important;
        animation:none !important;
    }
}