/* css/index-reviews.css
 * ============================================================
 * SEKCJA „CO MÓWIĄ NASI KLIENCI" NA LANDINGU (index.html), pod sekcją
 * „Każde zdjęcie opowiada inną historię". Renderuje ją js/index-reviews.js.
 *
 * TRZY WARSTWY, TRZY PLIKI — ten dokłada wyłącznie najwyższą:
 *   css/review-card.css    — karta opinii (wspólna z /opinie i checkoutem),
 *   css/review-slider.css  — tor karuzeli, strzałki, kropki (wspólne z checkoutem),
 *   TEN PLIK               — oprawa sekcji: panel, nagłówek, podsumowanie, CTA
 *                            i przestrojenie tokenów obu komponentów pod landing.
 * Wymaga też css/stars.css (kafelki oceny) — ładowanego PRZED review-card.css.
 *
 * ILE KART W KADRZE: steruje tym JEDEN token — `--revsl-per-view` niżej. Wartość
 * ułamkowa jest zamierzona: 1.35 znaczy „jedna cała + zajawka następnej", i to sama
 * zajawka mówi klientowi, że opinii jest więcej (skuteczniej niż kropki, których
 * odbiorca 50+ często nie czyta jako nawigacji). JS nie zna żadnej z tych liczb —
 * liczy pozycje przewinięcia z geometrii toru, więc zmiana wartości tutaj nie
 * wymaga tknięcia JS-a.
 *
 * PEŁNE PASMO, NIE KARTA: opinie są pełnoprawną sekcją landingu, nie dodatkiem do
 * galerii nad nimi — dostają więc własne pasmo w jasnym #FFFCF1 (po fuzji sekcji
 * .steps/.how-it-works w 2026-07 pasma poniżej galerii przesunęły się o jeden
 * kolor; wcześniej było tu ciepłe #FFF7E8). Wersja z zaokrągloną kartą na tle
 * poprzedniej sekcji czytała się jako „wstawka w galerii", a nie jako osobny
 * rozdział strony.
 * KONSEKWENCJA: to pasmo jest ogniwem naprzemiennej sekwencji landingu —
 * pełna sekwencja i uzasadnienie przy .emotions w css/style.css. Zmiana tła
 * TEJ sekcji wymaga przejrzenia tamtej.
 * ============================================================ */

/* ---- Pasmo sekcji ----
   `min-height: 1px` w stanie „jeszcze nie ma danych" NIE jest kosmetyką. Sekcja
   startuje pusta (panel ma atrybut `hidden`), a js/index-reviews.js obserwuje
   WŁAŚNIE ten element, żeby wiedzieć, kiedy pobrać opinie. Element o wysokości 0
   jest kiepskim celem dla IntersectionObserver (pusty prostokąt to przypadek
   brzegowy w specyfikacji i historycznie różnie obsługiwany). Jeden piksel w kolorze
   pasma nad nim jest niewidoczny, a daje obserwatorowi realny prostokąt.
   Odstępy i tło pojawiają się dopiero z klasą `.is-ready` — gdy fetch padnie,
   sekcja zostaje tym niewidocznym paskiem zamiast pustej ramki na środku strony. */
.lrev:not(.is-ready) { min-height: 1px; }
/* Tło i odstępy NARASTAJĄ dopiero z danymi. Dzięki temu pasek-cel obserwatora jest
   nie tylko niski, ale i całkowicie bezbarwny: gdy fetch padnie, między galerią
   a sekcją emocji nie zostaje nawet jednopikselowa kreska w innym odcieniu.
   Padding 72/80 — ten sam rytm co .emotions i .faq. */
.lrev.is-ready {
  background-color: var(--color-bg-yellow);
  padding: 72px 0 80px;
  overflow: hidden;
}

.lrev__inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--layout-padding);
}

/* ---- Kontener treści ----
   CELOWO bez własnego tła, obrysu i zaokrąglenia: tło daje pasmo sekcji wyżej.
   Element zostaje, bo pełni dwie konkretne role — niesie klasę `.op-scope` (tokeny
   karty opinii z css/review-card.css) i atrybut `hidden`, którym js/index-reviews.js
   trzyma treść poza layoutem do czasu, aż przyjdą dane.
   Domyślny obrys kart (#DBD1D1) pasuje do ciepłej palety landingu, więc — inaczej
   niż na checkoucie — żadnego tokenu karty tu nie przestrajamy. */
/* [hidden] wymaga jawnej reguły wszędzie tam, gdzie element ma własny `display`
   (tutaj: pochodne reguły flex/grid dzieci). Jedna linia zamiast pilnowania klas. */
.lrev__panel[hidden] { display: none; }

/* ---- Nagłówek + podsumowanie ---- */
.lrev__header { text-align: center; margin-bottom: 28px; }

/* Rozmiar DOKŁADNIE ten sam co .steps__title, .gallery__title, .faq__title itd.
   (css/style.css) — sekcja opinii jest pełnoprawnym rozdziałem strony, więc jej
   nagłówek nie może być drobniejszy od sąsiadów. Wartość jest przepisana, a nie
   współdzielona, bo w style.css powtarza się ona już przy pięciu selektorach —
   ujednolicenie ich wszystkich jednym tokenem to osobna, szersza porządkowa
   zmiana, nie temat tej sekcji. */
