/* ============================================================
   Sekcja z opiniami gosci (public/partials/opinie.blade.php).

   Jeden arkusz dla calego serwisu, bo ta sama sekcja stoi na hubie melexa,
   stronach tras, transferach, „o nas" i na stronie glownej. Strona glowna ma
   jasne tlo, reszta ciemne, wiec kolory ida przez zmienne, a nie przez
   powtorzony blok regul.

   Dwa zupelnie rozne zachowania:
     - szeroki ekran: widac poltora rzedu kart, dol wygasza sie miekko,
       reszte odslania przycisk,
     - telefon: karty przesuwa sie palcem, jedna na ekran, bez przycisku,
       za to z paskiem polozenia i podpowiedzia.

   Ukryte karty ZOSTAJA W KODZIE STRONY. Sa tylko schowane stylem, wiec czytnik
   tresci i wyszukiwarka widza wszystkie opinie.
   ============================================================ */

.ykrev {
    /* Odstepy nalezą do sekcji, nie do strony. Wczesniej kazdy z pieciu szablonow
       mial wlasne marginesy przy siatce opinii i po scaleniu w jeden kawalek
       karty przyklejaly sie do nastepnej sekcji (zmierzone 4 px na „o nas"
       i 8 px na stronie glownej). Szerokosc zostaje po rodzicu; strony, na
       ktorych sekcja stoi poza pojemnikiem, podaja ja parametrem. */
    margin: 28px auto 48px;
    --ykrev-tlo: linear-gradient(160deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.75) 100%);
    --ykrev-ramka: rgba(255, 255, 255, 0.07);
    --ykrev-ramka-hover: rgba(245, 158, 11, 0.35);
    --ykrev-tekst: rgba(255, 255, 255, 0.82);
    --ykrev-drobne: rgba(255, 255, 255, 0.45);
    --ykrev-imie: #ffffff;
    --ykrev-kreska: rgba(255, 255, 255, 0.06);
    --ykrev-cien: 0 18px 40px rgba(0, 0, 0, 0.45);
    --ykrev-szyna: rgba(255, 255, 255, 0.16);
    /* Wysokosc rzedu kart. Stad liczy sie wysokosc przyciecia, wiec obie
       wartosci nie moga sie rozjechac. */
    --ykrev-rzad: 330px;
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
}
.ykrev--jasny {
    --ykrev-tlo: #ffffff;
    --ykrev-ramka: rgba(15, 23, 42, 0.08);
    --ykrev-ramka-hover: rgba(245, 158, 11, 0.55);
    --ykrev-tekst: #334155;
    --ykrev-drobne: #64748b;
    --ykrev-imie: #0f172a;
    --ykrev-kreska: rgba(15, 23, 42, 0.07);
    --ykrev-cien: 0 14px 34px rgba(15, 23, 42, 0.12);
    --ykrev-szyna: rgba(10, 15, 31, 0.12);
}

/* ── przyciecie i wygaszanie ────────────────────────────────────────────────
   Wysokosc jest policzona z reguly, a NIE ustawiana skryptem po wczytaniu:
   skrypt zmieniajacy wysokosc juz po pierwszym malowaniu daje widoczny skok
   calej strony. Rzad ma stala wysokosc (--ykrev-rzad), wiec poltora rzedu to
   zwykle dzialanie, ktore przegladarka zna od pierwszej klatki.

   Wygaszanie idzie MASKA, nie nalozonym gradientem w kolorze tla. Ta sama
   sekcja stoi na tle granatowym i na kremowym; gradient trzeba by dobierac
   pod kazda strone i przy najmniejszym rozjezdzie widac pas innego koloru.
   Maska wygasza samą tresc i jest obojetna na kolor pod spodem. */
.ykrev__collapse {
    position: relative;
    /* Bez zakotwiczania przewijania. Przegladarka, gdy tresc rosnie, sama
       przesuwa strone tak, zeby „utrzymac" wybrany element, i po rozwinieciu
       opinii przerzucala goscia o 1700 px na koniec listy. Polozeniem po
       rozwinieciu zarzadza skrypt: strona ma zostac tam, gdzie byla. */
    overflow-anchor: none;
    /* zapas na uniesienie karty pod kursorem i na jej cien, zeby przyciecie
       nie obcinalo krawedzi kart po bokach */
    margin: -8px -12px;
    padding: 8px 12px;
    box-sizing: border-box;
}
.ykrev:not(.otwarte) .ykrev__collapse {
    max-height: calc(var(--ykrev-rzad) * 1.5 + 18px + 8px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, 0.25) 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, 0.25) 85%, transparent 100%);
}

