/* Sekcja "Opinie" (12.10.2026): ocena z lewej, z prawej rzad kart przewijany w bok; na gorze karty mini zrzut strony klienta. Plasko: cienka linia, bez cieni. */
.op { max-width: 1440px; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 6vw, 96px); }
.op__uklad { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.op__h { max-width: 620px; margin: 0; font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 40; font-size: clamp(30px, 3.2vw, 46px); font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.op__gw { display: inline-flex; gap: 2px; }
.op__gw svg { width: 16px; height: 16px; fill: #fbbc04; }

.op__ocena { display: grid; justify-items: start; gap: 8px; margin-top: 28px; color: var(--ink); }
.op__ocena > b { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 144; font-size: clamp(64px, 7vw, 104px); font-weight: 300; line-height: .9; letter-spacing: -0.03em; }
.op__ocena .op__gw svg { width: 20px; height: 20px; }
.op__ocena > span:not(.op__gw) { font-size: 15px; color: var(--soft); }
.op__wiecej { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding-bottom: 3px; border-bottom: 1px solid currentColor; font-size: 15px; font-weight: 500; color: inherit; text-decoration: none; }
.op__wiecej .klik { width: 10px; height: 10px; transition: transform .2s ease; }
.op__wiecej:hover .klik { transform: translate(2px, -2px); }
.op__nav { display: flex; gap: 8px; margin-top: 28px; }
.op__nav button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .15s ease; }
.op__nav button:hover { border-color: #cbd5e1; }

.op__rzad { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px 0; }
.op__rzad::-webkit-scrollbar { display: none; }
.op__k { flex: 0 0 min(380px, 82vw); display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 22px 24px 24px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); scroll-snap-align: start; }
/* naglowek karty: maly zrzut strony klienta + adres */
.op__k figcaption { display: flex; align-items: center; gap: 14px; padding-bottom: 4px; }
.op__zrzut { flex: none; display: block; width: 88px; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: #eef3ff; }
.op__zrzut img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.op__zrzut--brak { display: grid; place-items: center; font-size: 18px; font-weight: 500; color: var(--accent); }
.op__k figcaption b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.op__k figcaption small { display: block; font-size: 13px; color: var(--muted); }
.op__k blockquote { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.op :focus-visible { outline: 2px solid #93b4ff; outline-offset: 3px; }

@media (max-width: 1100px) {
  .op__uklad { grid-template-columns: 1fr; }
  .op__lewa { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 24px; }
  .op__h { grid-column: 1 / -1; }
  .op__nav { margin-top: 0; }
}
@media (max-width: 640px) {
  .op__k { padding: 18px 20px 20px; }
  .op__nav { display: none; }   /* na telefonie rzad przesuwa sie palcem */
}
@media (prefers-reduced-motion: reduce) { .op__nav button, .op__wiecej .klik { transition: none; } }