/* ============================================================
   layout.css — container, grid, section spacing, flex utilities.
   Native CSS Grid + Flexbox. Mobile-first. No framework grid.
   ============================================================ */

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

/* ---- Section spacing + alternating light backgrounds ---- */
.section     { padding-block: var(--space-3xl); }
.section--sm { padding-block: var(--space-xl); }
.section--lg { padding-block: calc(var(--space-3xl) * 1.5); }

.section--surface { background-color: var(--color-surface); }

/* ---- Grids — mobile-first, collapse to 1 column on small screens ---- */
.grid-auto {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 576px) {
  .grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .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: 992px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Two-column content/media split */
.grid-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 992px) {
  .grid-split { grid-template-columns: 1fr 1fr; }
  .grid-split--media-end { direction: ltr; }
}

/* Sidebar layout */
.grid-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 992px) {
  .grid-sidebar { grid-template-columns: 1fr 320px; }
}

/* ---- Flow spacing (lobotomized owl) ---- */
.flow > * + *     { margin-block-start: var(--space-md); }
.flow--lg > * + * { margin-block-start: var(--space-xl); }
.flow--sm > * + * { margin-block-start: var(--space-sm); }

/* ---- Flex utilities ---- */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.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; }
.items-center { align-items: center; }
.gap-sm       { gap: var(--space-sm); }
.gap-md       { gap: var(--space-md); }
.gap-lg       { gap: var(--space-lg); }