/* ============================================================================
   OPINIE PACJENTÓW — karuzela

   Karta ma wyglądać jak reszta strony, nie jak wtyczka: te same tokeny barw,
   te same kroje, te same zaokrąglenia. Żadnego obcego brandowania poza
   wymaganym oznaczeniem Google pod sekcją.
   ============================================================================ */

.reviews__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

.rev-avg {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1;
  color: var(--c-ink);
}

.rev-count {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* ----------------------------------------------------------------------------
   Gwiazdki

   Dwa nałożone rzędy: szary spód i złoty wierzch przycięty szerokością.
   Dzięki temu ocena 4,7 rysuje się dokładnie, a nie zaokrągla do pełnej
   gwiazdki — i nie zależy od tego, jak system rysuje znak „★".
   ---------------------------------------------------------------------------- */
.rev-stars {
  position: relative;
  display: inline-block;
  width: 6.75rem;      /* 5 gwiazdek × 22 jednostki viewBox */
  height: 1.25rem;
  flex: none;
  line-height: 0;
}
.rev-stars svg {
  width: 6.75rem;
  height: 1.25rem;
}
.rev-stars__bg { fill: var(--s-line-strong); }
.rev-stars__fg { fill: var(--c-gold); }

.rev-stars__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Bez tego przycięty rząd rozciągnąłby się do szerokości rodzica
     i gwiazdki wyszłyby węższe niż w rzędzie pod spodem. */
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   Scena karuzeli — karta na środku, dwie po bokach

   Wszystkie karty leżą w JEDNEJ komórce siatki, jedna na drugiej. Położenie
   nadaje im atrybut `data-poz` ustawiany w `reviews.js`, a ruch robi CSS:

     srodek    — na wierzchu, pełna wielkość,
     lewa      — poprzednia: przesunięta w lewo, mniejsza, przygaszona, pod spodem,
     prawa     — następna: to samo w prawo,
     za-lewa / za-prawa — pozostałe, niewidoczne, czekają za bocznymi.

   Jedna komórka siatki daje wysokość sceny RÓWNĄ najwyższej karcie, więc
   przy zmianie opinii nic pod karuzelą nie podskakuje. Karty rozciągają się
   do tej wysokości, a treść krótkiej opinii stoi pośrodku karty — inaczej
   wyższe karty boczne wystawałyby zza środkowej i efekt „na wierzchu" znikał.
   ---------------------------------------------------------------------------- */
.reviews__stage {
  /* Szerokość środkowej karty. Na szerokim ekranie 34rem (544 px) — tyle,
     żeby najdłuższa opinia miała rozsądne ~8 wierszy, a po bokach zostało
     miejsce na wystające karty. Na telefonie 84% szerokości: resztę zajmują
     skrawki bocznych kart, jedyny znak, że obok jest coś jeszcze. */
  --rev-karta: min(34rem, 84%);

  display: grid;
  margin-top: var(--sp-7);
  padding-block: var(--sp-4) var(--sp-5);
  /* Boczne karty wystają poza kolumnę treści. `clip`, nie `hidden`: tnie tylko
     w poziomie (strona nie dostaje paska przewijania w bok), a cienie kart
     nad i pod nie są obcinane. */
  overflow-x: clip;
  /* Przewijanie strony palcem w pionie zostaje przeglądarce; gest w poziomie
     obsługuje `reviews.js`. */
  touch-action: pan-y;
  outline-offset: 6px;
  border-radius: var(--r-xl);
}

.reviews__stage > .rev-card {
  grid-area: 1 / 1;
  justify-self: center;
  width: var(--rev-karta);
  justify-content: center;
  transition:
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rev-card[data-poz='srodek'] {
  z-index: 3;
  transform: none;
  opacity: 1;
  box-shadow: 0 28px 56px -28px rgba(34, 32, 28, 0.38), var(--sh-card);
}
.rev-card[data-poz='lewa'],
.rev-card[data-poz='prawa'] {
  z-index: 2;
  opacity: 0.5;
  cursor: pointer;
}
.rev-card[data-poz='lewa']  { transform: translateX(-60%) scale(0.84); }
.rev-card[data-poz='prawa'] { transform: translateX(60%) scale(0.84); }
.rev-card[data-poz='lewa']:hover,
.rev-card[data-poz='prawa']:hover {
  opacity: 0.72;
}
.rev-card[data-poz='za-lewa'],
.rev-card[data-poz='za-prawa'] {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.rev-card[data-poz='za-lewa']  { transform: translateX(-95%) scale(0.7); }
.rev-card[data-poz='za-prawa'] { transform: translateX(95%) scale(0.7); }

/* Pierwsze rozstawienie kart bez animacji — inaczej przy wczytaniu wszystkie
   „wlatywałyby" na swoje miejsca z środka sceny. */
.reviews__stage.is-bez-animacji > .rev-card {
  transition: none;
}

/* Ograniczenie ruchu w systemie: karuzela nadal zmienia opinie sama (ma pauzę),
   ale karty nie jeżdżą — tylko przenikają. */
@media (prefers-reduced-motion: reduce) {
  .reviews__stage > .rev-card {
    transition: opacity 250ms linear;
  }
}

.rev-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
}

.rev-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Kółko z inicjałami zamiast zdjęcia z Google — uzasadnienie w `reviews.js`. */
.rev-avatar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--c-accent-tint);
  color: var(--c-accent-strong);
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.rev-card__who { min-width: 0; }

.rev-card__name {
  font-family: var(--f-display);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--c-ink);
}

