/* ═══════════════════════════════════════════════════════════════════════════
   heroes.css — sekcja "Nasi bohaterowie"
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   SEKCJA
   ══════════════════════════════════════════════════════════════════════════ */

#opinie.heroes-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.heroes-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 SEKCJI
   ══════════════════════════════════════════════════════════════════════════ */

.heroes-heading {
    text-align: center;
    max-width:  640px;
    margin:     0 auto 3.5rem;
}

.heroes-heading .section-kicker {
    display:        inline-block;
    font-size:      clamp(0.78rem, 1.8vw, 0.9rem);
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--secondary-color);
    margin-bottom:  0.75rem;
}

.heroes-heading .section-title {
    font-size:   clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin:      0 0 1rem;
    color:       var(--hero-accent);
}

.heroes-heading p {
    font-size:   1rem;
    line-height: 1.7;
    color:       var(--medium-gray);
    margin:      0;
}


/* ══════════════════════════════════════════════════════════════════════════
   KARTA HERO
   ─────────────────────────────────────────────────────────────────────────
   --hero-card-pad-x / --hero-card-pad-y są jedynym źródłem prawdy dla
   paddingu karty. Banner (hero-badge) używa tych samych zmiennych w ujemnym
   marginesie, żeby wyrównać się do krawędzi karty (full-bleed).
   --hero-card-radius jest źródłem prawdy dla zaokrąglenia rogów — banner
   wyrównuje swój górny brzeg dokładnie tam, gdzie kończy się łuk narożnika.
   ══════════════════════════════════════════════════════════════════════════ */

.hero-card .testimonial-card {
    --hero-card-pad-x: 2rem;
    --hero-card-pad-y: 2rem;
    --hero-card-radius: 20px;

    display:        flex;
    flex-direction: column;
    gap:            1rem;      /* odstęp: banner ↔ tożsamość ↔ cytat */
    padding:        var(--hero-card-pad-y) var(--hero-card-pad-x);
    border-radius:  var(--hero-card-radius);
    background:     var(--hero-card-bg);
    border:         1px solid var(--hero-card-border);
    box-shadow:     0 2px 12px rgba(0, 0, 0, 0.06);
    height:         100%;
    box-sizing:     border-box;
    position:       relative;
    overflow:       hidden;
}

