@layer components {
  /* ===================================================
     Layout Grid System – Pillar & Portal Grid
     Version: 2.5  Tokenised + Consolidated (2026)
     Ownership:
     • This file owns shared grid wrappers, spacing and responsive card sizing.
     • card-core.css owns card anatomy; variant files own named card treatments.
     • dashboard-styles.css owns the excluded dashboard grid variants.

     Changes:
     • Updated to v2.5 token standard (full parity with root + all pillars)
     • Cleaner structure and comments
     • All flex/grid behaviour, card sizing, max-width calc,
       mobile stacking, and legacy portal-grid alias preserved 100%
     =================================================== */

  /* Ownership: shared grid wrapper foundations.
     Box-model properties shared by every .pillar-grid/.portal-grid
     instance, including the dashboard's own grid-based variants below —
     these never collide with the dashboard rules, so they stay unscoped. */
  .pillar-grid,
  .portal-grid {
    position: relative;
    overflow-x: hidden;
  }

  /* Ownership: standard pillar-grid wrapper.
     Excludes the dashboard bookmark section, where
     layout/dashboard-styles.css owns a genuinely different
     (grid-based) layout for #section-bookmarks .pillar-grid. */
  .pillar-grid:not(#section-bookmarks *) {
    display: block;
    width: 100%;
    margin: var(--space-md) auto;
    padding: 0;
  }

  /* Ownership: standard portal-grid wrapper.
     Legacy alias: portal-grid behaves identically.
     Excludes .dashboard-portal-grid, which is a genuinely different
     (grid-based) layout owned by layout/dashboard-styles.css. */
  .portal-grid:not(.dashboard-portal-grid) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--grid-gap, var(--space-lg, 1.5rem));
    row-gap: var(--grid-gap, var(--space-lg, 1.5rem));
    width: 100%;
    max-width: var(--grid-max-width, 1100px);
    margin: var(--space-md) auto;
    padding: var(--space-sm) var(--space-md);
  }

  /* Ownership: shared card sizing within standard portal grids.
     Center orphan cards in pillar grids by using flex wrapping. */
  .portal-grid:not(.dashboard-portal-grid) > .gnostic-card {
    flex: 0 1 clamp(var(--grid-card-min, 240px), 28vw, 320px);
    max-width: clamp(var(--grid-card-min, 240px), 28vw, 320px);
  }

  /* Ownership: mobile portrait grid sizing */
  @media (max-width: 767px) and (orientation: portrait) {
    .pillar-grid:not(#section-bookmarks *) {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
    }

    .portal-grid {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
      gap: var(--space-md, 1rem);
      padding: var(--space-sm, 0.5rem) 0.25rem;
    }

    .pillar-grid .portal-grid > .gnostic-card,
    .portal-grid:not(.dashboard-portal-grid) > .gnostic-card {
      flex: 0 1 calc(100% - 0.5rem);
      max-width: calc(100% - 0.5rem);
    }
  }

  /* Ownership: mobile landscape grid sizing */
  @media (max-width: 767px) and (orientation: landscape) {
    .pillar-grid:not(#section-bookmarks *) {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
    }

    .portal-grid {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
      padding-inline: 0.25rem;
      gap: var(--space-md, 1rem);
    }

    .pillar-grid .portal-grid > .gnostic-card,
    .portal-grid:not(.dashboard-portal-grid) > .gnostic-card {
      flex: 0 1 calc(100% - 0.5rem);
      max-width: calc(100% - 0.5rem);
    }
  }

  /* Ownership: tablet portrait grid sizing */
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .pillar-grid:not(#section-bookmarks *),
    .portal-grid {
      max-width: 100%;
    }
  }

  /* Ownership: tablet landscape grid sizing */
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .pillar-grid:not(#section-bookmarks *),
    .portal-grid {
      max-width: 100%;
    }
  }

  /* Ownership: desktop standard-grid sizing.
     Content grids: 3-up cards filling the full container width on desktop.
     Excludes dashboard grids (.dashboard-portal-grid) which manage their own sizing.
     No .pillar-grid ancestor required — catches standalone portal-grids (e.g. community page). */
  @media (min-width: 1025px) {
    .portal-grid:not(.dashboard-portal-grid) {
      max-width: 100%;
    }

    .portal-grid:not(.dashboard-portal-grid) > .gnostic-card {
      flex: 0 1 calc((100% - (2 * var(--grid-gap, var(--space-lg, 1.5rem)))) / 3);
      max-width: calc((100% - (2 * var(--grid-gap, var(--space-lg, 1.5rem)))) / 3);
      min-width: 0;
    }
  }
}