.lrev__title {
  font-size: clamp(28px, 3.5vw, var(--h2-size));
  font-weight: 700;
  color: var(--color-main-green);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* „Ocena 4,6 na podstawie 68 opinii · opinie 4- i 5-gwiazdkowe" */
.lrev__summary {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Liczbowa ocena — zieleń marki i pogrubienie, czyli JEDYNY mocny akcent w tej
   linii: to na nią ma paść wzrok, nie na resztę zdania. Cyfry o stałej szerokości,
   żeby linia nie drgała, gdyby średnia zmieniła się przy odświeżeniu strony. */
.lrev__avg {
  color: var(--color-main-green);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* „68 opinii" — jedyny link w tej linii, prowadzi na kadr.ai/opinie w NOWEJ karcie.
   Podkreślenie jest tu jedyną afordancją (globalne `a { text-decoration: none }`
   z css/style.css zdejmuje ją domyślnie), więc jest nadane jawnie. */
.lrev__all {
  color: var(--color-black);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.lrev__all:hover { color: var(--color-main-green); }
.lrev__all:focus-visible {
  outline: 3px solid var(--color-main-green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Kropka rozdzielająca — sam znak jest dekoracją (aria-hidden w HTML). */
.lrev__sep { margin: 0 6px; color: var(--color-stroke); }

/* ---- Karuzela: przestrojenie wspólnego komponentu pod landing ----
   Tokeny są API css/review-slider.css — podmieniamy zmienne, nie duplikujemy reguł.
   position:relative jest już w komponencie; wykorzystujemy je pod wygaszenie krawędzi. */
.lrev__slider {
  --revsl-gap: 20px;
  --revsl-per-view: 1;                     /* wąski ekran: jedna karta, bez zajawki */
  --revsl-btn-bg: var(--color-white);
  --revsl-btn-border: var(--color-stroke);
  --revsl-btn-hover-bg: #E8F1E8;           /* to samo miękkie zielone tło co plakietki (--op-badge-bg) */
}

/* Progi dobrane pod SZEROKOŚĆ KARTY, nie pod „ładne" liczby: przy każdym z nich
   karta wychodzi ~490-520px, czyli tyle, ile potrzebuje układ dwukolumnowy
   (treść ~250px | materiały ~250px) z css/review-card.css. Poniżej ~470px kolumna
   materiałów robi się za ciasna na trzy etykiety przełącznika. */
@media (min-width: 768px)  { .lrev__slider { --revsl-per-view: 1.35; } }
@media (min-width: 1024px) { .lrev__slider { --revsl-per-view: 1.8; } }
@media (min-width: 1280px) { .lrev__slider { --revsl-per-view: 2.25; } }

/* Wygaszenie prawej krawędzi toru — zajawka następnej karty rozpływa się w tle
   panelu, zamiast być ucięta pionową kreską (makieta).
   NAKŁADKA, nie `mask-image` na torze: maska na kontenerze przewijanym bywa
   źródłem błędów odrysowania w WebKicie, a tu chodzi o dekorację — nie ma powodu
   ryzykować migotania karuzeli z wideo w środku.
   Gaśnie na końcu przewinięcia (`data-at-end` ustawia setupSlider z
   js/opinie/featured-carousel.js) — tam nie ma już czego zapowiadać.
   Pierwszy stop podany jawnym rgba() zamiast `transparent`: część silników
   interpoluje `transparent` przez czerń i gradient dostaje szarawy środek. */
.lrev__slider::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 72px;
  pointer-events: none;
  /* Oba stopy MUSZĄ odpowiadać tłu sekcji (.lrev.is-ready = --color-bg-yellow
     #FFFCF1): stop przezroczysty to rgba tego samego koloru z alpha 0 —
     patrz komentarz wyżej o interpolacji przez czerń. Zmieniasz tło sekcji?
     Zmień oba stopy. */
  background: linear-gradient(to right, rgba(255, 252, 241, 0) 0%, var(--color-bg-yellow) 82%);
  transition: opacity 0.2s ease;
}
.lrev__slider[data-at-end="1"]::after { opacity: 0; }
/* Na wąskim ekranie karta zajmuje cały kadr — nie ma zajawki, więc nie ma czego
   wygaszać (a nakładka niepotrzebnie przykrywałaby prawą krawędź karty). */
@media (max-width: 767px) {
  .lrev__slider::after { display: none; }
}

/* ---- Stopka sekcji (CTA z makiety) ---- */
.lrev__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;              /* ten sam odstęp co w dawnej .gallery__footer */
  text-align: center;
  margin-top: 32px;
}

/* Zdanie „Bez zobowiązań…" — przywędrowało ze stopki sekcji #galeria razem z CTA.
   Wartości 1:1 po .gallery__disclaimer (usuniętej z css/style.css), więc dla
   klienta nic się w wyglądzie nie zmienia — zmienia się tylko miejsce. */
.lrev__disclaimer {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* ---- Wąski ekran ----
   UWAGA: to jest tylko tyle, żeby sekcja była poprawna i czytelna na telefonie —
   właściwy przebieg mobilny (rozmiary kadru, kolejność treści) jest do zrobienia
   osobno. */
@media (max-width: 560px) {
  .lrev.is-ready { padding: 48px 0 56px; }
  .lrev__header { margin-bottom: 20px; }
  .lrev__summary { font-size: 14px; }
  /* „· opinie 4- i 5-gwiazdkowe" schodzi do własnej linii — w jednej linii
     z oceną i liczbą opinii łamało się w przypadkowym miejscu. */
  .lrev__sep { display: none; }
  .lrev__qualifier { display: block; margin-top: 2px; }
  .lrev__slider { --revsl-gap: 12px; }
  .lrev__footer { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .lrev__all,
  .lrev__slider::after { transition: none; }
}