/* =============================================================================
   karuzela.css
   Style sekcji opinii (#opinie) i karuzeli testimoniali.
   Ładować jako osobny <link rel="stylesheet" href="/dodatki/css/karuzela.css">.
   ============================================================================= */

/* ── Sekcja ──────────────────────────────────────────────────────────────── */

#opinie.testimonials-section {
    position:  relative;
    isolation: isolate;
    overflow:  hidden;
    padding:   clamp(22px, 4vw, 44px);
    background:
        radial-gradient(circle at top left, rgba(255, 209, 102, 0.28), transparent 34%),
        linear-gradient(145deg, #f7fbfd 0%, #eef6f9 100%);
    border: 1px solid rgba(42, 92, 130, 0.1);
}

#opinie.testimonials-section::before {
    content:  '';
    position: absolute;
    right:    clamp(-90px, -8vw, -50px);
    top:      clamp(-90px, -8vw, -50px);
    width:    clamp(160px, 22vw, 280px);
    aspect-ratio:  1;
    border-radius: 50%;
    background: rgba(61, 139, 158, 0.12);
    z-index:   -1;
}

/* ── Nagłówek ────────────────────────────────────────────────────────────── */

.testimonials-heading {
    max-width:  760px;
    margin:     0 auto clamp(18px, 3vw, 28px);
    text-align: center;
}

.section-kicker {
    display:        inline-flex;
    margin-bottom:  8px;
    color:          var(--secondary-color);
    font-family:    Agrandir-TextBold, serif;
    font-size:      clamp(0.78rem, 1.8vw, 0.9rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.testimonials-heading .section-title {
    margin-bottom: 10px;
}

.testimonials-heading p {
    max-width:   680px;
    margin:      0 auto;
    color:       var(--medium-gray);
    font-size:   clamp(0.95rem, 2vw, 1.08rem);
    line-height: 1.65;
    text-align:  center;
}

/* ── Karuzela — kontener ─────────────────────────────────────────────────── */

.testimonial-carousel {
    width:     min(100%, 920px);
    max-width: 100%;
    margin:    0 auto;
    overflow:  clip;          /* zapobiega poziomemu scrollowi tracka w std. trybie */
}

.testimonial-viewport {
    width:         100%;
    overflow:      hidden;
    border-radius: clamp(18px, 3vw, 28px);
    touch-action:  pan-y;
}

.testimonial-slides {
    display:     flex;
    align-items: stretch;
    transition:  transform 0.45s ease;
    will-change: transform;
}

/* ── Pojedynczy slajd (tryb standardowy) ────────────────────────────────── */

.testimonial {
    display:   flex;
    flex:      0 0 100%;
    min-width: 100%;
    padding:   0;
    text-align: left;
}

.testimonial-card {
    position:   relative;
    display:    grid;
    gap:        clamp(18px, 3vw, 26px);
    width:      100%;
    min-height: clamp(320px, 34vw, 420px);
    padding:    clamp(22px, 4vw, 44px);
    border:        1px solid rgba(42, 92, 130, 0.14);
    border-radius: clamp(18px, 3vw, 28px);
    background:    rgba(255, 255, 255, 0.92);
    box-shadow:    0 20px 55px rgba(42, 92, 130, 0.14);
}

.testimonial-card::before {
    content:  '\201C';
    position: absolute;
    right:    clamp(18px, 4vw, 42px);
    top:      clamp(8px, 2vw, 18px);
    color:    rgba(255, 111, 97, 0.2);
    font-family: Georgia, serif;
    font-size:   clamp(5rem, 14vw, 9rem);
    line-height: 1;
    pointer-events: none;
}

/* ── Meta (avatar + imię) ────────────────────────────────────────────────── */

.testimonial-meta {
    display:     flex;
    align-items: center;
    gap:         14px;
    min-width:   0;
}

.testimonial-meta .client-photo {
    width:         clamp(56px, 9vw, 72px);
    height:        clamp(56px, 9vw, 72px);
    flex:          0 0 auto;
    margin:        0;
    border:        3px solid var(--accent-2);
    border-radius: 50%;
    background:    #fff;
    object-fit:    cover;
}

.testimonial-meta strong,
.testimonial-meta span {
    display:   block;
    min-width: 0;
}

.testimonial-meta strong {
    color:       var(--primary-color);
    font-family: Agrandir-TextBold, serif;
    font-size:   clamp(1rem, 2.5vw, 1.15rem);
    line-height: 1.2;
}

.testimonial-meta span {
    margin-top:  3px;
    color:       var(--medium-gray);
    font-size:   clamp(0.82rem, 2.2vw, 0.95rem);
    line-height: 1.35;
}

/* ── Cytat ───────────────────────────────────────────────────────────────── */

.testimonial-quote {
    display:       grid;
    align-content: center;
    gap:           10px;
    min-width:     0;
    margin:        0;
    padding:       0;
    color:         var(--dark-gray);
}

#opinie .testimonial-quote p {
    max-width:    760px;
    margin:       0;
    color:        var(--primary-color);
    font-family:  Agrandir-TextBold, serif;
    font-size:    clamp(1.2rem, 3.4vw, 2rem);
    line-height:  1.34;
    text-align:   left;
    overflow-wrap: anywhere;
    word-break:   normal;
    hyphens:      auto;
}

#opinie .testimonial-result p {
    color:       var(--primary-color);
    font-size:   clamp(1.2rem, 3.4vw, 2rem);
    line-height: 1.34;
}

/* ── Kontrolki (prev / dots / next) ─────────────────────────────────────── */

.testimonial-controls {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             clamp(10px, 2vw, 16px);
    margin-top:      clamp(16px, 3vw, 24px);
}

