/* Mobile-First Optimization CSS */
/* This file contains mobile-specific optimizations for better user experience */

/* Touch Target Optimization */
/* Ensure specific interactive elements meet minimum 44px touch target size */
.mobile-menu-button,
.card-carousel-control,
.carousel-indicators button,
input[type="submit"], 
input[type="button"] {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Let CTA buttons (.btn) use their own padding instead of forced min-height */
.tag,
a.tag {
  min-height: 32px; /* Reduced from 44px */
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  /* justify-content: center; */ /* Removed to prevent unintended vertical alignment issues */
}

/* Enhanced Mobile Navigation */
@media (max-width: 768px) {
  /* Improve mobile menu visibility and interaction */
  .mobile-nav {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  /* Ensure mobile menu items have proper touch targets */
  .mobile-nav ul li a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  /* Mobile hamburger button enhancement */
  #mobile-menu-button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border: 2px solid transparent;
    transition: all 0.2s ease;
  }
  
  #mobile-menu-button:focus {
    border-color: #3b82f6;
    outline: none;
  }
}

/* Form Input Optimization for Mobile */
@media (max-width: 768px) {
  /* Prevent zoom on iOS when focusing inputs */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
    padding: 12px;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    transition: border-color 0.2s ease;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
  
  /* Improve form layout on mobile */
  .contact-form {
    padding: 16px;
  }
  
  .contact-form .grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Image and Media Optimization */
@media (max-width: 768px) {
  /* Ensure images don't cause horizontal scroll */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Optimize hero images for mobile */
  .hero-section {
    min-height: 60vh;
    padding: 3rem 0;
  }
  
  /* Improve gallery performance on mobile */
  .masonry-gallery,
  .project-gallery {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  /* Optimize carousel for mobile */
  .image-carousel,
  .card-carousel {
    border-radius: 12px;
    overflow: hidden;
  }
  
  .carousel-indicators {
    bottom: 10px;
  }
  
  .carousel-indicators button {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    touch-action: manipulation;
  }
}

/* Typography Mobile Optimization */
@media (max-width: 768px) {
  /* Ensure readable line heights on mobile */
  body {
    line-height: 1.6;
  }
  
  /* Optimize heading sizes for mobile */
  h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
  }
  
  h2 {
    font-size: 1.75rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
  }
  
  h3 {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
  }
  
  /* Improve paragraph readability */
  p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  
  /* Optimize list spacing */
  ul, ol {
    padding-left: 1.25rem;
  }
  
  li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
  }
}

/* Layout and Spacing Mobile Optimization */
@media (max-width: 768px) {
  /* Improve section spacing */
  .section-padding {
    padding: 2rem 0;
  }
  
  /* Optimize container padding */
  .container-custom {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Improve card layouts on mobile only */
  .grid {
    gap: 1rem;
  }
  
  /* Force single column layout ONLY on mobile for better readability */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  
  /* Optimize flex layouts - but preserve project alternating layout */
  .flex-row:not(.project-wrapper) {
    flex-direction: column;
  }
  
  .flex-row-reverse:not(.project-wrapper) {
    flex-direction: column-reverse;
  }
  
  /* Ensure project layout works on mobile */
  .project-wrapper {
    flex-direction: column !important;
  }
  
  /* Stack footer sections on mobile */
  .footer-main {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 2rem !important;
  }
}

/* Ensure desktop grid layouts are preserved on larger screens */
@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Performance Optimizations for Mobile */
@media (max-width: 768px) {
  /* Reduce animation complexity on mobile */
  * {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }
  
  /* Optimize transform performance */
  .hover\:scale-105:hover,
  .hover\:transform:hover,
  .group-hover\:scale-105 {
    transform: scale(1.02);
  }
  
  /* Disable parallax and complex animations on mobile */
  .parallax,
  .complex-animation {
    transform: none !important;
    animation: none !important;
  }
}

/* Accessibility Enhancements for Mobile */
@media (max-width: 768px) {
  /* Improve focus visibility */
  *:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
  
  /* Ensure sufficient color contrast */
  .text-gray-500 {
    color: #6b7280;
  }
  
  .text-gray-400 {
    color: #9ca3af;
  }
  
  /* Improve link visibility */
  a {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.2s ease;
  }
  
  a:hover,
  a:focus {
    text-decoration-color: currentColor;
  }
}

/* Mobile-Specific Component Optimizations */
@media (max-width: 768px) {
  /* Optimize testimonials for mobile */
  .testimonial {
    padding: 1rem;
    font-size: 1rem;
  }
  
  /* Improve breadcrumb display */
  .breadcrumb {
    font-size: 14px;
    padding: 0.5rem 0;
  }
  
  /* Optimize project cards */
  .project-card {
    margin-bottom: 1.5rem;
  }
  
  /* Improve service cards */
  .service-feature {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
  }
  
  .service-icon {
    margin: 0 auto 1rem auto;
  }
  
  /* Optimize team member cards */
  .team-card {
    text-align: center;
    padding: 1.5rem;
  }
  
  /* Improve footer layout */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
}

/* Mobile Loading and Performance */
@media (max-width: 768px) {
  /* Optimize image loading */
  img {
    loading: lazy;
  }
  
  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  
  /* Optimize for touch devices */
  @media (hover: none) and (pointer: coarse) {
    .hover\:shadow-lg:hover,
    .hover\:shadow-xl:hover {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    
    .hover\:scale-105:hover {
      transform: none;
    }
  }
}

/* Landscape Mobile Optimization */
@media (max-width: 768px) and (orientation: landscape) {
  /* Optimize for landscape mobile viewing */
  .hero-section {
    min-height: 50vh;
    padding: 2rem 0;
  }
  
  .mobile-nav {
    padding: 1rem;
  }
  
  .mobile-nav ul li a {
    padding: 0;
    min-height: 40px;
  }
}

/* High DPI Display Optimization */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  /* Optimize for retina displays */
  .logo img,
  .header-logo img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Dark Mode Mobile Optimizations */
@media (max-width: 768px) {
  .dark .mobile-nav {
    background-color: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(10px);
  }
  
  .dark input:focus,
  .dark textarea:focus,
  .dark select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
  }
}

/* Service Card Mobile Touch Optimization */
@media (max-width: 768px) {
  /* Fix service card touch/click issues on mobile */
  .service-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Ensure service card links are properly clickable on mobile */
  .service-card a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    display: block;
  }
  
  /* Fix aspect ratio container touch issues */
  .service-card .aspect-w-16 {
    position: relative;
    display: block;
    touch-action: manipulation;
  }
  
  /* Ensure images within service cards are touchable */
  .service-card .aspect-w-16 > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    touch-action: manipulation;
  }
  
  /* Ensure the overlay doesn't block touch events */
  .service-card .bg-gradient-to-t {
    pointer-events: none;
  }
  
  /* Add visual feedback for touch on mobile */
  .service-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  /* Ensure service card content links are also touchable */
  .service-card .p-6 a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(52, 152, 219, 0.2);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}