/* =============================================================
   Layout primitives - the only sanctioned way to lay out content
   on a WebDesign client site. Every section should use one of:

     .stack    vertical rhythm, consistent gap between children
     .cluster  horizontal row that wraps, items stay aligned
     .grid     equal-height multi-column grid (cards, tiles)
     .sidebar  fixed-width rail + flexible content
     .frame    constrained-width container with safe gutters

   Defaults come from _shared/tokens/base.css. Override per
   instance with an inline custom property:

     <div class="stack" style="--stack-space: var(--space-l)">

   Why these and not bespoke CSS per section?
   Alignment bugs (uneven card heights, mismatched gaps,
   off-grid sections) are impossible by construction here.
   The primitive owns the rule; the section just opts in.
   ============================================================= */

/* --- stack ---------------------------------------------------- */
/* Vertical rhythm. Every direct child gets a top margin equal
   to --stack-space. Use for forms, content sections, vertical
   card interiors, anywhere children should sit at a consistent
   vertical distance. */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.stack > * {
  margin-block: 0;
}
.stack > * + * {
  margin-block-start: var(--stack-space);
}

/* --- cluster -------------------------------------------------- */
/* Horizontal row that wraps cleanly. Use for nav links, tag
   chips, button groups, anywhere a wrap shouldn't break
   alignment. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-space);
  justify-content: var(--cluster-justify);
  align-items: var(--cluster-align);
}

/* --- grid ----------------------------------------------------- */
/* Equal-height multi-column grid. THIS is the primitive that
   prevents the case-card-height mismatch we hit on Pharos Lumen.
   grid-auto-rows: 1fr + align-items: stretch forces every cell
   to the row's tallest content. */
.grid {
  display: grid;
  grid-template-columns: var(--grid-cols);
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--grid-gap);
}
.grid > * {
  height: 100%;
  min-inline-size: 0;
}

/* --- sidebar -------------------------------------------------- */
/* Fixed-width sidebar + flexible main content. The sidebar's
   --sidebar-width is its preferred basis; --sidebar-min is the
   min-width below which the content wraps under the sidebar. */
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap);
}
.sidebar > :first-child {
  flex-basis: var(--sidebar-width);
  flex-grow: 1;
}
.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-min);
}

/* --- frame ---------------------------------------------------- */
/* Constrained-width container. Use it as the outermost wrapper
   in every section so all sections share max-width and gutter,
   guaranteeing the page reads as a single grid. */
.frame {
  inline-size: 100%;
  max-inline-size: var(--frame-max);
  margin-inline: auto;
  padding-inline: var(--frame-padding);
  box-sizing: border-box;
}

/* --- modifier: center text in any primitive ------------------ */
.center-text { text-align: center; }

/* --- modifier: collapse stack space at small viewports ------- */
@media (max-width: 600px) {
  .stack { --stack-space: var(--space-s); }
}