/*
 * 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;
  --op-piasek: #faf6f0;
  /* 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; }

/* Nagłówek działu — tylko na telefonie, patrz sekcja „węższe ekrany". */
.opinie__naglowek { display: none; }

/* 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); }
}

/* ---------- telefon i wąski ekran ---------- */
/*
 * Tu nie ma widżetu. Karta na zdjęciu działa na dużym ekranie, bo jest gdzie
 * ją położyć; na telefonie zasłaniałaby nagłówek albo wisiałaby nad treścią.
 * Zamiast tego robimy z rekomendacji **zwykły dział pod nagłówkiem**: rządek
 * kart, które przesuwa się palcem, z przyciąganiem do krawędzi. Wszystkie są
 * widoczne naraz, więc nic się nie przełącza samo i nie ucieka w trakcie
 * czytania — o tempie decyduje kciuk.
 */
@media (max-width: 1023px) {
  .opinie--hero {
    position: static; transform: none; width: auto; z-index: auto;
    margin: 0; padding: 28px 0 26px;
    /* Własny odcień — bladomorski, z palety marki. Piasek zlewał się z działem
       pod spodem („Wycieczki, na które wracają"), a nad nim jest biel: dział
       stał między dwoma sąsiadami i nie było widać, gdzie się zaczyna.
       Karty są białe, więc na tym tle odcinają się mocniej niż na piasku. */
    background: #e9f4f1;
    border-top: 1px solid rgb(18 133 124 / .14);
    border-bottom: 1px solid rgb(18 133 124 / .14);
    font-size: clamp(13.5px, 8.6px + 1.26vw, 16px);
  }

  .opinie__naglowek {
    display: block; margin: 0 var(--gut, 24px) 14px;
    font-size: 1.02em; font-weight: 700; color: var(--op-tekst); line-height: 1.35;
  }
  .opinie__naglowek-gwiazdki { display: block; color: var(--op-gwiazda);
    font-size: .85em; letter-spacing: .14em; margin-bottom: 3px; }
  .opinie__naglowek-hint { display: block; margin-top: 2px;
    font-size: .78em; font-weight: 400; color: var(--op-cichy); }

  /* Rządek do przesuwania palcem. `scroll-snap` sprawia, że karta zatrzymuje
     się równo, a nie w połowie — bez tego przewijanie wygląda na przypadkowe.
     Wystający brzeg następnej karty mówi, że jest ich więcej. */
  .opinie--hero .opinie__lista {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 4px var(--gut, 24px) 8px; scrollbar-width: none;
  }
  .opinie--hero .opinie__lista::-webkit-scrollbar { display: none; }

  .opinie--hero .opinia {
    grid-area: auto; flex: 0 0 min(83%, 340px); scroll-snap-align: center;
    opacity: 1; visibility: visible; transform: none; transition: none;
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid rgb(14 51 48 / .1);
    box-shadow: 0 1px 2px rgb(14 51 48 / .05), 0 8px 20px rgb(14 51 48 / .07);
    padding: 1em 1.1em .95em; gap: .55em; border-radius: 1.1em;
  }
  .opinia::before { font-size: 3.6em; right: .9em; }
  /* Nikt tu nic nie przełącza, więc pasek czasu nie ma czego odmierzać. */
  .opinie--hero .opinia::after { display: none; }
  /* Trzy wiersze: karty stoją obok siebie i muszą być równe, a czwarty wiersz
     robił z rządka ścianę tekstu. */
  .opinia__tekst { min-height: calc(3 * 1.48em); -webkit-line-clamp: 3; }
  .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
     karty stoją w zwykłym układzie i nikomu nie wchodzą w oczy. Gdyby zostało,
     zwinięcie zrobione wcześniej na dużym ekranie schowałoby je na telefonie
     bez tego, czym można je z powrotem otworzyć. */
  .opinie__zamknij, .opinie__ikonka { display: none !important; }
  .opinie--hero.opinie--zwinieta .opinie__lista { display: flex; }
}

/* 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; }
}

/* Dopisek przy przełożonej rekomendacji — to cudze słowa w przekładzie
   i czytelnik ma to wiedzieć, ale nie może to przykrywać samej opinii. */
.opinia__przeklad { margin: .35em 0 0; font-size: .72rem; font-style: italic; opacity: .6; }