/* =====================================================================
   STRONA GŁÓWNA — §3 OPINIE (T-185, makieta właścicielki — BRIEF §7)
   ---------------------------------------------------------------------
   Sekcja to komponent wspólny ~20 szablonów (template-parts/reviews.php,
   opinie.css, opinie.js). Tu WYŁĄCZNIE reguły pod `.home #opinie` —
   komponent, JS i treść karty zostają nietknięte. Karta to cytat z Google
   (biel, Roboto, znak „G"); na papierze zmienia się wyłącznie jej ramka i cień.

   Na `/` pasmo DZIEŃ — ciąg dnia po §2 „Kim jest": ten sam papier z ziarnem,
   mniejszy oddech u góry (--sg-pasmo-ciag), pełny u dołu (pod spodem noc
   oferty). Głowa wyśrodkowana jak w makiecie: gwiazdka między kreskami
   w miedzi, H2 Cormorantem, zdanie kursywą. Pod nią tor trzech kart
   trzymający krawędzie .sg-wrap, przyciski i dopisek.

   Karta toru ma szerokość „N kart co do piksela": calc((100% - (N-1)·odstęp) / N)
   liczone od szerokości toru. Odstęp = --sg-odstep z fundamentu, równy
   spaceBetween z opinie.js (16 px poniżej 768 px okna, 24 px od 768) — inaczej
   wraca ucięta karta (stała karta 21rem komponentu nie dzieli toru: na innych
   stronach trzecia karta jest ucięta o ~15 px; poprawka komponentu osobnym PR).
   Nic nie wychodzi poza linię logo/koszyka: strzałki zawsze parą pod torem.
   ===================================================================== */

/* ---------- pasmo: ciąg dnia po §2 ---------- */

.home #opinie {
    /* telefon: karta + zajawka następnej (wartość komponentu) */
    --op-slide: min(21rem, 78vw);
    --sg-op-strzalka: 52px;
    /* zapas toru pod miękki cień karty (.swiper tnie do padding-boxa) */
    --sg-op-cien-x: 16px;         /* padding boczny toru */
    --sg-op-wylew: 16px;          /* o ile tor wychodzi poza siatkę (≤ margines strony) */
    --sg-op-cien-y: 2.25rem;

    padding-top: var(--sg-pasmo-ciag);
    padding-bottom: var(--sg-pasmo-y);
    /* ciąg papieru §2: .sg-pasmo--papier kończy gradient na #f1e7d6 — tu ten sam
       odcień od góry, inaczej na granicy §2/§3 widać jaśniejszy pas (zmierzone 3–8 poziomów) */
    background-color: #f1e7d6;
    background-image: var(--sg-ziarno);
    color: var(--sg-atrament);
    font-family: var(--sg-font-tekst);
}

/* nocne tło komponentu (granat + bg-dark.png z pages.css/palette-test.css) — na dniu nie */
.home #opinie::before {
    display: none;
}

.home #opinie .reviews__container {
    width: min(100% - 2 * var(--sg-margines), var(--sg-tresc));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
    text-align: center;
}

/* ---------- głowa: gwiazdka między kreskami, H2, zdanie ---------- */

/* gest .sg-orn (fundament: kreski 56 px, odstęp 16 px, gwiazdka 12 px, miedź),
   rysowany tutaj, bo partial dostaje wyłącznie argumenty treści; bez tekstu */
.home #opinie .reviews__heading--primary::before {
    content: '';
    display: block;
    width: 156px;
    height: 12px;
    margin: 0 auto 1.4rem;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a85e2c' d='M12 1l2.2 8.8L23 12l-8.8 2.2L12 23l-2.2-8.8L1 12l8.8-2.2z'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
        linear-gradient(90deg, rgba(168, 94, 44, 0), var(--sg-miedz)) left center / 56px 1px no-repeat,
        linear-gradient(90deg, var(--sg-miedz), rgba(168, 94, 44, 0)) right center / 56px 1px no-repeat;
}

/* = .sg-h2 na papierze. max-width 11em zamiast 21ch: „Przeczytaj, co piszą klientki"
   ma 10,65em — od 768 px nagłówek łamie się na pytaniu, w dwóch wierszach
   (przy 21ch trzy wiersze: „Sprawdzona / wróżka? Przeczytaj, / co piszą klientki") */
