/* Compositions: Every Layout primitives. Layout only, no colour or type. */

/* Each stack declares its own default so an outer --stack-space is not
   inherited by the stacks nested inside it, and spaces its children with gap,
   resolved on the stack itself: a child margin would read the child's own
   value when the child is a stack too. Spacing is chosen with a modifier
   class, never a style attribute: the production CSP blocks those. */
.stack {
  --stack-space: var(--space-s);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--stack-space);
}

.stack--3xs { --stack-space: var(--space-3xs); }
.stack--2xs { --stack-space: var(--space-2xs); }
.stack--s { --stack-space: var(--space-s); }
.stack--l { --stack-space: var(--space-l); }
.stack--xl { --stack-space: var(--space-xl); }

.center {
  box-sizing: content-box;
  max-inline-size: var(--center-measure, var(--container));
  margin-inline: auto;
  padding-inline: var(--center-padding, var(--space-s));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-space, var(--space-s));
  justify-content: var(--cluster-justify, flex-start);
  align-items: var(--cluster-align, center);
}

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

/* Grid: as many equal columns as fit at --grid-min wide, one column when
   even one does not fit. */
.grid {
  display: grid;
  gap: var(--grid-space, var(--space-m));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
}