/*
    The soil bag calculator's button row. Added 2026-09-18.

    This calculator arrived with no stylesheet at all: every rule in it is an
    inline `style` attribute on the markup, which is why it was the block that
    proved the embed wrapper before a vendored stylesheet was involved.

    That is also why its three buttons were the one thing that could not be
    fixed in place. They were `width: 160px` inline-blocks in a `text-align:
    center` div, so "Request a Quote" wrapped onto two lines, that button grew
    taller than its neighbours and pushed itself out of line, and the gaps
    between them were whatever the whitespace in the markup happened to collapse
    to. On a phone the three of them broke across rows wherever they landed. An
    inline attribute cannot express a flex row or a breakpoint, so the row needed
    a file.

    Nested and unlayered on the same terms as the other two calculators. See
    `resources/css/08-calculators.css`.
*/
.calc-soil-bag {
    /* `padding: 0 40px` is the card's own gutter, which every other row in this
       calculator carries as an inline style. Without it the buttons ran to the
       card's edges while the inputs above them sat 40px in. */
    .button-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin: 20px 0;
        padding: 0 40px;
    }

    /*
        `flex: 1 1 150px` rather than a fixed width, so the row needs no
        breakpoint of its own: at the card's full 600px the three sit level and
        share the space, and as it narrows they reflow and then stack, each one
        as wide as there is room for. 150px is the basis because "Request a
        Quote" is the longest label and fits on one line at that width.
    */
    .button-row button {
        flex: 1 1 150px;
        max-width: 200px;
        padding: 12px 16px;
        border: 0;
        border-radius: 5px;
        background: var(--color-tasman);
        color: #fff;
        font-family: var(--default-font-family), sans-serif;
        font-size: 14px;
        line-height: 1.2;
        cursor: pointer;
        transition: 0.2s;
    }

    .button-row button:hover {
        background: var(--color-tasman-dark);
    }
}