/* ═══════════════════════════════════════════════════════════
   fanway-ai-packages.css
   Layout karuzel /pakiety-jezykowe/ — OSOBNY plik od fanway-ai-public.css
   (ta strona nie ma nic wspólnego z galerią zestawów: inne dane, inny
   shortcode, inny JS orchestrator). Mechanika przewijania (strzałki po
   bokach, poziomy rząd kart) naśladuje istniejący styl /kanaly-tv/ dla
   spójności wizualnej platformy — sama treść kart (grafika + dymek +
   liczba) jest unikalna dla tego modułu.
═══════════════════════════════════════════════════════════ */

.fai-pkg-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 40px;
}

.fai-pkg-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 12px;
  flex: 1;
  /* ukryj natywny scrollbar (spójnie z resztą platformy) — nawigacja przez strzałki */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fai-pkg-track::-webkit-scrollbar { display: none; }

.fai-pkg-tile {
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
}

.fai-pkg-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 858 / 432;
  border-radius: 12px;
  overflow: hidden;
  background: #10131a;
}

.fai-pkg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fai-pkg-img-missing {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #1c2130, #1c2130 10px, #10131a 10px, #10131a 20px);
}

/* Liczba nałożona na dymek — pozycja sterowana zmiennymi CSS ustawionymi
   inline per pakiet (patrz --fai-pkg-* w packages.php), bo różni się
   między językami, ale jest stała w obrębie jednego pakietu (wszystkie
   7 kafli tego samego języka mają tę samą pozycję dymka). */
.fai-pkg-bubble-num {
  position: absolute;
  left: var(--fai-pkg-left, 30%);
  right: calc(100% - var(--fai-pkg-right, 75%));
  top: var(--fai-pkg-top, 20%);
  bottom: calc(100% - var(--fai-pkg-bottom, 78%));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a2b6b;
  font-weight: 800;
  font-size: clamp(20px, 8cqw, 40px);
  line-height: 1;
  pointer-events: none;
}

.fai-pkg-caption {
  margin-top: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.fai-pkg-arrow {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}
.fai-pkg-arrow:hover {
  background: rgba(230, 51, 44, 0.85); /* --faie-accent-red z fanway-ai-public.css */
}

@media (max-width: 640px) {
  .fai-pkg-tile { width: 220px; }
  .fai-pkg-arrow { display: none; } /* na mobile nawigacja przez swipe, strzałki zbędne */
}