/* Layout Grid — frontend + editor shared styles */
.oan-layout-grid {
    display: grid;
    align-items: start; /* dark panels and content align to top, matching React */
    gap: 2rem; /* default gap-8 */
}

/* Mobile: single column */
.oan-layout-grid.oan-cols-2,
.oan-layout-grid.oan-cols-3,
.oan-layout-grid.oan-cols-4 {
    grid-template-columns: 1fr;
}

/* Gap sizes */
.oan-layout-grid.oan-gap-4  { gap: 1rem; }
.oan-layout-grid.oan-gap-5  { gap: 1.25rem; }
.oan-layout-grid.oan-gap-6  { gap: 1.5rem; }
.oan-layout-grid.oan-gap-8  { gap: 2rem; }
.oan-layout-grid.oan-gap-12 { gap: 3rem; }
.oan-layout-grid.oan-gap-16 { gap: 4rem; }

/* Spacing between consecutive layout grids inside a section */
.oan-layout-grid + .oan-layout-grid { margin-top: 4rem; }

/* Tablet (md: 768px+): 4-col grids become 4-col, 2/3-col still stack */
@media (min-width: 768px) {
    .oan-layout-grid.oan-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Desktop (lg: 1024px+): 2 and 3-col become multi-column */
@media (min-width: 1024px) {
    .oan-layout-grid.oan-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .oan-layout-grid.oan-cols-3 { grid-template-columns: repeat(3, 1fr); }

    /* Flip/order support for dark-panel layouts */
    .oan-order-1 { order: 1; }
    .oan-order-2 { order: 2; }
}

/* For 4-col grids (footer rail), cards stretch to equal height */
.oan-layout-grid.oan-cols-4 { align-items: stretch; }

/* Prevent double-grid in editor block wrapper */
.block-editor-block-list__block.oan-layout-grid {
    display: block !important;
}