/* Karuzela (carousel.js). Strona ustawia: --per-view (widoczne slajdy), --gap (odstep miedzy slajdami),
   --dot-size, --dot-color, --dot-active-color. Bez JS widac pierwsze slajdy, reszta jest przycieta. */
.carousel {
  --per-view: 1;
  --gap: 10px;
  --dot-size: 10px;
  --dot-color: rgba(255, 255, 255, .5);
  --dot-active-color: var(--color-white);
  position: relative;
}
.carousel__viewport { overflow: hidden; }
.carousel__track {
  --index: 0;
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(calc(var(--index) * -1 * (100% + var(--gap)) / var(--per-view)));
  transition: transform .5s ease;
  touch-action: pan-y;
}
.carousel__slide {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  min-width: 0;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.carousel__dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  cursor: pointer;
}
.carousel__dot[type="button"],
.carousel__dot[type="button"]:hover,
.carousel__dot[type="button"]:focus { padding: 0; border: 0; background: var(--dot-color); }
.carousel__dot[aria-current="true"][type="button"] { background: var(--dot-active-color); }
.carousel__dot:focus-visible { outline: 2px solid var(--dot-active-color); outline-offset: 2px; }

.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  line-height: 0;
  cursor: pointer;
  transform: translateY(-50%);
}
/* Tylko zerowanie resetu przyciskow motywu (bez wlasciwosci ukladu - strona je nadpisuje zwyklym selektorem). */
.carousel__arrow[type="button"],
.carousel__arrow[type="button"]:hover,
.carousel__arrow[type="button"]:focus { padding: 0; border: 0; background: none; }
.carousel__arrow:disabled { opacity: .3; cursor: default; }
.carousel__arrow svg { display: block; fill: currentColor; }
.carousel[data-static] .carousel__arrow,
.carousel[data-static] .carousel__dots { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
}