/* =============================================================================
   AKU Testimonials – Podium-karuselli v5.0
   Sama scroll-pohjainen rakenne kaikilla ruuduilla (toimii row/section sisällä)
   ============================================================================= */

:root {
    --aku-test-green:       #06402b;
    --aku-test-green-dark:  #052e1f;
    --aku-test-green-light: #9fe1cb;
    --aku-test-bg:          #fafaf7;     /* korttien taustaväri */
    --aku-test-section-bg:  #e6f0eb;     /* karusellin pohjaväri (vaalea mintunvihreä) */
    --aku-test-border:      rgba(0, 0, 0, 0.08);
    --aku-test-text:        #1a1a1a;
    --aku-test-muted:       #888;
    --aku-test-radius:      14px;
    --aku-test-shadow:      0 2px 12px rgba(0,0,0,0.07);
}

/* =============================================================================
   1) POHJA = MOBIILI: yksi kortti kerrallaan, scroll-flex, EI podium-efektejä
   ============================================================================= */

.aku-test-carousel {
    position:   relative;
    box-sizing: border-box;
    width:      100%;
    min-width:  0;
    max-width:  100%;
    margin:     0;                            /* ei marginaaleja oletuksena */
    padding:    32px 0 55px;
    overflow:   hidden;
    background: var(--aku-test-section-bg);   /* vaalea mintunvihreä pohjaväri */
}

/* Full-bleed: pohjaväri ulottuu rowin reunojen yli koko leveydelle */
.aku-test-carousel--bleed {
    width:        100vw;
    margin-left:  calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width:    100vw;
}

/* Match-above: poista ylä-padding kokonaan jotta liittyy saumattomasti
   yläpuolella olevaan elementtiin (esim. row jossa on jo sama väri).
   Voit yhdistää tämän bleed-luokan kanssa. */
.aku-test-carousel--match-above { padding-top:    0; }
.aku-test-carousel--match-below { padding-bottom: 0; }

/* Match-both: poista molemmat paddingit (pelkkä karuselli, ei pystytilaa) */
.aku-test-carousel--match-both {
    padding-top:    0;
    padding-bottom: 30px; /* pidetään pieni tila pisteille */
}

.aku-test-track {
    display:                    flex;
    gap:                        0;
    overflow-x:                 auto;
    overflow-y:                 hidden;
    padding:                    5px 0 12px;
    scrollbar-width:            none;
    -ms-overflow-style:         none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior:            smooth;
    width:                      100%;
    min-width:                  0;
    max-width:                  100%;
    box-sizing:                 border-box;
}

.aku-test-track::-webkit-scrollbar { display: none; }

.aku-test-slide {
    flex:       0 0 100%;
    width:      100%;
    min-width:  0;
    box-sizing: border-box;
    padding:    0 16px;
    transform:  none;
    opacity:    1;
    filter:     none;
}

/* Kortti */
.aku-test-card {
    background:     var(--aku-test-bg);
    border:         0.5px solid var(--aku-test-border);
    border-radius:  var(--aku-test-radius);
    box-shadow:     var(--aku-test-shadow);
    padding:        24px 22px 22px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    box-sizing:     border-box;
    width:          100%;
    min-width:      0;
    height:         100%;
}

.aku-test-card__icon { display: flex; align-items: center; }

.aku-test-card__icon svg {
    width:       28px;
    height:      28px;
    color:       var(--aku-test-green);
    flex-shrink: 0;
}

.aku-test-card__quote {
    margin:        0;
    padding:       0;
    border:        none;
    font-size:     0.93rem;
    line-height:   1.55;
    color:         var(--aku-test-text);
    font-style:    italic;
    flex:          1;
    word-wrap:     break-word;
    overflow-wrap: break-word;
}

/* LUE LISÄÄ -nappi mobiilissa */
.aku-test-card--clampable .aku-test-card__quote {
    display:            -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp:         6;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

.aku-test-card--clampable.aku-test-card--expanded .aku-test-card__quote {
    display:            block;
    -webkit-line-clamp: unset;
    line-clamp:         unset;
    overflow:           visible;
}

.aku-test-card__readmore {
    display:         inline-block;
    align-self:      flex-start;
    background:      none;
    border:          none;
    color:           var(--aku-test-green);
    font-size:       0.85rem;
    font-weight:     600;
    cursor:          pointer;
    padding:         4px 0;
    text-align:      left;
    text-decoration: underline;
}

.aku-test-card__readmore:hover { color: var(--aku-test-green-dark); }
.aku-test-readmore-show { display: inline; }
.aku-test-readmore-hide { display: none; }
.aku-test-card--expanded .aku-test-readmore-show { display: none; }
.aku-test-card--expanded .aku-test-readmore-hide { display: inline; }

.aku-test-card__footer {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding-top:    10px;
    border-top:     1px solid var(--aku-test-border);
    margin-top:     auto;
}

.aku-test-card__author {
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--aku-test-green);
}

