/* =========================================================
   TESTIMONIOS ASSO
========================================================= */

:root{
    --asso-orange:#f28a1a;
    --asso-dark:#101010;
    --asso-soft:#f5f4f1;
    --asso-text:#2b2b2b;
    --asso-muted:#747474;
}


/* =========================================================
   HERO
========================================================= */

.testimonials-hero{
    position:relative;

    padding:
        clamp(120px, 14vw, 200px)
        24px
        clamp(85px, 9vw, 130px);

    background:#fff;

    overflow:hidden;
}


.testimonials-hero::before{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-200px;
    right:-130px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(242,138,26,.16),
            rgba(242,138,26,0) 70%
        );
}


.testimonials-hero__inner{
    position:relative;

    width:min(1180px, 100%);

    margin:0 auto;
}


.testimonials-hero__eyebrow{
    display:inline-block;

    margin-bottom:20px;

    color:var(--asso-orange);

    font-size:12px;
    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;
}


.testimonials-hero h1{
    width:min(850px,100%);

    margin:0 0 28px;

    color:var(--asso-dark);

    font-size:
        clamp(50px, 7vw, 100px);

    font-weight:700;

    line-height:.92;

    letter-spacing:-.055em;
}


.testimonials-hero h1 span{
    display:block;

    color:var(--asso-orange);
}


.testimonials-hero p{
    width:min(650px,100%);

    margin:0;

    color:var(--asso-muted);

    font-size:
        clamp(16px,1.5vw,19px);

    line-height:1.75;
}


/* =========================================================
   LIST
========================================================= */

.testimonials-list{
    padding:
        clamp(70px,8vw,120px)
        24px
        clamp(100px,10vw,150px);

    background:var(--asso-soft);
}


.testimonials-list__inner{
    width:min(1180px,100%);

    margin:0 auto;
}


.testimonials-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:28px;
}


/* =========================================================
   TESTIMONIAL
========================================================= */

.testimonial{
    position:relative;

    overflow:hidden;

    border-radius:26px;

    background:#fff;

    box-shadow:
        0 20px 60px rgba(0,0,0,.055);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.testimonial:hover{
    transform:translateY(-5px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.09);
}


.testimonial--featured{
    border:
        1px solid
        rgba(242,138,26,.3);
}


/* =========================================================
   VIDEO
========================================================= */

.testimonial__video{
    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    background:#111;

    overflow:hidden;
}


.testimonial__video video,
.testimonial__video iframe{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    border:0;
}


/* =========================================================
   BODY
========================================================= */

.testimonial__body{
    padding:
        clamp(28px,4vw,42px);
}


.testimonial__top{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:24px;
}


/* =========================================================
   STARS
========================================================= */

.testimonial__stars{
    display:flex;

    gap:4px;
}


.testimonial__stars span{
    color:var(--asso-orange);

    font-size:18px;
}


.testimonial__stars span.is-empty{
    color:#ddd;
}


/* =========================================================
   FEATURED
========================================================= */

.testimonial__featured-label{
    padding:6px 10px;

    border-radius:999px;

    background:
        rgba(242,138,26,.11);

    color:var(--asso-orange);

    font-size:10px;
    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;
}


/* =========================================================
   COMMENT
========================================================= */

.testimonial blockquote{
    margin:0 0 32px;

    color:var(--asso-text);

    font-size:
        clamp(16px,1.4vw,19px);

    line-height:1.75;
}


/* =========================================================
   CLIENT
========================================================= */

.testimonial__client{
    display:flex;

    align-items:center;

    gap:15px;

    padding-top:24px;

    border-top:1px solid #eee;
}


.testimonial__photo{
    flex:0 0 54px;

    width:54px;
    height:54px;

    border-radius:50%;

    overflow:hidden;

    background:#eee;
}


.testimonial__photo img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


.testimonial__client-info strong{
    display:block;

    margin-bottom:4px;

    color:#111;

    font-size:14px;
}


.testimonial__client-info small{
    display:block;

    color:#888;

    font-size:12px;

    line-height:1.5;
}


/* =========================================================
   EMPTY
========================================================= */

.testimonials-empty{
    padding:70px 30px;

    border-radius:24px;

    background:#fff;

    text-align:center;
}


.testimonials-empty h2{
    margin:0 0 10px;

    font-size:30px;
}


.testimonials-empty p{
    margin:0;

    color:#888;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:850px){

    .testimonials-grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:600px){

    .testimonials-hero{
        padding-left:18px;
        padding-right:18px;
    }

    .testimonials-list{
        padding-left:18px;
        padding-right:18px;
    }

    .testimonial{
        border-radius:20px;
    }

    .testimonial__top{
        align-items:flex-start;

        flex-direction:column;
    }

}