/* ============================================================================
 * layout.css  --  Container widths + grid + structural primitives
 *
 * Project: EFI / Experiencer Team -- unified UI shell
 * Owner:   /srv/efi-unified-ui/static/css/layout.css
 * Served:  https://forum.experiencerteam.com/shared/css/layout.css
 * Loaded:  After base.css, before components.css.
 *
 * --------------------------------------------------------------------------
 * Algorithm summary
 * --------------------------------------------------------------------------
 *   Layout primitives only -- no colors, no typography, no component skin.
 *   Coverage scope:
 *
 *     1. .container variants -- centered max-width wrappers (narrow / default
 *        / wide), with consistent horizontal gutter.
 *     2. .stack-* -- vertical rhythm helpers (one direct-child margin
 *        applied via gap or margin-top selector).
 *     3. .row + .col-* -- a small flex-based 12-column grid (no third-party
 *        framework).
 *     4. .grid-* -- CSS-grid presets for common N-column layouts.
 *     5. .page-section -- vertical-rhythm wrapper for top-level page sections
 *        between the nav and the footer.
 *
 *   Names chosen NOT to collide with any existing class name in apex
 *   site.css or forum brand-experiencer.css. Existing layout classes
 *   (.container is the only collision and is semantically identical) stay
 *   wherever they are; deployment-specific brand files keep winning the
 *   cascade for their existing .container width values.
 * ============================================================================ */


/* --- 1. Container variants ---------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.container-narrow {
  width: 100%;
  max-width: var(--max-width-narrow);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.container-wide {
  width: 100%;
  max-width: var(--max-width-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.container-fluid {
  width: 100%;
  padding-inline: var(--space-4);
}


/* --- 2. Vertical-rhythm stacks ----------------------------------------- */
/* A stack puts equal space between every direct child. Useful for forms +
 * lists of cards. Use --stack-space to override the per-instance gap. */
.stack > * + * {
  margin-top: var(--stack-space, var(--space-3));
}
.stack-tight > * + * { margin-top: var(--space-2); }
.stack-loose > * + * { margin-top: var(--space-5); }


/* --- 3. Flex row + 12-column grid -------------------------------------- */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.row-tight { gap: var(--space-2); }
.row-loose { gap: var(--space-5); }

.col       { flex: 1 1 0; min-width: 0; }
.col-auto  { flex: 0 0 auto; }
.col-2     { flex: 0 0 calc((100% / 12) * 2  - var(--space-4)); }
.col-3     { flex: 0 0 calc((100% / 12) * 3  - var(--space-4)); }
.col-4     { flex: 0 0 calc((100% / 12) * 4  - var(--space-4)); }
.col-5     { flex: 0 0 calc((100% / 12) * 5  - var(--space-4)); }
.col-6     { flex: 0 0 calc((100% / 12) * 6  - var(--space-4)); }
.col-7     { flex: 0 0 calc((100% / 12) * 7  - var(--space-4)); }
.col-8     { flex: 0 0 calc((100% / 12) * 8  - var(--space-4)); }
.col-9     { flex: 0 0 calc((100% / 12) * 9  - var(--space-4)); }
.col-10    { flex: 0 0 calc((100% / 12) * 10 - var(--space-4)); }
.col-12    { flex: 0 0 100%; }


/* --- 4. CSS-grid presets ----------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-4);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto-fit-sm {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.grid-auto-fit-md {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid-auto-fit-lg {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}


/* --- 5. Page-section + main padding ------------------------------------ */
.page-section {
  padding-block: var(--space-7);
}
.page-section-tight { padding-block: var(--space-5); }
.page-section-loose { padding-block: var(--space-9); }

main {
  /* Reserve space for the fixed nav so first-paint content isn't underneath
   * it. Deployments with no fixed nav can override locally. */
  padding-top: var(--nav-height);
}


/* --- 6. Sticky footer pattern ------------------------------------------ */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app-shell-main {
  flex: 1 0 auto;
}
.app-shell-footer {
  flex-shrink: 0;
}


/* --- 7. Responsive collapses ------------------------------------------- */
@media (max-width: 720px) {
  .row > [class^='col-'] {
    flex-basis: 100%;
  }
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}


/* End of layout.css */