/* css/stars.css
 * ============================================================
 * KAFELEK GWIAZDKI — najmniejszy współdzielony atom oceny w całym serwisie.
 * Odpowiednik js/opinie/stars.js po stronie stylów: opisuje DOKŁADNIE to, co
 * produkuje starsHtml() i nic ponadto.
 *
 * ŁADOWANY PRZEZ (każda strona, która pokazuje ocenę):
 *   • opinie.html      — podsumowanie + karty opinii + wiersze rozkładu
 *   • kadr_step2.html  — pasek „Ocena 4,6" i karty w sekcji opinii na checkoucie
 *   • index.html       — widget opinii w hero i w sekcji „Wyniki…"
 *
 * DLACZEGO OSOBNY PLIK: wcześniej `.op-star-box` mieszkał w css/review-card.css.
 * Landing potrzebuje samych gwiazdek, a nie całej karty opinii (zakładki
 * materiałów, lightbox, odpowiedzi kadr.ai) — ciągnięcie ~20 kB CSS na
 * najczęściej odwiedzaną stronę serwisu tylko po pięć kafelków nie miało sensu.
 * Podział jest po komponencie, nie po stronie: atom osobno, karta osobno.
 *
 * TOKENY: wartości domyślne są W FALLBACKACH `var(..., default)`, więc plik działa
 * SAMODZIELNIE (landing nie ma `.op-scope`). Strony, które definiują `--op-star-green`
 * na `.op-scope` (css/review-card.css), nadal go nadpisują — API tokenów bez zmian.
 * Rozmiar kafelka nadpisują widoki, które chcą większych (np. `.op-avg-stars` w
 * podsumowaniu /opinie: 24px).
 * ============================================================ */

/* Kafelek pojedynczej gwiazdki. `position: relative` + `overflow: hidden` są
   nośnikiem dla nakładki częściowego wypełnienia (niżej) — nakładka nie może
   wyjść poza zaokrąglone rogi kafelka. */
.op-star-box {
  position: relative;
  width: 20px; height: 20px; border-radius: 4px;
  background: var(--op-star-green, #2E7D46);
  color: var(--op-star-ink, #FCFBF6);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; flex: 0 0 auto;
  overflow: hidden;
}

/* Stan „wygaszony": jasny kafelek z ledwie widocznym znakiem. Wspólny dla
   gwiazdki PUSTEJ i dla TŁA gwiazdki częściowej — częściowa to dokładnie ten
   sam kafelek, na który nakładamy przyciętą wersję pełną. Jedna reguła, dwa
   selektory: kolory pustego stanu żyją w jednym miejscu (DRY). */
.op-star-box.is-empty,
.op-star-box.is-partial {
  background: var(--op-star-empty-bg, #E7EBE3);
  color: var(--op-star-empty-ink, #C4CFBE);
}

/* ---- Częściowe wypełnienie ostatniej gwiazdki (np. 4,6 → 60% piątej) ----
   Nakładka jest PEŁNOWYMIAROWA (inset: 0), więc znak gwiazdki jest w niej
   wyśrodkowany dokładnie tak samo jak w kafelku pod spodem — dwie warstwy leżą
   idealnie na sobie. Widoczność ogranicza dopiero `clip-path`, który odcina
   prawą część: `inset(0 <ile odciąć z prawej> 0 0)`.

   Dlaczego NIE `width: var(--star-fill)` na nakładce: wtedy znak centrowałby się
   w wąskim pasku (np. 60% szerokości), a nie w kafelku — gwiazdka „uciekałaby"
   w lewo przy każdej innej wartości. clip-path przycina OBRAZ, nie układ.

   Dzięki temu podział przechodzi przez TŁO I PRZEZ ZNAK gwiazdki — lewa część
   wygląda jak kafelek pełny, prawa jak pusty. Zero nowych kolorów.

   Wartość `--star-fill` (np. `60%`) podaje JS inline — patrz starsHtml()
   w js/opinie/stars.js. Prefiks -webkit- dla starszych Safari (< 13.1); jeśli
   przeglądarka nie zna clip-path w ogóle, nakładka pokryje cały kafelek i
   gwiazdka wyjdzie pełna — degradacja łagodna, bez rozjechanego układu. */
.op-star-box__fill {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--op-star-green, #2E7D46);
  color: var(--op-star-ink, #FCFBF6);
  -webkit-clip-path: inset(0 calc(100% - var(--star-fill, 0%)) 0 0);
          clip-path: inset(0 calc(100% - var(--star-fill, 0%)) 0 0);
}