/**
 * Process Steps block (block type `process_steps`).
 *
 * Numbered timeline: eyebrow + two-tone heading, then N steps whose numbered
 * circles are joined by a connecting line.
 *
 * The connector is one rule per step spanning that step's own grid cell, with
 * the circle's opaque background covering the middle of it. The first step
 * starts its rule at the circle centre and the last one ends there, so the line
 * never overhangs the row — and it stays correct for any number of steps
 * without an element per gap.
 */

.ps-block {
    --ps-accent: var(--phi-green);
    --ps-circle: 64px;
    --ps-line: var(--phi-gray-200);
    --ps-number: #c7cacd;
}

.ps-block.ps-accent-orange {
    --ps-accent: var(--phi-orange);
}

/* Heading uses the shared .section-head component (css/section-head.css). */

/* --- Steps -------------------------------------------------------------- */

.ps-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ps-cols-3 .ps-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-cols-4 .ps-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ps-cols-5 .ps-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.ps-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
    /* The <ol> marker would otherwise sit beside the circle. */
    list-style: none;
}

/* Connector across this step's cell, on the circle's centre line. Absolutely
   positioned children resolve against the padding box, so 0 is the cell edge
   and 50% is the circle centre — which is what makes neighbouring rules meet. */
.ps-step::before {
    content: "";
    position: absolute;
    top: calc(var(--ps-circle) / 2);
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ps-line);
}

.ps-step:first-child::before { left: 50%; }
.ps-step:last-child::before { right: 50%; }

.ps-step-marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ps-circle);
    height: var(--ps-circle);
    margin-bottom: 1.5rem;
    border: 1px solid var(--ps-line);
    border-radius: 50%;
    /* Opaque on purpose: it hides the connector running behind it. */
    background: #fff;
    z-index: 1;
}

.ps-step-number {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ps-number);
}

.ps-step-text {
    text-align: center;
}

.ps-step-title {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--phi-dark);
}

.ps-step-body,
.ps-step-body p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--phi-gray-600);
}

/* --- Tablet: two per row ------------------------------------------------ */

@media (max-width: 992px) {
    .ps-block .ps-steps,
    .ps-cols-3 .ps-steps,
    .ps-cols-4 .ps-steps,
    .ps-cols-5 .ps-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2.5rem;
    }

    /* Two per row means every other step ends a row, so a cell-wide rule would
       dangle off the right edge. Simpler to drop the connector entirely. */
    .ps-step::before { display: none; }
}

/* --- Phone: vertical timeline ------------------------------------------- */

@media (max-width: 650px) {
    .ps-block { --ps-circle: 48px; }

    .ps-block .ps-steps,
    .ps-cols-3 .ps-steps,
    .ps-cols-4 .ps-steps,
    .ps-cols-5 .ps-steps {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    /* Marker to the left, copy to the right, joined by a vertical run — the
       horizontal layout does not survive a phone width. */
    .ps-step {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        padding: 0 0 1.75rem;
    }
    .ps-step:last-child { padding-bottom: 0; }

    .ps-step-marker {
        flex: 0 0 var(--ps-circle);
        margin-bottom: 0;
    }

    /* Vertical connector from under this circle to the next one. */
    .ps-step::after {
        content: "";
        position: absolute;
        top: var(--ps-circle);
        left: calc(var(--ps-circle) / 2);
        bottom: 0;
        width: 1px;
        background: var(--ps-line);
    }
    .ps-step:last-child::after { display: none; }

    .ps-step-text { text-align: left; padding-top: 0.35rem; }
    .ps-step-number { font-size: 1.1rem; }
}