/* =============================================================================
   NEXUS — Layout primitives
   Composable, unopinionated containers. Every component is built from these;
   none of them carry colour or decoration.
   ========================================================================== */

@layer layout {
  /* Page frame: masthead, content, footer — footer always sits at the base. */
  body {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* ---------------------------------------------------------------------
     Container — horizontal measure and gutters.
     ------------------------------------------------------------------ */
  .container {
    inline-size: 100%;
    max-inline-size: var(--width-content);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container[data-width="wide"] {
    max-inline-size: var(--width-wide);
  }

  .container[data-width="narrow"] {
    max-inline-size: var(--width-narrow);
  }

  .container[data-width="prose"] {
    max-inline-size: var(--width-prose);
  }

  /* ---------------------------------------------------------------------
     Section — vertical rhythm between page regions.
     ------------------------------------------------------------------ */
  .section {
    position: relative;
    padding-block: var(--space-section);
  }

  .section[data-size="lg"] {
    padding-block: var(--space-section-lg);
  }

  .section[data-size="sm"] {
    padding-block: calc(var(--space-section) / 1.75);
  }

  /* Hairline that fades at both ends, marking a change of subject. */
  .section[data-rule="top"]::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 1px;
    background-image: var(--gradient-rule);
  }

  /* ---------------------------------------------------------------------
     Stack — one-dimensional flow. Consumers set --stack-gap.
     ------------------------------------------------------------------ */
  .stack {
    display: grid;
    align-content: start;
    gap: var(--stack-gap, var(--space-6));
  }

  /* ---------------------------------------------------------------------
     Cluster — inline group that wraps gracefully.
     ------------------------------------------------------------------ */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-4));
  }

  /* ---------------------------------------------------------------------
     Grid — column count derived from available space, never from a
     breakpoint. Consumers set --grid-min.
     ------------------------------------------------------------------ */
  .grid {
    display: grid;
    gap: var(--grid-gap, var(--space-6));
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--grid-min, 18rem), 100%), 1fr)
    );
  }

  /* ---------------------------------------------------------------------
     Rule — standalone divider.
     ------------------------------------------------------------------ */
  .rule {
    block-size: 1px;
    background-color: transparent;
    background-image: var(--gradient-rule);
  }
}