/* utilities.css */
@layer utilities {
  .stack { display: grid; gap: var(--space-4); }
  .stack-lg { display: grid; gap: var(--space-6); }

  .grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }

  @media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .grid-4 { grid-template-columns: 1fr; }
  }

  .section { padding: var(--space-8) 0; }
  .section-tight { padding: var(--space-6) 0; }
  .section-padding { padding: var(--space-8) 0; }

  .center { margin-left: auto; margin-right: auto; }
  .reading-max { max-width: var(--reading-max); }
  .text-center { text-align: center; }

  .flex { display: flex; }
  .flex-wrap { flex-wrap: wrap; }
  .items-center { align-items: center; }
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .gap-2 { gap: var(--space-2); }
  .gap-3 { gap: var(--space-3); }
  .gap-4 { gap: var(--space-4); }
  .gap-6 { gap: var(--space-6); }

  .mb-4 { margin-bottom: var(--space-4); }
  .mb-6 { margin-bottom: var(--space-6); }
  .mb-8 { margin-bottom: var(--space-8); }
  .mt-4 { margin-top: var(--space-4); }
  .mt-6 { margin-top: var(--space-6); }

  .p-4 { padding: var(--space-4); }
  .p-5 { padding: var(--space-5); }
  .p-6 { padding: var(--space-6); }
  .p-8 { padding: var(--space-8); }

  .max-w-2xl { max-width: 42rem; }
  .max-w-3xl { max-width: 48rem; }
  .max-w-4xl { max-width: 56rem; }

  .mx-auto { margin-left: auto; margin-right: auto; }
  .w-full { width: 100%; }

  .hidden { display: none; }
  @media (min-width: 1024px) {
    .lg\:flex { display: flex; }
    .lg\:hidden { display: none; }
  }

  /* Accessibility utility */
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}