/* Responsive Utilities */

/* Mobile First Breakpoints */
@media (max-width: 640px) {
  .sm\:hidden { display: none !important; }
  .sm\:block { display: block !important; }
  .sm\:grid { display: grid !important; }
  .sm\:flex { display: flex !important; }
  
  .sm\:grid--cols-1 { grid-template-columns: 1fr !important; }
  .sm\:grid--cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  
  .sm\:text-sm { font-size: var(--text-sm); }
  .sm\:text-base { font-size: var(--text-base); }
  
  .sm\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
  .sm\:py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  
  .sm\:mb-4 { margin-bottom: var(--space-4); }
  .sm\:mt-4 { margin-top: var(--space-4); }
}

@media (min-width: 641px) and (max-width: 768px) {
  .md\:hidden { display: none !important; }
  .md\:block { display: block !important; }
  .md\:grid { display: grid !important; }
  .md\:flex { display: flex !important; }
  
  .md\:grid--cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .md\:grid--cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  
  .md\:text-lg { font-size: var(--text-lg); }
  
  .md\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
  .md\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
}

@media (min-width: 769px) {
  .lg\:hidden { display: none !important; }
  .lg\:block { display: block !important; }
  .lg\:grid { display: grid !important; }
  .lg\:flex { display: flex !important; }
  
  .lg\:grid--cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .lg\:grid--cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
  .lg\:grid--cols-6 { grid-template-columns: repeat(6, 1fr) !important; }
  
  .lg\:text-xl { font-size: var(--text-xl); }
  .lg\:text-2xl { font-size: var(--text-2xl); }
}

@media (min-width: 1200px) {
  .xl\:grid--cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
  .xl\:grid--cols-6 { grid-template-columns: repeat(6, 1fr) !important; }
}

/* Mobile Navigation */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex !important;
  }

  .mobile-hidden {
    display: none !important;
  }

  .mobile-full-width {
    width: 100% !important;
    margin: 0 !important;
  }
}

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

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  body {
    background: white;
    color: black;
  }

  a {
    text-decoration: underline;
  }
}

/* Responsive Images */
@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

/* Responsive Font Sizes */
@media (max-width: 768px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
}