/*
 * Rekomendacje klientów — jedna karta naraz, leżąca na zdjęciu w nagłówku.
 *
 * Ten sam plik wchodzi na stronę i do panelu (podgląd), więc kolory ma własne,
 * a nie brane ze zmiennych którejkolwiek z tych skór.
 *
 * Karta jest z mlecznego szkła: prześwituje przez nią zdjęcie, ale tekst
 * zostaje czarny na jasnym, więc czyta się go tak samo nad ciemną skałą,
 * jak nad jasnym niebem. Dlatego nie ma tu białego napisu na przezroczystym
 * tle — na połowie zdjęć byłby nieczytelny.
 */
.opinie {
  --op-deep:    #0e3330;
  --op-teal:    #12857c;
  --op-tekst:   #17211f;
  --op-cichy:   #5b6d69;
  --op-zloto:   #a06612;   /* linki i akcenty — 5,2:1 na białym */
  --op-gwiazda: #d1912f;
  --op-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  /* Wszystko w karcie liczy się od tej jednej wartości (jednostki `em`),
     więc żeby zmienić skalę całości, wystarczy ruszyć ją jedną. */
  font-size: 16px;
}

/* Karty leżą jedna na drugiej w tej samej komórce siatki: widoczna jest
   zawsze jedna, ale wysokość bierze się z najwyższej, więc przy zmianie
   nic nie podskakuje. */
.opinie__lista { display: grid; list-style: none; margin: 0; padding: 0; }

/* Poza nagłówkiem (podgląd w panelu) karta stoi zwyczajnie, ale zostaje
   przy swojej szerokości — rozciągnięta na całą stronę wyglądałaby inaczej
   niż to, co widzi klient. */
.opinie:not(.opinie--hero) .opinie__lista { max-width: 420px; }

/* ---------- na zdjęciu w nagłówku ---------- */
/*
 * Na dużym ekranie to widżet: siedzi w prawym górnym rogu i zostaje tam przy
 * przewijaniu strony. Stąd `fixed`, a nie `absolute` — punktem odniesienia
 * jest okno, nie zdjęcie. Wysokość menu bierzemy ze zmiennej strony
 * (`--pasek`), żeby karta nie wjechała pod nagłówek, gdyby ten kiedyś urósł.
 *
 * Szerokość, czcionka i odstęp od krawędzi rosną z szerokością okna, ale
 * między widełkami: na małym laptopie karta nie zabierze pół ekranu, a na
 * monitorze 4K nie zostanie znaczkiem w rogu.
 *
 * Szerokość i czcionka schodzą razem, a nie sama szerokość — inaczej ten sam
 * tekst zająłby więcej wierszy i zaczęłoby go ucinać. Przy 1440 px wychodzi
 * 334 px szerokości i 14,5 px czcionki.
 */
.opinie--hero {
  position: fixed; z-index: 40;
  width: clamp(270px, 23.2vw, 387px);
  font-size: clamp(13px, 10.1px + .306vw, 15.75px);
  --op-brzeg: clamp(12px, 1.25vw, 22px);
  top: calc(var(--pasek, 73px) + var(--op-brzeg)); right: var(--op-brzeg);
}

/* Zwijanie widżetu — z karty zostaje kółko, a stan trzyma się do końca wizyty. */
.opinie[hidden] { display: none !important; }

