/**
 * Grid System
 */

.psc-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--psc-spacing-md);
}

.psc-container--wide {
  max-width: 1400px;
}

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

/* Flexbox Grid */
.psc-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--psc-spacing-md) * -1);
  margin-right: calc(var(--psc-spacing-md) * -1);
}

.psc-col {
  flex: 1;
  padding: 0 var(--psc-spacing-md);
}

/* Column Sizes */
.psc-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.psc-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.psc-col-3 { flex: 0 0 25%; max-width: 25%; }
.psc-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.psc-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.psc-col-6 { flex: 0 0 50%; max-width: 50%; }
.psc-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.psc-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.psc-col-9 { flex: 0 0 75%; max-width: 75%; }
.psc-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.psc-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.psc-col-12 { flex: 0 0 100%; max-width: 100%; }

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

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

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

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

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

/* Main Layout Grid */
.psc-main-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.psc-main-wrapper .psc-container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--psc-spacing-xl);
  margin-top: var(--psc-spacing-xl);
  margin-bottom: var(--psc-spacing-xl);
}

.psc-main-content {
  min-width: 0; /* Prevent grid blowout */
}

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

@media (max-width: 768px) {
  .psc-main-wrapper .psc-container {
    grid-template-columns: 1fr;
  }
  
  .psc-grid-2,
  .psc-grid-3,
  .psc-grid-4 {
    grid-template-columns: 1fr;
  }
  
  .psc-col,
  [class*="psc-col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}