/* ==========================================================================
   LAYOUT GRID & LAYOUT UTILITIES
   ========================================================================= */

.container {
  width: 100%;
  max-width: 1720px; /* 1700px content area + 20px padding on each side */
  margin-right: auto;
  margin-left: auto;
  padding-right: clamp(1rem, 3vw, 2.25rem);
  padding-left: clamp(1rem, 3vw, 2.25rem);
}

/* Base grid and alignment utility classes */
.grid {
  display: grid;
}

.flex {
  display: flex;
}

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

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

/* ==========================================================================
   HERO DIVISION SPLIT (35% : 65%)
   ========================================================================== */

.hero-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 992px) {
  .hero-split-grid {
    grid-template-columns: 35fr 65fr;
  }
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-md);
  width: 100%;
}

@media (min-width: 480px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}