/* ========================================
   GRID.CSS - Grid Layout System
   ======================================== */

/* ===== MAIN CONTENT ===== */
.main-content {
  padding: var(--spacing-2xl) 0;
}

/* ===== CENTER AESTHETIC SECTION ===== */
.center-aesthetic {
  margin-bottom: var(--spacing-3xl);
}

/* ===== TWO-COLUMN LAYOUT ===== */
.two-column-layout {
  padding: var(--spacing-xl) 0;
}

.row {
  display: flex;
  gap: calc(6%); /* 6% gap between columns */
  flex-wrap: wrap;
}

/* ===== COLUMN SIZES ===== */
.col-50 {
  flex: 1 1 47%; /* ~47% width each column */
  min-width: 0; /* Prevents overflow issues */
}

/* ===== RESPONSIVE GRID ===== */
@media (max-width: 767px) {
  .row {
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .col-50 {
    flex: 1 1 100%;
  }

  .center-aesthetic {
    margin-bottom: var(--spacing-xl);
  }

  .two-column-layout {
    padding: var(--spacing-lg) 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .col-50 {
    flex: 1 1 48%;
  }

  .row {
    gap: 4%;
  }
}

/* ===== SECTION SPACING ===== */
section {
  margin-bottom: var(--spacing-2xl);
}

section:last-child {
  margin-bottom: 0;
}

/* ===== GRID UTILITIES ===== */

/* Auto-fit Grid (for clips, products, etc.) */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

/* Fixed Grid */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
}

/* Responsive Grids */
@media (max-width: 767px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

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

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