.home #opinie .reviews__heading--primary {
    max-width: 11em;
    margin: 0 auto;
    font-family: var(--sg-font-naglowek);
    font-size: var(--sg-fs-h2);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.005em;
    text-align: center;
    text-wrap: balance;
    /* tekst powiększony do 200% przy 360 px (albo zastępczy szeryf, zanim dojdzie
       Cormorant): słowo dłuższe od kolumny łamie się zamiast wystawać poza ekran.
       Przy zwykłej skali żadne słowo nagłówka nie jest dłuższe od kolumny — bez skutku. */
    overflow-wrap: anywhere;
    color: var(--sg-atrament);
}

/* telefon: trzy wiersze; pretty daje „Sprawdzona wróżka? / Przeczytaj, co / piszą klientki",
   balance rozbijał pytanie („Sprawdzona / wróżka? Przeczytaj, / …") */
@media (max-width: 599.98px) {
    .home #opinie .reviews__heading--primary {
        text-wrap: pretty;
    }
}

/* = .sg-lede na papierze (kursywa) */
.home #opinie .reviews__lede {
    max-width: 44rem;
    margin: 1.25rem auto 0;
    font-family: var(--sg-font-tekst);
    font-size: var(--sg-fs-lede);
    font-style: italic;
    font-weight: 400;
    line-height: 1.65;
    text-align: center;
    text-wrap: pretty;
    color: var(--sg-atrament-2);
}

/* podsumowanie oceny (renderuje się tylko przy kompletnym profilu) — atrament
   zamiast pergaminu komponentu; wypełnionym gwiazdkom wraca ciemny obrys,
   bo bursztyn na papierze sam nie daje 3:1 (jak na hubie /opinie/) */
.home #opinie .opinie__summary {
    max-width: min(100%, 46rem);
    margin: 1.5rem auto 0;
    border-color: rgba(168, 94, 44, 0.3);
}

.home #opinie .opinie__summary-text {
    font-size: var(--sg-fs-maly);
    color: var(--sg-atrament-2);
}

.home #opinie .opinie__summary-stars {
    color: rgba(168, 94, 44, 0.35);
}

.home #opinie .opinie__summary-stars .opinia__star.is-on {
    stroke: var(--op-star-edge);
}

/* ---------- tor i karty ---------- */

/* tor trzyma krawędzie siatki; padding = miejsce na cień karty i obwódkę fokusu
   linku w skrajnej karcie (Swiper odejmuje padding w updateSize()) */
.home #opinie .opinie__rail {
    /* odstęp głowa → karty = --sg-glowa-odstep (tor ma 0,85rem paddingu u góry) */
    margin-top: calc(var(--sg-glowa-odstep) - 0.85rem);
    margin-inline: calc(-1 * var(--sg-op-wylew));
    padding: 0.85rem var(--sg-op-cien-x) var(--sg-op-cien-y);
}

/* karta Google na papierze: zamiast szarej ramki i cienia Material —
   delikatny obrys miedzi i miękki, ciepły cień (makieta). Treść, biel, Roboto,
   zaokrąglenie i znak „G" zostają — to cytat z cudzej platformy. */
.home #opinie .opinia {
    border-color: rgba(168, 94, 44, 0.28);
    box-shadow:
        0 1px 2px rgba(42, 31, 20, 0.06),
        0 18px 34px -22px rgba(42, 31, 20, 0.4);
}

.home #opinie .opinie__rail:focus-visible {
    outline: 3px solid var(--sg-noc);
    outline-offset: -3px;
}

/* bez JS tor jest zwykłym przewijanym kontenerem — pasek w atramencie, nie w pergaminie */
.home #opinie .opinie__rail:not(.swiper-initialized) {
    scrollbar-color: rgba(42, 31, 20, 0.6) rgba(42, 31, 20, 0.08);
}

.home #opinie .opinie__rail:not(.swiper-initialized)::-webkit-scrollbar-track {
    background: rgba(42, 31, 20, 0.08);
}

.home #opinie .opinie__rail:not(.swiper-initialized)::-webkit-scrollbar-thumb {
    background: rgba(42, 31, 20, 0.6);
}

