/* =============================================================================
   SECTIONS/REFERENCE.CSS — blok „Zkušenosti klientů"
   -----------------------------------------------------------------------------
   Původně bylo v css/footer.css, kam nepatřilo.

   Karta má záměrně pevnou výšku, aby všechny reference vypadaly stejně
   a karusel při přepnutí neposkakoval. Delší text se posouvá uvnitř karty.

   Doplněno oproti původnímu stavu: posuvník je lépe vidět a nad spodní
   hranou je jemný přechod do ztracena, aby bylo poznat, že text pokračuje.
   Na mobilu si toho jinak nikdo nevšimne. Rozměr karty se nemění.
   ========================================================================== */

.testimonials {
    position: relative;
    max-width: 900px;
    margin-inline: auto;
    padding-inline: 0;
}

/* Na desktopu potřebují šipky místo po stranách */
@media (min-width: 900px) {
    .testimonials { padding-inline: 4rem; }
}


/* =============================================================================
   KARTA
   ========================================================================== */

.testimonial-container { position: relative; width: 100%; }
.testimonial-wrapper   { position: relative; }

.testimonial-card {
    display: flex;
    flex-direction: column;
    --card-pad: clamp(1.5rem, 4vw, 2.5rem);

    position: relative;
    height: 500px;                    /* stejná pro všechny karty */
    padding: var(--card-pad);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow);
}

/* Na užších displejích se text láme do víc řádků, karta proto povyroste.
   Výška zůstává pevná — mění se jen podle šířky okna, ne podle obsahu. */
@media (max-width: 899px) { .testimonial-card { height: 520px; } }
@media (max-width: 480px) { .testimonial-card { height: 560px; } }

.testimonial-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.author-image {
    flex-shrink: 0;
    width: clamp(56px, 14vw, 80px);
    height: clamp(56px, 14vw, 80px);
    border: 3px solid var(--c-primary);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}

.author-info { flex-grow: 1; min-width: 0; }

.author-info h3 {
    margin-bottom: .2rem;
    font-size: clamp(1.05rem, 3vw, 1.3rem);
    color: var(--c-primary);
}

.author-location {
    font-size: var(--fs-sm);
    color: var(--c-text-subtle);
}


/* =============================================================================
   TEXT REFERENCE — posouvá se uvnitř karty
   ========================================================================== */

.testimonial-content {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;                    /* bez toho by flex položka přetekla */
    overflow-y: auto;
    padding-right: var(--sp-3);       /* místo pro posuvník, ať nekryje text */
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--c-text-muted);

    /* Posuvník je vidět i na systémech, kde se běžně schovává */
    scrollbar-width: thin;
    scrollbar-color: var(--c-primary) #F1F1F1;
    overscroll-behavior: contain;     /* dojetí na konec neposune stránku */
    -webkit-overflow-scrolling: touch;
}

.testimonial-content p + p { margin-top: var(--sp-4); }

.testimonial-content::-webkit-scrollbar        { width: 6px; }
.testimonial-content::-webkit-scrollbar-track  { background: #F1F1F1; border-radius: 3px; }
.testimonial-content::-webkit-scrollbar-thumb  { background: var(--c-primary); border-radius: 3px; }
.testimonial-content::-webkit-scrollbar-thumb:hover { background: var(--c-blue-500); }

/* Náznak, že text pokračuje.
   Leží nad kartou, ne uvnitř posouvané oblasti — jinak by se odroloval
   pryč hned na prvním potažení. Vpravo se zastaví před posuvníkem,
   ať ho nepřekrývá.

   Třídu .has-overflow přidává js/sections/reference.js jen tam, kde se
   text opravdu nevejde. Po dojetí na konec přechod zmizí. */
.testimonial-card.has-overflow::after {
    content: '';
    position: absolute;
    right: calc(var(--card-pad) + 10px);
    bottom: var(--card-pad);
    left: var(--card-pad);
    height: 2.75em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 80%);
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--dur) var(--ease);
}

.testimonial-card.is-at-end::after { opacity: 0; }

/* =============================================================================
   OVLÁDÁNÍ — šipky a tečky
   ========================================================================== */

.testimonial-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    box-shadow: var(--shadow);
    transform: translateY(-50%);
    transition: background-color var(--dur) var(--ease);
}

.testimonial-arrow:hover { background: var(--c-blue-500); }

.testimonial-prev { left: 0; }
.testimonial-next { right: 0; }

/* Na mobilu by šipky ležely přes text — přesunou se pod kartu.
   Hlavní ovládání na dotyku je stejně švihnutí prstem.

   Řešeno flexboxem s vlastnostmi `order`, ne mřížkou. Mřížka tu měla
   šipky každou ve svém sloupci a protože jsou užší než sloupec, každá
   se přisadila k jeho levému kraji — zvenčí to vypadalo, že celé
   ovládání uteklo doleva.

   Pořadí v HTML je: šipka vlevo, karta, šipka vpravo, tečky.
   `order` z toho udělá: karta, pak vycentrovaný řádek šipka–tečky–šipka. */
@media (max-width: 899px) {

    .testimonials {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--sp-4);
    }

    .testimonial-container {
        order: 1;
        flex: 0 0 100%;
    }

    .testimonial-arrow {
        position: static;
        flex: 0 0 auto;
        transform: none;
        width: 48px;
        height: 48px;
    }

    .testimonial-prev { order: 2; }
    .testimonial-dots { order: 3; margin-top: 0; }
    .testimonial-next { order: 4; }
}

.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
}

.testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-border-strong);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* Dotykový cíl je větší než puntík sám */
.testimonial-dot::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    margin: -11px;
}

.testimonial-dot.active {
    background: var(--c-primary);
    transform: scale(1.25);
}


/* =============================================================================
   PŘECHODY MEZI KARTAMI
   ========================================================================== */

.slide-in-right  { animation: slideInRight  .3s var(--ease); }
.slide-in-left   { animation: slideInLeft   .3s var(--ease); }
.slide-out-left  { animation: slideOutLeft  .3s var(--ease); }
.slide-out-right { animation: slideOutRight .3s var(--ease); }

@keyframes slideInRight  { from { opacity: 0; transform: translateX(28px);  } to { opacity: 1; transform: none; } }
@keyframes slideInLeft   { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes slideOutLeft  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-28px); } }
@keyframes slideOutRight { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(28px);  } }