/* ==========================================================================
   Layout — Verse Design System
   ========================================================================== */

/* Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Page Container — standard width */
.page {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--space-12) var(--page-padding) var(--space-14);
}

/* Wide Container — for grids and full-width sections */
.page-wide {
  max-width: var(--page-wide-max);
  margin: 0 auto;
  padding: var(--space-12) var(--page-padding) var(--space-14);
}

/* Grid Utilities */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

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

/* Flex Row */
.flex-row {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

/* Spacing Utilities */
.mt-4  { margin-top: var(--space-4); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }

/* Section spacing */
.section {
  margin-bottom: var(--space-16);
}

/* Responsive */
@media (max-width: 768px) {
  :root {
    --page-padding: 1.25rem;
  }

  h1 {
    font-size: var(--text-4xl);
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .flex-row {
    flex-direction: column;
  }

  .stats-row {
    grid-template-columns: 1fr;
  }

  .quotes {
    grid-template-columns: 1fr;
  }

  .category-cards {
    grid-template-columns: 1fr;
  }

  .pillars {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: var(--space-8) var(--page-padding);
  }

  .opening-statement {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: var(--text-3xl);
  }
}