/* ---------- 1. Grid Utilities ---------- */
.grid {
  display: grid;
}

/* Responsive column helpers (auto‑fit) */
.grid-cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

/* Flow + gap */
.gap-xs { gap: 0.5rem; }
.gap-sm { gap: 1rem; }
.gap-md { gap: 1.5rem; }
.gap-lg { gap: 2rem; }

/* Place content / items utilities */
.place-center { place-content: center; }

/* ---------- 2. Flex Utilities ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* Responsive stack: switches to column under 800px */
.stack-lg {
  display: flex;
  gap: 2rem;
}
@media (max-width: 800px) {
  .stack-lg { flex-direction: column; }
}

/* ---------- 3. Section Spacing ---------- */
.section {
  padding-block: 4rem;
}
.section-narrow {
  padding-block: 2rem;
}

/* Container sizing — reuse .container from base.css */
.section > .container {
  display: inherit; /* inherit grid/flex if parent has it */
}