/* ======================================
   FP Marquee - przewijające się grafiki
   Wartości przychodzą jako zmienne CSS (inline style sekcji) z ustawień modułu.
   Rozmiar/odstęp przełączamy na .fp-marquee-track, bo inline style sekcji
   przebiłby media queries.
   ====================================== */

.fp-marquee-section {
  overflow: hidden;
  padding: var(--fpm-padding, 20px) 0;
  background: var(--fpm-bg, #fff);
}

.fp-marquee-track {
  --fpm-size: var(--fpm-size-lg, 200px);
  --fpm-gap: var(--fpm-gap-lg, 20px);
  display: flex;
  width: max-content;
  animation: fp-marquee-scroll var(--fpm-duration, 30s) linear infinite;
}

.fp-marquee--reverse .fp-marquee-track {
  animation-direction: reverse;
}

.fp-marquee--pause .fp-marquee-track:hover {
  animation-play-state: paused;
}

.fp-marquee-content {
  display: flex;
  gap: var(--fpm-gap);
  padding-right: var(--fpm-gap);
}

.fp-marquee-item {
  flex-shrink: 0;
  width: var(--fpm-size);
  height: var(--fpm-size);
  border-radius: var(--fpm-radius, 0px);
  overflow: hidden;
  display: block;
  transition: transform 0.3s ease;
}

.fp-marquee--zoom .fp-marquee-item:hover {
  transform: scale(1.05);
}

.fp-marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Naturalne proporcje: stała wysokość, szerokość wynika z grafiki */
.fp-marquee--natural .fp-marquee-item {
  width: auto;
}

.fp-marquee--natural .fp-marquee-item img {
  width: auto;
  object-fit: contain;
}

@keyframes fp-marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .fp-marquee-track {
    --fpm-size: var(--fpm-size-md, 150px);
    --fpm-gap: calc(var(--fpm-gap-lg, 20px) * 0.75);
  }
}

@media (max-width: 480px) {
  .fp-marquee-track {
    --fpm-size: var(--fpm-size-sm, 120px);
    --fpm-gap: calc(var(--fpm-gap-lg, 20px) * 0.5);
  }
}

/* Użytkownicy z ograniczeniem ruchu dostają zwykły pasek przewijany palcem */
@media (prefers-reduced-motion: reduce) {
  .fp-marquee-section {
    overflow-x: auto;
  }

  .fp-marquee-track {
    animation: none;
  }

  .fp-marquee-content[aria-hidden="true"] {
    display: none;
  }
}