/* =========================================================
   DevSecOps Loop Section — layout only (typography comes from base.css / .text-subline)
   ========================================================= */

.devsecops-section {
    background-color: var(--color-ink-25);
}

.devsecops-section .devsecops-section-wrapper {
    gap: 36px;
    padding-block: var(--section-padding);
}

/* ---------- Header ---------- */

.devsecops-section .devsecops-section-wrapper .devsecops-section-header {
    gap: var(--space-md);
    max-width: 920px;
    /* Figma hugs the heading at 904px; Google Barlow Condensed needs 917px to stay on one line */
    text-align: center;
}

.devsecops-section .devsecops-section-wrapper .devsecops-section-header .devsecops-section-subline {
    max-width: 752px;
}

.devsecops-section .devsecops-section-wrapper .devsecops-section-header .devsecops-section-actions {
    width: 100%;
}

/* ---------- Diagram ---------- */

.devsecops-section .devsecops-section-wrapper .devsecops-section-diagram {
    width: 100%;
}

/* the animation sets its own aspect through the SVG viewBox */
.devsecops-section .devsecops-section-wrapper .devsecops-section-diagram svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Large Desktop / Laptop ---------- */
@media (max-width: 1199px) {

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

}

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

    .devsecops-section .devsecops-section-wrapper {
        gap: var(--space-md);
    }

    .devsecops-section .devsecops-section-wrapper .devsecops-section-header {
        gap: var(--space-sm);
    }

}

.devsecops-actions-mobile {
    display: none !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .devsecops-section .devsecops-section-wrapper .devsecops-section-header {
        text-align: left;
        align-items: flex-start;
    }

    .devsecops-section .devsecops-section-wrapper {
        gap: var(--space-md);
    }

    .devsecops-actions-desktop {
        display: none !important;
    }

    .devsecops-actions-mobile {
        display: flex !important;
        width: 100%;
        margin-top: 10px;
    }
}

/* ---------- Small Mobile ---------- */