/*
 * layout.css — Firmeza Design System
 *
 * Structural primitives only — no visual opinions.
 * Handles space, grid, flex, and positioning.
 *
 * Sections:
 *   1. Container system
 *   2. Section wrappers
 *   3. CSS Grid system
 *   4. Flex utilities
 *   5. Stack + Cluster + Sidebar primitives
 *   6. Navbar shell
 *   7. Footer shell
 *   8. Skip link (a11y)
 *   9. Aspect ratio helpers
 */

/* ── 1. Container system ─────────────────────────────────────────────── */

.container {
  width:         100%;
  max-width:     var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.container--xs      { max-width: var(--container-xs); }
.container--sm      { max-width: var(--container-sm); }
.container--md      { max-width: var(--container-md); }
.container--lg      { max-width: var(--container-lg); }
.container--wide    { max-width: var(--container-2xl); }
.container--full    { max-width: var(--container-full); }
.container--bleed   { max-width: 100%; padding-inline: 0; }

/* ── 2. Section wrappers ─────────────────────────────────────────────── */

.section {
  padding-block: var(--section-gap);
  position:      relative;
}

.section--sm  { padding-block: var(--section-gap-sm); }
.section--lg  { padding-block: var(--section-gap-lg); }
.section--xl  { padding-block: var(--section-gap-xl); }
.section--none{ padding-block: 0; }

/* ── 3. CSS Grid system ──────────────────────────────────────────────── */

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

.grid--gap-sm { gap: var(--grid-gap-sm); }
.grid--gap-lg { gap: var(--grid-gap-lg); }
.grid--no-gap { gap: 0; }

/* Explicit column counts */
.grid--1  { grid-template-columns: repeat(1,  1fr); }
.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--6  { grid-template-columns: repeat(6,  1fr); }
.grid--12 { grid-template-columns: repeat(12, 1fr); }

/* Auto-fit responsive grid */
.grid--auto-sm  { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.grid--auto     { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--auto-lg  { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }

/* Column spans */
.col-span-1  { grid-column: span 1;  }
.col-span-2  { grid-column: span 2;  }
.col-span-3  { grid-column: span 3;  }
.col-span-4  { grid-column: span 4;  }
.col-span-5  { grid-column: span 5;  }
.col-span-6  { grid-column: span 6;  }
.col-span-7  { grid-column: span 7;  }
.col-span-8  { grid-column: span 8;  }
.col-span-9  { grid-column: span 9;  }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }
.col-full    { grid-column: 1 / -1;  }

/* Row spans */
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }

/* Placement */
.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-7  { grid-column-start: 7; }

/* ── 4. Flex utilities ───────────────────────────────────────────────── */

.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.flex-row      { flex-direction: row; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-reverse  { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

.self-start   { align-self: flex-start; }
.self-center  { align-self: center; }
.self-end     { align-self: flex-end; }
.self-stretch { align-self: stretch; }

.flex-1     { flex: 1; }
.flex-auto  { flex: auto; }
.flex-none  { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }

/* Gap */
.gap-1   { gap: var(--space-1);  }
.gap-2   { gap: var(--space-2);  }
.gap-3   { gap: var(--space-3);  }
.gap-4   { gap: var(--space-4);  }
.gap-5   { gap: var(--space-5);  }
.gap-6   { gap: var(--space-6);  }
.gap-8   { gap: var(--space-8);  }
.gap-10  { gap: var(--space-10); }
.gap-12  { gap: var(--space-12); }
.gap-16  { gap: var(--space-16); }

.gap-x-4  { column-gap: var(--space-4); }
.gap-x-6  { column-gap: var(--space-6); }
.gap-x-8  { column-gap: var(--space-8); }
.gap-y-4  { row-gap:    var(--space-4); }
.gap-y-6  { row-gap:    var(--space-6); }
.gap-y-8  { row-gap:    var(--space-8); }

/* ── 5. Stack / Cluster / Sidebar layout primitives ──────────────────── */

/* Stack — vertical rhythm via gap */
.stack {
  display:        flex;
  flex-direction: column;
}

.stack--1   { gap: var(--space-1);  }
.stack--2   { gap: var(--space-2);  }
.stack--3   { gap: var(--space-3);  }
.stack--4   { gap: var(--space-4);  }
.stack--6   { gap: var(--space-6);  }
.stack--8   { gap: var(--space-8);  }
.stack--10  { gap: var(--space-10); }
.stack--12  { gap: var(--space-12); }

/* Cluster — flex row that wraps */
.cluster {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-3);
  align-items: center;
}

/* Sidebar — content + narrower aside */
.sidebar-layout {
  display: flex;
  gap:     var(--space-12);
  align-items: flex-start;
}

.sidebar-layout__main  { flex: 1; min-width: 0; }
.sidebar-layout__aside { flex-shrink: 0; width: 320px; }

/* ── 6. Navbar shell ─────────────────────────────────────────────────── */

/* Structural position only — visual styles in components.css */
#site-header {
  position: fixed;
  top:      0;
  left:     0;
  right:    0;
  z-index:  var(--z-navbar);
  height:   var(--navbar-height);
}

#navbar {
  height:           100%;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding-inline:   var(--container-px);
  max-width:        var(--container-2xl);
  margin-inline:    auto;
}

/* Offset main content below fixed navbar */
#main {
  padding-top: var(--navbar-height);
}

/* ── 7. Footer shell ─────────────────────────────────────────────────── */

#site-footer {
  width:           100%;
  margin-top:      auto;
}

/* ── 8. Skip link (a11y) ─────────────────────────────────────────────── */

.skip-link {
  position:      absolute;
  top:           -100%;
  left:          var(--space-4);
  z-index:       var(--z-cursor);
  padding:       var(--space-2) var(--space-5);
  background:    var(--color-brand-600);
  color:         var(--color-white);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-semibold);
  border-radius: var(--radius-md);
  transition:    top var(--duration-fast) var(--ease-out);
  white-space:   nowrap;
}

.skip-link:focus {
  top: var(--space-4);
}

/* ── 9. Aspect ratio helpers ─────────────────────────────────────────── */

.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-video    { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-wide     { aspect-ratio: 21 / 9; }
.aspect-cinema   { aspect-ratio: 2.35 / 1; }