/* Layout Primitives
 * Reusable layout patterns: stack, center, sidebar, cluster.
 * Based on Every Layout patterns adapted for Rails.
 */

/* Stack — vertical flow with consistent spacing */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
}

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

/* Center — constrained width centered content */
.center {
  max-width: clamp(320px, 90vw, 1200px);
  margin-inline: auto;
  padding-inline: var(--inline-space-l);
}

.center--narrow {
  max-width: 65ch;
}

.center--wide {
  max-width: 1400px;
}

/* Sidebar layout — main + sidebar, collapses on small screens */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--inline-space-l);

  & > :first-child {
    flex: 1;
    min-width: 60%;
  }

  & > :last-child {
    flex-basis: 16rem;
    flex-grow: 1;
  }
}

/* Cluster — horizontal flow that wraps */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--inline-space);
}

.cluster--s { gap: var(--inline-space-s); }
.cluster--l { gap: var(--inline-space-l); }

/* Page container — full page with nav + main + footer */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;

  & > main {
    flex: 1;
    padding-block: var(--block-space-l);
  }
}

/* Section spacing */
.section {
  padding-block: var(--block-space-l);

  & + .section {
    border-block-start: 1px solid var(--color-border);
  }
}

/* Grid auto-fill — responsive grid without media queries */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--inline-space-l);
}