/* Layout primitives. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* Main content column; width set with a modifier from the layout. */
.page {
  flex: 1 0 auto;
  padding-block: var(--space-4);
}

.page__inner {
  max-width: var(--page-narrow);
  margin-inline: auto;
}

.page--wide .page__inner { max-width: var(--page-wide); }
.page--full .page__inner { max-width: none; }

@media (min-width: 768px) {
  .page { padding-block: var(--space-5); }
}

/* Vertical rhythm */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-3));
}

.stack--sm { --stack-gap: var(--space-2); }
.stack--lg { --stack-gap: var(--space-4); }

/* Horizontal group that wraps */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-2));
}

.cluster--lg { --cluster-gap: var(--space-3); }
.cluster--center { justify-content: center; }
.cluster--start { align-items: flex-start; }

/* Two ends of a row */
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Responsive grids: one column on small screens */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-3));
  grid-template-columns: minmax(0, 1fr);
}

.grid--loose { --grid-gap: var(--space-4); }
.grid--wide-gap { --grid-gap: var(--space-5); }

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .span-full { grid-column: 1 / -1; }
}

.grow { flex-grow: 1; min-width: 0; }
.ml-auto { margin-left: auto; }