/* ==========================================================================
   CRRA Step List Module
   Vertical timeline layout: numbered tile + connecting line + step text
   ========================================================================== */

.crra-step-list-module {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Track: position:relative so the ::before connecting line can be absolute */
.crra-step-list-module .crra-step-track {
    position: relative;
    max-width: 760px;
    width: 100%;
}

/* Vertical connecting line — centered in the 76px tile column (38px from left) */
.crra-step-list-module .crra-step-track::before {
    content: '';
    position: absolute;
    left: 38px;
    /* Start below the first tile (69px height), end above last tile */
    top: 72px;
    bottom: 72px;
    width: 1px;
    background: #D7D7D7;
    z-index: 0;
}

.crra-step-list-module--no-line .crra-step-track::before {
    display: none;
}

/* Each step row */
.crra-step-list-module .crra-step-item {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 40px;
}

.crra-step-list-module .crra-step-item:last-child {
    margin-bottom: 0;
}

/* Tile column — fixed width, sits above the vertical line */
.crra-step-list-module .crra-step-tile-col {
    flex: 0 0 76px;
    position: relative;
    z-index: 1;
}

/* Step number tile — white rectangle with lime border and glow */
.crra-step-list-module .crra-step-tile {
    width: 76px;
    height: 69px;
    background: #FFFFFF;
    border: 2px solid var(--crra-yellow);
    box-shadow: 0 0 12px 2px rgba(217, 226, 16, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 40px;
    line-height: 1;
    color: var(--crra-brown);
    box-sizing: border-box;
}

/* Text column — flexible, sits to the right of tile */
.crra-step-list-module .crra-step-text-col {
    flex: 1;
    padding-top: 8px;
}

/* Step heading — bold italic 25px */
.crra-step-list-module .crra-step-heading {
    font-family: var(--crra-h3-font);
    font-weight: 400;
    font-style: italic;
    font-size: var(--crra-h3-size);
    line-height: 1.33em;
    color: var(--crra-brown);
    margin: 0 0 12px 0;
    padding: 0;
}

/* Step body — regular 20px */
.crra-step-list-module .crra-step-body,
.crra-step-list-module .crra-step-body p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--crra-body-size);
    line-height: 1.33em;
    color: var(--crra-brown);
    margin: 0 0 12px 0;
    padding: 0;
}

.crra-step-list-module .crra-step-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .crra-step-list-module {
        padding: 0 25px;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .crra-step-list-module .crra-step-track::before {
        display: none;
    }

    .crra-step-list-module .crra-step-item {
        flex-direction: column;
        gap: 16px;
    }

    .crra-step-list-module .crra-step-tile-col {
        margin: auto !important;
    }
}