/**
 * Mobile Grid Layout Override for Gutenberg Grid Block
 *
 * Purpose: Override default Gutenberg grid behavior to ensure proper stacking on mobile devices.
 * The default Gutenberg grid block doesn't stack properly on mobile, which is required.
 *
 * Breakpoints:
 * - Desktop (>1024px): Uses original Gutenberg grid layout (unchanged)
 * - Tablet (≤1024px): Forces 2-column layout with smart spanning for odd items
 * - Mobile (≤768px): Forces single-column stacked layout
 */
.wp-block-group.is-layout-grid {
    @media (max-width: 1024px) {
        /* Force 2-column layout on tablets */
        grid-template-columns: repeat(2, minmax(0, 1fr));

        /*
 * Make the last child span 2 columns if it's alone on its row
 * This prevents orphaned items in odd-numbered grids (3, 5, 7 items, etc.)
 * by making the last item take full width when it would be alone
 */
        > *:nth-child(odd):last-child {
            grid-column: 1 / -1;
        }
    }
    @media (max-width: 768px) {
        /* Force single-column stacked layout on mobile */
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}