.hero-card .testimonial-card::before {
    content: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   TOŻSAMOŚĆ
   ══════════════════════════════════════════════════════════════════════════ */

.hero-identity {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-shrink: 0;   /* tożsamość nigdy się nie ściska — chroni avatar */
}

.hero-avatar {
    width:          72px;
    height:         72px;
    border-radius:  50%;
    object-fit:     cover;
    flex-shrink:    0;
    outline:        3px solid var(--hero-avatar-ring);
    outline-offset: 2px;
    background:     var(--hero-accent-light);
}

.hero-name-wrap {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    min-width:      0;
}

.hero-name {
    font-size:     1.15rem;
    font-weight:   600;
    color:         var(--hero-text);
    line-height:   1.2;
    overflow-wrap: break-word;   /* pozwala długim imionom przejść do nowej linii */
}

.hero-context {
    font-size:   0.825rem;
    font-weight: 400;
    font-style:  italic;
    color:       var(--hero-text-muted);
    line-height: 1.4;
}

.hero-card {
    padding: 0.75rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   BADGE — pełnoszerokościowy banner nad tożsamością
   ─────────────────────────────────────────────────────────────────────────
   Ujemne marginesy boczne równają banner do krawędzi karty (full-bleed).
   Górny margines jest tak dobrany, żeby banner zaczynał się dokładnie tam,
   gdzie kończy się łuk narożnika karty:

       badge top = pad-y + (radius − pad-y) = radius

   order: -1 gwarantuje, że banner jest zawsze pierwszy w kolumnie flex,
   niezależnie od kolejności w DOM.

   Animacja (tylko w trybie coverflow — patrz sekcja niżej):
     Banner startuje przesunięty w dół o 32 px i przezroczysty, po czym
     "wznosi się" do swojej pozycji na wyróżnionej karcie. Użyta jest
     animacja @keyframes, a nie transition — dzięki temu działa zarówno gdy
     JS przełącza klasę cf-active na istniejącym elemencie, jak i gdy
     odtwarza węzeł karty od zera przy nawigacji.
   ══════════════════════════════════════════════════════════════════════════ */

.hero-badge {
    display:        block;
    order:          -1;
    align-self:     stretch;
    margin:
        calc(var(--hero-card-radius) - var(--hero-card-pad-y))
        calc(-1 * var(--hero-card-pad-x))
        0;
    padding:        clamp(7px, 1vw, 11px) clamp(14px, 2vw, 22px);
    background:     var(--hero-accent);
    color:          var(--hero-accent-text);
    font-size:      clamp(0.62rem, 0.9vw, 0.82rem);
    font-weight:    800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height:    1.2;
    text-align:     center;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    box-sizing:     border-box;
    pointer-events: none;

    /* Stan bazowy — widoczny, w miejscu (tryby inne niż coverflow) */
    opacity:   1;
    transform: translateY(0);
}


/* ── Coverflow: stan domyślny — banner ukryty pod swoją pozycją ──────────
   translateY (+32 px) sprawia, że banner "czeka" tuż nad tożsamością,
   zanim wjedzie na górną krawędź karty. opacity: 0 ukrywa go do czasu
   animacji. Wartość mieści się w karcie (overflow: hidden), więc nie ma
   ryzyka przycięcia w trakcie ruchu.                                       */

#opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial .hero-badge {
    opacity:   0;
    transform: translateY(32px);
}


/* ── Coverflow: banner aktywnej karty — animacja bottom-up ───────────────
   @keyframes zamiast transition → odtwarza się za każdym razem gdy klasa
   cf-active zostaje dodana (również gdy element jest właśnie wstawiany
   do DOM). `both` utrzymuje stan początkowy podczas 120 ms opóźnienia,
   dzięki czemu nie ma jednoklatkowego błysku przed startem animacji.      */

@keyframes hero-badge-rise {
    0% {
        opacity:   0;
        transform: translateY(64px);
    }
    25% {
        opacity:   0.25;
    }
    100% {
        opacity:   1;
        transform: translateY(0);
    }
}

#opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial.cf-active .hero-badge {
    animation: hero-badge-rise 850ms ease-out 100ms both;
}

/* Szanuj preferencje użytkownika — bez ruchu, banner od razu widoczny. */
@media (prefers-reduced-motion: reduce) {
    #opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial.cf-active .hero-badge {
        animation: none;
        opacity:   1;
        transform: translateY(0);
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   CYTAT
   ══════════════════════════════════════════════════════════════════════════ */

.hero-quote {
    margin:  -2rem 0 0;
    padding: 0;
    border:  none;
}

.hero-quote::before {
    content:       '\201E';
    display:       block;
    font-size:     3.5rem;
    line-height:   0.6;
    color:         var(--hero-quote-mark);
    font-family:   Georgia, serif;
    margin-bottom: 0.5rem;
    margin-left:   -4px;
}

.hero-quote p {
    margin:      0 0 0.25em;
    /* Łagodniejszy clamp: min 1.05rem (telefon), max 2rem (desktop). */
    font-size:   clamp(1.05rem, 2.4vw, 2rem);
    line-height: 1.2;
    color:       var(--hero-text);
}

.hero-quote p:last-child {
    margin-bottom: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — standard
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    #opinie.heroes-section {
        padding: 3rem 1rem;
    }

    .hero-card .testimonial-card {
        --hero-card-pad-x: 1.25rem;
        --hero-card-pad-y: 1.5rem;

        gap: 0.75rem;   /* ciaśniejszy odstęp na telefonie */
    }

    .hero-avatar {
        width:  72px;
        height: 72px;
    }

    .hero-name {
        font-size: 0.95rem;
    }

    .hero-quote::before {
        font-size: 2.75rem;
    }

    .hero-quote p {
        font-size: 1.05rem;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   COVERFLOW — tryb miniaturyzacji kart bocznych
   ─────────────────────────────────────────────────────────────────────────
   Mechanizm layout (grid-stacking) żyje w karuzela.css.
   Tu: rozmiary, transformacje, stała wysokość, overflow cytatu.

   Stała wysokość kart:
     Wszystkie karty mają identyczny height — niezależnie od długości tekstu.
     .hero-quote dostaje flex:1 + overflow:hidden jako bezpiecznik.
     Zalecany limit treści: 280 znaków (≈5–6 linii przy tej wysokości karty).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Stała wysokość karty w trybie coverflow ────────────────────────────── */

#opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial-card {
    height:     clamp(340px, 44vw, 500px);
    overflow:   hidden;   /* bezpiecznik gdyby treść przekroczyła limit */
}

/* Cytat wypełnia resztę karty po tożsamości; nie przesuwa dołu karty */
#opinie .testimonial-carousel[data-carousel-mode="coverflow"] .hero-quote {
    flex:       1;
    overflow:   hidden;
    min-height: 0;        /* wymagane przy flex: 1 w flex-column */
}

