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

/* Container System */
.container {
  width: 100%;
  max-width: var(--max-width-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.container-wide {
  max-width: var(--max-width-wide);
}

.container-fluid {
  max-width: 100%;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

/* Responsive Container Padding */
@media (min-width: 768px) {
  .container,
  .container-wide,
  .container-fluid {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}

@media (min-width: 1440px) {
  .container,
  .container-wide {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
  }
}

/* CSS Grid System */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}

/* Grid Column Templates */
.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

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

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

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

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

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

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

.grid-auto-fit-lg {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Grid Gap Variations */
.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);
}

/* Responsive Grid - Mobile First */
@media (max-width: 767px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-6 {
    grid-template-columns: 1fr;
  }
  
  .grid-mobile-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .grid-cols-4,
  .grid-cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-tablet-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-tablet-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

/* Flexbox Layout System */
.flex {
  display: flex;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Flex Gaps */
.flex-gap-xs {
  gap: var(--spacing-xs);
}

.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);
}

/* Flex Item Properties */
.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.flex-none {
  flex: none;
}

/* Responsive Flexbox */
@media (max-width: 767px) {
  .flex-mobile-column {
    flex-direction: column;
  }
  
  .flex-mobile-wrap {
    flex-wrap: wrap;
  }
}

@media (min-width: 768px) {
  .flex-tablet-row {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .flex-desktop-row {
    flex-direction: row;
  }
  
  .flex-desktop-nowrap {
    flex-wrap: nowrap;
  }
}

/* Section Layouts */
.section {
  padding-top: var(--spacing-xxl);
  padding-bottom: var(--spacing-xxl);
}

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

.section-lg {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (max-width: 767px) {
  .section {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }
  
  .section-sm {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }
}

/* Two Column Layout */
.two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 768px) {
  .two-column {
    grid-template-columns: 1fr 1fr;
  }
  
  .two-column-sidebar {
    grid-template-columns: 2fr 1fr;
  }
}

/* Three Column Layout */
.three-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .three-column {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .three-column {
    grid-template-columns: 1fr;
  }
}

/* Card Grid Layouts */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Client Logo Grid (6 → 3 → 2) */
.client-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  align-items: center;
  justify-items: center;
}

@media (min-width: 768px) {
  .client-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }
}

@media (min-width: 1024px) {
  .client-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Portfolio Grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Aspect Ratio Boxes */
.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-4-3 {
  aspect-ratio: 4 / 3;
}