/* ============================================
   MOBILE OPTIMIZATIONS
   Perfect mobile experience for all screens
   ============================================ */

/* Touch Target Sizes - Minimum 44x44px for accessibility */
a, button, [role="button"], input, select, textarea {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
  /* Improve text readability */
  body {
    font-size: 16px; /* Prevent zoom on iOS */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* Optimize images for mobile */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* Better spacing on mobile */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Improve button sizes for touch */
  button, .button, a.button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Optimize navigation for mobile */
  .premium-nav {
    padding: 0.5rem 1rem;
  }
  
  /* Better form inputs on mobile */
  input, textarea, select {
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 0.75rem;
    border-radius: 4px;
  }
  
    /* Improve scrolling performance - disable smooth scroll on mobile */
  html {
    scroll-behavior: auto !important; /* Disable smooth scroll for better performance */
    -webkit-overflow-scrolling: touch;
  }
  
  /* Reduce animations on mobile for better performance */
  @media (prefers-reduced-motion: no-preference) {
    * {
      animation-duration: 0.3s !important;
      transition-duration: 0.3s !important;
    }
  }
  
  /* Optimize hero slider for mobile */
  .hero-slide-track {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  
  .hero-slide {
    will-change: auto; /* Remove will-change when not animating */
  }
  
  .hero-slide img {
    will-change: opacity;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  
  /* Disable complex animations on mobile */
  .hero-overlay-dark {
    will-change: auto;
  }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  body {
    font-size: 15px;
  }
  
  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  /* Reduce padding on very small screens */
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Landscape mobile optimizations */
@media (max-width: 768px) and (orientation: landscape) {
  .premium-nav {
    padding: 0.25rem 1rem;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Improve focus visibility for accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Optimize for touch devices */
.touch-device * {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* Prevent text selection on buttons */
button, .button, a.button {
  -webkit-user-select: none;
  user-select: none;
}

/* Improve scrolling smoothness - disabled on mobile for performance */
@media (min-width: 1025px) {
  html {
    scroll-behavior: smooth;
  }
}

html {
  -webkit-overflow-scrolling: touch;
}

/* Disable smooth scroll on mobile for better performance */
@media (max-width: 1024px) {
  html {
    scroll-behavior: auto !important;
  }
}

/* Optimize font loading */
.fonts-loaded body {
  font-display: swap;
}

/* Content visibility for off-screen content */
section:not(:target) {
  content-visibility: auto;
}

/* Optimize repaints */
.hero-section,
.media-section,
.collection-section {
  contain: layout style paint;
}