.opinie__ikonka {
  position: relative; margin-left: auto;
  /* Przycisk nie dziedziczy czcionki po rodzicu (tak ma domyślnie przeglądarka),
     a wszystkie wymiary są tu w `em` — bez tego kółko byłoby stale tej samej
     wielkości, niezależnie od skali karty. */
  font-size: 1em;
  width: 3.2em; height: 3.2em; padding: 0; border-radius: 50%; cursor: pointer;
  display: none; place-items: center; border: 0;
  background: linear-gradient(135deg, var(--op-teal), var(--op-deep));
  box-shadow: 0 3px 10px rgb(14 51 48 / .22), 0 12px 30px rgb(14 51 48 / .26);
  animation: opinie-wskocz .28s ease-out;
  transition: transform .18s ease, box-shadow .18s ease;
}
.opinie__ikonka-gwiazda { color: var(--op-gwiazda); font-size: 1.25em; line-height: 1; }
/* Liczba opinii w rogu kółka — sam znaczek nie mówi, ile ich tam czeka. */
.opinie__ikonka-ile {
  position: absolute; top: -.15em; right: -.15em; min-width: 1.5em; height: 1.5em;
  padding: 0 .35em; border-radius: 999px; display: grid; place-items: center;
  background: #fff; color: var(--op-deep); font-size: .62em; font-weight: 700;
  box-shadow: 0 1px 4px rgb(14 51 48 / .3);
}
@media (hover: hover) {
  .opinie__ikonka:hover { transform: scale(1.06);
    box-shadow: 0 4px 14px rgb(14 51 48 / .28), 0 16px 36px rgb(14 51 48 / .3); }
}
@keyframes opinie-wskocz { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.opinie__zamknij {
  position: absolute; top: -.56em; right: -.56em; z-index: 1;
  width: 1.7em; height: 1.7em; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgb(14 51 48 / .12); background: #fff; color: #5b6d69;
  font-size: 1em; line-height: 1; display: none; place-items: center;
  box-shadow: 0 2px 8px rgb(14 51 48 / .22);
}
.opinie--hero .opinie__zamknij { display: grid; }

/* Zwinięte: zostaje samo kółko. Reguły muszą stać za tymi wyżej, bo mają tę
   samą wagę — o tym, która wygra, decyduje kolejność w pliku. */
.opinie--zwinieta { width: auto; }
.opinie--hero.opinie--zwinieta .opinie__lista,
.opinie--hero.opinie--zwinieta .opinie__zamknij { display: none; }
.opinie--hero.opinie--zwinieta .opinie__ikonka { display: grid; }
@media (hover: hover) {
  .opinie__zamknij:hover { background: #0e3330; color: #fff; border-color: #0e3330; }
}

/* Włączane osobno dla dużego ekranu i telefonu — panel, dział Rekomendacje. */
@media (min-width: 1024px) { .opinie--bez-desktop { display: none; } }
@media (max-width: 1023px) { .opinie--bez-mobile  { display: none; } }

/* ---------- pojedyncza karta ---------- */
.opinia {
  grid-area: 1 / 1;                /* wszystkie w tym samym miejscu */
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .69em;
  padding: 1.25em 1.37em 1.12em;
  border-radius: 1.25em;
  background: rgb(255 255 255 / .93);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
          backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgb(255 255 255 / .65);
  box-shadow: 0 2px 6px rgb(14 51 48 / .10), 0 20px 50px rgb(14 51 48 / .26);
  color: var(--op-tekst);
  opacity: 0; visibility: hidden; transform: translateX(1em);
  transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s;
}
.opinia.jest {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .55s ease, transform .55s ease, visibility 0s;
}

/* Pasek czasu przy dolnej krawędzi — widać, ile jeszcze zostało do zmiany.
   Rusza od nowa przy każdej karcie, bo klasa `jest` dochodzi na świeżo. */
.opinia::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--op-gwiazda), var(--op-zloto));
  transform: scaleX(0); transform-origin: left;
}
.opinia.jest::after { animation: opinia-czas var(--op-czas, 7000ms) linear forwards; }
/* Zatrzymanie pod kursorem wstrzymuje też pasek — bez tego dojeżdżał do końca
   i tam stawał, a karta się nie zmieniała. */
