/**
 * Mobile Optimizations for Cloud Tower Homepage
 * Ensures perfect rendering on all mobile devices
 * Tested on: iPhone, Android, iPad, tablets
 */

/* =============================================================================
   1. CORE MOBILE VIEWPORT & BASE STYLES
   ============================================================================= */

/* Prevent horizontal scrolling */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Optimize for mobile performance */
* {
  -webkit-tap-highlight-color: rgba(147, 51, 234, 0.1); /* Purple tap highlight */
  -webkit-touch-callout: none;
  -webkit-overflow-scrolling: touch;
}

/* =============================================================================
   2. TOUCH TARGET OPTIMIZATION (Apple HIG 44px minimum)
   ============================================================================= */

/* Ensure all interactive elements meet 44px minimum */
button,
a,
input,
textarea,
select,
.clickable {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Navigation links on mobile */
@media (max-width: 768px) {
  nav a,
  nav button {
    min-height: 48px; /* Slightly larger for better UX */
    padding: 12px 16px;
  }
  
  /* Mobile menu items */
  #mobile-menu a,
  #mobile-menu button {
    min-height: 56px; /* Extra large for easy tapping */
    padding: 16px 20px;
    font-size: 1rem;
  }
}

/* =============================================================================
   3. RESPONSIVE TYPOGRAPHY
   ============================================================================= */

/* Mobile-first typography scaling */
@media (max-width: 640px) {
  /* Hero headings */
  h1 {
    font-size: 2rem !important; /* 32px */
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }
  
  h2 {
    font-size: 1.75rem !important; /* 28px */
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
  }
  
  h3 {
    font-size: 1.4rem !important; /* ~22px */
    line-height: 1.3 !important;
  }
  
  h4 {
    font-size: 1.2rem !important; /* ~19px */
    line-height: 1.4 !important;
  }
  
  h5, h6 {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  
  /* Body text */
  p {
    font-size: 0.95rem !important; /* 15-16px */
    line-height: 1.7 !important;
  }
  
  /* Small text */
  .text-xs {
    font-size: 0.75rem !important; /* 12px */
  }
  
  .text-sm {
    font-size: 0.875rem !important; /* 14px */
  }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
  h1 {
    font-size: 2.5rem !important;
  }
  
  h2 {
    font-size: 2rem !important;
  }
}

/* =============================================================================
   4. SPACING & LAYOUT OPTIMIZATION
   ============================================================================= */

@media (max-width: 768px) {
  /* Reduce section padding on mobile */
  section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  /* Container padding */
  .container,
  .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Card spacing */
  .group,
  .card {
    margin-bottom: 1.5rem !important;
  }
  
  /* Reduce large gaps */
  .gap-8 {
    gap: 1.5rem !important;
  }
  
  .gap-12 {
    gap: 2rem !important;
  }
}

/* =============================================================================
   5. GRID & FLEXBOX MOBILE OVERRIDES
   ============================================================================= */

@media (max-width: 768px) {
  /* Force single column on mobile */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Stats grid - 2 columns max */
  .grid.grid-cols-2,
  .grid.grid-cols-3,
  .grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  /* Flex direction change */
  .flex-row {
    flex-direction: column !important;
  }
}

/* =============================================================================
   6. IMAGE & MEDIA OPTIMIZATION
   ============================================================================= */

@media (max-width: 768px) {
  /* Responsive images */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Avatar/icon sizing */
  .w-16, .h-16 {
    width: 3rem !important;
    height: 3rem !important;
  }
  
  .w-12, .h-12 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
}

/* =============================================================================
   7. NAVIGATION MOBILE OPTIMIZATIONS
   ============================================================================= */

@media (max-width: 768px) {
  /* Sticky navigation */
  nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  /* Mobile menu */
  #mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
  }
  
  #mobile-menu.show {
    max-height: 100vh !important;
    overflow-y: auto;
  }
  
  /* Hamburger button */
  #mobile-menu-btn {
    padding: 12px;
    min-width: 48px;
    min-height: 48px;
  }
}

/* =============================================================================
   8. FORM OPTIMIZATION
   ============================================================================= */

@media (max-width: 768px) {
  /* Full-width inputs */
  input,
  textarea,
  select {
    width: 100%;
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 12px 16px;
    border-radius: 8px;
  }
  
  /* Button sizing */
  button[type="submit"],
  .btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    min-height: 48px;
  }
  
  /* Form spacing */
  form .space-y-4 > * + * {
    margin-top: 1rem;
  }
}

/* =============================================================================
   9. CARD & COMPONENT MOBILE STYLES
   ============================================================================= */

