/* Logo Carousel Block */

.logo-carousel-block {
  position: relative;
  overflow: hidden;
  padding: 2rem 0;
  width: 100%;
}

.logo-carousel-container {
  position: relative;
  width: 100%;
}

.logo-carousel-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  animation: scroll-left linear infinite;
  width: max-content;
  will-change: transform;
}

/* Speed variants */
.logo-carousel-block.speed-slow .logo-carousel-track {
  animation-duration: 60s;
}

.logo-carousel-block.speed-medium .logo-carousel-track {
  animation-duration: 40s;
}

.logo-carousel-block.speed-fast .logo-carousel-track {
  animation-duration: 20s;
}

/* Logo items */
.logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  max-width: 120px;
  height: 50px;
  margin: 0 1rem;
}

.logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.logo-link:hover {
  opacity: 0.8;
}

.logo-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1); /* Domyślnie białe */
}

/* Background color variants */
.logo-carousel-block.bg-blue {
  background-color: var(--color-science-blue);
}

.logo-carousel-block.bg-dark {
  background-color: var(--color-main);
}

.logo-carousel-block.bg-white {
  background-color: var(--color-white);
}

/* Logo color variants */
.logo-carousel-block.logo-white .logo-image {
  filter: brightness(0) invert(1); /* Białe */
}

.logo-carousel-block.logo-dark .logo-image {
  filter: brightness(0); /* Ciemne */
}

.logo-carousel-block.logo-original .logo-image {
  filter: none; /* Oryginalne kolory */
}

/* Animation */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause on hover */
.logo-carousel-block:hover .logo-carousel-track {
  animation-play-state: paused;
}

/* Mobile */
@media (max-width: 768px) {
  .logo-carousel-block {
    padding: 1.5rem 0;
  }
  
  .logo-carousel-track {
    gap: 1rem;
  }
  
  .logo-item {
    min-width: 60px;
    max-width: 80px;
    height: 40px;
    margin: 0 0.5rem;
  }
  
  /* Wolniejsze na mobile */
  .logo-carousel-block.speed-slow .logo-carousel-track {
    animation-duration: 80s;
  }
  
  .logo-carousel-block.speed-medium .logo-carousel-track {
    animation-duration: 60s;
  }
  
  .logo-carousel-block.speed-fast .logo-carousel-track {
    animation-duration: 30s;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .logo-carousel-block {
    padding: 1rem 0;
  }
  
  .logo-item {
    min-width: 50px;
    max-width: 60px;
    height: 35px;
    margin: 0 0.3rem;
  }
}

/* Extra small mobile */
@media (max-width: 360px) {
  .logo-carousel-block {
    padding: 0.8rem 0;
  }
  
  .logo-item {
    min-width: 40px;
    max-width: 50px;
    height: 30px;
    margin: 0 0.2rem;
  }
}