/* =========================================================
   PROVIDENCE NUMBERED STEPS
   Desktop: horizontal timeline
   Tablet / Mobile: vertical timeline
   ========================================================= */

.providence-numbered-steps {
    --pns-count: 3;
    --pns-section-gap: 40px;
    --pns-item-gap: 28px;
    --pns-content-gap: 28px;
    --pns-circle-size: 52px;
    --pns-circle-bg: #D99A22;
    --pns-circle-color: #FFFFFF;
    --pns-line-color: #D99A22;
    --pns-line-width: 2px;
    --pns-title-gap: 16px;
    --pns-desktop-align: center;
    --pns-mobile-align: left;

    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.providence-numbered-steps,
.providence-numbered-steps * {
    box-sizing: border-box;
}

.providence-numbered-steps__eyebrow {
    width: 100%;
    margin: 0 0 var(--pns-section-gap);
    color: #B37836;
}

.providence-numbered-steps__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--pns-count), minmax(0, 1fr));
    gap: var(--pns-item-gap);
    width: 100%;
    min-width: 0;
}

/* One continuous horizontal line, behind every marker. */
.providence-numbered-steps__list::before {
    content: "";
    position: absolute;
    top: calc(var(--pns-circle-size) / 2);
    left: 0;
    right: 0;
    height: var(--pns-line-width);
    background: var(--pns-line-color);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
}

.providence-numbered-steps__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: var(--pns-desktop-align);
}

.providence-numbered-steps__marker {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pns-circle-size);
    height: var(--pns-circle-size);
    flex: 0 0 var(--pns-circle-size);
    margin: 0 0 var(--pns-content-gap);
    border-radius: 50%;
    background: var(--pns-circle-bg);
    color: var(--pns-circle-color);
}

/*
 * White buffer masks the timeline behind the marker.
 * Use an outer box-shadow instead of a negative-z pseudo-element.
 * A negative-z child can paint over the marker background inside its
 * stacking context, leaving the white number visible on white.
 */
.providence-numbered-steps__marker {
    box-shadow: 0 0 0 8px var(--pns-marker-mask, #FFFFFF);
}

.providence-numbered-steps__number {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    line-height: 1;
}

.providence-numbered-steps__content {
    width: 100%;
    min-width: 0;
    margin-inline: auto;
}

.providence-numbered-steps__title {
    margin: 0 0 var(--pns-title-gap);
    padding: 0;
    color: #B37836;
}

.providence-numbered-steps__body,
.providence-numbered-steps__body p,
.providence-numbered-steps__body ul,
.providence-numbered-steps__body ol {
    margin-block-start: 0;
}

.providence-numbered-steps__body > :last-child {
    margin-block-end: 0;
}

.providence-numbered-steps__body ul,
.providence-numbered-steps__body ol {
    padding-inline-start: 1.25em;
}

/* =========================================================
   TABLET / MOBILE
   Switch to a vertical timeline so long titles and body copy
   keep a comfortable reading width.
   ========================================================= */

@media (max-width: 1024px) {

    .providence-numbered-steps__list {
        display: flex;
        flex-direction: column;
        gap: var(--pns-item-gap);
    }

    .providence-numbered-steps__list::before {
        top: calc(var(--pns-circle-size) / 2);
        bottom: calc(var(--pns-circle-size) / 2);
        left: calc(var(--pns-circle-size) / 2);
        right: auto;
        width: var(--pns-line-width);
        height: auto;
        transform: translateX(-50%);
    }

    .providence-numbered-steps__item {
        display: grid;
        grid-template-columns: var(--pns-circle-size) minmax(0, 1fr);
        align-items: start;
        column-gap: var(--pns-content-gap);
        text-align: var(--pns-mobile-align);
    }

    .providence-numbered-steps__marker {
        grid-column: 1;
        margin: 0;
    }

    .providence-numbered-steps__marker {
        box-shadow: 0 0 0 6px var(--pns-marker-mask, #FFFFFF);
    }

    .providence-numbered-steps__content {
        grid-column: 2;
        margin: 0;
    }
}

@media (max-width: 767px) {

    .providence-numbered-steps__eyebrow {
        margin-bottom: var(--pns-section-gap);
    }

    .providence-numbered-steps__body ul,
    .providence-numbered-steps__body ol {
        padding-inline-start: 1.1em;
    }
}