/* ===== Deljena "recenzija" kartica ==========================================
   Zajednička za .customers-section / .customers-2-section / .customers-3-section
   (učitava se iz inc/testimonials-section.php, amo_render_testimonials_section()).
   Ono što se razlikuje po varijanti (review min-height/font, CTA slot,
   zatvarajući naslov, razdvojnik) ostaje definisano u sections/landing-page.css
   i sections/free-course.css, uz odgovarajuću klasu.
   ============================================================================ */

.customers-section .container .wrapper .customer-item .customer-item--inner,
.customers-2-section .container .wrapper .customer-item .customer-item--inner,
.customers-3-section .container .wrapper .customer-item .customer-item--inner {
    background: linear-gradient(320deg, rgba(53, 53, 53, 1) 0%, rgba(43, 43, 43, 1) 20%, rgba(28, 28, 29, 1) 50%);
    border: 1px solid #B3B3B3;
    border-radius: 25px;
    margin: 0px 5px;
    padding: 60px 24px 32px;
    transition: all .4s ease;
    position: relative;
}

.customers-section .container .wrapper .row .customer-item .customer-item--inner:hover,
.customers-2-section .container .wrapper .row .customer-item .customer-item--inner:hover,
.customers-3-section .container .wrapper .row .customer-item .customer-item--inner:hover {
    transform: translateY(-6px);
}

.customers-2-section .container .wrapper .row .carousel-inner .customer-item .customer-item--inner:hover,
.customers-3-section .container .wrapper .row .carousel-inner .customer-item .customer-item--inner:hover {
    transform: translateY(0px);
}

.customers-section .container .wrapper .row .carousel-inner,
.customers-2-section .container .wrapper .row .carousel-inner,
.customers-3-section .container .wrapper .row .carousel-inner {
    overflow: visible;
}

.customers-section .container .wrapper .customer-item .customer-item--inner .quotes,
.customers-2-section .container .wrapper .customer-item .customer-item--inner .quotes,
.customers-3-section .container .wrapper .customer-item .customer-item--inner .quotes {
    position: absolute;
    left: 10px;
    top: -30px;
}

.customers-section .container .wrapper .customer-item .customer-item--inner .customer-item-bottom .customer-info,
.customers-2-section .container .wrapper .customer-item .customer-item--inner .customer-item-bottom .customer-info,
.customers-3-section .container .wrapper .customer-item .customer-item--inner .customer-item-bottom .customer-info {
    margin-left: 20px;
}

/* Avatar — ovo nikad nije imalo baznu (desktop) veličinu, samo mobile
   pravilo ispod. Radilo je "slučajno" svuda gde je uploadovana slika već
   bila ~100px kvadrat; puca čim neko otpremi punu fotografiju. */
.customers-section .container .wrapper .customer-item .customer-item--inner .customer-item-bottom .avatar,
.customers-2-section .container .wrapper .customer-item .customer-item--inner .customer-item-bottom .avatar,
.customers-3-section .container .wrapper .customer-item .customer-item--inner .customer-item-bottom .avatar {
    width: 101px;
    height: 101px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.customers-section .container .wrapper .customer-item .customer-item--inner .customer-item-bottom .customer-info p,
.customers-2-section .container .wrapper .customer-item .customer-item--inner .customer-item-bottom .customer-info p,
.customers-3-section .container .wrapper .customer-item .customer-item--inner .customer-item-bottom .customer-info p {
    margin: 0px;
    font-size: clamp(14px, 1.5vw, 20px);
}

/* h1 (zatvarajući naslov) — deljeno između customers-2 i customers-3, jedina
   varijanta koja ga uopšte ima je customers-section (nema naslov). */
.customers-2-section .container .wrapper h1,
.customers-3-section .container .wrapper h1 {
    margin-top: 70px;
    color: #fff;
}

.customers-2-section .container .wrapper h1 span,
.customers-3-section .container .wrapper h1 span {
    color: #B87432;
}

@media (max-width: 767px) {
    .customers-section .container .wrapper .customer-item .customer-item--inner,
    .customers-2-section .container .wrapper .customer-item .customer-item--inner,
    .customers-3-section .container .wrapper .customer-item .customer-item--inner {
        border-radius: 12px;
    }

    .customers-section .container .wrapper .customer-item .customer-item--inner .customer-item-bottom .avatar,
    .customers-2-section .container .wrapper .customer-item .customer-item--inner .customer-item-bottom .avatar,
    .customers-3-section .container .wrapper .customer-item .customer-item--inner .customer-item-bottom .avatar {
        width: 70px;
    }

    .customers-2-section.section,
    .customers-3-section.section {
        margin: 0px auto;
    }
}