/* Mobile Public Pages CSS - Ensures single centered ad on mobile */

/* Mobile (768px and below) */
@media (max-width: 768px) {
  /* Hide right ad container on mobile - show only one centered ad */
  #featuredCarouselRight,
  .featured-carousel-right,
  [id*="featuredCarouselRight"] {
    display: none !important;
  }
  
  /* Ensure left ad container is visible and properly sized */
  #featuredCarousel,
  .featured-carousel-left,
  [id*="featuredCarousel"]:not([id*="Right"]) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    height: 100px !important;
    flex: none !important;
    display: block !important;
  }
  
  /* Improve header layout for mobile */
  .header-row {
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 1rem !important;
    max-width: 100% !important;
  }
  
  /* Center logo on mobile */
  .logo {
    min-width: auto !important;
    text-align: center !important;
  }
  
  .logo img {
    max-width: 200px !important;
    width: auto !important;
  }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
  /* Keep right ad hidden on small mobile */
  #featuredCarouselRight,
  .featured-carousel-right,
  [id*="featuredCarouselRight"] {
    display: none !important;
  }
  
  /* Adjust left ad size for small mobile */
  #featuredCarousel,
  .featured-carousel-left,
  [id*="featuredCarousel"]:not([id*="Right"]) {
    height: 80px !important;
  }
  
  /* Improve header spacing for small mobile */
  .header-row {
    gap: 0.75rem !important;
    padding: 0.75rem !important;
  }
  
  /* Smaller logo for small mobile */
  .logo img {
    max-width: 180px !important;
  }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  /* In landscape, we can show both ads but make them smaller */
  #featuredCarouselRight,
  .featured-carousel-right,
  [id*="featuredCarouselRight"] {
    display: block !important;
    height: 60px !important;
  }
  
  #featuredCarousel,
  .featured-carousel-left,
  [id*="featuredCarousel"]:not([id*="Right"]) {
    height: 60px !important;
  }
  
  /* Adjust header for landscape */
  .header-row {
    flex-direction: row !important;
    gap: 0.5rem !important;
  }
}