/* ============================================================
   utilities.css — Single-purpose helpers (8px spacing scale)
   ============================================================ */

/* ---- Grid ---- */
.grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Text ---- */
.text-center { text-align: center; }
.text-small { font-size: var(--fs-small); }
.maxw-measure { max-width: var(--measure); }

/* ---- Margin top ---- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }

/* ---- Margin bottom ---- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-7 { margin-bottom: var(--sp-7); }

/* ---- Margin block (vertical) ---- */
.my-5 { margin-block: var(--sp-5); }
.my-6 { margin-block: var(--sp-6); }
.my-7 { margin-block: var(--sp-7); }

/* ---- Padding ---- */
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }

/* ---- Display ---- */
.hidden { display: none; }
.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;
}