/* Base Carousel System - Embla Carousel Official Best Practices */

/* ==========================================================================
   Base Carousel Structure (Official Embla Classes)
   ========================================================================== */

.embla {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.embla__viewport {
  overflow: hidden;
  width: 100%;
}

.embla__container {
  display: flex;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y pinch-zoom;
}

.embla__slide {
  flex: 0 0 auto;
  min-width: 0;
  position: relative;
}

/* ==========================================================================
   Slide Gaps - Single Source of Truth
   ========================================================================== */

/* No gaps on mobile - slides take full width */
@media (max-width: 639px) {
  .embla__slide {
    margin-right: 0;
  }
}

/* Small gaps on tablet */
@media (min-width: 640px) and (max-width: 1023px) {
  .embla__slide {
    margin-right: 0.75rem;
  }
  
  .embla__slide:last-child {
    margin-right: 0;
  }
}

/* Medium gaps on desktop */
@media (min-width: 1024px) {
  .embla__slide {
    margin-right: 1rem;
  }
  
  .embla__slide:last-child {
    margin-right: 0;
  }
}

/* ==========================================================================
   Slide Sizes - Using Flex Basis (Official Embla Method)
   ========================================================================== */

/* Default: 1 slide per view on mobile */
@media (max-width: 639px) {
  .embla__slide {
    flex: 0 0 100%;
    min-width: 0;
  }
}

/* Compact variant for multi-slide layouts */
@media (min-width: 640px) {
  .embla--compact .embla__slide {
    flex: 0 0 calc(50% - 0.375rem); /* 50% minus half the gap */
    min-width: 0;
  }
}

@media (min-width: 1024px) {
  .embla--compact .embla__slide {
    flex: 0 0 calc(33.333% - 0.333rem); /* 33.333% minus third of the gap */
    min-width: 0;
  }
}

@media (min-width: 1280px) {
  .embla--compact .embla__slide {
    flex: 0 0 calc(25% - 0.375rem); /* 25% minus quarter of the gap */
    min-width: 0;
  }
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

/* Hide scrollbars while maintaining functionality */
.embla__viewport::-webkit-scrollbar {
  display: none;
}

.embla__viewport {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Smooth transitions for tab switching */
.embla-panel {
  transition: opacity 0.15s ease-in-out;
}

.embla-panel[style*="display: block"] {
  display: block !important;
}

/* ==========================================================================
   Main Gallery Specific Styles - Layout Only
   ========================================================================== */

#main-gallery-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}

#main-gallery-carousel .embla__viewport {
  overflow: hidden;
  width: 100%;
}

#main-gallery-carousel .embla__container {
  display: flex;
}

#main-gallery-carousel .embla__slide {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
}

/* Main gallery navigation buttons - layout only */
#main-gallery-carousel .embla__prev,
#main-gallery-carousel .embla__next {
  opacity: 0;
  transition: opacity 0.2s ease;
}

#main-gallery-carousel:hover .embla__prev,
#main-gallery-carousel:hover .embla__next {
  opacity: 1;
}

/* ==========================================================================
   Lightbox Specific Styles
   ========================================================================== */

.embla--lightbox {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.embla--lightbox .embla__viewport {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.embla--lightbox .embla__container {
  display: flex;
  height: 100%;
}

.embla--lightbox .embla__slide {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Thumbnail Carousel Specific Styles
   ========================================================================== */

.embla--thumbnails {
  --slide-spacing: 0.25rem;
}

.embla--thumbnails .embla__container {
  margin-left: calc(var(--slide-spacing) * -1);
  gap: var(--slide-spacing);
}

.embla--thumbnails .embla__slide {
  flex: 0 0 auto;
  min-width: 0;
  width: 80px; /* Fixed width for consistent thumbnails */
  margin-left: var(--slide-spacing);
}

/* Thumbnail-specific responsive adjustments */
@media (min-width: 640px) {
  .embla--thumbnails .embla__slide {
    width: 96px;
  }
}

@media (min-width: 1024px) {
  .embla--thumbnails .embla__slide {
    width: 112px;
  }
}

@media (min-width: 1280px) {
  .embla--thumbnails .embla__slide {
    width: 128px;
  }
}

/* Thumbnail active state */
.embla--thumbnails .embla__slide.active {
  border-color: #000 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Hide scrollbar for thumbnails */
.embla--thumbnails .embla__viewport::-webkit-scrollbar {
  display: none;
}

.embla--thumbnails .embla__viewport {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.embla-loading-state .animate-pulse {
  animation: embla-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes embla-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}