/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.layout
   Classification : Structural Atom | Grid/Flex Coordinator
   Version        : 3.3.0 | Genesis-Final • Self-Healing • Token-Safe • Canvas-Aware
   Maintainer     : DΛREΛKT_ UI TEAM
   ──────────────────────────────────────────────────────────────── */
@layer ui.layout {

  /* ── Root Layout Container ───────────────────────────────────── */
  .ui-layout[data-module="ui.layout"],
  .ui-layout[data-mod="ui_layout"] {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: auto;
    box-sizing: border-box;
    position: relative;
    isolation: isolate;

    gap: var(--ui-layout-gap, 0);
    padding-block: var(--ui-layout-padY, 0);
    padding-inline: var(--ui-layout-padX, 0);

    background: var(--ui-layout-bg, transparent);
    color: var(--ui-layout-fg, inherit);
    align-items: var(--ui-layout-align, stretch);
    justify-content: var(--ui-layout-justify, start);

    /* Full-bleed by default — override only if needed */
    margin-inline: 0 !important;
    max-width: none !important;
  }

  /* ── Layout Intent: Only viewport layouts stretch ───────── */
  body[data-layout="viewport"] .ui-layout[data-module="ui.layout"],
  body[data-layout="viewport"] .ui-layout[data-mod="ui_layout"] {
    min-height: 100%;
  }

  /* ── Mode: Grid ──────────────────────────────────────────────── */
  .ui-layout[data-mode="grid"] {
    display: grid;
    grid-template-columns: repeat(
      var(--ui-layout-cols, auto-fit),
      minmax(var(--ui-layout-cell-min, 200px), 1fr)
    );
  }

  /* ── Mode: Flex ──────────────────────────────────────────────── */
  .ui-layout[data-mode="flex"] {
    display: flex;
    flex-direction: row;
    flex-wrap: var(--ui-layout-wrap, wrap);
    align-items: var(--ui-layout-align, stretch);
    justify-content: var(--ui-layout-justify, start);
  }

  /* ── Flex Column Mode (for main layout) ──────────────────────── */
  .ui-layout[data-mode="flex"][data-direction="column"] {
    display: flex;
    flex-direction: column;
  }

  /* ── Layout Intent: Full-height only when explicitly requested ───────── */
  body[data-layout="viewport"] .ui-layout[data-mode="flex"][data-direction="column"] {
    min-height: 100%;
  }

  /* ── Mode: Stack ─────────────────────────────────────────────── */
  .ui-layout[data-mode="stack"] {
    display: flex;
    flex-direction: column;
    align-items: var(--ui-layout-align, stretch);
    justify-content: var(--ui-layout-justify, start);
  }

  /* ── Mode: Split (two-column) ───────────────────────────────── */
  .ui-layout[data-mode="split"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ui-layout-gap, 32px);
  }

  /* ── Mode: Center ────────────────────────────────────────────── */
  .ui-layout[data-mode="center"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  /* ── Layout Intent: Center mode stretches only in viewport layout ───────── */
  body[data-layout="viewport"] .ui-layout[data-mode="center"] {
    min-height: 100%;
  }

  /* ── Cells ───────────────────────────────────────────────────── */
  .ui-layout__cell {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
  }

  /* ── Bleed Mode: Remove padding when section declares bleed intent ───────────────── */
  .ui-layout__cell[data-area="main"][data-bleed="true"] {
    padding-inline: 0;
  }

  /* ── Canvas Awareness (inside ui.canvas) ─────────────────────── */
  .ui-canvas[data-mod="ui_canvas"] :where(.ui-layout) {
    width: 100%;
    margin: 0 !important;
    background: var(--ui-layout-bg, transparent);
  }

  /* ── Responsive Stacking (token-controlled) ─────────────────── */
  @media (max-width: 1280px) {
    .ui-layout[data-stack="lg"] {
      grid-template-columns: 1fr !important;
      flex-direction: column !important;
    }
  }
  @media (max-width: 960px) {
    .ui-layout[data-stack="md"] {
      grid-template-columns: 1fr !important;
      flex-direction: column !important;
    }
  }
  @media (max-width: 640px) {
    .ui-layout[data-stack="sm"] {
      grid-template-columns: 1fr !important;
      flex-direction: column !important;
    }
  }
  @media (max-width: 480px) {
    .ui-layout[data-stack="xs"] {
      grid-template-columns: 1fr !important;
      flex-direction: column !important;
    }
  }

  /* ── Debug Overlay (opt-in) ──────────────────────────────────── */
  /* .ui-layout[data-debug="1"]::before {
       content: "ui.layout active";
       position: absolute;
       top: 0.25rem;
       right: 0.75rem;
       font-size: 10px;
       opacity: 0.4;
       color: #999;
       pointer-events: none;
     } */
}