/**
 * Kamaroit Product Slider — stylesheet
 * Zero external dependencies. CSS custom properties for easy theming.
 *
 * Naming convention: BEM-ish, prefixed with .kps-
 */

/* ============================================================
   Custom properties (override at theme level)
   ============================================================ */
:root {
  --kps-ratio:          1 / 1;          /* Default aspect ratio                     */
  --kps-bg:             #f7f7f6;        /* Slide background (prevents flash)         */
  --kps-dot-size:       6px;            /* Dot diameter                              */
  --kps-dot-active:     #1a1a1a;        /* Active dot colour                         */
  --kps-dot-idle:       rgba(26,26,26,0.22); /* Idle dot colour                     */
  --kps-dot-gap:        8px;            /* Gap between dots                          */
  --kps-arrow-size:     36px;           /* Arrow button hit area                     */
  --kps-arrow-color:    #1a1a1a;        /* Arrow icon colour                         */
  --kps-arrow-bg:       rgba(255,255,255,0.82); /* Arrow bg (backdrop-filter below) */
  --kps-arrow-radius:   50%;
  --kps-transition:     420ms cubic-bezier(0.4, 0, 0.2, 1);
  --kps-img-fit:        cover;
}

/* ============================================================
   Slider container
   ============================================================ */
.kps-slider {
  position:     relative;
  overflow:     hidden;
  isolation:    isolate;
  user-select:  none;
  -webkit-user-select: none;
  border-radius: 2px;
  /* aspect-ratio tutaj — slider dostaje szerokość od gridu rodzica
     zanim cokolwiek wewnątrz się wyrenderuje. Dzięki temu wysokość
     jest zawsze określona, niezależnie od tego czy flex track
     zdążył dostać swoją szerokość. */
  aspect-ratio:  var(--kps-ratio);
  /* Fallback dla bardzo starych Safari bez aspect-ratio support */
  width:         100%;
}

/* ============================================================
   Track — horizontal scroll via CSS Scroll Snap
   ============================================================ */
.kps-track {
  display:                flex;
  /* Wypełnij całą wysokość slidera */
  height:                 100%;
  overflow-x:             auto;
  overscroll-behavior-x:  contain;
  scroll-snap-type:       x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:        none;
  -ms-overflow-style:     none;
}

.kps-track::-webkit-scrollbar {
  display: none;
}

/* will-change i touch-action tylko gdy jest więcej niż 1 slajd */
.kps-slider[data-count]:not([data-count="1"]) {
  touch-action: pan-y;
}

.kps-slider[data-count]:not([data-count="1"]) .kps-track {
  will-change: scroll-position;
}

/* ============================================================
   Individual slide
   ============================================================ */
.kps-slide {
  flex:              0 0 100%;
  /* Wysokość dziedziczy z track który dziedziczy z kps-slider.
     NIE ustawiamy aspect-ratio tutaj — to było źródło bugu:
     flex child z aspect-ratio potrzebuje szerokości rodzica,
     której może nie mieć w momencie pierwszego paint. */
  height:            100%;
  scroll-snap-align: start;
  scroll-snap-stop:  always;
  background-color:  var(--kps-bg);
  position:          relative;
  overflow:          hidden;
}

/* ============================================================
   Slide link — fills entire slide, focus ring inset
   ============================================================ */
.kps-slide__link {
  display:  block;
  width:    100%;
  height:   100%;
  position: relative;
  outline:  none;
}

.kps-slide__link:focus-visible {
  outline:        2px solid var(--kps-arrow-color);
  outline-offset: -2px;
}

/* ============================================================
   Image
   ============================================================ */
.kps-slide__img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: var(--kps-img-fit);
  /* Sub-pixel antialiasing */
  backface-visibility: hidden;
  /* Smooth appear for lazy-loaded images */
  transition: opacity var(--kps-transition);
}

/* Lazy image — transparent until loaded */
.kps-slide__img.kps-lazy {
  opacity: 0;
}

