/* PMR Opinie - karty opinii. Kolory w zmiennych, żeby dało się je
   nadpisać z motywu bez walki o specyficzność. */

.pmr-op {
    --pmr-op-akcent: #FEB355;
    --pmr-op-karta: #1c1c1e;
    --pmr-op-ramka: #2c2c2c;
    --pmr-op-tekst: #ffffff;
    --pmr-op-szary: #b9b9c1;
    --pmr-op-cudzyslow: #2c2c2c;
    font-family: inherit;
    color: var(--pmr-op-tekst);
}

.pmr-op *,
.pmr-op *::before,
.pmr-op *::after {
    box-sizing: border-box;
}

/* ---------- Siatka ---------- */

.pmr-op-siatka {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.pmr-op--k1 .pmr-op-siatka { grid-template-columns: minmax(0, 1fr); }
.pmr-op--k2 .pmr-op-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pmr-op--k4 .pmr-op-siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .pmr-op--k3 .pmr-op-siatka,
    .pmr-op--k4 .pmr-op-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .pmr-op .pmr-op-siatka { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---------- Karta ---------- */

.pmr-op-karta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 26px;
    border: 1px solid var(--pmr-op-ramka);
    border-radius: 14px;
    background: var(--pmr-op-karta);
}

@media (max-width: 640px) {
    .pmr-op-karta { padding: 20px; }
}

.pmr-op-glowa {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--pmr-op-ramka);
}

.pmr-op .pmr-op-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
}

.pmr-op-avatar--inicjaly {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pmr-op-akcent);
    color: #1a1207;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.pmr-op-kto { flex: 1; min-width: 0; }

.pmr-op .pmr-op-imie {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pmr-op-tekst);
    overflow-wrap: anywhere;
}

.pmr-op .pmr-op-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 4px 0 0;
    padding: 0;
    line-height: 1.3;
}

.pmr-op-rola {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pmr-op-akcent);
}

.pmr-op-kraj {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--pmr-op-szary);
}

.pmr-op .pmr-op-flaga {
    flex: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border-radius: 50%;
}

.pmr-op-cudzyslow {
    flex: none;
    align-self: flex-start;
    width: 52px;
    height: 52px;
    margin: -6px -6px 0 0;
    fill: var(--pmr-op-cudzyslow);
}

.pmr-op-tresc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--pmr-op-szary);
    overflow-wrap: anywhere;
}

.pmr-op .pmr-op-tresc p { margin: 0 0 .8em; padding: 0; color: inherit; font-size: inherit; line-height: inherit; }
.pmr-op .pmr-op-tresc p:last-child { margin-bottom: 0; }

/* Stopka dociśnięta do dołu - gwiazdki w jednym rzędzie na kartach obok siebie. */
.pmr-op-stopka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: auto;
    padding-top: 22px;
}

.pmr-op-gwiazdki { display: inline-flex; gap: 2px; }

.pmr-op-gwiazdki svg {
    width: 18px;
    height: 18px;
    fill: var(--pmr-op-ramka);
}

.pmr-op-gwiazdki svg.is-pelna { fill: var(--pmr-op-akcent); }

.pmr-op .pmr-op-platforma {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    line-height: 1;
    color: var(--pmr-op-szary);
    text-decoration: none;
    box-shadow: none;
}

.pmr-op a.pmr-op-platforma:hover { color: var(--pmr-op-tekst); }

.pmr-op-platforma svg { width: 16px; height: 16px; flex: none; }

/* ---------- Wczytaj więcej ---------- */

/* Karta ma display:flex, który przebiłby domyślne ukrycie atrybutu hidden. */
.pmr-op .pmr-op-karta[hidden] { display: none; }

.pmr-op-karta:focus { outline: none; }
.pmr-op-karta:focus-visible { outline: 2px solid var(--pmr-op-akcent); outline-offset: 3px; }

.pmr-op-karta.is-nowa { animation: pmr-op-pojaw .4s ease both; }

