/* ============================================================
   Umbraco Block Grid — custom CSS grid renderer
   ============================================================
   The Razor partials (default.cshtml / items.cshtml / area.cshtml)
   set these CSS custom properties on each element:
     --umb-block-grid--grid-columns          total columns in the grid
     --umb-block-grid--item-column-span      columns this item spans
     --umb-block-grid--item-row-span         rows this item spans
     --umb-block-grid--area-grid-columns     total columns inside a block's sub-area
     --umb-block-grid--area-column-span      columns this area spans
     --umb-block-grid--area-row-span         rows this area spans

   We simply consume those properties here. Blocks that span the
   full column count (12/12) are visually identical to normal
   document flow — so the home page layout is unaffected.
   ============================================================ */

/* ── Top-level layout container (one per block-grid property) ── */
.umb-block-grid__layout-container {
  display: grid;
  grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 12), minmax(0, 1fr));
  grid-auto-rows: auto;
}

/* ── Each block item ── */
.umb-block-grid__layout-item {
  position: relative;
  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;
  min-height: 0;
}

/* ── Sub-area container (rendered inside blocks that declare areas,
      e.g. contentRow). Fills the full height of its grid cell so
      row-spanning areas stretch correctly. ── */
.umb-block-grid__area-container {
  display: grid;
  grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, 12), minmax(0, 1fr));
  grid-auto-rows: auto;
  height: 100%;
}

/* ── Each area inside a block ── */
.umb-block-grid__area {
  position: relative;
  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;
  min-height: 0;
}

/* ── Collapse to single-column stack on mobile ── */
@media (max-width: 1024px) {
  .umb-block-grid__layout-container,
  .umb-block-grid__area-container {
    grid-template-columns: 1fr;
  }

  .umb-block-grid__layout-item,
  .umb-block-grid__area {
    grid-column: 1 / -1;
    grid-row: span 1;
  }
}