/* < 768: tor od krawędzi do krawędzi ekranu (padding toru = margines strony) */
@media (max-width: 767.98px) {
    .home #opinie {
        --sg-op-wylew: var(--sg-margines);
        --sg-op-cien-x: var(--sg-margines);
    }

    /* bez JS odstęp kart = odstęp Swipera (--sg-odstep, 16 px poniżej 768 px okna),
       inaczej dwie karty przy 600–767 nie mieszczą się co do piksela */
    .home #opinie .opinie__rail:not(.swiper-initialized) .opinie__track {
        gap: var(--sg-odstep);
    }
}

/* telefon (< 600): pierwsza karta od lewej krawędzi siatki (78vw, wartość komponentu),
   następna wychodzi zza prawej krawędzi ekranu — zajawka, nie ucięcie */

/* 600–767: dwie karty co do piksela. Padding toru MUSI być mniejszy od odstępu —
   przy paddingu = marginesowi strony (18 px przy 700) trzecia karta wystawała 2 px. */
@media (min-width: 600px) and (max-width: 767.98px) {
    .home #opinie {
        --op-slide: calc((100% - var(--sg-odstep)) / 2);
        --sg-op-wylew: 12px;
        --sg-op-cien-x: 12px;
    }
}

/* od 768: dwie karty co do piksela; od 1000: trzy */
@media (min-width: 768px) {
    .home #opinie {
        --op-slide: calc((100% - var(--sg-odstep)) / 2);
    }
}

@media (min-width: 1000px) {
    .home #opinie {
        --op-slide: calc((100% - 2 * var(--sg-odstep)) / 3);
    }
}

/* ---------- strzałki: kwadrat jak .sg-btn--papier, cel 52 px ---------- */

.home #opinie .opinie__arrow {
    width: var(--sg-op-strzalka);
    height: var(--sg-op-strzalka);
    /* obrys atramentu 60% = 4,0:1 na papierze (próg 3:1 dla granicy kontrolki) */
    border: 1px solid rgba(42, 31, 20, 0.6);
    border-radius: 0;
    background: transparent;
    color: var(--sg-atrament);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.home #opinie .opinie__arrow:hover {
    border-color: var(--sg-atrament);
    background: var(--sg-atrament);
    color: var(--sg-papier);
}

/* fokus jak .sg-btn na papierze: wygląd bez zmian, obwódka granatu 3 px */
.home #opinie .opinie__arrow:focus-visible {
    border-color: var(--sg-atrament);
    background: transparent;
    color: var(--sg-atrament);
    outline: 3px solid var(--sg-noc);
    outline-offset: 3px;
}

.home #opinie .opinie__arrow:focus-visible:hover {
    background: var(--sg-atrament);
    color: var(--sg-papier);
}

.home #opinie .opinie__arrow:active {
    transform: none;
}

/* ---------- układ: jedna siatka na całą sekcję ----------
   .opinie__slider dostaje display: contents — strzałki i tor stają się elementami
   siatki kontenera, razem z nagłówkiem i przyciskami. Kolejność DOM i fokusu bez zmian
   (wstecz → tor → dalej → przyciski). opinie.js niczego na .opinie__slider nie mierzy,
   tylko przełącza na nim klasę is-locked; Swiper siedzi na .opinie__rail.
   Strzałki na każdej szerokości parą pod torem, na osi sekcji — tej samej co
   ozdobnik, H2, zdanie, przyciski i dopisek. Nic nie wychodzi poza siatkę. */

.home #opinie .reviews__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-areas:
        'glowa glowa glowa glowa'
        'lede lede lede lede'
        'ocena ocena ocena ocena'
        'tor tor tor tor'
        '. prev next .'
        'akcje akcje akcje akcje'
        'dopisek dopisek dopisek dopisek';
    column-gap: 0.75rem;
}

