/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.section {
  padding-block: var(--section-space);
  position: relative;
}

.section--tight { padding-block: calc(var(--section-space) * 0.6); }
.section--subtle { background: var(--color-bg-subtle); }
.section--tint { background: var(--color-bg-tint); }

.section--inverse {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse-muted);
}
.section--inverse :is(h1, h2, h3, h4) { color: var(--color-text-inverse); }

/* Vertical rhythm */
.stack > * + * { margin-top: var(--stack-space, var(--space-4)); }
.stack--sm { --stack-space: var(--space-2); }
.stack--lg { --stack-space: var(--space-8); }

/* Responsive auto grid */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-6));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
}

.grid--2 { --grid-min: 22rem; }
.grid--3 { --grid-min: 17rem; }
.grid--4 { --grid-min: 13rem; }

@media (min-width: 960px) {
  .grid--3.grid--fixed { grid-template-columns: repeat(3, 1fr); }
  .grid--2.grid--fixed { grid-template-columns: repeat(2, 1fr); }
}

/* Two-column split */
.split {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .split--wide-start { grid-template-columns: 1.1fr 0.9fr; }
  .split--wide-end { grid-template-columns: 0.9fr 1.1fr; }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-3));
  align-items: center;
}

main { display: block; }