@charset "UTF-8";
/* ============================================================
   OPINIE - nagłówek ze strzałkami i stos kart w wachlarzu
   (patrz acf/marki). Karty układa assets/js/opinie.js, tutaj siedzi
   siatka, scena stosu i perspektywa.
   ============================================================ */
.tb-opinie {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
  /* Dwa poziomy przezroczyste dla siatki: własny wrapper i div, który ACF
     robi z <InnerBlocks/>. */
}
.tb-opinie .tb-opinie__blocks-wrap, .tb-opinie .tb-opinie__blocks {
  display: contents;
}
.tb-opinie .tb-opinie__wstep {
  grid-area: 1/1;
  margin-bottom: 0;
}
.tb-opinie {
  /* Strzałki POD stosem kart, nie pod tekstem: sterują talią, więc mają
     stać przy niej - wyśrodkowane na jej osi, jak licznik pod karuzelą
     katalogów. */
}
.tb-opinie__ctl {
  grid-area: 2/2;
  justify-self: center;
}
.tb-opinie {
  /* ── stos ─────────────────────────────────────────────── */
  /* Karty leżą jedna na drugiej (wszystkie w tej samej komórce siatki),
     a wachlarz robi im transform z JS-a.

     `perspective` jest częścią efektu, nie ozdobnikiem: karty w głębi
     cofają się o 100 px na pozycję i to perspektywa zamienia to cofnięcie
     na zmniejszenie (1200/1300 ≈ 0,92 na pierwszej pozycji - tyle samo,
     co w makiecie). Bez niej wachlarz byłby płaski.

     `overflow: visible` - karty z wachlarza wystają poza obrys stosu i tak
     ma być, to on daje wrażenie talii. */
}
.tb-opinie .tb-opinie__stos {
  /* Mnożnik rozstawu wachlarza - czyta go assets/js/opinie.js.
     Odsunięcia w JS są w % szerokości karty, więc na wąskim ekranie
     skalują się razem z nią, ale karta zajmuje wtedy CAŁY kadr i każde
     odsunięcie wypycha skrajne karty poza ekran. Stąd mnożnik, a nie
     drugi komplet liczb: geometria wachlarza zostaje jedna. */
  --wachlarz: 1;
  grid-area: 1/2/2/3;
  position: relative;
  display: grid;
  width: min(100%, 480px);
  margin: 0;
  perspective: 1200px;
  overflow: visible;
}
.tb-opinie .tb-opinie__stos > * {
  grid-area: 1/1;
  margin-block: 0;
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.45s var(--ease-out);
}

/* Na małym laptopie prawa kolumna zwęża się dokładnie do szerokości stosu,
   więc stos stoi tuż przy krawędzi kontenera i nie ma już zapasu, w który
   mógłby wyjść wachlarz - skrajne karty lądowały poza ekranem. Powyżej tego
   progu kolumna jest szersza od stosu (`min(100%, 480px)`) i zapas wraca. */
@media only screen and (max-width: 1200px) {
  .tb-opinie .tb-opinie__stos {
    --wachlarz: 0.55;
  }
}
/* W kanwie edytora JS motywu nie chodzi, więc karty nie dostają transformów
   i leżałyby dokładnie jedna na drugiej - widać by było tylko ostatnią,
   a poprzednich nie dałoby się kliknąć.

   W edytorze stos rozkłada się więc w POZIOMY pas z własnym suwakiem.
   W pionie byłby ciąg dziewięciu kart na kilka ekranów przewijania, a tak
   sekcja mieści się w kadrze i do kolejnej opinii przesuwa się w bok. */
.is-root-container .tb-opinie .tb-opinie__stos,
.block-editor-block-list__layout .tb-opinie .tb-opinie__stos {
  display: flex;
  gap: var(--space-lg);
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: var(--space-md);
  perspective: none;
}
.is-root-container .tb-opinie .tb-opinie__stos > *,
.block-editor-block-list__layout .tb-opinie .tb-opinie__stos > * {
  grid-area: auto;
  flex: 0 0 min(100%, 420px);
}

@media only screen and (max-width: 900px) {
  .tb-opinie {
    grid-template-columns: minmax(0, 1fr);
  }
  .tb-opinie .tb-opinie__wstep {
    grid-area: 1/1;
  }
  .tb-opinie {
    /* Na telefonie kolejność: tekst, talia, strzałki pod nią. */
  }
  .tb-opinie .tb-opinie__ctl {
    grid-area: 3/1;
    justify-self: center;
  }
  .tb-opinie .tb-opinie__stos {
    grid-area: 2/1;
    margin-inline: auto;
    /* Na telefonie stos jest szeroki na cały kontener, więc pełny
       wachlarz wyprowadzałby skrajne karty poza kadr - a strona ma
       `overflow-x: clip`, czyli ucinałby je bez śladu. Skrócony
       rozstaw zostawia widoczną talię, ale mieści się w ekranie. */
    --wachlarz: 0.35;
  }
}