/**
 * ReviewsStack 2.0 — stos „wizytówek" z opiniami (wzorzec: Twitter Testimonial Cards, 21st.dev).
 * Skórka przez CSS custom properties (fallbacki niżej) — nadpisuj per strona.
 *
 * Markup karty (renderowany w PHP):
 *   <article class="rvstack__card">
 *     <header class="rvstack__head">
 *       <div class="rvstack__avatar">A</div>
 *       <div class="rvstack__meta">
 *         <div class="rvstack__name">Imię <span class="rvstack__src">· Google</span></div>
 *         <div class="rvstack__stars">★★★★★<span class="rvstack__stars-off">★</span></div>
 *       </div>
 *     </header>
 *     <p class="rvstack__text">Treść…</p>
 *   </article>
 */

.rvstack {
  --rv-card-bg: #fff;
  --rv-card-ink: #16181c;
  --rv-card-soft: #67707a;
  --rv-card-accent: #e8b04b;
  --rv-card-line: rgba(0, 0, 0, .08);
  --rv-card-shadow: 0 18px 44px rgba(0, 0, 0, .16);
  --rv-arrow-bg: #fff;
  --rv-arrow-ink: #16181c;

  /* Krok kaskady „talii" i szerokość karty - jedno źródło prawdy dla CSS i JS.
     JS czyta te wartości przez getComputedStyle i skaluje je w dół, gdy talia
     nie mieści się w oknie. Trzymamy je tutaj, żeby wygląd dalej strojić w CSS. */
  --rv-step-x: 34px;
  --rv-step-y: 26px;
  /* Karta nigdy nie zajmuje całej szerokości tora. DLACZEGO: obrócona karta
     potrzebuje zapasu na narożniki, a talia na kaskadę. Wcześniej stało tu
     `100%`, więc w wąskim torze (np. 580 px przy oknie 768 px) karta 480 px
     zjadała wszystko i nie było z czego wykroić efektu. Procent zamiast progu
     w px oznacza, że żadna szerokość okna nie wypada poza obsługiwany zakres. */
  --rv-card-w: min(480px, 88%);

  position: relative;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 56px;
}

/* scena stosu — karty absolute, wysokość ustawia JS (strona nie skacze) */
.rvstack__track {
  position: relative;
  overflow: visible;
}

.rvstack__card {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--rv-card-w, min(480px, 100%));
  box-sizing: border-box;
  padding: 22px;
  border-radius: 18px;
  background: var(--rv-card-bg, #fff);
  color: var(--rv-card-ink, #16181c);
  border: 1px solid var(--rv-card-line, rgba(0, 0, 0, .08));
  box-shadow: var(--rv-card-shadow, 0 18px 44px rgba(0, 0, 0, .16));
  cursor: pointer;
  user-select: none;
  transform: var(--tf, translate(-50%, 0));
  transition:
    transform .6s cubic-bezier(.2, .8, .2, 1),
    filter .6s cubic-bezier(.2, .8, .2, 1),
    box-shadow .35s ease;
  will-change: transform, filter;
}

/* hover: karta delikatnie WYCHODZI PRZED SZEREG (unosi się) — bez prostowania */
.rvstack__card:hover { --lift: -14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .26); }
.rvstack__card:focus-visible { outline: 2px solid var(--rv-card-accent, #e8b04b); outline-offset: 3px; }

/* aktywna (przód talii) */
.rvstack__card.is-active { cursor: zoom-in; }

/* „reading" — wyprostowana i powiększona do czytania */
.rvstack__card.is-reading { cursor: zoom-out; box-shadow: 0 34px 80px rgba(0, 0, 0, .3); }

/* ── wnętrze karty (elegancki „tweet") ── */
.rvstack__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rvstack__avatar {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--rv-card-accent, #e8b04b) 85%, #fff);
  color: #fff; font-weight: 700; font-size: 1.05rem;
  overflow: hidden;
}
.rvstack__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rvstack__meta { min-width: 0; }
.rvstack__name { font-weight: 700; font-size: .98rem; line-height: 1.3; }
.rvstack__src { font-weight: 400; color: var(--rv-card-soft, #67707a); font-size: .85em; }
.rvstack__stars { color: var(--rv-card-accent, #e8b04b); font-size: .85rem; letter-spacing: 2px; }
.rvstack__stars-off { opacity: .25; }
.rvstack__text {
  margin: 0; font-size: .95rem; line-height: 1.6;
  color: var(--rv-card-ink, #16181c);
}
.rvstack__date { display: block; margin-top: 10px; font-size: .8rem; color: var(--rv-card-soft, #67707a); }

/* ── strzałki ── */
.rvstack__nav { pointer-events: none; }
.rvstack__arrow {
  pointer-events: auto;
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--rv-card-line, rgba(0, 0, 0, .1));
  background: var(--rv-arrow-bg, #fff); color: var(--rv-arrow-ink, #16181c);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding: 0 0 4px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .3s;
  z-index: 70;
}
.rvstack__arrow:hover { transform: translateY(-50%) scale(1.1); }
.rvstack__arrow:active { transform: translateY(-50%) scale(.95); }
.rvstack__arrow--prev { left: 0; }
.rvstack__arrow--next { right: 0; }

/* ── mobile ── */
@media (max-width: 760px) {
  .rvstack {
    padding: 6px 8px 64px;
    /* Mniejszy krok kaskady na telefonie - JS i tak go doszlifuje. */
    --rv-step-x: 16px;
    --rv-step-y: 14px;
    /* 88% TORA, nie 88vw. DLACZEGO: vw nie wie nic o paddingach sekcji i .rvstack,
       więc karta wychodziła szersza niż jej własny kontener (282 px karty w torze
       o szerokości 264 px przy oknie 320 px). Procent liczy się od tora, więc
       karta zawsze zostaje w środku, a wolne 12% to zapas na obrót i kaskadę. */
    --rv-card-w: min(420px, 88%);
  }
  .rvstack__card { padding: 18px; }
  .rvstack__arrow { top: auto; bottom: 8px; transform: none; width: 40px; height: 40px; }
  .rvstack__arrow:hover { transform: scale(1.08); }
  .rvstack__arrow--prev { left: calc(50% - 52px); }
  .rvstack__arrow--next { right: calc(50% - 52px); }
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .rvstack__card, .rvstack__arrow { transition: none; }
}

/* ── warianty kolorystyczne kart (cyklicznie c0..c4) — „różne kolory" wg Pinky'ego ── */
.rvstack__card--c1 { background: color-mix(in srgb, var(--rv-card-bg, #fff) 88%, #e8b04b); }
.rvstack__card--c2 { background: color-mix(in srgb, var(--rv-card-bg, #fff) 90%, #4b8f6d); }
.rvstack__card--c3 { background: color-mix(in srgb, var(--rv-card-bg, #fff) 90%, #c46a7d); }
.rvstack__card--c4 { background: color-mix(in srgb, var(--rv-card-bg, #fff) 90%, #5b7fb8); }
/* wyłącznik wariantów: dodaj klasę .rvstack--mono na kontener */
.rvstack--mono .rvstack__card { background: var(--rv-card-bg, #fff); }