/* ======================================
   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 .fpmq-track, bo inline style sekcji
   przebiłby media queries.
   Prefiks fpmq- (nie fp-marquee-) celowo: stary ręczny marquee w motywie
   ma klasy fp-marquee-* ze sztywnym 30s i pauzą na :hover.
   ====================================== */

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

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

.fpmq--reverse .fpmq-track {
  animation-direction: reverse;
}

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

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

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

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

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

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

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

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

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

@media (max-width: 480px) {
  .fpmq-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) {
  .fpmq-section {
    overflow-x: auto;
  }

  .fpmq-track {
    animation: none;
  }

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