.kps-slide__img.kps-lazy.is-loaded {
  opacity: 1;
}

/* ============================================================
   Arrows — desktop only
   ============================================================ */
.kps-arrow {
  display:         none; /* Mobile: hidden */
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         2;
  width:           var(--kps-arrow-size);
  height:          var(--kps-arrow-size);
  padding:         0;
  border:          none;
  border-radius:   var(--kps-arrow-radius);
  background:      var(--kps-arrow-bg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color:           var(--kps-arrow-color);
  cursor:          pointer;
  transition:      opacity var(--kps-transition),
                   background var(--kps-transition),
                   transform 200ms ease;
  /* Keyboard accessible */
  outline:         none;
  align-items:     center;
  justify-content: center;
}

/* Show on desktop */
@media (hover: hover) and (pointer: fine) {
  .kps-arrow {
    display: flex;
  }
}

.kps-arrow:focus-visible {
  outline:        2px solid var(--kps-arrow-color);
  outline-offset: 2px;
}

.kps-arrow:hover:not(:disabled) {
  background: rgba(255,255,255,0.96);
}

.kps-arrow:active:not(:disabled) {
  transform: translateY(-50%) scale(0.93);
}

.kps-arrow:disabled {
  opacity:  0.3;
  cursor:   default;
  pointer-events: none;
}

.kps-arrow--prev {
  left: 12px;
}

.kps-arrow--next {
  right: 12px;
}

/* Arrow hover reveal — subtle opacity animation */
.kps-slider:not(:hover) .kps-arrow {
  opacity: 0;
  pointer-events: none;
}

/* Reveal on hover */
.kps-slider:hover .kps-arrow:not(:disabled) {
  opacity: 1;
  pointer-events: auto;
}

/* Always show when focused via keyboard */
.kps-slider:focus-within .kps-arrow:not(:disabled) {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   Dots — always visible
   ============================================================ */
.kps-dots {
  position:        absolute;
  bottom:          12px;
  left:            50%;
  transform:       translateX(-50%);
  z-index:         2;
  display:         flex;
  align-items:     center;
  gap:             var(--kps-dot-gap);
  /* Subtle pill background to ensure visibility over any image */
  background:      rgba(255,255,255,0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius:   100px;
  padding:         6px 10px;
  line-height:     1;
}

/* ============================================================
   Individual dot
   ============================================================ */
.kps-dot {
  width:         var(--kps-dot-size);
  height:        var(--kps-dot-size);
  padding:       0;
  border:        none;
  border-radius: 50%;
  background:    var(--kps-dot-idle);
  cursor:        pointer;
  transition:    background var(--kps-transition),
                 transform var(--kps-transition),
                 width var(--kps-transition);
  /* Enlarge hit area for touch */
  position:      relative;
}

.kps-dot::before {
  content:  '';
  position: absolute;
  inset:    -6px;
}

.kps-dot:focus-visible {
  outline:        2px solid var(--kps-arrow-color);
  outline-offset: 2px;
}

.kps-dot:hover {
  background: rgba(26,26,26,0.50);
  transform:  scale(1.15);
}

/* Active dot: wider pill shape */
.kps-dot.is-active {
  background: var(--kps-dot-active);
  width:      18px;
  border-radius: 100px;
}

/* ============================================================
   Single-image: wyłącz scroll snap żeby naprawić iOS Safari paint bug.
   Safari nie maluje zawartości overflow:auto + scroll-snap gdy nie ma
   czego scrollować — kontener z 1 slajdem jest "pusty" z perspektywy
   compositing layer i paint jest odkładany w nieskończoność.
   ============================================================ */
.kps-slider[data-count="1"] .kps-track {
  overflow-x:       visible;
  scroll-snap-type: none;
}

.kps-slider[data-count="1"] .kps-dots,
.kps-slider[data-count="1"] .kps-arrow {
  display: none !important;
}

/* ============================================================
   Reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .kps-slide__img,
  .kps-arrow,
  .kps-dot {
    transition: none;
  }
}