/*!
 * B2 Process Steps — Elementor widget "Process Steps"
 * Figma: B2 STRUCTURAL → node 5383:1311
 *
 * A rule-separated table of steps. Columns are a grid rather than the Figma
 * space-between flex row so label, title and description stay aligned across
 * every row regardless of content length, at any container width.
 */

.b2ps {
    --b2ps-row-min-h:   200px;
    --b2ps-label-w:     157px;
    --b2ps-desc-w:      374px;
    --b2ps-title-max:   480px;
    --b2ps-column-gap:  32px;
    --b2ps-align:       center;

    --b2ps-rule-width:  1px;
    --b2ps-rule-color:  #96a5b2;

    --b2ps-label-color: var(--navy-n300, #002343);
    --b2ps-title-color: var(--navy-n300, #002343);
    --b2ps-desc-color:  var(--navy-n300, #002343);

    width: 100%;
}

.b2ps__row {
    display:               grid;
    grid-template-columns: var(--b2ps-label-w) minmax(0, 1fr) var(--b2ps-desc-w);
    align-items:           var(--b2ps-align);
    column-gap:            var(--b2ps-column-gap);
    row-gap:               var(--cp-s, 16px);
    min-height:            var(--b2ps-row-min-h);
    padding:               24px 30px;
    border-top:            var(--b2ps-rule-width) solid var(--b2ps-rule-color);
}

.b2ps--closed .b2ps__row:last-child {
    border-bottom: var(--b2ps-rule-width) solid var(--b2ps-rule-color);
}

.b2ps__label {
    color:          var(--b2ps-label-color);
    font-family:    var(--bodyFont);
    font-size:      var(--body-body-md, 1.125rem);
    font-weight:    400;
    line-height:    var(--line-body-md, 1.5);
    letter-spacing: var(--tracking-body, 0.02em);
}

.b2ps .b2ps__title {
    margin:         0;
    max-width:      var(--b2ps-title-max);
    color:          var(--b2ps-title-color);
    font-family:    var(--titleFont);
    font-size:      var(--heading-h3, 2rem);
    font-weight:    400;
    line-height:    var(--line-h3, 1.3);
    letter-spacing: var(--tracking-heading, 0.02em);
}

.b2ps__desc {
    color:          var(--b2ps-desc-color);
    font-family:    var(--bodyFont);
    font-size:      var(--body-body-sm, 1.125rem);
    font-weight:    400;
    line-height:    var(--line-body-sm, 1.4);
    letter-spacing: var(--tracking-body, 0.02em);
}

.b2ps__desc p { margin: 0 0 0.75em; }
.b2ps__desc p:last-child { margin-bottom: 0; }


/* Responsive — the fixed description column is the first thing to go
--------------------------------------------- */
@media all and (max-width: 1200px) {
    .b2ps__row {
        grid-template-columns: var(--b2ps-label-w) minmax(0, 1fr);
        min-height:            0;
    }
    .b2ps__desc {
        grid-column: 2;
    }
    .b2ps .b2ps__title {
        max-width: none;
    }
}

@media all and (max-width: 767px) {
    .b2ps__row {
        grid-template-columns: 1fr;
        row-gap:               var(--cp-xs, 12px);
    }
    .b2ps__desc {
        grid-column: 1;
    }
    .b2ps .b2ps__title {
        font-size: var(--heading-h4, 1.5rem);
    }
}