/* ==========================================================================
   Layout — composition primitives (stack, cluster, center, grid)
   ========================================================================== */

@layer modules {
  .stack { display: flex; flex-direction: column; }
  .stack > * + * { margin-block-start: var(--stack-space, var(--space-4)); }
  .stack-sm > * + * { margin-block-start: var(--space-3); }
  .stack-md > * + * { margin-block-start: var(--space-6); }
  .stack-lg > * + * { margin-block-start: var(--space-8); }
  .stack-xl > * + * { margin-block-start: var(--space-12); }

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

  .center {
    margin-inline: auto;
    max-inline-size: var(--center-max-width, var(--section-max-width));
    padding-inline: var(--center-gutter, var(--space-6));
  }
  .center-narrow { --center-max-width: 40rem; }
  .center-wide   { --center-max-width: 80rem; }

  .wrapper {
    inline-size: 100%;
    max-inline-size: 96rem;
    margin-inline: auto;
    padding-inline: var(--space-6);
  }

  .grid { display: grid; gap: var(--grid-gap, var(--space-4)); }

  .grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 18rem), 1fr));
  }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }

  @media (max-width: 48rem) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
  }

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