/*
 * Block Grid layout for migrated Grid content (Appendix W).
 *
 * Structure (emitted by Views/Partials/blockgrid/items.cshtml): blocks are regrouped into ROWS.
 *   - A contained row is a Bootstrap `.container` (centred, max-width) wrapping a
 *     `.umb-block-grid__layout-container` (CSS Grid). The container centres; CSS Grid splits the
 *     CONTAINED width into columns — so a 6+6 row sits side by side, contained, matching the legacy
 *     `.container > .row > .col-md-6 + .col-md-6`.
 *   - A full-width row is `.umb-block-grid.xp-grid-fullwidth-row` (NO .container) wrapping the same
 *     layout container, so it fills the full-width `.xp-content-page` section (legacy
 *     `.container-fluid m-0 p-0`). No viewport units / no scrollbar-overflow hacks needed, because
 *     full-width rows simply aren't wrapped in the centred container.
 *
 * SCOPED to `.xp-content-page` so this never leaks into the rest of the Bootstrap-based site.
 * Column/row spans are driven by the CSS custom properties items.cshtml emits:
 *   --umb-block-grid--grid-columns / --umb-block-grid--item-column-span / --item-row-span (+ area vars).
 */

.xp-content-page .umb-block-grid {
    --umb-block-grid--grid-columns: 12;
    display: block;
}

/* CSS Grid row body. Centring/containment is provided by the OUTER wrapper (Bootstrap `.container`
   for contained rows; nothing for full-width rows), so this element only lays out the columns. */
.xp-content-page .umb-block-grid__layout-container {
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns), minmax(0, 1fr));
    grid-auto-flow: row dense;
    /* COLUMN gutter only: reproduce Bootstrap's 1.5rem col gutter (0.75rem each side) between columns.
       ROW gap is 0 — vertical spacing between stacked rows comes from the migrated block wrappers' own
       margin classes (e.g. "pt-4 pb-5 mt-md-3 mb-2 mb-md-4"), as in the legacy grid; a grid row-gap
       would add to those (grid cells don't margin-collapse) and double the gap. */
    column-gap: var(--umb-block-grid--layout-gap, 1.5rem);
    row-gap: 0;
    box-sizing: border-box;
    width: 100%;
}

/* Full-width row: fills the full-width .xp-content-page section (not wrapped in a centred .container).
   The section is already full page width, so no width math is required here. */
.xp-content-page .xp-grid-fullwidth-row {
    width: 100%;
}

.xp-content-page .umb-block-grid__layout-item {
    box-sizing: border-box;
    --umb-block-grid--item-column-span: var(--umb-block-grid--grid-columns);
    grid-column-end: span min(var(--umb-block-grid--item-column-span), var(--umb-block-grid--grid-columns));
    grid-row: span var(--umb-block-grid--item-row-span, 1);
    min-width: 0;
}

/* Nested areas (a block containing its own sub-grid of blocks). */
.xp-content-page .umb-block-grid__area-container {
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns)), minmax(0, 1fr));
    grid-auto-flow: row dense;
    column-gap: var(--umb-block-grid--layout-gap, 1.5rem);
    row-gap: 0;
    box-sizing: border-box;
}

.xp-content-page .umb-block-grid__area {
    box-sizing: border-box;
    grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns)));
    grid-row: span var(--umb-block-grid--area-row-span, 1);
    min-width: 0;
}

/* Responsive: stack columns to one below the Bootstrap md breakpoint (legacy col-md-* collapsed to
   full width on small screens). */
@media (max-width: 768px) {
    .xp-content-page .umb-block-grid__layout-container,
    .xp-content-page .umb-block-grid__area-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .xp-content-page .umb-block-grid__layout-item,
    .xp-content-page .umb-block-grid__area {
        grid-column-end: span 1;
    }
}