/* ============================================================
   Layout — Container, Grid Utilities
   ============================================================ */

/* ── CONTAINER ─────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.container--narrow {
  max-width: 860px;
}

.container--wide {
  max-width: 1440px;
}

/* ── CSS GRID UTILITIES ────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--space-6);
}

/* Service/feature cards: 4-col → 2-col → 1-col */
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Auto-fill responsive: good for cards */
.grid-auto {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.grid-auto-sm {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Split layout 50/50 */
.grid-split {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-16);
}

/* Split layout 60/40 */
.grid-split-60-40 {
  grid-template-columns: 3fr 2fr;
  align-items: start;
  gap: var(--space-12);
}

/* ── FLEXBOX UTILITIES ─────────────────────────────────────── */

.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }
.gap-4         { gap: var(--space-4); }
.gap-6         { gap: var(--space-6); }
.gap-8         { gap: var(--space-8); }

/* ── RESPONSIVE BREAKDOWNS ─────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-split { gap: var(--space-10); }
}

/* Mobile */
@media (max-width: 768px) {
  .grid-4,
  .grid-3,
  .grid-2,
  .grid-split,
  .grid-split-60-40 {
    grid-template-columns: 1fr;
  }
  .grid-split,
  .grid-split-60-40 {
    gap: var(--space-8);
  }
}