/* ========================================
   Logo Carousel Styles
   Horizontal scrolling with smooth animation
   ======================================== */

/* Container */
.logo-carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--space-8) 0;
  background: transparent;
}

/* Fade edges - removed for transparent background */

/* Carousel wrapper */
.logo-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Track */
.logo-carousel-track {
  display: flex;
  width: fit-content;
  will-change: transform;
  /* Animation controlled by JavaScript */
}

/* Pause on hover - handled by JavaScript */

/* Individual slides */
.logo-carousel-slide {
  flex: 0 0 auto;
  padding: 0 var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
}

/* Logo styling */
.carousel-logo {
  max-height: 36px;
  width: auto;
  filter: grayscale(100%) opacity(0.6);
  transition: all var(--transition-base);
  cursor: pointer;
}

.carousel-logo:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.1);
}

/* Animation controlled by JavaScript - no CSS keyframes needed */

/* Responsive adjustments */
@media (max-width: 1200px) {
  .logo-carousel-slide {
    padding: 0 var(--space-6);
    min-width: 160px;
  }
}

@media (max-width: 768px) {
  .logo-carousel-slide {
    padding: 0 var(--space-4);
    min-width: 120px;
  }
  
  .carousel-logo {
    max-height: 28px;
  }
  
  /* Mobile animation speed handled by JavaScript */
}

@media (max-width: 480px) {
  .logo-carousel-slide {
    padding: 0 var(--space-3);
    min-width: 100px;
  }
  
  .carousel-logo {
    max-height: 24px;
  }
  
  /* Animation speed already set in 768px media query above */
}