/* ============================================
   Layout Utilities - Grid, Flexbox, Containers
   ============================================ */

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

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

.container--fluid {
  max-width: 100%;
}

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

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

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

.section--sm {
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-3xl);
}

.section--lg {
  padding-top: var(--spacing-5xl);
  padding-bottom: var(--spacing-5xl);
}

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

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

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

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

.grid--4-col {
  grid-template-columns: 1fr;
}

.grid--gap-sm {
  gap: var(--spacing-sm);
}

.grid--gap-md {
  gap: var(--spacing-md);
}

.grid--gap-lg {
  gap: var(--spacing-lg);
}

.grid--gap-xl {
  gap: var(--spacing-xl);
}

.grid--gap-2xl {
  gap: var(--spacing-2xl);
}

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

.flex {
  display: flex;
}

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

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

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

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

/* Justify Content */
.flex--justify-start {
  justify-content: flex-start;
}

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

.flex--justify-end {
  justify-content: flex-end;
}

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

.flex--justify-around {
  justify-content: space-around;
}

/* Align Items */
.flex--align-start {
  align-items: flex-start;
}

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

.flex--align-end {
  align-items: flex-end;
}

.flex--align-stretch {
  align-items: stretch;
}

/* Gap */
.flex--gap-sm {
  gap: var(--spacing-sm);
}

.flex--gap-md {
  gap: var(--spacing-md);
}

.flex--gap-lg {
  gap: var(--spacing-lg);
}

.flex--gap-xl {
  gap: var(--spacing-xl);
}

/* ===== Display Utilities ===== */

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.hidden {
  display: none;
}

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

/* Margin */
.mt-auto { margin-top: auto; }
.mr-auto { margin-right: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mb-3xl { margin-bottom: var(--spacing-3xl); }

/* Padding */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }
.p-3xl { padding: var(--spacing-3xl); }

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

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.w-50 {
  width: 50%;
}

/* ===== Position Utilities ===== */

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

/* ===== Overflow ===== */

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}