/* Karta ma WLASNA wysokosc, a nie wysokosc najwyzszej karty w rzedzie.
   Wczesniej krotka opinia dostawala pod tekstem kilkaset pikseli pustki, zanim
   zaczela sie stopka z imieniem.

   Dlaczego nie zwykle kolumny CSS, ktore robia to samo jedna linijka:
   przegladarka przy kazdej zmianie tresci uklada je OD NOWA, wiec po klknieciu
   „zobacz wiecej opinii" karty przeskakiwaly miedzy kolumnami i czytelnik
   gubil te, ktora wlasnie czytal. Zmierzone na 17 opiniach: po rozwinieciu
   miejsce zmienila wiekszosc kart.

   Tutaj kolumne kazdej karty ustawia skrypt RAZ i juz jej nie zmienia; nowo
   odslonieta opinia dopisuje sie na dole najkrotszej kolumny. Zeby karty
   w sasiednich kolumnach nie musialy rownac sie do siebie wysokoscia, wiersz
   siatki ma 8 px, a karta zajmuje tyle wierszy, ile potrzebuje.

   Regula wchodzi dopiero z klasa „ykrev--kolumny", ktora dokłada skrypt: bez
   JavaScriptu zostaje zwykla siatka rownych kolumn, czyli to, co bylo. */
.ykrev__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(var(--ykrev-rzad), auto);
    gap: 18px;
}
.ykrev__grid.ykrev--kolumny {
    grid-auto-rows: 8px;
    row-gap: 0;
    column-gap: 18px;
}
/* Odstep pionowy robi margines karty, a nie odstep wiersza: skrypt liczy z niego
   liczbe wierszy, ktore karta ma zajac. */
.ykrev__grid.ykrev--kolumny > .ykrev-card { margin-bottom: 18px; }

.ykrev-card {
    display: flex;
    flex-direction: column;
    background: var(--ykrev-tlo);
    border: 1px solid var(--ykrev-ramka);
    border-radius: 16px;
    padding: 22px 22px 18px;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.ykrev-card:hover {
    transform: translateY(-3px);
    border-color: var(--ykrev-ramka-hover);
    box-shadow: var(--ykrev-cien);
}
/* Karty powyzej progu: w kodzie sa, na ekranie pojawiaja sie po klknieciu. */
.ykrev-card--dalsza { display: none; }
.ykrev.otwarte .ykrev-card--dalsza { display: flex; }

.ykrev-card__top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 12px;
}
.ykrev-card__stars {
    color: #f59e0b;
    font-size: 0.95rem;
    letter-spacing: 1px;
    line-height: 1;
}
/* Data dosunieta do prawej krawedzi karty, plakietka trasy zaraz przed nia. */
.ykrev-card__date {
    color: var(--ykrev-drobne);
    font-size: 0.75rem;
    white-space: nowrap;
    margin-left: auto;
}

/* Szesc linii to prog dobrany pomiarem: przy karcie 355 px szerokosci miesci
   okolo 300 znakow, czyli dlugosc typowej opinii z Google. Dluzsze urywaja sie
   wielokropkiem, a calosc widac po rozwinieciu sekcji albo po klknieciu w imie,
   ktore prowadzi do oryginalu w Google. */