.carousel-nav {
    position:        static;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           46px;
    min-width:       46px;
    height:          46px;
    min-height:      46px;
    padding:         0;
    transform:       none;
    border:          1px solid rgba(42, 92, 130, 0.16);
    border-radius:   50%;
    background:      #ffffff;
    color:           var(--primary-color);
    box-shadow:      0 8px 24px rgba(42, 92, 130, 0.12);
    transition:      transform 0.2s ease, background 0.2s ease,
                     color 0.2s ease, box-shadow 0.2s ease;
}

.carousel-nav:hover,
.carousel-nav:focus-visible {
    background: var(--primary-color);
    color:      #fff;
    box-shadow: 0 12px 30px rgba(42, 92, 130, 0.22);
    transform:  translateY(-1px);
}

.carousel-nav:focus-visible {
    outline:        3px solid rgba(255, 209, 102, 0.75);
    outline-offset: 3px;
}

.dots {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             8px;
    max-width:       min(100%, 420px);
    margin:          0;
}

.dot {
    display:    inline-flex;
    width:      12px;
    height:     12px;
    min-width:  12px;
    min-height: 12px;
    padding:    0;
    border:     0;
    border-radius: 999px;
    background: rgba(42, 92, 130, 0.22);
    cursor:     pointer;
    transition: width 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.dot:hover,
.dot:focus-visible {
    background: rgba(42, 92, 130, 0.55);
    outline:    none;
    transform:  scale(1.08);
}

.dot.active {
    width:      28px;
    background: var(--primary-color);
}

/* ── Responsive (tryb standardowy) ──────────────────────────────────────── */

@media screen and (max-width: 700px) {
    #opinie.testimonials-section {
        padding: 18px 12px;
    }

    .testimonial-card {
        min-height: auto;
        padding:    20px 16px;
    }

    .testimonial-card::before {
        right:     12px;
        top:       4px;
        font-size: 5.4rem;
    }

    .testimonial-meta {
        align-items: flex-start;
    }

    #opinie .testimonial-quote p,
    #opinie .testimonial-result p {
        font-size:   clamp(1.05rem, 5.2vw, 1.35rem);
        line-height: 1.42;
    }

    .testimonial-controls {
        display:               grid;
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        width:                 100%;
    }

    .dots {
        justify-self: center;
        gap:          7px;
    }
}

@media screen and (max-width: 380px) {
    .testimonial-card {
        padding: 18px 12px;
    }

    .testimonial-meta {
        gap: 10px;
    }

    .testimonial-meta .client-photo {
        width:  52px;
        height: 52px;
    }

    .carousel-nav {
        width:      42px;
        min-width:  42px;
        height:     42px;
        min-height: 42px;
    }

    .testimonial-controls {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
    }
}

@media screen and (orientation: landscape) and (max-height: 600px) {
    .testimonial-card {
        min-height: auto;
        padding:    16px 18px;
    }

    .testimonial-meta .client-photo {
        width:  52px;
        height: 52px;
    }

    #opinie .testimonial-quote p {
        font-size:   clamp(0.98rem, 2.4vw, 1.25rem);
        line-height: 1.35;
    }

    .testimonial-controls {
        margin-top: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .testimonial-slides,
    .carousel-nav,
    .dot {
        transition: none;
    }
}


/* =============================================================================
   COVERFLOW — layout (grid-stacking, overflow, tranzycje)
   ─────────────────────────────────────────────────────────────────────────────
   Logika wizualna (scale, translateX, opacity per karta) żyje w heroes.css.
   Tu: mechanizm nakładania kart (CSS Grid), reset viewportu, tranzycje,
   ukrycie dalszych kart.

   Dlaczego grid-stacking zamiast position:absolute?
     • Kontener automatycznie przyjmuje wysokość aktywnej karty (grid row = max).
     • Nie trzeba ręcznie ustawiać fixed height na viewporcie.
     • Karty boczne (scale < 1) nie skracają kontenera — są w tym samym
       grid area co aktywna.
   ============================================================================= */

/* ── Viewport: clip zamiast hidden — nie tworzymy nowego scroll context ── */

.testimonial-carousel[data-carousel-mode="coverflow"] .testimonial-viewport {
    overflow:      visible;    /* clip robi sekcja (#opinie: overflow hidden) */
    border-radius: 0;          /* nie przycinamy tu — chcemy widać karty boczne */
}

/* ── Track: grid-stacking — wszystkie slajdy w jednej komórce ───────────── */

.testimonial-carousel[data-carousel-mode="coverflow"] .testimonial-slides {
    display:               grid;
    grid-template-columns: 1fr;
    align-items:           start;
    transform:             none !important;   /* track nieruchomy — ruszają karty */
    transition:            none;
}

/* ── Slajd: ta sama komórka gridu + tranzycja ───────────────────────────── */

.testimonial-carousel[data-carousel-mode="coverflow"] .testimonial {
    grid-area:   1 / 1;        /* wszystkie karty nakładają się w jednym miejscu */
    flex:        none;          /* nadpisanie flex: 0 0 100% z trybu standardowego */
    min-width:   0;
    transition:  transform 0.45s cubic-bezier(0.34, 0.8, 0.56, 1),
                 opacity   0.45s ease,
                 filter    0.35s ease;
    will-change: transform, opacity;
}

/* ── Dalsze karty — całkowicie niewidoczne, nieuchwytne ─────────────────── */

.testimonial-carousel[data-carousel-mode="coverflow"] .testimonial.cf-far-left,
.testimonial-carousel[data-carousel-mode="coverflow"] .testimonial.cf-far-right {
    opacity:        0;
    pointer-events: none;
    filter:         none;
}

/* ── Reduced motion: wyłącz tranzycje kart ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial {
        transition: none;
    }
}