/* =========================================================
   Frameworks Section — a heading, the compliance-framework
   logo row, and a paragraph under it.

   Seven separate logo files rather than one composite export,
   so the row reflows, each badge carries its own alt text, and
   a framework can be swapped without re-exporting the band.

   Flex rather than .card-grid: a grid packs its last row to the
   left, and Figma centres it — four badges on the first row,
   the remaining three centred under them.

   The badges are different shapes, from circular seals to a wide
   DORA wordmark, so Figma sizes each one by hand. Those widths
   are listed below as data; --logo-scale shrinks the whole set
   together at the smaller breakpoints, so a badge only ever
   needs its one number.

   Used on: compliance.html
   ========================================================= */

.frameworks-section {
    background-color: var(--color-white);
}

.frameworks-section .frameworks-section-wrapper {
    gap: var(--space-md);
    padding-block: var(--section-padding);
    text-align: center;
}

.frameworks-section .frameworks-section-wrapper .frameworks-section-header-wrapper {
    max-width: 815px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.frameworks-section .frameworks-section-wrapper .frameworks-section-row {
    flex-wrap: wrap;
    gap: var(--space-md);
    width: 100%;
    list-style: none;
}

/* four cells to a row at any width the container allows; the last row
   centres because the flex line is centred rather than packed */
.frameworks-section .frameworks-section-wrapper .frameworks-section-row li {
    display: flex;
    flex: 0 0 calc((100% - (var(--space-md) * 3)) / 4);
    align-items: center;
    justify-content: center;

}

.frameworks-section .frameworks-section-wrapper .frameworks-section-row span {
    max-width: 143px;
    width: 100%;
    display: inline-block;
}

/* ---------- The width Figma sets on each badge ---------- */

/* .frameworks-section .frameworks-section-wrapper .frameworks-section-row .logo-sox {
    --logo-width: 112px;
}

.frameworks-section .frameworks-section-wrapper .frameworks-section-row .logo-soc2 {
    --logo-width: 116px;
}

.frameworks-section .frameworks-section-wrapper .frameworks-section-row .logo-gdpr {
    --logo-width: 130px;
}

.frameworks-section .frameworks-section-wrapper .frameworks-section-row .logo-hipaa {
    --logo-width: 175px;
}

.frameworks-section .frameworks-section-wrapper .frameworks-section-row .logo-pci-dss {
    --logo-width: 119px;
}

.frameworks-section .frameworks-section-wrapper .frameworks-section-row .logo-dora {
    --logo-width: 166px;
}

.frameworks-section .frameworks-section-wrapper .frameworks-section-row .logo-nist {
    --logo-width: 124px;
} */

.frameworks-section .frameworks-section-wrapper .frameworks-section-text {
    max-width: 940px;
    margin: 0 auto;
    text-align: center;
}

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

    .frameworks-section .frameworks-section-wrapper .frameworks-section-row {
        --logo-scale: 0.9;
    }

    .frameworks-section .frameworks-section-wrapper .frameworks-section-row li {
        min-height: 136px;
    }

}

/* ---------- Tablet ----------
   three to a row: four badges plus their gaps stop fitting here */
@media (max-width: 991px) {

    .frameworks-section .frameworks-section-wrapper .frameworks-section-row {
        --logo-scale: 0.8;
    }

    .frameworks-section .frameworks-section-wrapper .frameworks-section-row li {
        flex: 0 0 calc((100% - (var(--space-md) * 2)) / 3);
        min-height: 124px;
    }

}

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

    .frameworks-section .frameworks-section-wrapper .frameworks-section-header-wrapper,
    .frameworks-section .frameworks-section-wrapper .frameworks-section-text {
        text-align: left;
    }

    .frameworks-section .frameworks-section-wrapper .frameworks-section-row {
        --logo-scale: 0.68;
        gap: var(--space-sm);
        /* justify-content: flex-start; */
    }

    .frameworks-section .frameworks-section-wrapper .frameworks-section-row li {
        flex: 0 0 calc((100% - (var(--space-sm) * 2)) / 3);
        min-height: 108px;
        /* justify-content: flex-start; */
    }

    /* .frameworks-section .frameworks-section-wrapper .frameworks-section-row li:last-child:nth-child(odd) {
        justify-content: center;
    } */

    .frameworks-section .frameworks-section-wrapper .frameworks-section-row span {
        max-width: 100px;
    }

}

/* ---------- Small Mobile ----------
   two to a row rather than one: seven badges in a single column is a
   very long scroll */
@media (max-width: 575px) {

    .frameworks-section .frameworks-section-wrapper .frameworks-section-row {
        --logo-scale: 0.62;
    }

    .frameworks-section .frameworks-section-wrapper .frameworks-section-row li {
        flex: 0 0 calc((100% - var(--space-sm)) / 2);
        min-height: 100px;
    }

}

/* ---------- Balanced heading ----------
   The Demo page's title is short enough to sit on one line, where it
   reads as a caption rather than as the top of a section. Figma holds
   it to 760 so it breaks over two lines and sits over the middle of
   the badge grid. Compliance's title is long and needs no help. */

.frameworks-section-balanced .frameworks-section-wrapper h2 {
    max-width: 760px;
}