/* ==========================================================================
   Sekcja Opinie. D154/D155, 03.09.2026: przywrocona po D18 (material jest
   dzis, 5 opinii z Booksy, zgoda klientki). Karuzela: wzorzec interakcji od
   Jakuba (masazdlaciebie.pl, strzalki gora-prawo + kropki pod kartami),
   wlasny kolor/typografia z tokens.css tej strony, nie kopia cudzego skina.
   Mechanizm: natywny overflow-x + scroll-snap, nie transform w JS, wiec
   dziala (przewijaniem/dotykiem) nawet gdy JS nie wystartuje.
   ========================================================================== */

/* D171, 03.09.2026: wartosc dobrana przez Jakuba w konfiguratorze, zakres
   podstawowy. Sekcja nie miala dotad wlasnego padding-block, brala rytm z
   `.section` (--space-section, clamp do 120px), a wartosc z konfiguratora jest
   wyraznie ciasniejsza. Gola klasa wystarcza: `.opinie` i `.section` maja te
   sama wage, a pliki sekcji wczytuja sie po tokens.css, wiec ta regula stoi
   nizej. Zakres telefonu ma wlasna wartosc (blok 700px na koncu pliku, D170). */
.opinie { padding-block: var(--space-5); }

.opinie__uklad { position: relative; }

.opinie__naglowek {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-block-end: var(--space-8);
}

.opinie__tytul { margin: var(--space-3) 0 0; }

/* D157, 03.09.2026: zgloszenie Jakuba, "bez gwiazdek", sama liczba. */
.opinie__ocena {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

/* --- nawigacja: dwie okragle strzalki, jezyk kapsuly/menu-mobilne --------- */

.opinie__nawigacja { display: flex; gap: var(--space-3); flex: 0 0 auto; }

.opinie__strzalka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: var(--border-width) solid var(--line-ctx);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.opinie__strzalka svg { inline-size: 18px; block-size: 18px; display: block; }
.opinie__strzalka:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--text-on-dark); }
.opinie__strzalka:focus-visible {
  outline: var(--focus-width) solid var(--focus-ctx, var(--accent));
  outline-offset: var(--focus-offset);
}
.opinie__strzalka[disabled] { opacity: 0.35; pointer-events: none; }

/* --- tor karuzeli, scroll-snap natywny ------------------------------------ */

.opinie__karuzela { position: relative; }

.opinie__tor {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter-mobile));
  padding-inline: var(--gutter-mobile);
}
.opinie__tor::-webkit-scrollbar { display: none; }

/* D157, 03.09.2026: zgloszenie Jakuba, "napiszemy na środku opinie... na
   dole kółeczko z literą imienia i imię". Tekst wysrodkowany, awatar+imie
   zeszly z gory karty na dol (bylo .opinie__karta-gora, teraz
   .opinie__karta-dol), gwiazdki zdjete w calosci.

   D159, 03.09.2026, ze zrzutu Jakuba: karta ciemna z jasnym pismem ("żeby
   się wyróżniały" na piaskowym tle sekcji), cytat wyrownany do lewej i
   wysrodkowany W PIONIE, awatar z imieniem w jednym wierszu na dole po
   lewej. Wysrodkowanie w pionie robi `margin-block: auto` na samym cytacie,
   nie `justify-content` na karcie: auto-marginesy pochlaniaja wolna
   przestrzen ZANIM zadziala justify-content, wiec te dwa zapisy razem daja
   tekst przy gornej krawedzi, czyli dokladnie to, co mielismy naprawic.

   Kolory karty sa BEZWZGLEDNE, tlo i pismo razem, nie polowicznie z
   kontekstu sekcji (PRZEKAZANIE.md pulapka 16). Sekcja jest `.on-light`,
   wiec `--fg` i `--fg-muted` daja tu ciemne pismo: zostawienie ich na
   ciemnym tle karty dalo by tekst niewidoczny, bez bledu i bez ostrzezenia. */
.opinie__karta {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 2 * var(--space-5)) / 3);
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  text-align: start;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  border: var(--border-width) solid var(--line-on-dark-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.opinie__tekst {
  margin-block: auto;
  margin-inline: 0;
  color: var(--text-on-dark);
  font-size: var(--fs-small);
  line-height: 1.65;
}

.opinie__usluga {
  margin: 0;
  font-size: var(--fs-fine);
  color: var(--accent);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.opinie__karta-dol {
  padding-block-start: var(--space-4);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

.opinie__awatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--surface-cream-hi);
  color: var(--surface-dark);
  font-family: var(--font-display);
  font-size: 18px;
}

.opinie__imie { margin: 0; font-weight: var(--fw-semibold); color: var(--text-on-dark); }

/* --- kropki ---------------------------------------------------------------- */

.opinie__kropki {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-7);
}

.opinie__kropka {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--line-ctx);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.opinie__kropka:hover { background: var(--accent-deep); }
.opinie__kropka[aria-current="true"] { background: var(--accent-deep); transform: scale(1.3); }
.opinie__kropka:focus-visible {
  outline: var(--focus-width) solid var(--focus-ctx, var(--accent));
  outline-offset: var(--focus-offset);
}

.opinie__podpis {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

/* --- tablet i telefon -------------------------------------------------------- */

@media (max-width: 1100px) {
  .opinie__karta { flex-basis: calc((100% - var(--space-5)) / 2); }
}

@media (max-width: 700px) {
  /* D170, 03.09.2026: wartosci dobrane przez Jakuba w konfiguratorze, zakres
     telefon. Zapisane w pliku wlasciciela, nie w konfigurator.css, zgodnie z
     rozstrzygnieciem z D168: konfigurator sluzy do DOBRANIA wartosci, nie do
     jej przechowywania. */
  .opinie { padding-block: var(--space-6); }
  .opinie__naglowek { flex-wrap: wrap; align-items: flex-start; }
  .opinie__nawigacja { order: 3; }
  .opinie__karta { flex-basis: 88%; padding: var(--space-5); }
}