/* ============================================
   LAYOUT — Beyond the Grid
   ============================================
   Grids are a starting point, not a prison.
   These primitives enable creative composition.
   ============================================ */

/* ============================================
   RESET & FOUNDATION
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

:root {
  /* ============================================
     SPACING SCALE — Rhythmic, not arbitrary
     ============================================ */
  --space-3xs:  clamp(0.125rem, 0.05vw + 0.1rem, 0.1875rem);
  --space-2xs:  clamp(0.25rem, 0.1vw + 0.2rem, 0.375rem);
  --space-xs:   clamp(0.5rem, 0.3vw + 0.35rem, 0.75rem);
  --space-s:    clamp(0.75rem, 0.5vw + 0.5rem, 1rem);
  --space-m:    clamp(1rem, 1vw + 0.5rem, 1.5rem);
  --space-l:    clamp(1.5rem, 2vw + 0.5rem, 2.5rem);
  --space-xl:   clamp(2rem, 3vw + 0.5rem, 4rem);
  --space-2xl:  clamp(3rem, 5vw + 1rem, 6rem);
  --space-3xl:  clamp(4rem, 8vw + 1rem, 10rem);
  --space-4xl:  clamp(6rem, 12vw + 1rem, 16rem);

  /* ============================================
     CONTAINER WIDTHS
     ============================================ */
  --container-narrow:  640px;
  --container-regular: 960px;
  --container-wide:    1200px;
  --container-max:     1600px;
  --container-bleed:   100%;

  /* Page gutter */
  --gutter: clamp(1rem, 3vw, 3rem);
}

/* ============================================
   CONTAINERS — Content width control
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container.--narrow  { max-width: var(--container-narrow); }
.container.--regular { max-width: var(--container-regular); }
.container.--wide    { max-width: var(--container-wide); }
.container.--bleed   { max-width: none; padding-inline: 0; }

/* ============================================
   GRIDS — Systematic to Expressive
   ============================================ */

/* --- Swiss Grid: The 12-column foundation --- */
.grid-swiss {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-m);
  padding-inline: var(--gutter);
}

/* --- Auto Grid: Content-driven --- */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 280px), 1fr));
  gap: var(--space-l);
}

/* --- Asymmetric Grid: Deliberate imbalance --- */
.grid-asymmetric {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-l);
}

.grid-asymmetric.--reverse {
  grid-template-columns: 1fr 2fr;
}

.grid-asymmetric.--golden {
  grid-template-columns: 1.618fr 1fr;
}

.grid-asymmetric.--extreme {
  grid-template-columns: 3fr 1fr;
}

/* --- Editorial Grid: Mixed column widths --- */
.grid-editorial {
  display: grid;
  grid-template-columns:
    [full-start] var(--gutter)
    [wide-start] 1fr
    [content-start] min(65ch, 100%)
    [content-end] 1fr
    [wide-end] var(--gutter)
    [full-end];
}

.grid-editorial > * {
  grid-column: content;
}

.grid-editorial > .--wide {
  grid-column: wide;
}

.grid-editorial > .--full {
  grid-column: full;
}

/* --- Masonry-like: CSS columns fallback --- */
.grid-masonry {
  columns: var(--grid-columns, 3);
  column-gap: var(--space-l);
}

.grid-masonry > * {
  break-inside: avoid;
  margin-bottom: var(--space-l);
}

/* --- Cargo-style: Tight table grid --- */
.grid-cargo {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 1px;
  background: var(--color-border);
}

.grid-cargo > * {
  background: var(--color-bg);
  padding: var(--space-m);
}

/* ============================================
   OVERLAP COMPOSITIONS — Z-index play
   ============================================ */
.comp-overlap {
  display: grid;
  grid-template: 1fr / 1fr;
}

.comp-overlap > * {
  grid-area: 1 / 1;
}

.comp-overlap > :nth-child(1) { z-index: 1; }
.comp-overlap > :nth-child(2) { z-index: 2; }
.comp-overlap > :nth-child(3) { z-index: 3; }

/* --- Offset overlap --- */
.comp-offset {
  position: relative;
}

.comp-offset > :nth-child(2) {
  position: absolute;
  top: var(--offset-y, 15%);
  left: var(--offset-x, 60%);
  width: var(--offset-size, 50%);
  z-index: 2;
}

/* ============================================
   SECTION PATTERNS — Full-page blocks
   ============================================ */

/* Hero: Full viewport height */
.section-hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
}

.section-hero.--end {
  justify-content: flex-end;
  padding-bottom: var(--space-3xl);
}

.section-hero.--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/* Spacer section — The Column of Air */
.section-breath {
  padding-block: var(--space-3xl);
}

.section-breath.--massive {
  padding-block: var(--space-4xl);
}

/* Edge-to-edge section */
.section-bleed {
  width: 100vw;
  margin-left: calc(-1 * var(--gutter));
  overflow: hidden;
}

/* Sticky section (for scroll-based reveals) */
.section-sticky {
  position: sticky;
  top: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}

/* ============================================
   FLOW UTILITY — Vertical rhythm
   ============================================ */
.flow > * + * {
  margin-top: var(--flow-gap, var(--space-m));
}

.flow.--tight  { --flow-gap: var(--space-xs); }
.flow.--loose  { --flow-gap: var(--space-xl); }
.flow.--breath { --flow-gap: var(--space-3xl); }

/* ============================================
   FLEX UTILITIES
   ============================================ */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; align-items: center; }
.flex-end    { justify-content: flex-end; }
.gap-xs      { gap: var(--space-xs); }
.gap-s       { gap: var(--space-s); }
.gap-m       { gap: var(--space-m); }
.gap-l       { gap: var(--space-l); }
.gap-xl      { gap: var(--space-xl); }

/* ============================================
   DEPTH — Z-index scale
   ============================================ */
:root {
  --z-below:    -1;
  --z-base:      0;
  --z-above:     1;
  --z-overlay:   10;
  --z-modal:     100;
  --z-toast:     1000;
  --z-max:       9999;
}

/* ============================================
   RESPONSIVE — Breakpoint-driven adjustments
   ============================================ */
@media (max-width: 768px) {
  .grid-swiss {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-asymmetric,
  .grid-asymmetric.--reverse,
  .grid-asymmetric.--golden,
  .grid-asymmetric.--extreme {
    grid-template-columns: 1fr;
  }

  .section-hero.--split {
    grid-template-columns: 1fr;
  }

  .grid-masonry {
    columns: 1;
  }

  .grid-cargo {
    --cols: 1;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .grid-swiss {
    grid-template-columns: repeat(8, 1fr);
  }

  .grid-masonry {
    columns: 2;
  }
}