/**
 * SCT PROD — Process
 * ----------------------------------------
 * Timeline / process component.
 *
 * Markup:
 * .sct-process
 *   ├── .sct-process__step
 *   ├── .sct-process__step
 *   └── .sct-process__step.is-active
 *
 * Desktop : horizontal
 * Mobile  : vertical
 */


/* ==========================================================================
   COMPONENT TOKENS
   ========================================================================== */

.sct-process {
    --process-accent: #203d85;
    --process-line: #d9e0ec;
    --process-node-border: #9fafd0;
    --process-node-bg: #ffffff;

    --process-node-size: 46px;
    --process-line-size: 1px;

    --process-gap: clamp(48px, 5vw, 96px);
    --process-content-offset: clamp(78px, 5vw, 92px);

    position: relative;
}


/* ==========================================================================
   DESKTOP LAYOUT
   ========================================================================== */

.sct-process {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--process-gap) !important;

    overflow: visible;
}


/*
 * Divi normally controls column width/margins.
 * Inside this component, CSS Grid becomes the single source of truth.
 */
.sct-process > .sct-process__step {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;

    position: relative;

    padding-top: var(--process-content-offset);

    min-width: 0;
}


/* ==========================================================================
   PROCESS NODES
   ========================================================================== */

.sct-process__step::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: var(--process-node-size);
    height: var(--process-node-size);

    box-sizing: border-box;

    border:
        1.5px solid
        var(--process-node-border);

    border-radius: 50%;

    background: var(--process-node-bg);

    z-index: 2;
}


/* Active / final step */

.sct-process__step.is-active::before {
    border-color: var(--process-accent);
    background: var(--process-accent);
}


/* ==========================================================================
   CONNECTING LINE
   ========================================================================== */

/*
 * Each step draws the segment leading to the following step.
 *
 * This is intentionally attached to the columns rather than the row:
 * the connection remains mathematically aligned with the nodes even if the
 * component gap changes.
 */

.sct-process__step:not(:last-child)::after {
    content: "";

    position: absolute;

    top: calc(
        (var(--process-node-size) / 2)
        - (var(--process-line-size) / 2)
    );

    left: calc(var(--process-node-size) / 2);

    width: calc(
        100%
        + var(--process-gap)
    );

    height: var(--process-line-size);

    background: var(--process-line);

    z-index: 1;

    pointer-events: none;
}

/* ==========================================================================
   RESPONSIVE — TABLET & MOBILE
   ========================================================================== */

@media (max-width: 980px) {

    /*
     * On passe d'une timeline horizontale
     * à une timeline verticale.
     */
    .sct-process {
        --process-node-size: 40px;
        --process-content-offset: 0;

        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
    }


    /* ----------------------------------------------------------------------
       STEPS
       ---------------------------------------------------------------------- */

    .sct-process > .sct-process__step {
        width: 100% !important;

        padding-top: 0;
        padding-left: 72px;
        padding-bottom: clamp(48px, 8vw, 72px);

        position: relative;
    }


    /*
     * La dernière étape n'a pas besoin
     * d'espace supplémentaire sous elle.
     */
    .sct-process > .sct-process__step:last-child {
        padding-bottom: 0;
    }


    /* ----------------------------------------------------------------------
       NODES
       ---------------------------------------------------------------------- */

    .sct-process__step::before {
        top: 2px;
        left: 0;
    }


    /* ----------------------------------------------------------------------
       VERTICAL CONNECTOR
       ---------------------------------------------------------------------- */

    .sct-process__step:not(:last-child)::after {
        top: calc(var(--process-node-size) / 2);

        left: calc(
            (var(--process-node-size) / 2)
            - (var(--process-line-size) / 2)
        );

        width: var(--process-line-size);

        height: calc(
            100%
            - (var(--process-node-size) / 2)
        );

        background: var(--process-line);
    }

}