/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — GRID ATOM
   Classification : Layout Atom | Responsive | Matrix-Aware | Theme + Token Harmonized
   Version        : 5.0.0 | Genesis-Final • Matrix-Aware • Deterministic-ID • Safe-Fallback
   File           : /tools/modules/ui.grid/ui.grid.css
   Maintainer     : DΛREΛKT_ UI TEAM
   ──────────────────────────────────────────────────────────────── */

@layer ui.grid {

  /* ─── Root Grid Container ───────────────────────────────────── */
  /* CORE RULE — grid NEVER sets width/margin/padding (layout-agnostic) */
  /* Width controlled via token — wrapper/layout layer owns sizing */
  .ui-grid[data-module="ui.grid"]:not(.module-wrapper),
  .ui-grid[data-mod="ui_grid"]:not(.module-wrapper) {
    display: grid;
    width: var(--ui-grid-width, auto);
    gap: var(--ui-grid-gap, var(--site-pad, 2rem));
    grid-template-columns: var(--ui-grid-cols, repeat(2, 1fr));
    align-items: var(--ui-grid-align, start);
    justify-content: var(--ui-grid-justify, start);
    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    transition: all 0.25s ease-in-out;
    /* Width/margin/padding controlled by wrapper/layout layer */
  }

  /* ─── Matrix-Aware Hooks (new) ───────────────────────────────── */
  /* Targets any cell by new deterministic data attributes */
  .ui-grid__cell[data-index],
  .ui-grid__cell[data-row],
  .ui-grid__cell[data-col],
  .ui-grid__cell[data-area] {
    min-width: 0;
    contain: content;
    display: block;
    position: relative;
    width: 100%;
  }

  /* Optional: visual aid for matrix grids when debugging */
  .ui-grid[data-debug="true"] .ui-grid__cell::before {
    content: attr(data-area);
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 9px;
    color: rgba(0, 0, 0, 0.35);
    font-family: monospace;
    pointer-events: none;
  }

  /* ─── Variant Modifiers ─────────────────────────────────────── */
  .ui-grid[data-variant="auto"]  { grid-auto-flow: row dense; }
  .ui-grid[data-variant="fixed"] { grid-auto-flow: row; }
  .ui-grid[data-variant="stack"] { grid-template-columns: 1fr !important; }

  /* ─── Ownership Diagnostics (Hierarchy Aware) ───────────────── */
  .ui-grid[data-owner="ui.layout"],
  .ui-grid[data-owner="ui.canvas"],
  .ui-grid[data-owner="ui.section"],
  .ui-grid[data-owner="ui.section.composer"] {
    border: none;
  }

  /* ─── Debug Visualization (Optional Dev Aid) ────────────────── */
  .ui-grid[data-debug="true"] .ui-grid__cell {
    outline: 1px dashed rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.02);
  }

  .ui-grid[data-debug="true"][data-owner="document"] {
    outline: 1px dashed rgba(255, 0, 0, 0.25);
    outline-offset: 2px;
  }

  /* ─── Responsive Collapse (Stack Rule) ───────────────────────── */
  @media (max-width: 900px) {
    .ui-grid[data-stack="true"],
    .ui-grid[data-variant="auto"][data-stack="true"] {
      grid-template-columns: 1fr !important;
      gap: var(--site-pad-sm, 1rem);
    }
  }

  /* ─── Theme Awareness (Site Token Bridges) ───────────────────── */
  [data-theme="dark"] .ui-grid {
    --ui-grid-gap: var(--site-pad, 1.5rem);
    color: var(--site-fg, #eee);
    background-color: var(--site-bg, transparent);
  }

  [data-theme="light"] .ui-grid {
    --ui-grid-gap: var(--site-pad, 2rem);
    color: var(--site-fg, #111);
    background-color: var(--site-bg, transparent);
  }

  /* ─── Motion Reduction (Accessibility Compliance) ────────────── */
  @media (prefers-reduced-motion: reduce) {
    .ui-grid { transition: none !important; }
  }

  /* ─── Genesis Token Bridges (System Defaults) ────────────────── */
  /* Note: --ui-grid-width is NOT defined at :root to force explicit author intent */
  /* Authors must define it on wrapper/layout layer for contained grids */
  :root {
    --ui-grid-gap: var(--site-pad, 2rem);
    --ui-grid-cols: repeat(2, 1fr);
    --ui-grid-align: start;
    --ui-grid-justify: start;
    --ui-grid-padX: 0px;
    --ui-grid-padY: 0px;
  }

  /* ─── Fallback Styling (Fail-Safe) ───────────────────────────── */
  .ui-grid__fallback,
  .ui-grid__error {
    display: block;
    padding: 1rem;
    background: rgba(255, 0, 0, 0.05);
    color: var(--site-fg, #333);
    font-family: monospace;
    font-size: 0.9rem;
    border-radius: 4px;
    text-align: center;
  }

  /* ─── Development Highlight (Optional Aid) ───────────────────── */
  .ui-grid[data-debug="true"]::after {
    content: attr(data-version);
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 9px;
    color: rgba(0, 0, 0, 0.25);
    font-family: monospace;
  }
}