/* assets/css/layout.css
 * @layer layouts — section, container, grid, stack, cluster, sidebar
 * ════════════════════════════════════════════════════════════════════
 *
 * Hierarchy — one job per layer, no overlap:
 * ───────────────────────────────────────────
 * 1. .section     — padding only. Full-bleed breathing room.
 *                   padding-block via --section-space-*
 *                   padding-inline via --gutter
 *                   No flex, no grid, no gap. Ever.
 *
 * 2. .container   — width constraint only.
 *                   max-inline-size + centering.
 *                   No padding. No flex. No gap. No container-type.
 *
 * 3. .grid / .stack / .cluster / .sidebar
 *                 — layout patterns that live inside .container.
 *                   Own direction, columns, and gap.
 *                   .container never competes with these.
 *
 * Usage — always this order:
 * ───────────────────────────
 *   <section class="section section--l" data-theme="tinted">
 *     <div class="container">
 *       <!-- .grid, .stack, .cluster, or direct content -->
 *     </div>
 *   </section>
 *
 * Container-query strategy
 * ─────────────────────────
 * .grid declares container-type: inline-size (named "grid") so
 * descendant components can respond to column width, not viewport.
 * Media queries are reserved for true global breakpoints only.
 * ════════════════════════════════════════════════════════════════════ */


@layer layouts {

  /* ════════════════════════════════════════════════════════════════════
     0. Site wrapper — 1920px viewport cap
     ════════════════════════════════════════════════════════════════════
     Prevents full-bleed sections from stretching on ultra-wide monitors.
     Content is still constrained to --content-width (1366px) by .container.
  ── */

  #page {
    max-inline-size: var(--max-viewport-width, 120rem); /* 1920px */
    margin-inline: auto;
  }


  /* ════════════════════════════════════════════════════════════════════
     1. Section — padding only
     ════════════════════════════════════════════════════════════════════ */

  .section {
    padding-block: var(--section-space-m);
    padding-inline: var(--gutter);
  }

  /* ── Size modifiers ── */
  .section--xs  { padding-block: var(--section-space-xs); }
  .section--s   { padding-block: var(--section-space-s); }
  .section--m   { padding-block: var(--section-space-m); }
  .section--l   { padding-block: var(--section-space-l); }
  .section--xl  { padding-block: var(--section-space-xl); }
  .section--2xl { padding-block: var(--section-space-2xl); }

  /* ── Theme modifiers via data-theme attribute ────────────────────────
     data-theme triggers semantic token overrides in tokens.css.
     These rules apply the matching surface background colour.
     Always pair: <section class="section" data-theme="dark">
  ── */
  .section[data-theme="primary"]   { background-color: var(--surface-primary); }
  .section[data-theme="dark"]      { background-color: var(--surface-dark); }
  .section[data-theme="tinted"]    { background-color: var(--surface-tinted); }
  .section[data-theme="secondary"] { background-color: var(--surface-secondary); }


  /* ════════════════════════════════════════════════════════════════════
     2. Container — width constraint only
     ════════════════════════════════════════════════════════════════════ */

  .container {
    max-inline-size: var(--content-width);
    margin-inline: auto;
    inline-size: 100%;
  }

  /* Narrow — articles, forms, reading content (900px) */
  .container--narrow {
    max-inline-size: var(--content-width-narrow);
  }

  /* Wide — data dashboards, full-bleed tables (1600px) */
  .container--wide {
    max-inline-size: var(--content-width-wide);
  }


  /* ════════════════════════════════════════════════════════════════════
     3. Grid
     ════════════════════════════════════════════════════════════════════ */

  .grid {
    display: grid;
    gap: var(--grid-gap);
  }

  /* ── Fixed column grids ── */
  .grid--2 { grid-template-columns: var(--grid-2); }
  .grid--3 { grid-template-columns: var(--grid-3); }
  .grid--4 { grid-template-columns: var(--grid-4); }

  /* ── Responsive auto-grids (RAM pattern) ── */
  .grid--auto   { grid-template-columns: var(--auto-grid-m); }
  .grid--auto-s { grid-template-columns: var(--auto-grid-s); }
  .grid--auto-m { grid-template-columns: var(--auto-grid-m); }
  .grid--auto-l { grid-template-columns: var(--auto-grid-l); }

  /* ── Named structural layouts ── */
  .grid--sidebar-left  { grid-template-columns: var(--grid-sidebar-left); }
  .grid--sidebar-right { grid-template-columns: var(--grid-sidebar-right); }
  .grid--cards         { grid-template-columns: var(--auto-grid-m); }

  /* ── Responsive collapse via media queries ─────────────────────────
     Container queries removed: .grid carries no container-name.
     Per project rules, named containers belong to component wrappers
     only (.card-grid, .nav-wrapper, etc.), not global layout primitives.
  ── */

  /* 3 and 4 col → 2 col at tablet */
  @media (max-width: 64em) {
    .grid--3,
    .grid--4 {
      grid-template-columns: var(--grid-2);
    }
  }

  /* All fixed grids → single column at phone */
  @media (max-width: 40em) {
    .grid--2,
    .grid--3,
    .grid--4 {
      grid-template-columns: var(--grid-1);
    }
  }

  /* Sidebar grids collapse at tablet */
  @media (max-width: 48em) {
    .grid--sidebar-left,
    .grid--sidebar-right {
      grid-template-columns: var(--grid-1);
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     3. Layout primitives
     ════════════════════════════════════════════════════════════════════ */

  /* ── Stack — vertical spacing via flex gap ── */

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
  }

  /* ── Stack gap modifiers ── */
  .stack--0   { gap: 0; }
  .stack--2xs { gap: var(--space-2xs); }
  .stack--xs  { gap: var(--space-xs); }
  .stack--s   { gap: var(--space-s); }
  .stack--m   { gap: var(--space-m); }
  .stack--l   { gap: var(--space-l); }
  .stack--xl  { gap: var(--space-xl); }
  .stack--2xl { gap: var(--space-2xl); }

  /* ── Cluster — horizontal wrapping group ── */

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap);
    align-items: center;
  }

  /* ── Sidebar layout primitive ─────────────────────────────────────
     Intrinsic responsive: .sidebar__aside keeps its ideal width
     until the container is too narrow, then both items go full width.
     No media queries needed.
  ── */

  .sidebar {
    container-type: inline-size;
    container-name: sidebar-layout;
    display: flex;
    flex-wrap: wrap;
    gap: var(--container-gap);
  }

  /* The fixed-width rail (navigation, filters, etc.) */
  .sidebar__aside {
    flex-basis: var(--sidebar-width);
    flex-grow: 1;
    min-inline-size: 0;
  }

  /* The flexible main content area */
  .sidebar__content {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
  }

  /* Two-column layout: main content + sidebar (sector nav, etc.) */
  .layout-with-sidebar {
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: var(--container-gap);
  }

  .layout-with-sidebar__main {
    min-inline-size: 0;
  }

  .layout-with-sidebar__aside {
    min-inline-size: 0;
  }

  @media (max-width: 48em) {
    .layout-with-sidebar {
      grid-template-columns: 1fr;
    }
  }


}