/*
 * Layout
 * Container, grid, sections, and structural components
 */

@layer modules {
  /* ===== SITE CHROME (header/footer) ===== */

  header, footer {
    text-shadow: 0 0 10px oklch(var(--lch-white) / 80%), 0 0 20px oklch(var(--lch-white) / 60%);
  }

  header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-nav);
  }

  footer {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: var(--z-nav);
  }

  /* ===== PAGE CONTENT ===== */

  .page-main {
    position: relative;
    z-index: var(--z-content);
    padding-block: calc(var(--block-space) * 4);
    padding-inline: var(--block-space);
    text-align: left;
    min-block-size: 100vh;

    @media (min-width: 48rem) {
      padding-block: calc(var(--block-space) * 4) calc(var(--block-space) * 5);
      padding-inline: var(--block-space-double);
    }
  }

  .page-content {
    max-inline-size: var(--content-width);
    text-align: left;
  }

  /* ===== CONTAINER ===== */

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

  .container--md {
    max-width: var(--content-width-md);
  }

  .container--prose {
    max-width: var(--content-width-prose);
  }

  .container--sm {
    max-width: var(--content-width-sm);
  }

  .container--xs {
    max-width: var(--content-width-xs);
  }

  /* ===== SECTION SPACING ===== */

  .section {
    padding-block: calc(var(--block-space) * 4);
  }

  .section--sm {
    padding-block: var(--block-space-double);
  }

  .section--lg {
    padding-block: calc(var(--block-space) * 5);
  }

  .section--xl {
    padding-block: calc(var(--block-space) * 6);
  }

  /* ===== GRIDS ===== */

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

  .grid--cols-2 {
    grid-template-columns: repeat(1, 1fr);
  }

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

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

  @media (min-width: 640px) {
    .grid--cols-2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .grid--cols-3 {
      grid-template-columns: repeat(2, 1fr);
    }

    .grid--cols-4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1280px) {
    .grid--cols-3 {
      grid-template-columns: repeat(3, 1fr);
    }

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

  /* Horizontal scroll on mobile, regular grid on desktop */
  .grid--scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    & > * {
      flex: 0 0 75%;
      scroll-snap-align: start;
    }
  }

  @media (min-width: 640px) {
    .grid--scroll {
      display: grid;
      overflow-x: visible;
      scroll-snap-type: none;

      & > * {
        flex: none;
      }
    }
  }

  /* Grid gap variants */
  .grid--gap-sm {
    gap: var(--block-space);
  }

  .grid--gap-lg {
    gap: calc(var(--block-space) * 3);
  }

  /* ===== STACK (vertical spacing) ===== */

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

  .stack--sm {
    gap: var(--block-space-half);
  }

  .stack--lg {
    gap: var(--block-space-double);
  }

  .stack--xl {
    gap: calc(var(--block-space) * 3);
  }

  /* ===== CLUSTER (horizontal group) ===== */

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

  .cluster--sm {
    gap: var(--block-space-half);
  }

  .cluster--lg {
    gap: var(--block-space-double);
  }

  .cluster--nowrap {
    flex-wrap: nowrap;
  }

  /* ===== TWO-COLUMN SPLIT ===== */

  .two-col {
    display: grid;
    gap: var(--block-space-double);

    @media (min-width: 48rem) {
      grid-template-columns: 1fr 1fr;
      gap: calc(var(--block-space) * 3);
    }
  }

  /* ===== CENTER CONTENT ===== */

  .center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* ===== STICKY POSITIONING ===== */

  .sticky-top {
    position: sticky;
    top: var(--block-space-double);
  }

  /* ===== ASPECT RATIO ===== */

  .aspect-square {
    aspect-ratio: 1 / 1;
  }
}