/* ============================================================
   Umbraco Block Grid — frontend layout CSS
   Required for column/row spans to have visual effect.
   Variables are injected by the Umbraco Razor partials:
     --umb-block-grid--grid-columns
     --umb-block-grid--item-column-span
     --umb-block-grid--item-row-span
   ============================================================ */

.umb-block-grid {
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 12), 1fr);
    gap: var(--umb-block-grid--gap, 0);
}

.umb-block-grid__layout-container {
    display: contents;
}

.umb-block-grid__layout-item {
    grid-column: span var(--umb-block-grid--item-column-span, 12);
    grid-row: span var(--umb-block-grid--item-row-span, 1);
    min-width: 0;
}

/* Nested area container */
.umb-block-grid__area-container {
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, 12), 1fr);
    gap: var(--umb-block-grid--area-gap, 0);
}

.umb-block-grid__area {
    grid-column: span var(--umb-block-grid--area-column-span, 12);
    grid-row: span var(--umb-block-grid--area-row-span, 1);
    min-width: 0;
}

/* Full-width convenience modifier */
.umb-block-grid__layout-item[data-col-span="12"] {
    grid-column: 1 / -1;
}