.rev-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: 2px;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-muted);
}
.rev-card__meta .rev-stars {
  width: 5.4rem;
  height: 1rem;
}
.rev-card__meta .rev-stars svg {
  width: 5.4rem;
  height: 1rem;
}

/* Cudzysłów zamiast kursywy: opinia to cytat, a nie tekst „na kursywie".
   Kursywa na dłuższym akapicie męczy, cudzysłów niesie tę samą informację. */
.rev-card__text {
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--c-ink-soft);
  text-wrap: pretty;
  /* Pacjenci łamią opinie na akapity („…poczułam wyraźną poprawę.↵Szczerze
     polecam!"). W HTML takie łamanie przepada, a zdanie podsumowujące wtapia
     się w środek bloku. `pre-line` zachowuje łamania i zwija nadmiarowe
     spacje — bez zamiany treści na HTML, więc bez ryzyka wstrzyknięcia. */
  white-space: pre-line;

  /* Bezpiecznik na przyszłość, nie narzędzie do wyrównywania kart.
     Czternaście wierszy mieści każdą z dzisiejszych opinii w całości;
     zadziała dopiero, gdyby ktoś kiedyś napisał wypracowanie. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 14;
  line-clamp: 14;
  overflow: hidden;
}
.rev-card__text::before { content: '„'; }
.rev-card__text::after { content: '”'; }

/* Style odpowiedzi gabinetu usunięte razem z jej rysowaniem — uzasadnienie
   przy `karta()` w `reviews.js`. */

/* ----------------------------------------------------------------------------
   Sterowanie — pod sceną, na środku: pauza, strzałka, kropki, strzałka
   ---------------------------------------------------------------------------- */
.reviews__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

/* Bez odstępu MIĘDZY celami dotykowymi — odstęp jest już w środku każdego
   z nich (kropka 8 px w polu 24 px). Przy jedenastu opiniach dodatkowe 8 px
   przelewało rząd na telefonie i jedenasta kropka spadała pod spód. Rząd musi
   się mieścić, bo mówi pacjentowi, ile jeszcze zostało. */
.reviews__dots {
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

/* Cel dotykowy 24 px przy kropce 8 px — palec trafia w obszar, nie w kropkę. */
.rev-dot {
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.rev-dot::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--s-line-strong);
  transition: background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.rev-dot.is-current::before {
  background: var(--c-accent);
  transform: scale(1.35);
}

.rev-arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink-soft);
  transition:
    border-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out);
}
.rev-arrow:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.rev-arrow svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* Strzałki nie mają sensu bez wskaźnika — na telefonie przesuwa się palcem
   albo stuka w boczną kartę. Pauza zostaje, bo ruch jest samoczynny. */
@media (pointer: coarse) {
  .rev-arrow--nav { display: none; }
}

/* Pauza: jedna ikona na raz, przełączana klasą — nie atrybutem `hidden`,
   bo ten na elementach SVG nie działa jednakowo w każdej przeglądarce. */
.rev-pause .rev-pause__play { display: none; }
.rev-pause.is-paused .rev-pause__play { display: block; }
.rev-pause.is-paused .rev-pause__stop { display: none; }

/* ----------------------------------------------------------------------------
   Szkielet ładowania i oznaczenie źródła
   ---------------------------------------------------------------------------- */
.reviews__skeleton {
  display: grid;
  margin-top: var(--sp-7);
  padding-block: var(--sp-4) var(--sp-5);
}
.rev-skel {
  justify-self: center;
  /* Ta sama szerokość co środkowa karta — inaczej po wczytaniu układ podskakuje. */
  width: min(34rem, 84%);
  height: 14rem;
  border-radius: var(--r-xl);
  background: linear-gradient(
    100deg,
    var(--c-surface-alt) 30%,
    var(--c-surface) 50%,
    var(--c-surface-alt) 70%
  );
  background-size: 220% 100%;
  animation: rev-shimmer 1.4s linear infinite;
}
@keyframes rev-shimmer {
  to { background-position: -220% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rev-skel { animation: none; }
}

/* Wymagane oznaczenie źródła. Stoi pod kartami, w rozmiarze noty — ma być
   widoczne i uczciwe, ale nie ma udawać elementu marki gabinetu. */
.reviews__source {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  font-size: var(--t-xs);
  color: var(--c-muted);
  text-align: center;
}
.reviews__source a {
  color: var(--c-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}