/* ==========================================================================
   Layer 5: Layout primitives — Every Layout / cu.css inspired
   Intrinsic, composable, zero media queries
   ========================================================================== */

/* --- Wrapper (max-width + fluid padding) --- */
.wrapper {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-gutter);
}

/* --- Region (section-level vertical padding) --- */
.region {
  padding-block: var(--space-l-2xl);
}

.region-sm {
  padding-block: var(--space-s-l);
}

/* --- Stack (vertical spacing) --- */
.stack {
  display: flex;
  flex-direction: column;
}

.stack > * + * {
  margin-block-start: var(--space-s, 1rem);
}

.stack-sm > * + * { margin-block-start: var(--space-xs); }
.stack-lg > * + * { margin-block-start: var(--space-l); }
.stack-xl > * + * { margin-block-start: var(--space-xl); }

/* --- Cluster (inline wrapping with gap) --- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gutter);
  align-items: center;
}

/* --- Center (centered content) --- */
.center {
  box-sizing: content-box;
  max-width: var(--measure, 65ch);
  margin-inline: auto;
}

.center-text {
  text-align: center;
}

.center-text > * {
  margin-inline: auto;
}

/* --- Sidebar (two-panel, responsive) --- */
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gutter);
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-width, 20rem);
  flex-grow: 1;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-min, 50%);
}

/* --- Switcher (horizontal → vertical based on width) --- */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gutter);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}

/* --- Grid --- */
.grid {
  display: grid;
  gap: var(--grid-gutter);
}

/* Auto-fit (responsive without breakpoints) */
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
}

/* Fixed column grids */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --- Repel (push to opposite ends) --- */
.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--grid-gutter);
}