/* Responsive Adjustments & Utility Classes */

/* Tablet & Smaller Desktops (max-width: 1024px) */
@media (max-width: 1024px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
  
  .hero-title { font-size: 2.5rem; }
  .section-title { font-size: 1.75rem; }
  
  .nav-links { gap: var(--spacing-4); }
  
  /* Flexbox utilities */
  .flex-col-1024 {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }
  
  .onboarding-line {
    display: none !important;
  }
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
  /* Grids */
  .grid-cols-2 { grid-template-columns: 1fr; }
  .grid-cols-3 { grid-template-columns: 1fr; }
  .grid-cols-4 { grid-template-columns: 1fr; }
  
  /* Header & Nav */
  .topbar { display: none; }
  .nav-links {
    display: none; /* Replaced by hamburger menu */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column;
    padding: var(--spacing-4);
    box-shadow: var(--shadow-md);
  }
  .mobile-menu-btn { display: block !important; }
  
  /* Global Spacing & Typography */
  section { padding-top: 60px !important; padding-bottom: 60px !important; }
  .container { padding-left: 20px; padding-right: 20px; }
  
  h1 { font-size: 2rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.75rem !important; line-height: 1.3 !important; }
  h3 { font-size: 1.35rem !important; }
  p { font-size: 0.95rem !important; line-height: 1.6 !important; }

  /* Hero Section Overrides */
  .hero-section { padding: 40px 0 !important; margin-bottom: 2rem !important; }
  .hero-title { font-size: 2rem !important; }
  
  /* Flex Layout Utilities */
  .flex-col-mobile {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 30px !important;
  }
  .flex-col-center-mobile {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 30px !important;
  }
  
  /* Width & Height Utilities */
  .w-full-mobile {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  .h-auto-mobile {
    height: auto !important;
    min-height: auto !important;
  }
  
  /* Specific Component Overrides */
  .stats-bar { flex-wrap: wrap; }
  .stats-bar .stat-item { width: 48%; margin-bottom: var(--spacing-4); }
  
  .badge {
    position: static !important;
    transform: none !important;
    margin: 10px auto !important;
    justify-content: center;
  }
  .hero-carousel-container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
  #hero-prev, #hero-next {
    display: none !important; /* Hide carousel buttons on mobile for cleaner look or reposition */
  }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .stats-bar .stat-item { width: 100%; }
  .hero-title { font-size: 1.65rem !important; }
  h2 { font-size: 1.5rem !important; }
  
  .hero-carousel-container {
    aspect-ratio: 4 / 3;
    border-radius: 12px !important;
  }
  
  /* Buttons */
  .btn { width: 100% !important; text-align: center; justify-content: center; }
  .btn-partnership { width: 100% !important; justify-content: center; }
}