/* 
  LMDP BANNER DISPLAY SYSTEM - FRESH SYSTEM
  Each banner controlled independently based on language + screen size
  Complete isolation from other CSS to prevent conflicts
*/

/* Base rules - Hide all banners by default and set sizing */
#lmdp-french-banner-web,
#lmdp-french-banner-mobile,
#lmdp-english-banner-web,
#lmdp-english-banner-mobile {
  display: none !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  object-fit: contain !important;
}

/* Desktop breakpoint (min-width: 992px) */
@media (min-width: 992px) {
  /* Hide ALL mobile banners on desktop */
  #lmdp-french-banner-mobile,
  #lmdp-english-banner-mobile {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Hide ALL web banners by default */
  #lmdp-french-banner-web,
  #lmdp-english-banner-web {
    display: none !important;
  }
  
  /* Show only active web banner */
  #lmdp-french-banner-web.active,
  #lmdp-english-banner-web.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* Mobile breakpoint (max-width: 991px) */
@media (max-width: 991px) {
  /* Hide ALL web banners on mobile */
  #lmdp-french-banner-web,
  #lmdp-english-banner-web {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Hide ALL mobile banners by default */
  #lmdp-french-banner-mobile,
  #lmdp-english-banner-mobile {
    display: none !important;
  }
  
  /* Show only active mobile banner */
  #lmdp-french-banner-mobile.active,
  #lmdp-english-banner-mobile.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ===== LMDP Language Logos Display ===== */

/* Desktop: Show web language logos, hide mobile */
.lmdp-language-logos-web {
  text-align: end;
  margin-right: 30px;
  display: block !important;
}

.lmdp-language-logos-mobile {
  display: none !important;
}

/* Mobile: Show mobile language logos, hide web */
@media (max-width: 991px) {
  .lmdp-language-logos-mobile {
    display: block !important;
    text-align: end;
    margin-right: 30px;
    margin-top: 10px;
  }

  .lmdp-language-logos-web {
    display: none !important;
  }
}

/* ===== Workshop Images Display ===== */

/* Desktop: Show grid layout */
/* .workshop-images {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 20px 0;
} */

/* .workshop-images img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
} */

/* Mobile: Hide grid, show carousel */
/* @media (max-width: 991px) {
  .workshop-images {
    display: none !important;
  }
  
  .workshop-carousel {
    display: block !important;
  }
} */

/* Desktop: Hide carousel, show grid */
/* @media (min-width: 992px) {
  .workshop-carousel {
    display: none !important;
  }
  
  .workshop-images {
    display: grid !important;
  }
} */

/* ===== LMDP Buttons Display (French & English) ===== */

/* Parent container for buttons and flags */
.lmdp-buttons-and-flags {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  min-height: auto !important;
  visibility: visible !important;
}

/* Base: Hide buttons by default - NO !important to allow inline styles to override */
#lmdp-english-button.lmdp-english-button,
#lmdp-french-button.lmdp-french-button {
  display: none;
  visibility: visible !important;
}

.lmdp-buttons-container {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  visibility: visible !important;
}

.lmdp-language-button {
  text-decoration: none !important;
  transition: opacity 0.3s ease, transform 0.2s ease !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.lmdp-language-button:hover {
  transform: scale(1.05) !important;
}

/* Extra small screens - xs (< 576px) */
@media (max-width: 575px) {
  .lmdp-buttons-and-flags {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 5px !important;
  }
  
  .lmdp-buttons-container {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
  }
  
  #lmdp-english-button.lmdp-english-button,
  #lmdp-french-button.lmdp-french-button {
    display: inline-block !important;
    margin: 0 3px !important;
    visibility: visible !important;
  }
}

/* Small screens - sm (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .lmdp-buttons-and-flags {
    display: flex !important;
    width: 100% !important;
    justify-content: flex-end !important;
  }
  
  #lmdp-english-button.lmdp-english-button,
  #lmdp-french-button.lmdp-french-button {
    display: inline-block !important;
    margin: 0 5px !important;
    visibility: visible !important;
  }
  
  .lmdp-buttons-container {
    display: flex !important;
    justify-content: flex-end !important;
    width: auto !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
  }
}

/* Medium screens - md (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .lmdp-buttons-and-flags {
    display: flex !important;
    width: auto !important;
    justify-content: flex-end !important;
  }
  
  #lmdp-english-button.lmdp-english-button,
  #lmdp-french-button.lmdp-french-button {
    display: inline-block !important;
    margin: 0 5px !important;
    visibility: visible !important;
  }
  
  .lmdp-buttons-container {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }
}

/* Large screens - lg (992px and up) */
@media (min-width: 992px) {
  #lmdp-english-button.lmdp-english-button,
  #lmdp-french-button.lmdp-french-button {
    display: inline-block !important;
    margin: 0 5px !important;
    visibility: visible !important;
  }
  
  .lmdp-buttons-container {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
}

/* ===== Mobile Header Responsive Display ===== */

/* Desktop: Show desktop header row, hide mobile header */
@media (min-width: 992px) {
  .lmdp-header-desktop {
    display: flex !important;
  }
  
  .lmdp-mobile-header {
    display: none !important;
  }
}

/* Mobile: Hide desktop header row, show mobile header */
@media (max-width: 991px) {
  .lmdp-header-desktop {
    display: none !important;
  }
  
  .lmdp-mobile-header {
    display: block !important;
  }
  
  .lmdp-language-logos-mobile {
    display: none !important;
  }
}

/* Mobile menu and dropdown styling */
.lmdp-dropdown-menu {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.lmdp-mobile-menu {
  animation: slideDown 0.2s ease-out;
}

.lmdp-mobile-menu-list li:hover {
  background-color: #f0f0f0;
}

/* Mobile: Reduce font size for "Un voyage gastronomique" section */
@media (max-width: 991px) {
  /* Reduce heading size on mobile */
  div[style*="display: flex; align-items: center; justify-content: center; gap: 20px"] h3 {
    font-size: 18px !important;
  }

  /* Reduce SVG/flag sizes on mobile */
  div[style*="display: flex; align-items: center; justify-content: center; gap: 20px"] svg {
    width: 30px !important;
    height: 15px !important;
  }

  /* Reduce paragraph font size for the gastronomique section */
  p[style*="text-align: center; font-style: italic"] {
    font-size: 12px !important;
    margin: 8px 10% 6px !important;
  }

  /* Reduce first-para font size on mobile */
  p.first-para {
    font-size: 13px !important;
  }

  /* Reduce video title font size on mobile */
  .lmdp-video-title {
    font-size: 12px !important;
  }
}