/**
 * HistoriaNBA – NBA Teams Carousel
 * Czysty CSS marquee — bez żadnego JS na froncie.
 *
 * Sposób działania: lista logotypów jest wyrenderowana w PHP DWA RAZY pod rząd
 * (ta sama lista, skopiowana). Track ma szerokość dopasowaną do treści
 * (width: max-content) i jest animowany o dokładnie -50% swojej szerokości —
 * czyli o szerokość JEDNEJ kopii listy. Dzięki temu w momencie zakończenia
 * animacji drugi zestaw logotypów jest wizualnie identyczny z pierwszym
 * na starcie, więc pętla wygląda na nieskończoną i bez szarpania.
 *
 * Liczba widocznych logotypów naraz jest sterowana przez Container Queries
 * (container-type: inline-size) — szerokość kafla liczy się względem
 * szerokości samego komponentu, a nie całego viewportu. Dzięki temu działa
 * poprawnie niezależnie od tego, w jak szerokim miejscu strony osadzisz blok
 * (pełna szerokość, sidebar, wąska kolumna itd.).
 */

.nba-teams-carousel {
  --gap: 32px;
  --visible: 6; /* Desktop: 6 logotypów naraz */
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #FFFFFF; /* logotypy mają białe tło "wpalone" w pliki graficzne */
  padding: 24px 0;
  border-radius: 10px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.nba-teams-carousel *,
.nba-teams-carousel *::before,
.nba-teams-carousel *::after {
  box-sizing: inherit;
}

.nba-teams-carousel__track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;
  animation: nba-teams-scroll var(--nba-teams-duration, 60s) linear infinite;
}

/* Pauza na najechanie kursorem (tylko urządzenia z myszką — hover) */
@media (hover: hover) {
  .nba-teams-carousel:hover .nba-teams-carousel__track {
    animation-play-state: paused;
  }
}

@keyframes nba-teams-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.nba-teams-carousel__logo {
  flex: 0 0 auto;
  width: calc((100cqw - (var(--visible) - 1) * var(--gap)) / var(--visible));
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nba-teams-carousel__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* zachowuje proporcje, nigdy nie rozciąga */
  display: block;
}

/* Laptop: 5 logotypów naraz */
@container (max-width: 1400px) {
  .nba-teams-carousel {
    --visible: 5;
    --gap: 28px;
  }
  .nba-teams-carousel__logo {
    height: 56px;
  }
}

/* Tablet: 4 logotypy naraz */
@container (max-width: 991px) {
  .nba-teams-carousel {
    --visible: 4;
    --gap: 22px;
  }
  .nba-teams-carousel__logo {
    height: 48px;
  }
}

/* Telefon: 3 logotypy naraz (najlepszy kompromis czytelności i tempa) */
@container (max-width: 600px) {
  .nba-teams-carousel {
    --visible: 3;
    --gap: 14px;
  }
  .nba-teams-carousel__logo {
    height: 40px;
  }
}

/* Fallback dla przeglądarek bez wsparcia Container Queries:
   spadamy na zwykłe media queries (mniej precyzyjne, ale nadal działające) */
@supports not (container-type: inline-size) {
  @media (max-width: 1400px) {
    .nba-teams-carousel { --visible: 5; --gap: 28px; }
  }
  @media (max-width: 991px) {
    .nba-teams-carousel { --visible: 4; --gap: 22px; }
  }
  @media (max-width: 600px) {
    .nba-teams-carousel { --visible: 3; --gap: 14px; }
  }
  .nba-teams-carousel__logo {
    width: calc((100vw - (var(--visible) - 1) * var(--gap)) / var(--visible));
  }
}

/* Szanuj preferencje systemowe co do ograniczonego ruchu */
@media (prefers-reduced-motion: reduce) {
  .nba-teams-carousel__track {
    animation: none;
  }
}