/* layout.css — container, section spacing, flow, flex/grid utilities (engineering skill §6). */

.container {
  max-inline-size: 1280px;
  padding-inline: clamp(16px, 4vw, 40px);
  margin-inline: auto;
  inline-size: 100%;
}
.container--narrow { max-inline-size: 800px; }

.section     { padding-block: var(--space-3xl); }
.section--sm { padding-block: var(--space-xl); }

.flow > * + *     { margin-block-start: var(--space-md); }
.flow--lg > * + * { margin-block-start: var(--space-xl); }

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}