.aku-test-card__role {
    font-size: 0.82rem;
    color:     var(--aku-test-muted);
}

/* Nuolinapit – piilossa mobiilissa */
.aku-test-btn { display: none; }

/* Pisteet */
.aku-test-dots {
    position:        absolute;
    bottom:          12px;
    left:            0;
    right:           0;
    display:         flex;
    justify-content: center;
    gap:             6px;
    flex-wrap:       wrap;
    padding:         0 10px;
    z-index:         5;
}

.aku-test-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    border:        none;
    background:    rgba(6, 64, 43, 0.2);
    cursor:        pointer;
    padding:       0;
    transition:    background 0.3s, transform 0.3s;
    flex-shrink:   0;
}

.aku-test-dot--active {
    background: var(--aku-test-green);
    transform:  scale(1.3);
}

.aku-test-empty {
    color:      var(--aku-test-muted);
    font-style: italic;
    padding:    20px 0;
    text-align: center;
}

/* =============================================================================
   2) PIENI PUHELIN (≤380px)
   ============================================================================= */

@media (max-width: 380px) {
    .aku-test-slide { padding: 0 12px; }
    .aku-test-card  { padding: 20px 18px 18px; gap: 10px; }
    .aku-test-card__quote { font-size: 0.88rem; line-height: 1.5; }
    .aku-test-card__icon svg { width: 24px; height: 24px; }
    .aku-test-card--clampable .aku-test-card__quote {
        -webkit-line-clamp: 5;
        line-clamp:         5;
    }
}

/* =============================================================================
   3) TABLET (769px+): 2 korttia, podium-efekti aktivoituu
   ============================================================================= */

@media (min-width: 769px) {
    .aku-test-carousel {
        overflow: hidden;
        margin:   0;
        padding:  40px 10px 60px;
    }

    .aku-test-track {
        gap:     32px;
        padding: 5px 10px 10px;
    }

    .aku-test-slide {
        flex:        0 0 calc(50% - 16px);
        padding:     0;
        transition:  transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                     opacity   0.45s cubic-bezier(0.4, 0, 0.2, 1),
                     filter    0.45s cubic-bezier(0.4, 0, 0.2, 1);
        transform:   scale(0.90);
        opacity:     0.55;
        filter:      blur(1px);
        will-change: transform, opacity;
    }

    .aku-test-slide.aku-test-center {
        transform: scale(1.0);
        opacity:   1;
        filter:    none;
        z-index:   10;
    }

    .aku-test-card {
        padding:    28px 26px 24px;
        gap:        14px;
        min-height: 200px;
    }

    .aku-test-card__icon svg { width: 32px; height: 32px; }
    .aku-test-card__quote    { font-size: 0.97rem; line-height: 1.65; }

    /* Lue lisää piiloon, teksti aina kokonaan */
    .aku-test-card__readmore { display: none !important; }

    .aku-test-card .aku-test-card__quote,
    .aku-test-card--clampable .aku-test-card__quote {
        display:            block !important;
        -webkit-line-clamp: unset !important;
        line-clamp:         unset !important;
        -webkit-box-orient: unset !important;
        overflow:           visible !important;
    }

    /* Nuolinapit näkyviin */
    .aku-test-btn {
        display:         flex;
        position:        absolute;
        top:             calc(50% - 25px);
        transform:       translateY(-50%);
        width:           44px;
        height:          44px;
        background:      #fff;
        border:          1px solid var(--aku-test-border);
        border-radius:   50%;
        cursor:          pointer;
        align-items:     center;
        justify-content: center;
        color:           var(--aku-test-green);
        z-index:         15;
        box-shadow:      0 2px 8px rgba(0, 0, 0, 0.08);
        transition:      all 0.15s ease;
        padding:         0;
    }

    .aku-test-btn:hover {
        background:   var(--aku-test-green);
        color:        #fff;
        border-color: var(--aku-test-green);
    }

    .aku-test-btn svg { width: 19px; height: 19px; }
    .aku-test-prev { left:  8px; }
    .aku-test-next { right: 8px; }

    .aku-test-dot { width: 8px; height: 8px; }
    .aku-test-dots { gap: 8px; bottom: 10px; }
}

/* =============================================================================
   4) DESKTOP (≥1025px): 3 korttia
   ============================================================================= */

@media (min-width: 1025px) {
    .aku-test-slide {
        flex:      0 0 calc(33.333% - 22px);
        transform: scale(0.88);
    }

    .aku-test-slide.aku-test-center {
        transform: scale(1.0);
    }
}
