/* Responsive Utilities */

/* Responsive Container */
@media (max-width: 1200px) {
  .container {
    max-width: 960px;
  }
}

@media (max-width: 992px) {
  .container {
    max-width: 720px;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 540px;
  }
  
  .main-container {
    margin: 0 var(--spacing-md);
  }
}

@media (max-width: 576px) {
  .container {
    max-width: 100%;
    margin: 0 var(--spacing-sm);
  }
  
  .main-container {
    margin: 0 var(--spacing-sm);
  }
}

/* Responsive Text Alignment */
@media (max-width: 768px) {
  .text-center-mobile {
    text-align: center;
  }
  
  .text-left-mobile {
    text-align: left;
  }
  
  .text-right-mobile {
    text-align: right;
  }
}

/* Responsive Display */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
  
  .show-mobile {
    display: block !important;
  }
  
  .block-mobile {
    display: block !important;
  }
  
  .inline-mobile {
    display: inline !important;
  }
  
  .inline-block-mobile {
    display: inline-block !important;
  }
}

@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
  
  .show-desktop {
    display: block !important;
  }
}

/* Responsive Flexbox */
@media (max-width: 768px) {
  .flex-column-mobile {
    flex-direction: column !important;
  }
  
  .flex-row-mobile {
    flex-direction: row !important;
  }
  
  .justify-center-mobile {
    justify-content: center !important;
  }
  
  .align-center-mobile {
    align-items: center !important;
  }
}

/* Responsive Spacing */
@media (max-width: 768px) {
  .m-mobile-0 { margin: 0 !important; }
  .m-mobile-1 { margin: var(--spacing-xs) !important; }
  .m-mobile-2 { margin: var(--spacing-sm) !important; }
  .m-mobile-3 { margin: var(--spacing-md) !important; }
  
  .p-mobile-0 { padding: 0 !important; }
  .p-mobile-1 { padding: var(--spacing-xs) !important; }
  .p-mobile-2 { padding: var(--spacing-sm) !important; }
  .p-mobile-3 { padding: var(--spacing-md) !important; }
}

@media (max-width: 480px) {
  .m-mobile-0 { margin: 0 !important; }
  .m-mobile-1 { margin: var(--spacing-xs) !important; }
  .m-mobile-2 { margin: var(--spacing-sm) !important; }
  
  .p-mobile-0 { padding: 0 !important; }
  .p-mobile-1 { padding: var(--spacing-xs) !important; }
  .p-mobile-2 { padding: var(--spacing-sm) !important; }
}