/* ==========================================================================
   layout.css — Layout primitives (prefix: l-)
   --------------------------------------------------------------------------
   Content-agnostic building blocks that position things but don't style
   them: page container, section spacing, grids, splits, stacks and clusters.
   Components (components.css) go *inside* these; they never set their own
   outer width or page margins.
   ========================================================================== */

@layer layout {
  /* Centered page column with a fluid side gutter (16px minimum on phones) */
  .l-container {
    width: 100%;
    max-width: calc(var(--width-content) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .l-container--narrow {
    max-width: calc(var(--width-narrow) + 2 * var(--gutter));
  }

  /* Vertical rhythm between page sections */
  .l-section {
    padding-block: var(--space-section);
  }

  .l-section--alt {
    background-color: var(--color-bg-alt);
  }

  .l-section--tight {
    padding-block: calc(var(--space-section) * 0.6);
  }

  /* Flow spacing: consistent gap between stacked children */
  .l-stack > * + * {
    margin-top: var(--stack-gap, var(--space-s));
  }

  .l-stack--l {
    --stack-gap: var(--space-l);
  }

  .l-stack--xl {
    --stack-gap: var(--space-xl);
  }

  /* Wrapping horizontal group (buttons, chips) */
  .l-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-s));
  }

  /* Auto-fitting card grid: as many columns as fit at --grid-min each.
     min(100%, …) prevents overflow on very narrow screens. */
  .l-grid {
    padding: 0; /* grids are often <ul>s: drop list indentation/bullets */
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 18rem)), 1fr));
    gap: var(--grid-gap, var(--space-m));
  }

  .l-grid--wide {
    --grid-min: 22rem;
  }

  .l-grid--narrow {
    --grid-min: 14rem;
  }

  /* Two-column split that stacks below 56em */
  .l-split {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
  }

  @media (min-width: 56em) {
    .l-split {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2xl);
    }

    .l-split--wide-start {
      grid-template-columns: 3fr 2fr;
    }

    .l-split--wide-end {
      grid-template-columns: 2fr 3fr;
    }

    .l-split--top {
      align-items: start;
    }
  }
}