/* 
 * Responsive Framework
 * Utility classes and patterns for responsive design
 */

/* Grid System */
.grid {
  display: grid;
  gap: var(--space-md);
}

/* Standard 12-column grid */
.grid-12 {
  grid-template-columns: repeat(12, 1fr);
}

/* Common grid layouts */
.grid-1-1 {
  grid-template-columns: 1fr 1fr;
}

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

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

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

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

@media (min-width: 768px) and (max-width: 1023px) {
  .grid-1-1-1 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Responsive container variations */
.container-fluid {
  width: 100%;
  padding: 0 var(--space-md);
}

.container-narrow {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container-wide {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Responsive margin adjustments */
@media (max-width: 767px) {
  .m-mobile-0 { margin: 0 !important; }
  .mx-mobile-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .my-mobile-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  
  .p-mobile-sm { padding: var(--space-sm) !important; }
  .p-mobile-md { padding: var(--space-md) !important; }
}

/* Responsive text alignment */
@media (max-width: 767px) {
  .text-mobile-center { text-align: center !important; }
  .text-mobile-left { text-align: left !important; }
  .text-mobile-right { text-align: right !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .text-tablet-center { text-align: center !important; }
  .text-tablet-left { text-align: left !important; }
  .text-tablet-right { text-align: right !important; }
}

/* Flexbox responsive utilities */
.flex {
  display: flex;
}

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

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

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

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

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

@media (max-width: 767px) {
  .flex-mobile-column {
    flex-direction: column !important;
  }
  
  .flex-mobile-center {
    justify-content: center !important;
    align-items: center !important;
  }
}

/* Gap utilities */
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Order control for responsive layouts */
@media (max-width: 767px) {
  .order-mobile-1 { order: 1 !important; }
  .order-mobile-2 { order: 2 !important; }
  .order-mobile-3 { order: 3 !important; }
}