/* =========================================================
   File: css/subgrids.css
   Title: Internal Subgrid System (2-col / 3-col)
   Version: 2025-11-15 (Final Structural)
   ---------------------------------------------------------
   PURPOSE
   • Controls internal layout INSIDE an area (e.g., area-center-2).
   • Does NOT alter the outer 4-column page grid from layout.css.
   • Provides simple, balanced 2- and 3-column content blocks.

   LOAD ORDER (HTML)
   • Load AFTER layout.css so it can rely on the main grid.
========================================================= */

:root {
  /* Bridge to outer grid’s gap; falls back if tokens missing */
  --subgrid-gap: var(--grid-gap, 2rem);
}

/* ---------------------------------------------------------
   FULL-WIDTH INNER WRAPPER
   ---------------------------------------------------------
   • Span the width of whatever area you’re in.
   • Use this as your content shell inside .area-cell.
--------------------------------------------------------- */
.pane-full {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2; /* sits above section background band */
}

/* ---------------------------------------------------------
   SUBGRID
--------------------------------------------------------- */
.subgrid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--subgrid-gap);
  align-items: start;
}
.subgrid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--subgrid-gap);
  align-items: start;
}
.subgrid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--subgrid-gap);
  align-items: start;
}
@media (max-width: 599.98px) {
  .subgrid-3 {
    column-gap: 0.5rem !important;
    row-gap: 0.5rem !important;
  }
}

/* ===== END OF FILE: css/subgrids.css ===================== */