/* ============================================================================
   Escape Velocity — utilities layer
   ----------------------------------------------------------------------------
   Responsive layout helpers. Opt-in; compose with components.

   LOAD ORDER: tokens.css → base.css → components.css → utilities.css
   Breakpoints: 640/768/1024/1280, mobile-first. See base.css header.
   ========================================================================== */

/* ── Grids ────────────────────────────────────────────────────────────────── */
/* Auto-fit: as many columns as fit at >=280px, else fewer. No breakpoints. */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

/* Fixed-column grids that collapse to one column on small screens. */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ── Flex helpers ─────────────────────────────────────────────────────────── */
.row  { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.col  { display: flex; flex-direction: column; gap: 16px; }

/* ── Vertical rhythm ──────────────────────────────────────────────────────── */
.flow > * + * { margin-top: 1rem; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.stack-md { display: flex; flex-direction: column; gap: 16px; }
.stack-lg { display: flex; flex-direction: column; gap: 32px; }

/* ── Visibility by breakpoint (mobile-first) ──────────────────────────────── */
/* Hide at <=640px. */
@media (max-width: 640px) { .hide-sm { display: none !important; } }
/* Show only at >=768px. */
.show-md-up { display: none; }
@media (min-width: 768px) { .show-md-up { display: revert; } }

/* ── Text helpers ─────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.measure { max-width: 65ch; }

/* ── Accessibility ────────────────────────────────────────────────────────── */
/* Visually hidden but available to screen readers (e.g. ✓/– cell labels). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}