/* REDFORD V6 · opinie.css (KARTA P2, 18.10.2026; baza TOR A KOREKTA 4). Ciemna sekcja z czerwoną poświatą z lewej.
 * Nagłówek na środku, pod nim rząd ocen w stylu Google (5 gwiazdek #FBBC04, jedyny wyjątek od palety, ocena i liczba z gen_opinie.py).
 * R7-B (19.10): "4,8 z 120+ opinii"; piąta gwiazdka wypełniona w 80% (linearGradient #FBBC04 / #E0E0DA w SVG z generatora).
 * R4-C (19.10): bez kółka "Przewijaj dalej" (usunięte z HTML, CSS i JS). STOS KART w zwykłym przepływie (bez pinu i sticky),
 * teraz siatka PIONOWYCH kart (aspect-ratio 4:5, tekst u góry, autor na dole): 3 kolumny desktop, 1 kolumna mobile;
 * karta rośnie, gdy tekst się nie mieści (bez przycinania). Awatar: biała sylwetka (SVG) na czerwonym kółku.
 * R3-E: pod oceną przycisk do formularza opinii na Oferteo (.bp.op_rev). R15-A: taśma kart (opis niżej). Ruch w opinie.js. Bez JS i przy reduced motion wszystko widoczne. */
.op{position:relative;overflow:hidden;background:radial-gradient(44% 56% at 0% 34%,rgba(200,23,29,.24),rgba(200,23,29,0) 72%),radial-gradient(56% 36% at 100% 100%,rgba(200,23,29,.1),rgba(200,23,29,0) 70%),var(--ink);color:var(--paper)}
.op[hidden]{display:none}
.op_in{padding-top:clamp(104px,8.3333vw,120px);padding-bottom:calc(var(--fl-r,40px) + clamp(88px,6.9444vw,100px))}
.op_head{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;margin-bottom:clamp(48px,4.4444vw,64px);text-align:center}
.op_h{margin:0;font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.02em;font-weight:700}
.op_h .serif-i{color:var(--red-hover)}
.op_score{display:flex;align-items:center;justify-content:center;gap:12px;font-size:18px;line-height:1}
.op_stars{display:inline-flex;gap:2px}
.op_star{display:block;width:22px;height:22px;fill:#FBBC04}
.op_rate{font-weight:700;font-size:20px}
.op_cnt{color:rgba(243,243,239,.72)}
/* R15-A (21.10, Rafał): zamiast siatki 4 kart pozioma TAŚMA na pełną szerokość okna, przesuwana bez przerwy z prawej do lewej
 * (dwa identyczne zestawy .op_set, transform -50% w pętli: bez skoku na szwie). Prędkość stała: czas animacji ustawia opinie.js
 * z szerokości zestawu (ok. 42 px/s); bez JS domyślne --op-dur. Hover (tylko mysz) i fokus klawiatury pauzują. Krawędzie: maska
 * zanikania + lekki blur (backdrop-filter w pseudo-elementach, narastający ku krawędzi). Karty o stałej szerokości i równej
 * wysokości (flex stretch). R16-A (21.10): strefa krawędzi szersza ku środkowi (desktop 10%->16%, do 1023px 8%->13%). Reduced motion: bez animacji, bez kopii, przewijanie poziome ze scroll-snap. Pasek .op_rail usunięty. */
.op_in{padding-bottom:0}
.op{padding-bottom:calc(var(--fl-r,40px) + clamp(88px,6.9444vw,100px))}
.op_marq{--op-gap:24px;--op-w:360px;--op-edge:16%;position:relative;width:100%;overflow:hidden;outline:none}
.op_marq:focus-visible{box-shadow:inset 0 0 0 2px var(--red-hover)}
.op_view{padding-block:4px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--op-edge),#000 calc(100% - var(--op-edge)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--op-edge),#000 calc(100% - var(--op-edge)),transparent 100%)}
.op_track{display:flex;width:max-content;animation:op-marq var(--op-dur,92s) linear infinite;will-change:transform;backface-visibility:hidden}
.op_set{display:flex;flex:none;gap:var(--op-gap);padding-right:var(--op-gap)}
@keyframes op-marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.op_marq.is-off .op_track{animation-play-state:paused}
.op_marq:focus-visible .op_track{animation-play-state:paused}
@media (hover:hover) and (pointer:fine){.op_marq:hover .op_track{animation-play-state:paused}}
.op_marq::before,.op_marq::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:var(--op-edge);pointer-events:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.op_marq::before{left:0;-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
.op_marq::after{right:0;-webkit-mask-image:linear-gradient(270deg,#000,transparent);mask-image:linear-gradient(270deg,#000,transparent)}
.op_card{position:relative;flex:none;display:flex;flex-direction:column;justify-content:space-between;gap:24px;width:var(--op-w);min-width:0;margin:0;padding:34px 32px 28px;border:1px solid rgba(243,243,239,.14);border-radius:24px;background:rgba(243,243,239,.045)}
@media (prefers-reduced-motion:reduce){
  .op_marq{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--m,20px);scrollbar-width:thin}
  .op_marq::before,.op_marq::after{display:none}
  .op_view{-webkit-mask-image:none;mask-image:none}
  .op_track{animation:none;will-change:auto}
  .op_set{padding-inline:var(--m,20px)}
  .op_set-clone{display:none}
  .op_card{scroll-snap-align:start}
}
.op_q{margin:0}
/* R13-A: 5 gwiazdek przy każdej opinii (kształt i kolor jak w nagłówku sekcji, mniejsze) */
.op_top{display:flex;flex-direction:column;gap:18px;min-width:0}
.op_cstars{display:inline-flex;gap:2px;line-height:0}
.op_cstars .op_star{width:18px;height:18px}
.op_q p{margin:0;font-size:clamp(17px,1.25vw,18px);line-height:1.5;letter-spacing:-.005em;overflow-wrap:anywhere}
.op_by{display:flex;align-items:center;gap:14px;min-width:0;margin:0}
/* R3-E: czerwone tło rysuje koło SVG .op_av_bg; tułów wychodzi poza dół koła i jest przycinany okręgiem (overflow + radius),
 * więc dół awatara jest biały (bez czerwonego paska pod ramionami i bez czerwonego pierścienia z antyaliasingu tła spana) */
.op_av{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:none;overflow:hidden;-webkit-mask-image:-webkit-radial-gradient(white,black)}
.op_av svg{display:block;width:48px;height:48px;fill:var(--paper)}
.op_av .op_av_bg{fill:var(--red)}
/* R3-E: przycisk "Wystaw opinię na Oferteo" pod gwiazdkami (wzorzec .bp z base.css, hover btnfx: jasne koło na ciemnym tle) */
.op_rev{margin-top:2px}
.op_id{display:flex;flex-direction:column;gap:5px;min-width:0}
.op_name{font-size:17px;line-height:1.2}
.op_tag{font-size:14px;line-height:1.2;color:rgba(243,243,239,.62)}
@media (max-width:1023px){
  .op_in{padding-top:88px;padding-bottom:0}
  .op{padding-bottom:calc(var(--fl-r,28px) + 72px)}
  .op_marq{--op-gap:16px;--op-w:290px;--op-edge:13%}
  .op_q p{font-size:16px}
  .op_head{gap:16px;margin-bottom:40px}
  .op_score{gap:10px;font-size:16px}
  .op_star{width:20px;height:20px}
  .op_cstars .op_star{width:18px;height:18px}
  .op_rate{font-size:18px}
  .op_rev{margin-top:6px}
  .op_card{gap:20px;padding:26px 22px 22px}
}
@media (min-width:700px) and (max-width:1023px){
  .op_marq{--op-w:330px;--op-edge:13%}
}