/* =========================================================
   Results Band Section — layout only
   (the metrics themselves are the shared .metric-row / .stat components)
   ========================================================= */

.results-band-section {
    padding-block: var(--space-md);
    background-color: var(--color-ink-50);
}

.results-band-section .results-band-section-card {
    padding: 23px 7px 15px;
    /* Figma 24/8/16 — the 1px stroke sits inside the card in Figma */
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.page-database-devops-value-journey .results-band-section .results-band-section-card,
.page-faq .results-band-section .results-band-section-card {
    flex-wrap: wrap;
    gap: 22px calc(2 * var(--space-2xl));
    padding-inline: 102px;
    position: relative;
}

.page-database-devops-value-journey .results-band-section .results-band-section-card::after,
.page-faq .results-band-section .results-band-section-card::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 101px;
    right: 101px;
    height: 1px;
    transform: translateY(-50%);
    background-color: var(--color-border);
    pointer-events: none;
}

.page-database-devops-value-journey .results-band-section .results-band-section-card .metric-row-item,
.page-faq .results-band-section .results-band-section-card .metric-row-item {
    margin-bottom: 22px;
}

.page-database-devops-value-journey .metric-row .metric-row-item+.metric-row-item::before,
.page-faq .metric-row .metric-row-item+.metric-row-item::before {
    left: calc(-1 * var(--space-2xl));
}

.page-database-devops-value-journey .metric-row .metric-row-item+.metric-row-item:nth-child(3n + 1)::before,
.page-faq .metric-row .metric-row-item+.metric-row-item:nth-child(3n + 1)::before {
    content: none;
}


/* ---------- Heading (optional) ----------
   Release Automation stacks a heading above the row; the homepage band
   has none and has no wrapper at all. Both markups work because the card
   rule above is a descendant selector, not a child one. */

.results-band-section .results-band-section-wrapper {
    gap: var(--space-lg);
}

.results-band-section .results-band-section-wrapper h2{
    text-align: center;
}

/* ---------- Standalone variant ----------
   The Demo page runs the band as a section in its own right — a heading
   above the card, full section padding around it — rather than the tight
   strip that tucks under the Home hero. Same tint, same card. */

.results-band-section-standalone {
    padding-block: var(--section-padding);
}

/* a heading with a whole section around it stands further off the card
   than one heading a strip */
.results-band-section-standalone .results-band-section-wrapper {
    gap: 36px;
}

/* ---------- Plain variant ----------
   the metric row on its own: no card, no tint, full section padding.
   Release Automation runs the band across white between two hairlines,
   where a floating card would read as a second surface. */

.results-band-section-plain {
    padding-block: var(--section-padding);
    background-color: var(--color-white);
}

.results-band-section-plain .results-band-section-card {
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    align-items: flex-start;
}

/* ---------- Inline variant ----------
   Security stands the statement beside the metric row instead of above
   it: an eyebrow and a shorter heading on the left, the figures on the
   right. Same .metric-row and .stat components underneath. */

.results-band-section-inline {
    padding-block: var(--section-padding);
    background-color: var(--color-white);
}

.results-band-section-inline .results-band-section-wrapper {
    flex-direction: row;
    gap: var(--space-3xl);
}

.results-band-section-inline .results-band-section-statement {
    flex: 0 1 480px;
}

/* Figma sets this eyebrow tighter and in the active signal teal, not the
   slate .text-eyebrow uses elsewhere */
.results-band-section-inline .results-band-section-statement .text-eyebrow p {
    font-size: var(--font-size-eyebrow-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-eyebrow-sm);
    color: var(--color-signal-700);
}

.results-band-section-inline .results-band-section-statement h2 {
    margin-top: 10px;
    font-size: var(--font-size-h2-sm);
    line-height: var(--line-height-h2-sm);
    text-align: left;
}

.results-band-section-inline .results-band-section-card {
    flex: 0 1 auto;
    justify-content: flex-start;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.results-band-section .results-band-section-card p{order:3;font-size: var(--font-size-caption);line-height: 1.33;color: var(--color-slate-500);}

/* ---------- Tablet ---------- */
@media (max-width:1199px) {

    .page-database-devops-value-journey .results-band-section .results-band-section-card,
    .page-faq .results-band-section .results-band-section-card {
        padding-inline: 60px;
    }

    .page-database-devops-value-journey .results-band-section .results-band-section-card::after,
    .page-faq .results-band-section .results-band-section-card::after {
        left: 60px;
        right: 60px;
    }
}

@media (max-width: 991px) {

    .results-band-section-inline .results-band-section-wrapper {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .results-band-section-inline .results-band-section-statement {
        flex: 0 0 auto;
    }

    .results-band-section-inline .results-band-section-statement h2,
    .results-band-section-inline .results-band-section-statement .text-eyebrow {
        text-align: center;
    }

    .page-database-devops-value-journey .results-band-section .results-band-section-card {
        padding-inline: 56px;
    }

    .page-faq .results-band-section .results-band-section-card {
        padding-inline: 38px;
    }

    .page-database-devops-value-journey .results-band-section .results-band-section-card::after {
        left: 56px;
        right: 56px;
    }

    .page-faq .results-band-section .results-band-section-card::after {
        left: 38px;
        right: 38px;
    }

}

@media (max-width:780px) {

    .page-database-devops-value-journey .results-band-section .results-band-section-card {
        padding-inline: 50px;
    }

    .page-database-devops-value-journey .results-band-section .results-band-section-card::after {
        left: 50px;
        right: 50px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {

    .page-database-devops-value-journey .results-band-section .results-band-section-card::after,
    .page-faq .results-band-section .results-band-section-card::after {
        content: none;
    }

    .results-band-section .results-band-section-wrapper {
        align-items: flex-start;
    }

    .results-band-section .results-band-section-wrapper h2,
    .results-band-section-inline .results-band-section-statement .text-eyebrow {
        text-align: left;
    }

    .results-band-section .results-band-section-card {
        padding: 0;
        background-color: transparent;
        box-shadow: none;
        border: none;
        border-radius: 0;
        width: 100%;
    }

    .page-database-devops-value-journey .results-band-section .results-band-section-card,
    .page-faq .results-band-section .results-band-section-card {
        padding: 0;
        gap: var(--space-md) var(--space-sm);
    }

    .page-database-devops-value-journey .results-band-section .results-band-section-card .metric-row-item,
    .page-faq .results-band-section .results-band-section-card .metric-row-item {
        margin-bottom: 0;
    }

    .results-band-section-plain .results-band-section-card {
        padding-inline: 0;
        width: 100%;
    }

    .results-band-section .metric-row .metric-row-item:last-child:nth-child(odd) {
        flex: 100%;
        margin-inline: auto;
        align-items: center;
    }

}