.home #opinie .reviews__heading--primary { grid-area: glowa; }
.home #opinie .reviews__lede { grid-area: lede; }
.home #opinie .opinie__summary { grid-area: ocena; }
.home #opinie .opinie__slider { display: contents; }
.home #opinie .opinie__rail { grid-area: tor; }
.home #opinie .opinie__arrow--prev { grid-area: prev; justify-self: auto; }
.home #opinie .opinie__arrow--next { grid-area: next; justify-self: auto; }
.home #opinie .opinie__actions { grid-area: akcje; }
.home #opinie .opinie__disclosure { grid-area: dopisek; }

/* ---------- przyciski i dopisek ---------- */

.home #opinie .opinie__actions {
    justify-content: center;
    gap: 0.875rem;
    margin: 1.5rem 0 0;
}

/* telefon: przyciski jeden pod drugim na pełną szerokość siatki — te same krawędzie
   co nagłówek, zdanie i lewa krawędź karty */
@media (max-width: 599.98px) {
    .home #opinie .opinie__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .home #opinie .opinie__cta {
        width: 100%;
    }
}

/* ten sam język co .sg-btn (fundament): 52 px, wersaliki, ostre rogi */
.home #opinie .opinie__cta {
    justify-content: center;
    min-height: 52px;
    max-width: 100%;
    padding: 0.85rem 1.75rem;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--sg-font-tekst);
    font-size: var(--sg-fs-etykieta);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.14em;
    text-align: center;
    overflow-wrap: anywhere;
    box-shadow: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* „Zobacz wszystkie opinie” — główne wezwanie ze wspólną żółtą paletą CTA. */
.home #opinie .opinie__cta:not(.opinie__cta--ghost) {
    background: var(--zoriana-cta);
    border-color: var(--zoriana-cta);
    color: var(--sg-noc);
}

.home #opinie .opinie__cta:not(.opinie__cta--ghost):hover {
    background: var(--zoriana-cta-hover);
    border-color: var(--zoriana-cta-hover);
    color: var(--sg-noc);
    box-shadow: none;
    transform: none;
}

/* „Mój profil w Google" = .sg-btn--papier (obrys atramentu), bez znaku Google (brand.md §6) */
.home #opinie .opinie__cta--ghost {
    background: transparent;
    border-color: var(--sg-atrament);
    color: var(--sg-atrament);
}

.home #opinie .opinie__cta--ghost:hover {
    background: var(--sg-atrament);
    border-color: var(--sg-atrament);
    color: var(--sg-papier);
    transform: none;
}

/* fokus jak .sg-btn na papierze: wygląd bez zmian, obwódka granatu 3 px z odstępem;
   border-radius: 0 — globalne `a:focus-visible { border-radius: 6px }` z blog.css */
.home #opinie .opinie__cta:focus-visible {
    border-radius: 0;
    outline: 3px solid var(--sg-noc);
    outline-offset: 3px;
    transform: none;
    box-shadow: none;
}

.home #opinie .opinie__cta:not(.opinie__cta--ghost):focus-visible {
    background: var(--zoriana-cta);
    color: var(--sg-noc);
}

.home #opinie .opinie__cta--ghost:focus-visible {
    background: transparent;
    color: var(--sg-atrament);
}

.home #opinie .opinie__cta:not(.opinie__cta--ghost):focus-visible:hover {
    background: var(--zoriana-cta-hover);
}

.home #opinie .opinie__cta--ghost:focus-visible:hover {
    background: var(--sg-atrament);
    color: var(--sg-papier);
}

/* dopisek: drobna kursywa na osi sekcji; atrament-2 = 8,0:1 na papierze z ziarnem
   (szarość makiety #8b8175 daje ~3,4:1 — za mało na 14 px) */
.home #opinie .opinie__disclosure {
    max-width: 46rem;
    margin: 1.25rem auto 0;
    font-size: var(--sg-fs-maly);
    font-style: italic;
    line-height: 1.6;
    text-align: center;
    color: var(--sg-atrament-2);
}

/* zamiast globalnej turkusowej obwódki z blog.css — fokus w kolorze strony */
.home #opinie .opinie__disclosure a:focus-visible {
    border-radius: 0;
    outline: 3px solid var(--sg-noc);
    outline-offset: 2px;
}

/* ---------- ruch ---------- */

@media (prefers-reduced-motion: reduce) {
    .home #opinie .opinie__arrow,
    .home #opinie .opinie__cta {
        transition: none;
    }
}