/* Mobile-First Responsive Design for Ambition Science Zone */

/* Base Mobile Styles */
@media (max-width: 768px) {
  /* Typography */
  .text-5xl, .text-6xl, .text-7xl { 
    font-size: 2.25rem !important; 
    line-height: 1.2 !important;
  }
  .text-4xl { 
    font-size: 1.875rem !important; 
    line-height: 1.3 !important;
  }
  .text-3xl { 
    font-size: 1.5rem !important; 
    line-height: 1.4 !important;
  }
  .text-2xl { 
    font-size: 1.25rem !important; 
    line-height: 1.4 !important;
  }
  .text-xl { 
    font-size: 1.125rem !important; 
    line-height: 1.5 !important;
  }

  /* Navigation */
  .nav-blur {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
  }

  .mobile-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  }

  /* Hero Section */
  .hero-section {
    padding: 2rem 1rem !important;
    min-height: 85vh !important;
  }

  .hero-content h1 {
    margin-bottom: 1.5rem !important;
  }

  .hero-content p {
    margin-bottom: 2rem !important;
    padding: 0 1rem !important;
  }

  .hero-content .flex {
    gap: 1rem !important;
    padding: 0 1rem !important;
  }

  /* Buttons */
  button {
    font-size: 0.875rem !important;
    padding: 0.75rem 1.5rem !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  /* Sections */
  .section-padding {
    padding: 2rem 1rem !important;
  }

  .py-20 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .py-16 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .mb-16 {
    margin-bottom: 2rem !important;
  }

  .mb-12 {
    margin-bottom: 1.5rem !important;
  }

  /* Cards */
  .card-hover {
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 1rem !important;
  }

  .card-hover h3 {
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
  }

  .card-hover p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }

  /* Grid Layouts */
  .grid {
    gap: 1rem !important;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Statistics */
  .stats-counter {
    text-align: center !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .stat-number {
    font-size: 2rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Activities Section */
  .container-scroll-wrapper {
    perspective: none !important;
  }

  .container-scroll-wrapper .sticky {
    position: relative !important;
    animation: none !important;
    transform: none !important;
  }

  .activities-grid img {
    height: 12rem !important;
  }

  /* Testimonials */
  .animated-testimonials-container {
    min-height: 180px !important;
  }

  .testimonial-slide {
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    padding: 1rem !important;
  }

  .testimonial-slide img {
    width: 3rem !important;
    height: 3rem !important;
  }

  .testimonial-slide h4 {
    font-size: 1.125rem !important;
  }

  .testimonial-slide p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }

  /* Forms */
  .contact-form {
    padding: 1.5rem !important;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 1rem !important;
    padding: 0.75rem !important;
  }

  /* Disable Hover Effects on Mobile */
  .interactive-hover:hover {
    transform: none !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  }

  .group:hover .group-hover\:scale-110 {
    transform: none !important;
  }

  .card-hover:hover {
    transform: none !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  }

  /* Text Hover Effects - Simplified for Mobile */
  .text-hover-effect:hover {
    transform: none !important;
  }

  .text-hover-effect:hover::before {
    width: 0 !important;
  }
}

/* Extra Small Screens */
@media (max-width: 480px) {
  /* Typography */
  .text-5xl, .text-6xl, .text-7xl { 
    font-size: 1.875rem !important; 
  }
  .text-4xl { 
    font-size: 1.5rem !important; 
  }
  .text-3xl { 
    font-size: 1.25rem !important; 
  }

  /* Navigation */
  .text-gradient {
    font-size: 1.125rem !important;
  }

  .logo-mobile {
    width: 1.75rem !important;
    height: 1.75rem !important;
  }

  /* Hero Section */
  .hero-section {
    padding: 1.5rem 0.75rem !important;
    min-height: 80vh !important;
  }

  .hero-content h1 {
    margin-bottom: 1rem !important;
  }

  .hero-content p {
    margin-bottom: 1.5rem !important;
    padding: 0 0.5rem !important;
  }

  /* Sections */
  .section-padding {
    padding: 1.5rem 0.75rem !important;
  }

  .py-20 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Cards */
  .card-hover {
    padding: 1rem !important;
    border-radius: 0.75rem !important;
  }

  .card-hover .w-16.h-16 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  .card-hover .w-8.h-8 {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  /* Statistics */
  .stat-number {
    font-size: 1.75rem !important;
  }

  /* Activities */
  .activities-grid img {
    height: 10rem !important;
  }

  /* Testimonials */
  .testimonial-slide {
    padding: 0.75rem !important;
  }

  .testimonial-slide img {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  /* Buttons */
  button {
    font-size: 0.875rem !important;
    padding: 0.75rem 1.25rem !important;
  }

  /* Spacing */
  .px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .gap-8 {
    gap: 1rem !important;
  }

  .gap-12 {
    gap: 1.5rem !important;
  }
}

/* Touch Improvements */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .hover\:scale-105:hover {
    transform: none !important;
  }

  .hover\:from-blue-700:hover {
    background: linear-gradient(to right, #3b82f6, #8b5cf6) !important;
  }

  .group:hover .group-hover\:scale-110 {
    transform: none !important;
  }

  .group:hover .group-hover\:opacity-100 {
    opacity: 0.6 !important;
  }

  /* Make buttons more touch-friendly */
  button, .btn {
    min-height: 44px !important;
    padding: 0.75rem 1.5rem !important;
    touch-action: manipulation !important;
  }

  /* Improve touch targets */
  a, button, .clickable {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section {
    min-height: 100vh !important;
    padding: 2rem 1rem !important;
  }

  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 80vh !important;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-glow {
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.4) !important;
  }

  .text-gradient {
    background-size: 200% 200% !important;
  }
}