/* 
 * Mobile Responsive Fixes for Known Issues
 * Fix conflicts between mobile-responsive.css and existing components
 * Version: 1.0
 */

/* ===== NEWS TICKER FIXES ===== */

/* Ensure news ticker animations work properly on mobile */
@media (max-width: 768px) {
  .modern-news-ticker {
    position: relative;
    overflow: hidden;
  }
  
  .ticker-content {
    animation: tickerScroll linear infinite !important;
    animation-duration: var(--ticker-speed, 30s) !important;
    animation-play-state: running !important;
  }
  
  .ticker-content.paused {
    animation-play-state: paused !important;
  }
  
  .ticker-pulse {
    animation: tickerPulse 1.5s infinite !important;
  }
  
  /* Override any mobile responsive interference */
  .news-ticker *,
  .modern-news-ticker *,
  [class*="ticker"] * {
    animation-duration: unset !important;
    transition-duration: unset !important;
    animation-timing-function: unset !important;
    transition-timing-function: unset !important;
  }
}

/* ===== IMAGE LOADING FIXES ===== */

/* Ensure article images load properly */
@media (max-width: 768px) {
  .article-image,
  .featured-image,
  .card-img-top,
  img[src*="cloudinary"] {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    object-fit: cover;
    display: block;
  }
  
  /* Lazy loading images */
  img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out !important;
  }
  
  img[loading="lazy"].loaded,
  img[loading="eager"] {
    opacity: 1;
  }
  
  /* Owl carousel images */
  .owl-lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in-out !important;
  }
  
  .owl-lazy.loaded {
    opacity: 1;
  }
}

/* ===== CAROUSEL FIXES ===== */

/* Ensure carousel animations work */
@media (max-width: 768px) {
  .owl-carousel *,
  .carousel * {
    animation-duration: unset !important;
    transition-duration: unset !important;
  }
  
  .owl-carousel .owl-stage {
    transition: transform 0.25s ease !important;
  }
  
  .owl-carousel .owl-item {
    transition: opacity 0.3s ease !important;
  }
}

/* ===== RESPONSIVE IMAGE OPTIMIZATION ===== */

/* Only apply mobile optimizations to non-critical images */
@media (max-width: 768px) {
  img:not(.article-image):not(.featured-image):not(.card-img-top):not(.logo-image):not(.owl-lazy):not([loading]):not([src*="cloudinary"]):not([data-src]) {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* ===== DEBUGGING HELPERS ===== */

/* Temporarily highlight problematic elements (remove in production) */
.debug-mode .news-ticker {
  border: 2px solid red !important;
}

.debug-mode .article-image {
  border: 2px solid green !important;
}

.debug-mode .owl-carousel {
  border: 2px solid blue !important;
}