.ykrev-card__text {
    color: var(--ykrev-tekst);
    font-size: 0.94rem;
    line-height: 1.62;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ykrev.otwarte .ykrev-card__text {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.ykrev-card__foot {
    display: flex;
    align-items: center;
    /* Stopka NIE moze sie lamac: przy waskiej karcie na stronie glownej inicjal
       odrywal sie od imienia i ladowal w osobnej linii. Zwezaja sie za to
       elementy w srodku, bo maja zerowa dolna granice szerokosci. */
    flex-wrap: nowrap;
    min-width: 0;
    gap: 11px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--ykrev-kreska);
}
.ykrev-card__ava {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: #0a0f1f;
    flex: none;
}
.ykrev-card__who { min-width: 0; }
.ykrev-card__name {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ykrev-imie);
}
.ykrev-card__name a { color: inherit; text-decoration: none; }
.ykrev-card__name a:hover { text-decoration: underline; }
.ykrev-card__src {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: 5px;
    color: var(--ykrev-drobne);
    font-size: 0.76rem;
    margin-top: 1px;
}
/* Logo Google z napisem „opinia Google" prowadzi do tej samej opinii, co
   nazwisko wyzej.

   Podkreslenie na najechaniu obejmuje SAM NAPIS, a nie caly odnosnik: kreska
   ciagnaca sie takze pod logo wyglada jak przekreslony znaczek.

   Wyscielka 7 px zniesiona ujemnym marginesem powieksza pole trafienia palcem
   z 19 do 33 px, nie ruszajac przy tym ukladu karty: margines oddaje dokladnie
   tyle miejsca, ile zabiera wyscielka. */
.ykrev-card__zrodlo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
    padding: 7px 0;
    margin: -7px 0;
}
.ykrev-card__zrodlo:hover [data-i18n] { text-decoration: underline; }

/* Nazwisko i napis „opinia Google" prowadza pod TEN SAM adres, wiec podkreslaja
   sie RAZEM: najechanie na jedno zapala kreske pod obydwoma. Inaczej wygladaja
   jak dwa osobne odnosniki do dwoch roznych miejsc.

   Warunek `:has(a:hover)` pilnuje, ze zapala je tylko najechanie na ODNOSNIK.
   Gdyby stalo tu zwykle `.ykrev-card__who:hover`, kreska zapalalaby sie takze
   przy najechaniu na podpis „(przetlumaczone z...)", ktory odnosnikiem nie jest.
   Reguly wyzej zostaja jako zapas dla przegladarek bez `:has`: tam podkresli sie
   sam element pod kursorem, czyli zachowanie sprzed zmiany. */
.ykrev-card__who:has(a:hover) .ykrev-card__name a,
.ykrev-card__who:has(a:hover) .ykrev-card__zrodlo [data-i18n] {
    text-decoration: underline;
}

/* Nawias, a nie kropka rozdzielajaca. Przy waskiej karcie linia zrodla lamie
   sie na dwie i kropka zostawala samotnie na poczatku drugiej linii, co wyglada
   jak blad skladu. Nawias czyta sie tak samo dobrze zlamany i niezlamany. */
.ykrev-card__przeklad { opacity: 0.75; font-size: 0.95em; }
.ykrev-card__przeklad::before { content: '('; }
.ykrev-card__przeklad::after { content: ')'; }

.ykrev-card__tag {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(245, 158, 11, 0.95);
    border: 1px solid rgba(245, 158, 11, 0.32);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}
