/* =====================================================================
   Posuvné pásy snímků — jedna komponenta: na homepage promo pás
   (.carousel-promo) a pás funkcí (.carousel-features), v manuálu řady
   screenshotů (.shots.carousel-track). JS v assets/js/carousel.js.
   Desktop: pásy na homepage po 3 se šipkami; v manuálu řady do 3 snímků
   vidět celé, delší řady (.carousel-shots) po 3 se šipkami a tečkami.
   Mobil (≤ 720 px): všechno po jednom snímku, posun prstem se scroll-snap,
   okraj dalšího snímku vykukuje, pod pásem tečky.
   Placeholder (.ph) a obrázek (.shotimg) přebírá ze stylů stránky.
   ===================================================================== */
section.promo-strip { padding: 44px 0 0; }

.carousel { position: relative; }
.carousel-features { margin-top: 40px; }

/* promo pás je posuvný vždy */
.carousel .carousel-track {
  position: relative;
  list-style: none; margin: 0; padding: 2px 0 6px;
  display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius:28px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus { outline:none; }
.carousel-track:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }

.carousel-slide {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
}
.carousel-slide figure.shot { max-width: none; min-width: 0; margin: 0; }

/* šipky — jen desktop s myší */
.carousel-nav {
  position: absolute; top: calc(50% - 30px); z-index: 3;
  width: 44px; height: 44px; border-radius:50%;
  display: none; align-items: center; justify-content: center;
  background:var(--glass); color:var(--text);
  border:1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer; transition: border-color .15s, color .15s, opacity .2s;
}
.carousel-nav svg { width: 18px; height: 18px; }
.carousel-nav:hover { border-color:var(--accent); color:var(--accent-text); }
.carousel-nav:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.carousel-nav[disabled] { opacity: 0; pointer-events: none; }
.carousel-nav.prev { left: -64px; }
.carousel-nav.next { right: -64px; }

/* indikátor: rozsvícené tečky = snímky, které jsou vidět */
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.carousel-dots button {
  width: 8px; height: 8px; padding: 0; border:0; border-radius:999px;
  background:var(--line); cursor: pointer;
  transition: background .2s, width .25s;
}
.carousel-dots button[aria-current="true"] { background:var(--accent); width: 20px; }
.carousel-dots button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* řady screenshotů mají tečky jen na mobilu (na desktopu jsou vidět celé) */
.carousel-dots.for-shots { display: none; }

/* manuál: řada s víc než 3 snímky = pás v rámu .carousel-shots (šipky, tečky i na desktopu) */
.carousel-shots { margin: 26px 0; }
.carousel-shots .shots.carousel-track { flex-wrap: nowrap; }
@media (min-width: 721px) {
  .carousel-shots .shots.carousel-track figure.shot {
    flex: 0 0 calc((100% - 40px) / 3); min-width: 0; max-width: none; scroll-snap-align: start;
  }
}

@media (hover: hover) and (min-width: 721px) {
  .carousel-nav { display: flex; }
}
@media (max-width: 1119px) {
  .carousel-nav.prev { left: 10px; }
  .carousel-nav.next { right: 10px; }
}
@media (max-width: 720px) {
  section.promo-strip { padding-top: 32px; }

  /* promo i řady screenshotů: po jednom snímku, další vykukuje */
  .carousel .carousel-track,
  .shots.carousel-track {
    position: relative;
    display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -24px !important; margin-right: -24px !important;   /* hero řada má inline margin:0 */
    padding: 2px 24px 6px; border-radius:0;
  }
  .carousel-slide,
  .shots.carousel-track figure.shot {
    flex: 0 0 80%; min-width: 0; margin: 0; scroll-snap-align: center;
    max-width: none !important;   /* hodinky v manuálu mají inline max-width */
  }
  .carousel-dots.for-shots { display: flex; margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto !important; }
  .carousel-nav, .carousel-dots button { transition: none; }
}