/* =============================================================================
   Cartopian Web - Responsive Layout Grid
   -----------------------------------------------------------------------------
   Breakpoints:
     - Phone:   < 40rem   (< 640px)
     - Tablet:  >= 40rem  (>= 640px)
     - Desktop: >= 64rem  (>= 1024px)
     - Wide:    >= 80rem  (>= 1280px)

   Keep layout spacing connected to css/tokens.css. Breakpoint values are
   literal because CSS custom properties cannot be used in media queries.
   ============================================================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.layout-container {
  width: min(calc(100% - var(--layout-gutter) - var(--layout-gutter)), var(--layout-container-max));
  margin-inline: auto;
}

.layout-container--narrow {
  --layout-container-max: var(--container-md);
}

.layout-container--content {
  --layout-container-max: var(--container-lg);
}

.layout-container--wide {
  --layout-container-max: var(--container-2xl);
}

.layout-section {
  padding-block: var(--layout-section-y);
}

.layout-section--compact {
  padding-block: var(--layout-section-y-compact);
}

.layout-section--spacious {
  padding-block: var(--layout-section-y-spacious);
}

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

.layout-stack--tight {
  gap: var(--space-3);
}

.layout-stack--loose {
  gap: var(--layout-gap-lg);
}

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

.layout-cluster--between {
  justify-content: space-between;
}

.layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--layout-gap);
}

.layout-grid--tight {
  gap: var(--space-4);
}

.layout-grid--loose {
  gap: var(--layout-gap-lg);
}

.layout-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-grid-min)), 1fr));
}

.layout-grid--2,
.layout-grid--3,
.layout-grid--4 {
  grid-template-columns: minmax(0, 1fr);
}

.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--layout-gap-lg);
  align-items: start;
}

.layout-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--layout-gap-lg);
  align-items: start;
}

.layout-span-full {
  grid-column: 1 / -1;
}

:root {
  --layout-container-max: var(--container-xl);
  --layout-gutter: var(--space-4);
  --layout-section-y: var(--space-12);
  --layout-section-y-compact: var(--space-8);
  --layout-section-y-spacious: var(--space-16);
  --layout-gap: var(--space-6);
  --layout-gap-lg: var(--space-8);
  --layout-grid-min: 18rem;
}

/* Phone breakpoint: default one-column layouts with compact gutters. */
@media (max-width: 39.999rem) {
  :root {
    --layout-gutter: var(--space-4);
    --layout-section-y: var(--space-12);
    --layout-section-y-compact: var(--space-8);
    --layout-section-y-spacious: var(--space-16);
    --layout-gap: var(--space-6);
    --layout-gap-lg: var(--space-8);
  }
}

/* Tablet breakpoint: content gains larger gutters and two-column options. */
@media (min-width: 40rem) {
  :root {
    --layout-gutter: var(--space-6);
    --layout-section-y: var(--space-16);
    --layout-section-y-compact: var(--space-10);
    --layout-section-y-spacious: var(--space-20);
  }

  .layout-grid--2,
  .layout-grid--3,
  .layout-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout-tablet-span-2 {
    grid-column: span 2;
  }
}

/* Desktop breakpoint: full grid counts and split/sidebar layouts activate. */
@media (min-width: 64rem) {
  :root {
    --layout-gutter: var(--space-8);
    --layout-section-y: var(--space-20);
    --layout-section-y-compact: var(--space-12);
    --layout-section-y-spacious: var(--space-24);
    --layout-gap: var(--space-8);
    --layout-gap-lg: var(--space-10);
  }

  .layout-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .layout-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .layout-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout-sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }

  .layout-sidebar--reverse {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }

  .layout-desktop-span-2 {
    grid-column: span 2;
  }

  .layout-desktop-span-3 {
    grid-column: span 3;
  }
}

/* Wide breakpoint: cap large editorial sections while preserving desktop rhythm. */
@media (min-width: 80rem) {
  .layout-grid--wide-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout-grid--wide-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}