/* ================================================
   Layout System
   Container, Grid, Flexbox utilities
   ================================================ */

/* ========== Container ========== */

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

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

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

/* ========== Section ========== */

.section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

.section-title {
  margin-bottom: var(--space-md);
}

.section-subtitle {
  margin-bottom: var(--space-2xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ========== Grid System ========== */

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

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

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

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

/* Auto-responsive grid */
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ========== Flexbox Utilities ========== */

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.flex-wrap {
  flex-wrap: wrap;
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

.gap-lg {
  gap: var(--space-lg);
}

/* ========== Spacing Utilities ========== */

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }

.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }

/* ========== Width Utilities ========== */

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

/* ========== Visibility ========== */

.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

/* ========== Mobile Breakpoints ========== */

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

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

  .container,
  .container-wide,
  .container-narrow {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}