/* Grid System and Container Styles */
.ws-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.ws-container-fluid {
  width: 100%;
  padding: 0 24px;
}

.ws-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
}

.ws-col {
  flex: 1;
  padding: 0 12px;
}

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

/* Grid Layouts */
.ws-grid {
  display: grid;
  gap: 24px;
}

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

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

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

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

.ws-grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Flexbox Utilities */
.ws-flex {
  display: flex;
}

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

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

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

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

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

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

.ws-align-start {
  align-items: flex-start;
}

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

.ws-text-center {
  text-align: center;
}

.ws-text-left {
  text-align: left;
}

.ws-text-right {
  text-align: right;
}

/* Spacing Utilities */
.ws-mt-0 { margin-top: 0; }
.ws-mt-1 { margin-top: 0.25rem; }
.ws-mt-2 { margin-top: 0.5rem; }
.ws-mt-3 { margin-top: 1rem; }
.ws-mt-4 { margin-top: 1.5rem; }
.ws-mt-5 { margin-top: 3rem; }

.ws-mb-0 { margin-bottom: 0; }
.ws-mb-1 { margin-bottom: 0.25rem; }
.ws-mb-2 { margin-bottom: 0.5rem; }
.ws-mb-3 { margin-bottom: 1rem; }
.ws-mb-4 { margin-bottom: 1.5rem; }
.ws-mb-5 { margin-bottom: 3rem; }

.ws-p-0 { padding: 0; }
.ws-p-1 { padding: 0.25rem; }
.ws-p-2 { padding: 0.5rem; }
.ws-p-3 { padding: 1rem; }
.ws-p-4 { padding: 1.5rem; }
.ws-p-5 { padding: 3rem; }

/* Responsive Grid */
@media (max-width: 768px) {
  .ws-container {
    padding: 0 16px;
  }
  
  .ws-container-fluid {
    padding: 0 16px;
  }
  
  .ws-grid-2,
  .ws-grid-3,
  .ws-grid-4 {
    grid-template-columns: 1fr;
  }
  
  .ws-col-1, .ws-col-2, .ws-col-3, .ws-col-4,
  .ws-col-5, .ws-col-6, .ws-col-7, .ws-col-8,
  .ws-col-9, .ws-col-10, .ws-col-11, .ws-col-12 {
    flex: 0 0 100%;
  }
}

@media (max-width: 480px) {
  .ws-container {
    padding: 0 12px;
  }
  
  .ws-container-fluid {
    padding: 0 12px;
  }
  
  .ws-row {
    margin: 0 -6px;
  }
  
  .ws-col {
    padding: 0 6px;
  }
}