/*
|==========================================================================
| SECTION LAYOUT STYLES — Layout Studio V0.1
|==========================================================================
|
| Client-selectable arrangement for a niche's repeating content grids
| (categories/products/blog cards on the tenant homepage). Mirrors the
| existing chrome_style per-niche customization pattern for navigation —
| this is the same idea applied to section arrangement instead.
|
| Only controls column count and (for boxless-flow) whether cards keep
| their own box styling — never redeclares card background/border/radius
| itself, so it stays compatible with whatever .card/.card-flat already do.
|
*/

.section-grid {
    display: grid;
    gap: var(--space-6);
}

.section-grid.layout-split-halves {
    grid-template-columns: repeat(2, 1fr);
}

.section-grid.layout-three-column {
    grid-template-columns: repeat(3, 1fr);
}

.section-grid.layout-stacked-single {
    grid-template-columns: 1fr;
}

.section-grid.layout-boxless-flow {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.section-grid.layout-boxless-flow > .card {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 768px) {
    .section-grid.layout-split-halves,
    .section-grid.layout-three-column {
        grid-template-columns: 1fr;
    }
}