/* Responsive Styles - Mobile-First Media Queries */

/* Essential Responsive Utilities */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-5xl { font-size: 3rem; line-height: 1.1; }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
}

/* Mobile Phones (up to 640px) */
@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Header Mobile */
  .desktop-nav {
    display: none !important;
  }
  
  .mobile-menu-toggle {
    display: block !important;
  }
  
  /* Hero Section Mobile */
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.25rem;
  }
  
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn {
    width: 100%;
    max-width: 280px;
  }
  
  /* Services Mobile */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .service-card {
    padding: 2rem 1.5rem;
  }
  
  /* Technology Mobile */
  .technology-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .technology-text h2 {
    font-size: 2rem;
  }
  
  .technology-text p {
    font-size: 1.1rem;
  }
  
  /* About Mobile */
  .about-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .about-text h2 {
    font-size: 2rem;
  }
  
  .about-stats {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  /* Contact Mobile */
  .contact-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .contact-info h2 {
    font-size: 2rem;
  }
  
  .contact-form {
    padding: 2rem 1.5rem;
  }
  
  /* Process Mobile */
  .process-steps {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  /* Gallery Mobile */
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .gallery-categories {
    flex-direction: column;
    align-items: center;
  }
  
  /* Section Headers Mobile */
  .section-title {
    font-size: 2rem;
  }
  
  .section-subtitle {
    font-size: 1.1rem;
  }
  
  /* Pricing Table Mobile */
  .pricing-row {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  
  .pricing-item {
    padding: 0.25rem 0;
  }
  
  .pricing-item:first-child {
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

/* Tablets (641px to 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Header Tablet */
  .desktop-nav {
    display: none !important;
  }
  
  .mobile-menu-toggle {
    display: block !important;
  }
  
  /* Hero Section Tablet */
  .hero-title {
    font-size: 3.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.375rem;
  }
  
  /* Services Tablet */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
  
  /* Technology Tablet */
  .technology-content {
    gap: 3rem;
  }
  
  .technology-text h2 {
    font-size: 2.5rem;
  }
  
  /* About Tablet */
  .about-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  
  /* Contact Tablet */
  .contact-content {
    gap: 3rem;
  }
  
  /* Process Tablet */
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
  
  /* Gallery Tablet */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Desktop (1025px and up) */
@media (min-width: 1025px) {
  /* Show desktop navigation */
  .desktop-nav {
    display: flex !important;
  }
  
  .mobile-menu-toggle {
    display: none !important;
  }
  
  /* Hover effects for desktop */
  .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
  }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  .hero-title {
    font-size: 4.5rem;
  }
  
  .section-title {
    font-size: 3.5rem;
  }
  
  .technology-text h2 {
    font-size: 3.5rem;
  }
}

/* Print Styles */
@media print {
  .header,
  .footer,
  .mobile-menu-toggle,
  .btn,
  .dropdown-menu {
    display: none !important;
  }
  
  .hero-section {
    height: auto;
    padding: 2rem 0;
  }
  
  .hero-video,
  .hero-fallback {
    display: none !important;
  }
  
  .hero-overlay {
    background: none !important;
  }
  
  .hero-content {
    color: #374151 !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: #374151 !important;
  }
  
  a {
    color: #374151 !important;
    text-decoration: underline;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-video,
  .gallery-image {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark Mode Support (for future implementation) */
@media (prefers-color-scheme: dark) {
  /* This can be expanded later if dark mode is needed */
}

/* Landscape Mobile */
@media (max-width: 1024px) and (orientation: landscape) {
  .hero-section {
    height: 70vh;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.125rem;
  }
}