/* ── Baza: ukryta dopóki JS nie nada klasy cf-* → zero FOUC ────────────── */

#opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial {
    width:          60%;
    justify-self:   center;
    opacity:        0;
    pointer-events: none;
}

/* ── Aktywna — pełna skala, na wierzchu ─────────────────────────────────── */

#opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial.cf-active {
    transform:      translateX(0) scale(1);
    opacity:        1;
    z-index:        3;
    cursor:         default;
    pointer-events: auto;
}

/* ── Sąsiednie — pomniejszone, przesunięte, klikalne ───────────────────── */

#opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial.cf-prev {
    transform:      translateX(-52%) translateY(7%) scale(0.58);
    opacity:        0.72;
    z-index:        2;
    cursor:         pointer;
    pointer-events: auto;
    filter:         brightness(0.80);
}

#opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial.cf-next {
    transform:      translateX(52%) translateY(7%) scale(0.58);
    opacity:        0.72;
    z-index:        2;
    cursor:         pointer;
    pointer-events: auto;
    filter:         brightness(0.80);
}

/* ── Dalsze — całkowicie ukryte, poza kadrem ────────────────────────────── */

#opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial.cf-far-left {
    transform:      translateX(-120%) scale(0.42);
    opacity:        0;
    pointer-events: none;
    filter:         none;
}

#opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial.cf-far-right {
    transform:      translateX(120%) scale(0.42);
    opacity:        0;
    pointer-events: none;
    filter:         none;
}


/* ══════════════════════════════════════════════════════════════════════════
   COVERFLOW — mobile ≤ 600px
   ─────────────────────────────────────────────────────────────────────────
   Aktywna karta: 72% → szersza, lepiej wykorzystuje ekran telefonu.
   Karty boczne:   64% — mniejsza skala (0.52), mniej translateY.
   Peek po każdej stronie: ~14% (≈52px na 375px).

   Wzór peek:
     translateX(62%) × width(64%) = 39.68% kontenera
     cf-next center: 50% + 39.68% = 89.68%
     cf-next half-width (scale): 32% × 0.52 = 16.64%
     cf-next lewa krawędź: 73.04% → za aktywną (86%),
     widoczne: 100% − 86% = 14% ≈ 52px
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    #opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial {
        width: 64%;
    }

    /* Aktywna karta szersza niż sąsiednie — wyróżnienie + więcej
       miejsca na tekst (mniej ryzyka ucięcia cytatu).                   */
    #opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial.cf-active {
        width: 72%;
    }

    #opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial-card {
        height: clamp(300px, 72vw, 380px);   /* niższy clamp na małym ekranie */
    }

    #opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial.cf-prev {
        transform:      translateX(-62%) translateY(5%) scale(0.52);
        opacity:        0.65;
        pointer-events: auto;
        filter:         brightness(0.80);
    }

    #opinie .testimonial-carousel[data-carousel-mode="coverflow"] .testimonial.cf-next {
        transform:      translateX(62%) translateY(5%) scale(0.52);
        opacity:        0.65;
        pointer-events: auto;
        filter:         brightness(0.80);
    }
}