.ykrev--jasny .ykrev-card__tag { color: #b45309; border-color: rgba(180, 83, 9, 0.28); }

/* ── przycisk odslaniajacy ─────────────────────────────────────────────── */
.ykrev__more {
    display: block;
    margin: 22px auto 0;
    background: transparent;
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #f59e0b;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 26px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.ykrev__more:hover { background: rgba(245, 158, 11, 0.1); }
.ykrev--jasny .ykrev__more { color: #b45309; border-color: rgba(180, 83, 9, 0.35); }
.ykrev--jasny .ykrev__more:hover { background: rgba(180, 83, 9, 0.07); }
/* Napis na przycisku zalezy od stanu: „pokaz wiecej" albo „pokaz mniej". */
.ykrev__more-close { display: none; }
.ykrev.otwarte .ykrev__more-open { display: none; }
.ykrev.otwarte .ykrev__more-close { display: inline; }

/* ── pasek polozenia (tylko telefon) ───────────────────────────────────── */
.ykrev__swipe { display: none; }
.ykrev__rail {
    flex: 0 0 auto;
    width: 104px;
    height: 4px;
    border-radius: 999px;
    background: var(--ykrev-szyna);
    overflow: hidden;
}
.ykrev__fill {
    display: block;
    height: 100%;
    width: 18%;
    border-radius: 999px;
    background: #f59e0b;
    /* BEZ plynnego przejscia szerokosci: przy przesuwaniu palcem szerokosc
       zmienia sie co klatke i animowanie kazdej zmiany daje wrazenie, ze pasek
       wlecze sie za palcem. */
}
.ykrev__hint {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ykrev-drobne);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 260ms ease;
}
.ykrev__hint::after {
    content: '›';
    font-size: 1.05rem;
    line-height: 1;
    animation: ykrevNudge 1.6s ease-in-out infinite;
}
[dir="rtl"] .ykrev__hint::after { content: '‹'; }
/* Po dojechaniu do ostatniej karty znika CALY wskaznik, nie tylko napis:
   pomarazczowa kreska bez podpowiedzi wyglada jak zapomniany element.
   Gasimy kryciem, a nie „display", zeby uklad nie drgnal. */
.ykrev__swipe { transition: opacity 260ms ease; }
.ykrev.przewiniete .ykrev__swipe { opacity: 0; }
@keyframes ykrevNudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

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

/* ── telefon ───────────────────────────────────────────────────────────────
   Rzad przesuwany palcem, DOKLADNIE taki sam jak rzad „Dlaczego melex"
   na hubie melexa (melex.css, regula `.why-grid` w @media 600px).

   Wazna jest szerokosc karty: 78 procent, a nie 100. Przy karcie na cala
   szerokosc sasiednia opinia wjezdzala zza krawedzi ekranu i konczyla sie
   pionowym cieciem w polowie zdania, przez co wygladala na zepsuta. Przy 78
   procentach kawalek nastepnej karty widac CALY CZAS i od razu czytelnie:
   to nie jest ucieta tresc, tylko zapowiedz kolejnej opinii. Ten sam uklad
   dziala w sekcji melexa od dawna i nikt nie zglaszal do niego zastrzezen.

   Ujemny margines wyrownuje rzad do krawedzi ekranu (sekcje maja 16 px
   wyscielki), a `scroll-padding-left` sprawia, ze przyciagnieta karta staje
   w tej samej linii co reszta tresci, a nie przy samej krawedzi. */
@media (max-width: 700px) {
    .ykrev:not(.otwarte) .ykrev__collapse {
        max-height: none;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .ykrev__collapse { margin: 0; padding: 0; }

    .ykrev__grid {
        display: flex;
        grid-template-columns: none;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px;
        padding: 6px 16px 12px;
        scroll-padding-left: 16px;
        scrollbar-width: none;
    }
    .ykrev__grid::-webkit-scrollbar { display: none; }

    .ykrev-card {
        flex: 0 0 78%;
        scroll-snap-align: start;
        margin-bottom: 0;
    }
    /* Na telefonie nie ma przycisku odslaniajacego, wiec w tasmie musza byc
       WSZYSTKIE karty. Inaczej szesc ostatnich opinii nie mialoby jak sie
       pokazac: przycisku brak, a przewijanie konczylo sie na dziewiatej. */
    .ykrev-card--dalsza { display: flex; }

    .ykrev__more { display: none; }
    .ykrev__swipe {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        margin: 6px 0 0;
    }
    /* Odstep pod paskiem dobrany OSOBNO dla obu motywow, bo sekcje, w ktorych
       stoi wskaznik, maja rozna wlasna wyscielke. Zmierzona odleglosc do
       pierwszego napisu ponizej:
         strona glowna (motyw jasny): 42 px przy marginesie 10, czyli w sam raz,
         hub melexa i trasy (ciemny): 96 px przy tym samym marginesie, o polowe
         za duzo, bo tamta sekcja dokłada 56 px wlasnej wyscielki.
       Ujemny margines zjada czesc tamtej wyscielki i sprowadza obie strony
       do podobnego odstepu. */
    .ykrev--jasny { margin-bottom: 8px; }
    .ykrev--ciemny { margin-bottom: -40px; }
}

@media (prefers-reduced-motion: reduce) {
    .ykrev-card { transition: none; }
    .ykrev-card:hover { transform: none; }
    .ykrev__hint::after { animation: none; }
}