/* Mobile Background Override - Remove bg-large.png on mobile devices */
/* This centralizes the mobile background removal for all pages */

/* Default background for desktop/tablet */
.page-layout-container,
.footer-section {
  background: url("../../src/assets/media/bg-large.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

/* Mobile specific overrides */
@media (max-width: 767px) {
  /* Remove background image from page-layout-container and footer-section on mobile */
  .page-layout-container,
  .footer-section {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    background-attachment: initial !important;
  }
  
  /* Light mode specific - transparent background */
  body:not(.dark-mode-active) .page-layout-container,
  body:not(.dark-mode-active) .footer-section {
    background-color: transparent !important;
  }
  
  /* Dark mode specific - dark background */
  .dark-mode-active .page-layout-container,
  .dark-mode-active .footer-section,
  body.dark-mode-active .page-layout-container,
  body.dark-mode-active .footer-section {
    background: none !important;
    background-image: none !important;
    background-color: #212529 !important;
  }
  
  /* Ensure panel containers also have proper background on mobile */
  .panel-container,
  .panel-container-mobile,
  .carousel-panel,
  .mobile-panels-carousel-wrapper {
    background-image: none !important;
  }
  
  /* Dark mode for panel containers */
  .dark-mode-active .panel-container,
  .dark-mode-active .panel-container-mobile,
  .dark-mode-active .carousel-panel,
  .dark-mode-active .mobile-panels-carousel-wrapper {
    background-color: #212529 !important;
  }
}