/* ===================================
   COOL4SCOOL RESPONSIVE DESIGN
   Centralized Media Queries
   =================================== */

/* Mobile First Approach - Base styles already mobile-optimized */

/* ==============
   MOBILE ONLY
   ============== */
@media (max-width: 767px) {

  /* Hero Section Mobile - Safe modern viewport approach */
  .hero-section {
    min-height: var(--mobile-vh, 100vh);
  }
  
  .hero-section img {
    object-position: 46% 65%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Mobile - Let AOS handle all animations naturally */
  /* Remove ALL conflicting CSS that blocks AOS */

  /* Remove pseudo-elements that could cause jumps */
  .hero-cta-button::before,
  .hero-cta-button::after {
    display: none !important;
    content: none !important;
  }

  /* Mobile AOS Fix - Allow AOS to work but reset conflicting states */
  .hero-section [data-aos]:not(.aos-animate) {
    /* Initial state - let AOS handle this */
  }

  .hero-section [data-aos].aos-animate {
    /* Let AOS control animation states */
  }

  /* Mobile specific - Basic GPU optimizations for AOS compatibility */
  .hero-section .hero-title,
  .hero-section .hero-subtitle,
  .hero-section .hero-cta-button {
    transform-style: preserve-3d;
  }

  /* Ensure proper stacking context on mobile */
  .hero-section {
    isolation: isolate;
  }

  /* Override Android Chrome keyboard optimizations that cause layout shifts */
  .android-chrome.keyboard-open .hero-section,
  .android-chrome .hero-section {
    min-height: var(--mobile-vh, 100vh) !important;
  }

  /* Disable mobile device performance optimizations for hero during AOS */
  .mobile-device .hero-section [data-aos] {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  /* AOS Animation Support - Mobile optimized - Let AOS control timing */
  .hero-section [data-aos] {
    will-change: transform, opacity;
    /* Let AOS library control duration and timing */
  }

  /* Gallery Mobile */
  #gallery .cursor-pointer {
    min-height: 200px;
  }
  
  #gallery .cursor-pointer img {
    min-height: 200px;
  }

  /* Logo Mobile Size */
  #logo-link img {
    height: 26px;
  }

  /* Header mobile layout - logo on left */
  #header .container.mx-auto {
    justify-content: space-between !important;
  }
  
  #header .container.mx-auto > div:first-child {
    justify-content: flex-start !important;
  }
  
  /* Ensure mobile menu button stays on the right */
  #header .container.mx-auto > div:last-child {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
  }





  /* Mobile Device Optimizations */
  html, body {
    min-height: var(--mobile-vh,100vh);
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* Performance optimizations moved to shared.css .gpu-accelerated class */

  img {
    height: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  input, textarea, select {
    font-size: 16px;
  }


  /* Mobile Layout */
  button, .nav-link, a[role="button"] {
    min-height: 48px;
    min-width: 48px;
    padding: 4px;
  }
  
  .mobile-menu a {
    padding: 16px 24px;
    margin: 4px 0;
  }
  
  body {
    overflow-x: hidden;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    width: 100%;
  }
  
  html {
    height: 100%;
  }
  
  .main-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 100vh;
  }

  /* About Section Mobile */
  #about-us {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  
  #about-us .about-main-card {
    margin: 0 auto;
    max-width: 100%;
  }
  
  #about-us .about-icon-wrapper {
    min-width: 44px;
    min-height: 44px;
  }
  
  #about-us .grid {
    gap: 1rem;
  }

  /* Slider Mobile */
  .pause-ripple {
    animation-duration: 4s;
  }
  
  .pause-ripple:nth-child(2) {
    display: none;
  }

  /* Android Chrome Optimizations */
  .android-chrome .timeline-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  /* Mobile Touch Optimizations - Keep regular button behaviors */

  #mobile-menu-button:hover {
    transform: scale(1.05) !important;
  }
}

/* ==============
   TABLET
   ============== */