@keyframes pmr-op-pojaw {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.pmr-op-wczytaj-pole {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

.pmr-op-wczytaj-pole[hidden] { display: none; }

.pmr-op .pmr-op-wczytaj {
    appearance: none;
    margin: 0;
    padding: 9px 18px;
    border: 1px solid var(--pmr-op-akcent);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--pmr-op-akcent);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.pmr-op .pmr-op-wczytaj:hover {
    background: var(--pmr-op-akcent);
    color: #1a1207;
}

.pmr-op-wczytaj:focus-visible {
    outline: 2px solid var(--pmr-op-akcent);
    outline-offset: 3px;
}

/* ---------- Średnia ocen ---------- */

/* Kilka plakietek (np. Google i Fiverr) obok siebie; na wąskim ekranie
   następna schodzi pod spód. */
.pmr-op-srednie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
}

.pmr-op--srednia .pmr-op-srednie { margin: 0; }

.pmr-op-srednie--srodek { justify-content: center; }
.pmr-op-srednie--prawo { justify-content: flex-end; }

.pmr-op .pmr-op-srednia {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 7px;
    margin: 0;
    padding: 8px 15px;
    border: 1px solid var(--pmr-op-ramka);
    border-radius: 999px;
    background: var(--pmr-op-karta);
    font-size: 13px;
    line-height: 1.2;
    color: var(--pmr-op-szary);
}

.pmr-op-srednia svg { flex: none; width: 17px; height: 17px; }
.pmr-op-srednia .pmr-op-srednia-gwiazda { fill: var(--pmr-op-akcent); }

.pmr-op .pmr-op-srednia-wartosc {
    font-size: 16px;
    font-weight: 700;
    color: var(--pmr-op-tekst);
}

.pmr-op-srednia-liczba { color: var(--pmr-op-szary); opacity: .8; }

/* Plakietka z linkiem do profilu na platformie. */
.pmr-op a.pmr-op-srednia--link {
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.pmr-op a.pmr-op-srednia--link:hover {
    border-color: var(--pmr-op-akcent);
    color: var(--pmr-op-tekst);
    text-decoration: none;
}

.pmr-op-srednia .pmr-op-srednia-strzalka {
    width: 13px;
    height: 13px;
    margin-left: -2px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .6;
    transition: opacity .15s, transform .15s;
}

.pmr-op a.pmr-op-srednia--link:hover .pmr-op-srednia-strzalka {
    opacity: 1;
    transform: translate(1px, -1px);
}

.pmr-op a.pmr-op-srednia--link:focus-visible {
    outline: 2px solid var(--pmr-op-akcent);
    outline-offset: 3px;
}

/* Tekst tylko dla czytników ekranu - własna klasa, bo motyw nie musi
   definiować WordPressowego .screen-reader-text. */
.pmr-op .pmr-op-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pmr-op-karta.is-nowa { animation: none; }
}

/* ---------- Skracanie długich opinii ---------- */

/* Wysokość w liniach tekstu: em liczony od rozmiaru czcionki treści. */
.pmr-op--linie .pmr-op-tresc {
    max-height: calc(var(--pmr-op-linie, 6) * 1.6em);
    overflow: hidden;
    transition: max-height .35s ease;
}

.pmr-op--linie .pmr-op-tresc.is-przycieta {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4em), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4em), transparent);
}

.pmr-op--linie .is-rozwinieta .pmr-op-tresc {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

/* Skrypt wyrównuje karty do najwyższej zwiniętej zamiast rozciągać cały
   rząd - rozwinięta karta rośnie sama, sąsiednie zostają jak były. */
.pmr-op.is-wyrownane .pmr-op-siatka { align-items: start; }
.pmr-op.is-wyrownane .pmr-op-karta { min-height: var(--pmr-op-wysokosc, 0); }

.pmr-op .pmr-op-wiecej {
    appearance: none;
    align-self: flex-start;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--pmr-op-akcent);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.pmr-op .pmr-op-wiecej:hover { background: none; color: var(--pmr-op-tekst); text-decoration: underline; }
.pmr-op-wiecej[hidden] { display: none; }

.pmr-op-wiecej:focus-visible {
    outline: 2px solid var(--pmr-op-akcent);
    outline-offset: 3px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .pmr-op--linie .pmr-op-tresc { transition: none; }
    .pmr-op--slide .pmr-op-siatka { scroll-behavior: auto; }
}

/* ---------- Slide: jeden przewijany rząd ---------- */

.pmr-op--slide {
    --pmr-op-kolumny: 3;
    --pmr-op-odstep: 20px;
}

.pmr-op--slide .pmr-op-siatka {
    display: flex;
    gap: var(--pmr-op-odstep);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pmr-op--slide .pmr-op-siatka::-webkit-scrollbar { display: none; }

.pmr-op--slide .pmr-op-siatka.is-ciagniety {
    scroll-snap-type: none;
    scroll-behavior: auto;
    cursor: grabbing;
    user-select: none;
}

.pmr-op--slide .pmr-op-karta {
    flex: 0 0 calc((100% - (var(--pmr-op-kolumny) - 1) * var(--pmr-op-odstep)) / var(--pmr-op-kolumny));
    scroll-snap-align: start;
}

@media (max-width: 1024px) {
    .pmr-op--slide .pmr-op-karta {
        flex-basis: calc((100% - (min(var(--pmr-op-kolumny), 2) - 1) * var(--pmr-op-odstep)) / min(var(--pmr-op-kolumny), 2));
    }
}

/* Na telefonie wystaje kawałek następnej karty - widać, że da się przewinąć. */
@media (max-width: 640px) {
    .pmr-op--slide { --pmr-op-odstep: 14px; }
    .pmr-op--slide .pmr-op-karta { flex-basis: 86%; }
}

.pmr-op-siatka:focus-visible {
    outline: 2px solid var(--pmr-op-akcent);
    outline-offset: 4px;
    border-radius: 14px;
}

.pmr-op-nawigacja {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}

.pmr-op-nawigacja[hidden] { display: none; }

.pmr-op .pmr-op-strzalka {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--pmr-op-ramka);
    border-radius: 50%;
    background: var(--pmr-op-karta);
    color: var(--pmr-op-tekst);
    box-shadow: none;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s, opacity .15s;
}

.pmr-op .pmr-op-strzalka:hover:not(:disabled) {
    border-color: var(--pmr-op-akcent);
    background: var(--pmr-op-akcent);
    color: #1a1207;
}

.pmr-op .pmr-op-strzalka:disabled { opacity: .35; cursor: default; }

.pmr-op-strzalka svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pmr-op-strzalka:focus-visible,
.pmr-op-platforma:focus-visible {
    outline: 2px solid var(--pmr-op-akcent);
    outline-offset: 3px;
}

.pmr-op-platforma:focus-visible { border-radius: 3px; }