/* css/reviews-widget.css
 * ============================================================
 * WIDGET OPINII — klikalna pigułka „★★★★◐ 4,6 | na podstawie 68 opinii",
 * prowadząca na https://kadr.ai/opinie. Renderuje ją js/reviews-widget.js
 * do KAŻDEGO elementu z atrybutem `data-reviews-widget` (obecnie: hero i sekcja
 * „Wyniki, które mówią same za siebie" w index.html).
 *
 * WYMAGA css/stars.css — same kafelki gwiazdek są wspólnym atomem serwisu
 * (ten sam, którego używa karta opinii i podsumowanie na /opinie). Ten plik
 * dokłada wyłącznie oprawę: pigułkę, separator i teksty.
 *
 * BEZ `.op-scope`: landing nie ładuje css/review-card.css, więc tokeny --op-*
 * nie istnieją. stars.css ma je w fallbackach `var(..., default)`, a tutaj
 * korzystamy z tokenów landingu (--color-*) z css/style.css.
 *
 * BRAK PRZESKOKU UKŁADU (CLS): widget siedzi NAD nagłówkiem hero, więc nie może
 * „doskoczyć" po dociągnięciu danych. Miejsce rezerwują szkielety `:empty` —
 * gasną SAME w chwili, gdy JS wstawi treść (pusty element przestaje być pusty).
 * Zero klas do zdejmowania, zero stanu do pilnowania.
 * ============================================================ */

.rev-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;      /* hero__content to kolumna flex — nie rozciągaj pigułki */
  max-width: 100%;
  margin-bottom: 18px;
  padding: 7px 14px 7px 8px;   /* mniejszy padding od strony gwiazdek — kafelki mają własną „ramkę" */
  background: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-stroke, #DBD1D1);
  border-radius: 999px;
  color: var(--color-black, #111111);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.rev-badge:hover {
  border-color: var(--color-main-green, #1E5336);
  box-shadow: 0 2px 10px rgba(30, 83, 54, 0.10);
}

/* Mikro-interakcja „wciśnięcia" — spójna z kontrolkami na /opinie. */
.rev-badge:active { transform: scale(0.985); }

.rev-badge:focus-visible {
  outline: 3px solid var(--color-main-green, #1E5336);
  outline-offset: 3px;
}

/* Gwiazdki — kafelki z css/stars.css, tu tylko odstęp między nimi. */
.rev-badge__stars { display: inline-flex; gap: 3px; flex: 0 0 auto; }

/* Liczbowa ocena („4,6") — zieleń marki, cyfry o stałej szerokości, żeby pigułka
   nie drgała, gdyby średnia zmieniła się przy odświeżeniu strony. */
.rev-badge__avg {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-main-green, #1E5336);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* Separator — cienka pionowa kreska (jak na wzorcu). Rysowana obramowaniem
   pustego <span>, więc nie wchodzi w drzewo dostępności. */
.rev-badge__sep {
  width: 1px;
  align-self: stretch;
  min-height: 18px;
  background: var(--color-stroke, #DBD1D1);
  flex: 0 0 auto;
}

/* „na podstawie 68 opinii" — tekst drugorzędny, w jednej linii. Na wąskim
   ekranie przycinamy wielokropkiem zamiast łamać pigułkę na dwie linie. */
.rev-badge__count {
  font-size: 0.88rem;
  color: var(--color-text-secondary, #4A4A4A);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Szkielety ładowania ----
   `:empty` trafia TYLKO w elementy bez treści, czyli dokładnie w stan „dane
   jeszcze nie przyszły". Po wstawieniu treści przez JS reguła przestaje pasować
   i szkielet znika bez żadnej dodatkowej klasy.
   UWAGA dla edytujących HTML: elementy szkieletowe muszą być zapisane BEZ spacji
   i bez złamania linii w środku (`<span ...></span>`) — nawet biały znak sprawia,
   że element nie jest już `:empty` i szkielet się nie pokaże. */
.rev-badge__stars:empty,
.rev-badge__avg:empty,
.rev-badge__count:empty {
  border-radius: 6px;
  background: linear-gradient(90deg, #EDEAE2 0%, #F6F3EC 50%, #EDEAE2 100%);
  background-size: 200% 100%;
  animation: revBadgeShimmer 1.4s ease-in-out infinite;
}
.rev-badge__stars:empty { width: 112px; height: 20px; }
.rev-badge__avg:empty   { width: 26px;  height: 14px; }
.rev-badge__count:empty { width: 128px; height: 12px; }

@keyframes revBadgeShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Szanujemy systemowe „ogranicz animacje" — szkielet zostaje statyczną plamą. */
@media (prefers-reduced-motion: reduce) {
  .rev-badge__stars:empty,
  .rev-badge__avg:empty,
  .rev-badge__count:empty { animation: none; }
  .rev-badge { transition: none; }
  .rev-badge:active { transform: none; }
}

/* ---- Mobile ----
   Hero na wąskim ekranie jest wyśrodkowany (.hero__content { align-items: center }),
   więc pigułka centruje się razem z resztą. Zmniejszamy kafelki i teksty, żeby
   „na podstawie N opinii" mieściło się bez przycinania na 360 px. */
@media (max-width: 768px) {
  .rev-badge {
    align-self: center;
    gap: 8px;
    padding: 6px 12px 6px 7px;
    margin-bottom: 16px;
  }
  .rev-badge .op-star-box { width: 17px; height: 17px; font-size: 11px; }
  .rev-badge__avg { font-size: 0.9rem; }
  .rev-badge__count { font-size: 0.8rem; }
}

/* ---- Wariant w sekcji „Wyniki, które mówią same za siebie" ----
   Nagłówek tej sekcji (.social-proof__header) to zwykły BLOK z text-align: center,
   a pigułka jest inline-flex — czyli elementem inline-level, więc centruje ją samo
   text-align rodzica. `align-self` jest tu na wypadek wstawienia pigułki do rodzica
   flex (wtedy text-align nie zadziała); w bloku jest po prostu bezczynne.

   NA KOŃCU PLIKU, nie przy regule bazowej: modyfikator ma tę samą specyficzność
   (jedna klasa) co `.rev-badge` w media query mobile, więc o wyniku decyduje
   KOLEJNOŚĆ. Postawiony wyżej przegrywałby na telefonie z `margin-bottom: 16px`
   z tamtego bloku i pigułka w sekcji „Wyniki…" niosłaby zbędny margines.
   Ta sama zasada co przy `.op-vbadge--bottom` w css/review-card.css. */
.rev-badge--center {
  align-self: center;
  margin-top: 4px;
  margin-bottom: 0;
}