@media (max-width: 768px) {
  /* Card padding reduction */
  .p-8 {
    padding: 1.5rem !important;
  }
  
  .p-10 {
    padding: 2rem !important;
  }
  
  .p-12 {
    padding: 2.5rem !important;
  }
  
  /* Border radius reduction */
  .rounded-2xl {
    border-radius: 1rem !important;
  }
  
  .rounded-3xl {
    border-radius: 1.25rem !important;
  }
  
  /* Shadow reduction (performance) */
  .shadow-2xl {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  }
}

/* =============================================================================
   10. SUCCESS STORIES MOBILE OPTIMIZATION
   ============================================================================= */

@media (max-width: 768px) {
  /* Success story cards */
  #success-stories .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  /* Metrics grid - 3 columns */
  #success-stories .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }
  
  /* Quote boxes */
  #success-stories blockquote,
  #success-stories .bg-gradient-to-br {
    padding: 1rem !important;
    font-size: 0.875rem !important;
  }
}

/* =============================================================================
   11. STATS BANNER MOBILE
   ============================================================================= */

@media (max-width: 640px) {
  /* 2x2 grid for stats */
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  
  /* Stat numbers */
  .text-3xl {
    font-size: 2rem !important;
  }
}

/* =============================================================================
   12. CTA BUTTONS MOBILE
   ============================================================================= */

@media (max-width: 768px) {
  /* Stack CTAs vertically */
  .flex.gap-4 {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  /* Full-width CTAs */
  .flex.gap-4 > a,
  .flex.gap-4 > button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* =============================================================================
   13. FOOTER MOBILE OPTIMIZATION
   ============================================================================= */

@media (max-width: 768px) {
  /* Single column footer */
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center;
  }
  
  /* Footer links */
  footer a {
    display: block;
    padding: 8px 0;
  }
}

/* =============================================================================
   14. PERFORMANCE OPTIMIZATIONS
   ============================================================================= */

@media (max-width: 768px) {
  /* Reduce animation complexity */
  .animate-pulse {
    animation-duration: 3s !important;
  }
  
  /* Disable complex transforms on mobile */
  .hover\:scale-105:hover {
    transform: scale(1.02) !important;
  }
  
  /* Reduce blur for performance */
  .blur-3xl {
    filter: blur(40px) !important;
  }
}

/* =============================================================================
   15. LANDSCAPE ORIENTATION
   ============================================================================= */

@media (max-width: 768px) and (orientation: landscape) {
  /* Reduce vertical spacing */
  section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Smaller headings */
  h1 {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
}

/* =============================================================================
   16. iOS SPECIFIC FIXES
   ============================================================================= */

@supports (-webkit-touch-callout: none) {
  /* iOS Safari fixes */
  body {
    -webkit-text-size-adjust: 100%;
  }
  
  /* Fix iOS input zoom */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
  
  /* iOS safe area */
  @supports (padding: max(0px)) {
    body {
      padding-left: max(1rem, env(safe-area-inset-left));
      padding-right: max(1rem, env(safe-area-inset-right));
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

/* =============================================================================
   17. ANDROID SPECIFIC FIXES
   ============================================================================= */

@supports not (-webkit-touch-callout: none) {
  /* Android Chrome fixes */
  input,
  textarea {
    -webkit-appearance: none;
    appearance: none;
  }
}

/* =============================================================================
   18. TABLET SPECIFIC (768px - 1024px)
   ============================================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
  /* 2-column layout for tablets */
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* 3-column stats */
  .grid-cols-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* =============================================================================
   19. SMALL MOBILE (< 375px) - iPhone SE, small Android
   ============================================================================= */

@media (max-width: 374px) {
  /* Extra small typography */
  h1 {
    font-size: 1.5rem !important;
  }
  
  h2 {
    font-size: 1.35rem !important;
  }
  
  p {
    font-size: 0.9rem !important;
  }
  
  /* Tighter padding */
  section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .p-8, .p-10, .p-12 {
    padding: 1rem !important;
  }
}

/* =============================================================================
   20. ACCESSIBILITY - MOBILE FOCUS STATES
   ============================================================================= */

@media (max-width: 768px) {
  /* Larger focus indicators on mobile */
  *:focus-visible {
    outline: 3px solid #a855f7; /* Purple */
    outline-offset: 3px;
  }
  
  /* Button active states */
  button:active,
  a:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

/* =============================================================================
   21. PRINT OPTIMIZATION (Mobile)
   ============================================================================= */

@media print {
  /* Hide mobile-specific elements */
  #mobile-menu,
  #mobile-menu-btn,
  button,
  nav {
    display: none !important;
  }
  
  /* Expand all sections */
  section {
    page-break-inside: avoid;
  }
}