@media (min-width: 768px) {
  /* Hero Section Tablet - Full screen */
  .hero-section {
    height: 100vh;
    min-height: 100vh;
    margin-top: 0;
  }

  /* Parallax removed - no longer used */
  
  .hero-section img {
    object-position: 50% 60%;
  }

  /* Language Toggle */
  #mobile-lang-toggle {
    min-height: 42px !important;
    min-width: 42px !important;
    width: 42px !important;
    height: 42px !important;
  }
  
  #mobile-lang-toggle .fas.fa-globe {
    font-size: 35px !important;
  }
  
  #mobile-lang-toggle #mobile-lang-text {
    font-size: 15px !important;
  }

  /* About Section Tablet */
  .about-icon-wrapper {
    width: 48px;
    height: 48px;
  }


  /* Gallery Tablet */
  .gallery-card-text {
    font-size: 1.875rem;
  }

  /* Slider Tablet */
  .testimonial-card {
    width: calc(50% - 32px);
    padding: 32px 24px;
    min-height: 320px;
  }
  
  .mobile-pause-control {
    display: none;
  }
  
  .desktop-pause-control {
    display: flex;
  }
  
  .desktop-pause-btn {
    display: flex;
  }

  /* Schedule Timeline Tablet */
  .schedule-title {
    font-size: 3.5rem;
  }
  
  .timeline::before {
    left: 50%;
  }
  
  .timeline-item {
    width: 50%;
    padding-left: 0;
    margin-bottom: 80px;
  }
  
  .timeline-item:nth-child(odd) {
    left: 0;
    padding-right: 50px;
  }
  
  .timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 50px;
  }
  
  .timeline-item:nth-child(odd) .timeline-circle {
    left: auto;
    right: -10px;
    transform: translateX(0);
  }
  
  .timeline-item:nth-child(even) .timeline-circle {
    left: -10px;
    transform: translateX(0);
  }
  
  .timeline-item.is-active .timeline-circle {
    transform: scale(1.7);
  }
  
  .timeline-item:nth-child(odd) .timeline-card::before {
    left: auto;
    right: 0;
  }
}

/* Tablet to Desktop Range - Additional optimizations */
@media (min-width: 768px) and (max-width: 1279px) {
  /* Header tablet layout - logo on left, menu button on right */
  #header .container.mx-auto {
    justify-content: space-between;
  }
  
  #header .container.mx-auto > div:first-child {
    justify-content: flex-start;
  }
  
  /* Logo size on tablets */
  #logo-link img {
    height: 28px;
  }
  
  /* Ensure mobile menu button stays on the right for tablets */
  #header .container.mx-auto > div:last-child {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
  }
}

/* ==============
   DESKTOP
   ============== */
@media (min-width: 1024px) {
  /* Gallery Desktop */
  .gallery-card-text {
    font-size: 2.25rem;
  }
  
  #imageViewer .prev-btn,
  #imageViewer .next-btn {
    display: flex;
  }

  /* Background Optimizations */
  .scrolling-background {
    background-size: 100% 100% !important;
  }
}

/* Navigation Tablet/Mobile */
@media (max-width: 1023px) {
  .prev-btn:not(#prevImageBtn),
  .next-btn:not(#nextImageBtn) {
    display: none;
  }
  
  .bullets {
    margin: 0;
  }
}

/* ==============
   LARGE DESKTOP
   ============== */
@media (min-width: 1280px) {
  /* Hero Section Large Desktop - Full screen */
  .hero-section {
    height: 100vh;
    min-height: 100vh;
    margin-top: 0;
  }
  
  .hero-section img {
    object-position: center 5%;
  }

  /* Slider Large Desktop */
  .testimonial-card {
    width: calc(33.333% - 32px);
    padding: 32px;
    min-height: 340px;
  }

  /* Navigation Large Desktop */
  #mobile-menu-button,
  #mobile-menu {
    display: none !important;
  }
}

/* ==============
   ACCESSIBILITY & PERFORMANCE
   ============== */

/* iOS Safari Support */
@supports (-webkit-touch-callout: none) {
  body {
    overscroll-behavior-y: none;
    height: -webkit-fill-available;
  }
  
  .hero-section {
    min-height: calc(var(--mobile-vh,100vh) - env(safe-area-inset-top));
  }
}

/* Font Awesome Accessibility */
@media (prefers-reduced-motion: reduce) {
  .fa-beat, .fa-beat-fade, .fa-bounce, .fa-fade, .fa-flip, .fa-pulse, .fa-shake, .fa-spin, .fa-spin-pulse {
    animation: none !important;
    transition: none !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  #about-us .about-section,
  #about-us .about-icon-wrapper {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  
  #about-us .about-divider::before {
    animation: none !important;
  }
  
  * {
    scroll-behavior: auto;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Support */
@media (prefers-contrast: high) {
  #about-us .about-main-card {
    border: 2px solid rgba(0,0,0,0.2);
  }
  
  #about-us .about-icon-wrapper {
    border: 1px solid rgba(0,0,0,0.1);
  }
}

/* Hover Support Detection */
@media (hover: hover) and (pointer: fine) {
  .hover\:scale-105:hover {
    transform: scale(1.05) translate3d(0,0,0);
  }
}

@media (hover: none) and (pointer: coarse) {
  .hover\:scale-105:hover {
    transform: none;
  }
}

/* Smooth Scrolling for Non-Reduced Motion */
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}