/* css/review-slider.css
 * ============================================================
 * KARUZELA OPINII — tor + nawigacja (strzałki, kropki). Wygląd wspólny dla:
 *   • sekcja „Co mówią nasi klienci" na landingu (index.html + css/index-reviews.css)
 *   • sekcja „Co mówią nasi klienci" w kroku 2  (kadr_step2.html)
 * Odpowiednik js/opinie/featured-carousel.js po stronie stylów: ten plik opisuje
 * DOKŁADNIE tę strukturę, którą obsługuje setupSlider() z tamtego modułu.
 *
 * SKĄD SIĘ WZIĄŁ: reguły `.rev-slider*` żyły w inline <style> w kadr_step2.html.
 * Gdy karuzela weszła na landing, były dwie drogi: skopiować ~60 linii do drugiego
 * pliku (i czekać, aż się rozjadą przy pierwszej poprawce), albo wyciągnąć je tutaj.
 * To jest ta druga.
 *
 * CZEGO TU NIE MA (świadomie):
 *   • wygląd samej karty opinii            → css/review-card.css
 *   • kafelki gwiazdek                     → css/stars.css
 *   • oprawa sekcji (nagłówek, tło, CTA)   → css/index-reviews.css / kadr_step2.html
 *
 * TOKENY: definiowane na `.rev-slider`, nadpisywalne przez stronę-hosta. To jest
 * API tego komponentu — checkout ma paletę chłodną (#E5E7EB, biel), landing ciepłą
 * (#DBD1D1, krem), a żadna z nich nie wymaga dublowania reguł.
 *
 * `--revsl-per-view` STERUJE UKŁADEM: ile kart mieści się w torze naraz. Wartość
 * UŁAMKOWA jest tu normalna i zamierzona — 1.35 znaczy „jedna cała + zajawka
 * następnej", co samo w sobie mówi klientowi, że opinii jest więcej. Liczba kropek
 * NIE jest wtedy równa liczbie opinii: JS liczy realne pozycje przewinięcia
 * z geometrii toru (patrz computePositions w featured-carousel.js), więc ostatnia
 * kropka zawsze jest osiągalna, niezależnie od tego, co tu ustawisz.
 * ============================================================ */

.rev-slider {
  /* ---- Układ ---- */
  --revsl-gap: 12px;
  --revsl-per-view: 1;
  /* Szerokość jednej karty. Wzór jest zwykłą arytmetyką toru: od 100% odejmujemy
     przerwy widoczne między kartami w kadrze i dzielimy przez liczbę kart.
     Procenty w flex-basis liczą się względem content-boxa toru, więc wystarczy. */
  --revsl-slide-basis: calc(
    (100% - (var(--revsl-per-view) - 1) * var(--revsl-gap)) / var(--revsl-per-view)
  );

  /* ---- Paleta nawigacji (nadpisywalna przez hosta) ---- */
  --revsl-btn-bg: var(--color-white, #FFFFFF);
  --revsl-btn-border: var(--color-stroke, #DBD1D1);
  --revsl-btn-color: var(--color-main-green, #1E5336);
  --revsl-btn-hover-bg: #EAF3DE;
  --revsl-dot: #D6D9D2;
  --revsl-dot-active: var(--color-main-green, #1E5336);
  --revsl-focus: var(--color-main-green, #1E5336);

  /* position:relative — punkt zaczepienia dla dekoracji hosta (np. wygaszenie
     prawej krawędzi na landingu, `.lrev__slider::after`). Sam komponent niczego
     tu nie pozycjonuje. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--revsl-gap);
}

/* ---- Tor ----
   Przewijanie jest NATYWNE (overflow-x + scroll-snap), nie animowane w JS. Daje to
   za darmo przesuwanie palcem z bezwładnością systemu, poprawne rozdzielenie gestów
   (poziom = karuzela, pion = strona) i zerowy koszt utrzymania własnej animacji.
   JS tylko ustawia pozycję (scrollTo) i podświetla kropkę.
   BEZ AUTOPRZEWIJANIA — poprzedni slider opinii w checkoucie został usunięty
   właśnie dlatego, że przesuwał się sam i odbiorca 50+ nie zdążył doczytać treści.

   Efekt uboczny, na którym korzystamy: karta przewinięta w bok jest PRZYCIĘTA przez
   overflow toru, więc IntersectionObserver z review-card.js widzi ją jako niewidoczną
   i pauzuje jej animację. Nie trzeba tego pilnować osobno. */
.rev-slider__track {
  /* position:relative — układ odniesienia dla offsetLeft slajdów, z którego JS
     liczy pozycje przewinięcia. Bez tego offsetLeft mierzyłby się względem
     dalszego przodka i pozycje byłyby przesunięte o offset kontenera. */
  position: relative;
  display: flex;
  gap: var(--revsl-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* koniec listy nie „przeciąga" strony pod spodem */
  scroll-snap-type: x mandatory;
  /* Pasek przewijania ukryty — nawigacją są strzałki i kropki pod karuzelą
     (na desktopie pasek pod kartą wyglądałby jak usterka). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rev-slider__track::-webkit-scrollbar { display: none; }

/* Slajdem jest sama karta opinii — bez dodatkowego opakowania.
   min-width:0 — długi wyraz w treści opinii nie może rozepchnąć karty ponad
   przydzieloną szerokość (domyślne min-width:auto flex-itemu na to pozwala). */
.rev-slider__track > .op-rev {
  flex: 0 0 var(--revsl-slide-basis);
  min-width: 0;
  scroll-snap-align: start;
}

/* ---- Nawigacja ---- */
.rev-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
/* [hidden] potrzebuje jawnej reguły: własny `display` nadpisuje ukrywanie
   z arkusza przeglądarki. JS odsłania pasek dopiero, gdy jest co przewijać
   (>= 2 realne pozycje) — przy jednej kropce nawigacja nie ma sensu. */
.rev-slider__nav[hidden] { display: none; }

.rev-slider__arrow {
  width: 38px;   /* większe niż 34px z makiety — palec 50-latka trafia pewniej */
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--revsl-btn-border);
  border-radius: 999px;
  background: var(--revsl-btn-bg);
  color: var(--revsl-btn-color);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.rev-slider__arrow:hover {
  background: var(--revsl-btn-hover-bg);
  border-color: var(--revsl-btn-color);
}
.rev-slider__arrow:focus-visible { outline: 3px solid var(--revsl-focus); outline-offset: 2px; }

.rev-slider__dots { display: flex; align-items: center; }

/* Przycisk kropki jest DUŻO większy niż sama kropka (22px pola dotyku wokół
   8px punktu) — 8-pikselowy cel byłby nietrafialny na telefonie. */
.rev-slider__dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.rev-slider__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--revsl-dot);
  transition: background 0.15s, transform 0.15s;
}
.rev-slider__dot[aria-current="true"]::before {
  background: var(--revsl-dot-active);
  transform: scale(1.2);
}
.rev-slider__dot:focus-visible {
  outline: 3px solid var(--revsl-focus);
  outline-offset: -2px;
  border-radius: 999px;
}

/* Systemowe „ogranicz animacje" — JS i tak przełącza slajd skokowo
   (behavior:'auto'), tu gasimy jeszcze mikro-przejścia kontrolek. */
@media (prefers-reduced-motion: reduce) {
  .rev-slider__arrow,
  .rev-slider__dot::before { transition: none; }
}