/* ===================================================================
   UMBRACO 13 BLOCK GRID – GLOBAL, ATTRIBUTE-DRIVEN OVERRIDES
   - Mobile: single column.
   - Tablet+ (≥768px): use configured column counts; place areas/items
     using the spans Umbraco emits in data attributes.
   - Nested area containers stay single column unless they explicitly
     declare their own column count.
   - Attribute-based rules with !important beat accidental class overrides.
   =================================================================== */

/* ---------------------------
   Base: mobile-first
   --------------------------- */
.umb-block-grid__layout-container,
.umb-block-grid__area-container,
.umb-block-grid__block--view::part(area-container) {
  display: grid;
  grid-template-columns: 1fr;   /* mobile: single column */
  gap: 1rem;
  grid-auto-flow: row;
  grid-auto-rows: auto;
}

/* Full-width on mobile */
.umb-block-grid__layout-item,
.umb-block-grid__area {
  grid-column: 1 / -1;
  grid-row: span var(--umb-block-grid--item-row-span, 1);
}


/* ---------------------------
   Tablet and up
   --------------------------- */
@media (min-width: 768px) {
  /* OUTER layout containers (top-level block grids) honor their column count */
  .umb-block-grid__layout-container {
    grid-template-columns: repeat(
      var(--umb-block-grid--grid-columns, 12),
      minmax(0, 1fr)
    );
  }

  /* AREA containers:
     By default keep single-column to avoid "12-inside-12" unless the
     container explicitly declares its own column count. */
  .umb-block-grid__area-container {
    grid-template-columns: 1fr;
  }

  /* Any area-container that explicitly declares area columns (via style var or data attr) becomes multi-column */
  .umb-block-grid__area-container[style*="--umb-block-grid--area-grid-columns"],
  .umb-block-grid__area-container[data-area-grid-columns] {
    grid-template-columns: repeat(
      var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 12)),
      minmax(0, 1fr)
    );
  }

  /* Also keep ::part(area-container) single column unless it declares otherwise */
  .umb-block-grid__block--view::part(area-container) {
    grid-template-columns: 1fr;
  }

  /* Ensure items/areas are no longer full-width on desktop */
  .umb-block-grid__layout-item,
  .umb-block-grid__area {
    grid-column-start: auto !important;
    grid-row: auto;
  }

  /* -----------------------------------------
     AREA SPANS (side-by-side columns)
     Use data-area-col-span from Umbraco; beat any class/style conflicts.
     ----------------------------------------- */
  .umb-block-grid__area[data-area-col-span="1"] { grid-column: auto / span 1 !important; }
  .umb-block-grid__area[data-area-col-span="2"] { grid-column: auto / span 2 !important; }
  .umb-block-grid__area[data-area-col-span="3"] { grid-column: auto / span 3 !important; }
  .umb-block-grid__area[data-area-col-span="4"] { grid-column: auto / span 4 !important; }
  .umb-block-grid__area[data-area-col-span="5"] { grid-column: auto / span 5 !important; }
  .umb-block-grid__area[data-area-col-span="6"] { grid-column: auto / span 6 !important; }
  .umb-block-grid__area[data-area-col-span="7"] { grid-column: auto / span 7 !important; }
  .umb-block-grid__area[data-area-col-span="8"] { grid-column: auto / span 8 !important; }
  .umb-block-grid__area[data-area-col-span="9"] { grid-column: auto / span 9 !important; }
  .umb-block-grid__area[data-area-col-span="10"] { grid-column: auto / span 10 !important; }
  .umb-block-grid__area[data-area-col-span="11"] { grid-column: auto / span 11 !important; }
  .umb-block-grid__area[data-area-col-span="12"] { grid-column: auto / span 12 !important; }

  /* -----------------------------------------
     ITEM SPANS (blocks inside a layout container)
     Use data-col-span from Umbraco for reliability across templates.
     ----------------------------------------- */
  .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="1"],
  .umb-block-grid__layout-container > .umb-block-grid__block--view[data-col-span="1"] { grid-column: auto / span 1 !important; }
  .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="2"],
  .umb-block-grid__layout-container > .umb-block-grid__block--view[data-col-span="2"] { grid-column: auto / span 2 !important; }
  .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="3"],
  .umb-block-grid__layout-container > .umb-block-grid__block--view[data-col-span="3"] { grid-column: auto / span 3 !important; }
  .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="4"],
  .umb-block-grid__layout-container > .umb-block-grid__block--view[data-col-span="4"] { grid-column: auto / span 4 !important; }
  .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="5"],
  .umb-block-grid__layout-container > .umb-block-grid__block--view[data-col-span="5"] { grid-column: auto / span 5 !important; }
  .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="6"],
  .umb-block-grid__layout-container > .umb-block-grid__block--view[data-col-span="6"] { grid-column: auto / span 6 !important; }
  .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="7"],
  .umb-block-grid__layout-container > .umb-block-grid__block--view[data-col-span="7"] { grid-column: auto / span 7 !important; }
  .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="8"],
  .umb-block-grid__layout-container > .umb-block-grid__block--view[data-col-span="8"] { grid-column: auto / span 8 !important; }
  .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="9"],
  .umb-block-grid__layout-container > .umb-block-grid__block--view[data-col-span="9"] { grid-column: auto / span 9 !important; }
  .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="10"],
  .umb-block-grid__layout-container > .umb-block-grid__block--view[data-col-span="10"] { grid-column: auto / span 10 !important; }
  .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="11"],
  .umb-block-grid__layout-container > .umb-block-grid__block--view[data-col-span="11"] { grid-column: auto / span 11 !important; }
  .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-col-span="12"],
  .umb-block-grid__layout-container > .umb-block-grid__block--view[data-col-span="12"] { grid-column: auto / span 12 !important; }
}

/* ---------------------------
   Optional: desktop tweaks
   --------------------------- */
@media (min-width: 1024px) {
  /* e.g., increase gaps if desired */
  /* .umb-block-grid__layout-container,
     .umb-block-grid__area-container { gap: 1.25rem; } */
}


/* --- MOBILE (unchanged): single column everywhere --- */
.umb-block-grid__layout-container,
.umb-block-grid__area-container,
.umb-block-grid__block--view::part(area-container) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  grid-auto-flow: row;
  grid-auto-rows: auto;
}

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

/* --- DESKTOP/TABLET --- */
@media (min-width: 768px) {
  /* 1) OUTER split (the wrapper that holds the left/right areas): multi-col */
  .umb-block-grid__area-container {
    grid-template-columns: repeat(
      var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 12)),
      minmax(0, 1fr)
    ) !important;
  }

  /* 2) ANY layout container INSIDE an area: keep single column */
  .umb-block-grid__area > .umb-block-grid__layout-container {
    grid-template-columns: 1fr !important;
  }

  /* 3) If blocks render their own ::part(area-container), keep those single column too */
  .umb-block-grid__block--view::part(area-container) {
    grid-template-columns: 1fr !important;
  }

  /* 4) Ensure areas and items use their spans (so 3/9 sit side-by-side) */
  .umb-block-grid__area {
    grid-column: auto / span var(--umb-block-grid--area-column-span, 1) !important;
  }
  .umb-block-grid__layout-container > .umb-block-grid__layout-item,
  .umb-block-grid__layout-container > .umb-block-grid__block--view {
    grid-column: auto / span var(--umb-block-grid--item-column-span, 1) !important;
  }
}

@media (max-width: 800px) {
    .umb-block-grid__layout-container,
.umb-block-grid__area-container,
.umb-block-grid__block--view::part(area-container) {
  display: block;
}
}