.opinie--stoi .opinia.jest::after { animation-play-state: paused; }
@keyframes opinia-czas { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Cudzysłów-znak wodny w rogu. Ozdoba, więc siedzi w tle i nie zabiera
   miejsca tekstowi — dlatego jest wypozycjonowany, a nie wstawiony w linię. */
.opinia::before {
  content: "”"; position: absolute; top: .06em; right: 1.12em;
  font-family: var(--op-serif); font-size: 4.6em; line-height: 1;
  color: var(--op-gwiazda); opacity: .2; pointer-events: none;
}

.opinia__ocena { color: var(--op-gwiazda); font-size: .82em; letter-spacing: .12em; }

/* Cztery wiersze mieszczą limit ze 140 znaków bez ucinania, a minimum trzech
   pilnuje, żeby krótka opinia nie zrobiła z karty paska. Wszystkie karty leżą
   w jednej komórce siatki, więc i tak dostają wysokość najwyższej z nich —
   przy zmianie nic nie rośnie ani nie maleje. */
.opinia__tekst {
  margin: 0; font-family: var(--op-serif); font-size: 1em; line-height: 1.48;
  min-height: calc(3 * 1.48em);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}

.opinia__stopka { display: flex; align-items: center; gap: .69em; }

/* Kółko z inicjałami zamiast zdjęcia: zdjęć klientów nie mamy i mieć nie
   będziemy, a pusta sylwetka wygląda jak brakujący obrazek. Cztery warianty
   koloru lecą po kolei, żeby kolejne karty się nie zlewały. */
.opinia__awatar {
  /* `em` liczy się tu od własnej, mniejszej czcionki kółka, stąd 3,05
     zamiast 2,5 — w skali karty wychodzi równo 2,5 razy jej czcionka. */
  flex: none; width: 3.05em; height: 3.05em; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .82em; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--op-teal), var(--op-deep));
}
.opinia--1 .opinia__awatar { background: linear-gradient(135deg, #e0a33f, #b9741a); }
.opinia--2 .opinia__awatar { background: linear-gradient(135deg, #2c9d93, #12857c); }
.opinia--3 .opinia__awatar { background: linear-gradient(135deg, #d97a3c, #ad520c); }

.opinia__kto { display: flex; flex-direction: column; align-items: flex-start; gap: .19em; min-width: 0; }
.opinia__autor { font-size: .86em; font-weight: 600; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.opinia__miejsce { font-weight: 400; color: var(--op-cichy); }

/* Nazwa wycieczki jako pastylka — to jedyny klikalny element karty,
   więc ma wyglądać na klikalny, a nie na kolejny dopisek. */
.opinia__wycieczka {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .73em; font-weight: 600; text-decoration: none;
  padding: .25em .85em; border-radius: 999px;
  color: var(--op-zloto); background: rgb(224 163 63 / .16);
}
/* Odnośnik zastępczy przy opinii o samej obsłudze — ten sam kształt, ale
   morski zamiast złotego, żeby nie udawał nazwy wycieczki. */
.opinia__wycieczka--oferta { color: var(--op-teal); background: rgb(18 133 124 / .12); }
@media (hover: hover) {
  .opinia__wycieczka:hover { color: #fff; background: var(--op-zloto); }
  .opinia__wycieczka--oferta:hover { background: var(--op-teal); }
}

/* ---------- węższe ekrany ---------- */
/* Poniżej tej szerokości karta nie zmieściłaby się obok tekstu w nagłówku,
   więc schodzi pod niego, na dół zdjęcia, przez całą szerokość. */
@media (max-width: 1023px) {
  .opinie--hero {
    position: static; transform: none; width: auto; z-index: auto;
    margin: 26px var(--gut, 24px) 0; max-width: 520px;
    font-size: clamp(13.5px, 8.6px + 1.26vw, 16px);
  }
  .opinia { padding: .94em 1.06em .88em; gap: .5em; border-radius: 1.06em; }
  .opinia::before { font-size: 3.6em; right: .9em; }
  /* Dwa wiersze zamiast czterech: na telefonie nagłówek i tak ledwo mieści się
     na ekranie, a karta wystająca poniżej krawędzi wygląda na uciętą. */
  .opinia__tekst { min-height: calc(2 * 1.48em); -webkit-line-clamp: 2; }
  .opinia__awatar { width: 2.6em; height: 2.6em; }
  /* Zwijanie do kółka jest po to, żeby widżet zszedł z drogi treści — a tu
     karta stoi w zwykłym układzie i nikomu nie wchodzi w oczy. Gdyby zostało,
     zwinięcie zrobione wcześniej na dużym ekranie schowałoby ją na telefonie
     bez czego, czym ją z powrotem otworzyć. */
  .opinie__zamknij, .opinie__ikonka { display: none !important; }
  .opinie--hero.opinie--zwinieta .opinie__lista { display: grid; }
}

/* Kto wyłączył animacje w systemie, dostaje zmianę bez przesuwania —
   sama treść nadal się zmienia, bo o to w tym chodzi. */
@media (prefers-reduced-motion: reduce) {
  .opinie__ikonka { animation: none; }
  .opinia { transform: none; transition: opacity .2s linear, visibility 0s linear .2s; }
  .opinia.jest { transition: opacity .2s linear, visibility 0s; }
  .opinia.jest::after { animation: none; transform: scaleX(1); opacity: .35; }
}