/**
 * WordPress Block Overrides
 * Custom breakpoints for WordPress default blocks to match theme grid system
 */

/* ==========================================================================
   WordPress Columns Block
   Override default stacking behavior to match theme grid breakpoint (992px)
   ========================================================================== */

/* Stack columns below 992px */
@media (max-width: 991px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: wrap !important;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
        flex-grow: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Override inline styles */
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="flex-basis"],
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style] {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* Prevent WordPress default stacking at 782px by keeping columns side-by-side between 782px and 991px */
@media (min-width: 782px) and (max-width: 991px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: wrap !important;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
        flex-grow: 1 !important;
    }
}

/* Keep columns side-by-side above 992px */
@media (min-width: 992px) {
    .wp-block-columns {
        flex-wrap: nowrap !important;
    }

    .wp-block-columns > .wp-block-column:not(:only-child) {
        flex-grow: 1;
    }
}

/* Ensure proper gap handling */
.wp-block-columns {
    gap: var(--wp--style--block-gap, 2em);
}