/* Purpose: Container, grid, and structural layout utilities. Mobile-first. */

.container {
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-lg); }
.container--wide   { max-width: var(--container-max); }

@media (min-width: 768px)  { :root { --container-pad: var(--space-8); } }
@media (min-width: 1280px) { :root { --container-pad: var(--space-12); } }

/* Section rhythm */
.section { padding-block: var(--space-16); }
@media (min-width: 1024px) { .section { padding-block: var(--space-24); } }
.section--tight { padding-block: var(--space-12); }
.section--band  { background: var(--color-bg-alt); }
.section--dark  { background: var(--color-primary-dark); color: var(--color-text-invert); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-text-invert); }

/* Fluid auto-fit card grid */
.grid { display: grid; gap: var(--grid-gap); }
.grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Flex helpers */
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.stack > * + * { margin-top: var(--space-4); }

/* Section heading row */
.section__head {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: end; justify-content: space-between;
  margin-bottom: var(--space-10);
}
.section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.section__title { margin-top: var(--space-2); }
.section__lead { margin-top: var(--space-3); max-width: 60ch; color: var(--color-text-muted); }