/* ===========================================================================
   Sekcja opinii — samojezdna taśma kart.

   Wyciągnięta ze strony głównej przy drugim użyciu (podstrona „O nas").
   Ładowana tam, gdzie sekcja występuje.

   Zakłada, że sekcja stoi na tle `--bg-alt` — wygaszenie krawędzi taśmy
   maluje się tym kolorem.
   =========================================================================== */

.reviews-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 48px; }
.reviews-head .g { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text); text-decoration: none; }
.reviews-head a.g:hover { color: var(--beige-dark); text-decoration: underline; }
.reviews-head .rate { font-size: 56px; font-weight: 200; letter-spacing: -.03em; line-height: 1; }
.reviews-head .rate span { font-size: 22px; color: var(--text); }
.reviews-head .stars { color: var(--beige); letter-spacing: 2px; font-size: 16px; }

.rev-wrap { position: relative; }
.rev-viewport { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.rev-viewport::-webkit-scrollbar { display: none; }
.rev-track { display: flex; gap: 26px; width: max-content; padding: 4px 0 10px; }

/* Ramka ze skosem robiona dwiema warstwami: ::before to obrys, ::after tło
   wsunięte o 1px. Zwykły `border` nie umie iść po `clip-path`. */
/* `flex column` + `margin-top:auto` na autorze (niżej) — treść opinii bywa
   bardzo różnej długości, a podpis ma zostać przy dolnej krawędzi karty
   niezależnie od tego, ile miejsca zajął tekst nad nim. */
.rev-card { position: relative; isolation: isolate; display: flex; flex-direction: column; flex: 0 0 360px; max-width: 360px; padding: 32px; background: transparent; }
.rev-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--line);
  clip-path: polygon(0 0, calc(100% - var(--skos-s)) 0, 100% var(--skos-s), 100% 100%, 0 100%);
  z-index: 0;
  transition: background .3s ease;
}
.rev-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: #fff;
  clip-path: polygon(0 0, calc(100% - 19px) 0, 100% 19px, 100% 100%, 0 100%);
  z-index: 1;
}
.rev-card > * { position: relative; z-index: 2; }
.rev-card:hover::before { background: var(--beige); }
.rev-card .st { color: var(--beige); letter-spacing: 3px; font-size: 15px; margin-bottom: 16px; }
.rev-card p { font-size: 15.5px; color: #3a3a3d; margin-bottom: 18px; }
.rev-card .who { font-size: 14px; color: var(--text); margin-top: auto; white-space: nowrap; }

/* Wygaszenie krawędzi taśmy — kolor musi zgadzać się z tłem sekcji. */
.rev-wrap::before,
.rev-wrap::after { content: ''; position: absolute; top: 0; bottom: 10px; width: 70px; z-index: 2; pointer-events: none; }
.rev-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg-alt) 32%, rgba(244, 244, 244, 0)); }
.rev-wrap::after { right: 0; background: linear-gradient(270deg, var(--bg-alt) 32%, rgba(244, 244, 244, 0)); }

.rev-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 8px 22px rgba(26, 26, 28, .08);
  transition: border-color .25s ease, transform .25s ease;
}
.rev-arrow:hover { border-color: var(--beige); transform: translateY(-50%) scale(1.06); }
.rev-arrow svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rev-arrow.prev { left: -6px; }
.rev-arrow.next { right: -6px; }

/* Odnośnik pod taśmą — używa go „O nas". */
.reviews-more { margin-top: 36px; }

@media (max-width: 600px) {
  .rev-card { flex: 0 0 84vw; max-width: 84vw; padding: 26px; }
  .rev-arrow { width: 42px; height: 42px; }
  /* Karta zajmuje 84vw ekranu — 70px przygaszenia z każdej strony (wartość
     dobrana pod desktop, gdzie karta ma 360px) zjadałoby tu prawie połowę
     jej szerokości i ucinało tekst opinii. Węższy pas, tylko sygnał "jest
     więcej", bez wchodzenia w treść. */
  .rev-wrap::before,
  .rev-wrap::after { width: 20px; }
}