/* ================================
   SECTION TESTIMONIALS
   Os balões agora são desenhados em CSS (sem os SVGs).
   Tudo dentro do grid é proporcional à largura dele (unidade cqi),
   então a composição escala igual ao design em qualquer tela.
   ================================ */
.testimonials {
    --testimonials-bg: #F8F4EE;
    --testimonials-title: #6C3921;   /* no export do design o título está em creme (#F8F4EE): troque aqui se o fundo real for escuro */
    --balloon-bg: #DFD0C2;
    --balloon-text: #6C3921;
    --grid-max: 1060px;              /* largura da composição no design (≈1057px) */

    /* margin-top: 100px; */
    padding: 4rem clamp(2rem, 6vw, 4.5rem);   /* folga lateral para as pontas dos balões */
    background-color: var(--testimonials-bg);
    overflow-x: clip;                          /* nunca gera rolagem horizontal por causa das pontas */
}

.testimonials-content {
    max-width: var(--grid-max);
    margin: 0 auto;
}

.testimonials-title {
    font-family: 'Cardo', serif;
    color: var(--testimonials-title);
    font-size: clamp(18px, 3.8vw, 48px);
    font-weight: 400;
    text-align: center;
    margin: 0 0 clamp(2rem, 5vw, 3.75rem);
}

.testimonials-title strong {
    font-weight: 700;
}

/* ---------- Grid desktop ---------- */
.testimonials-grid {
    container-type: inline-size;
    position: relative;
    display: grid;
    grid-template-columns: 285fr 166fr 347fr;
    grid-template-areas:
        "francine francine edivania"
        "francine francine kananda"
        "lara     taina    taina"
        "wladia   taina    taina"
        "wladia   kely     kely";
    column-gap: 3.7cqi;
    row-gap: 2.4cqi;
    align-items: start;
}

/* Faixa marrom atrás dos cards */
.testimonials-grid::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 13.9%;
    right: 11%;
    top: 7.7%;
    bottom: 8.3%;
    border-radius: clamp(20px, 5vw, 60px) clamp(20px, 5vw, 60px) 0 0;
    background: linear-gradient(180deg, #86492A 0%, #744125 45%, #482E1A 100%);
}

.testimonial--francine { grid-area: francine; }
.testimonial--edivania { grid-area: edivania; }
.testimonial--kananda  { grid-area: kananda;  }
.testimonial--lara     { grid-area: lara;     }
.testimonial--taina    { grid-area: taina;    }
.testimonial--wladia   { grid-area: wladia;   }
.testimonial--kely     { grid-area: kely;     }

/* ---------- Card ---------- */
.testimonial {
    --r: 3.5cqi;     /* raio dos cantos */
    --tw: 3.8cqi;    /* largura da ponta */
    --th: 4.4cqi;    /* altura da ponta */

    position: relative;
    z-index: 1;
    margin: 0;
    padding: 3cqi 5.2cqi 3.8cqi;
    background: var(--balloon-bg);
    border-radius: var(--r);
    font-family: 'Mulish', sans-serif;
    color: var(--balloon-text);
    font-size: max(9px, 1.58cqi);
    line-height: 1.5;
    text-align: justify;
    /* drop-shadow acompanha também a ponta do balão */
    filter: drop-shadow(max(3px, .62cqi) max(4px, .77cqi) max(2px, .33cqi) rgba(0, 0, 0, .15));
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

/* Deslocamentos laterais do design (precisam vir depois de .testimonial { margin: 0 }) */
.testimonials-grid .testimonial--edivania { margin-right: 5.9cqi; }
.testimonials-grid .testimonial--kananda  { margin-inline: .8cqi 1.2cqi; }

/* Ponta do balão (triângulo preso a um canto) */
.testimonial::before {
    content: "";
    position: absolute;
    width: var(--tw);
    height: var(--th);
    background: var(--balloon-bg);
}

/* Variantes de ponta — cada regra define todos os lados, assim o mobile só reatribui */

/* topo-esquerda (horizontal) */
.testimonial--francine,
.testimonial--wladia { border-top-left-radius: 0; }
.testimonial--francine::before,
.testimonial--wladia::before {
    top: 0; right: auto; bottom: auto; left: calc(var(--tw) * -0.9);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* topo-direita (horizontal) */
.testimonial--lara,
.testimonial--taina,
.testimonial--kely { border-top-right-radius: 0; }
.testimonial--lara::before,
.testimonial--taina::before,
.testimonial--kely::before {
    top: 0; right: auto; bottom: auto; left: 99%;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* baixo-direita (horizontal) */
.testimonial--kananda { border-bottom-right-radius: 0; }
.testimonial--kananda::before {
    top: auto; right: auto; bottom: 0; left: 100%;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* baixo-esquerda (vertical: a ponta desce abaixo do card) */
.testimonial--edivania { border-bottom-left-radius: 0; }
.testimonial--edivania::before {
    top: 100%; right: auto; bottom: auto; left: 0;
    clip-path: polygon(0 0, 0 100%, 100% 0);
}

/* Tamanhos de ponta por card (desktop) */
.testimonial--francine { --tw: 3.9cqi; --th: 6.3cqi; }
.testimonial--edivania { --tw: 3.7cqi; --th: 3.4cqi; }
.testimonial--kananda  { --tw: 4.1cqi; --th: 3.6cqi; }
.testimonial--lara     { --tw: 3.3cqi; --th: 4.4cqi; }
.testimonial--taina    { --tw: 6.9cqi; --th: 5.8cqi; }
.testimonial--wladia   { --tw: 2.8cqi; --th: 4.1cqi; }
.testimonial--kely     { --tw: 3.8cqi; --th: 4.4cqi; }

/* ---------- Cabeçalho (avatar + nome) ---------- */
.testimonial figcaption {
    display: flex;
    align-items: center;
    gap: 1.2cqi;
    margin-bottom: 2.2cqi;
    font-family: 'Cardo', serif;
    font-size: max(12px, 2.2cqi);
    font-weight: 700;
    text-align: left;
}

.testimonial figcaption img {
    width: 3cqi;
    height: 3cqi;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ---------- Texto ---------- */
.testimonial blockquote {
    margin: 0;
    padding: 0;
    font-style: normal;
}

.testimonial blockquote p {
    margin: 0 0 .9em;
}

.testimonial--francine blockquote p:first-child {
    margin-bottom: 2.35em;
}

.testimonial blockquote p:last-child {
    margin-bottom: 0;
}

/* Citação da Tainá: no design é texto normal, alinhado à esquerda */
.testimonial-quote {
    text-align: left;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .testimonials {
        padding: 2rem 1.25rem;
    }

    .testimonials-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "francine francine"
            "kananda  edivania"
            "taina    taina"
            "kely     wladia"
            "lara     lara";
        column-gap: 5cqi;
        row-gap: 4.8cqi;
        align-items: stretch;
    }

    /* Faixa marrom: começa um pouco acima do 1º card e termina antes da Lara */
    .testimonials-grid::before {
        left: 7.7%;
        right: 8.4%;
        top: -5cqi;
        bottom: 24.7%;
    }

    .testimonial {
        --r: 5.6cqi;
        padding: 5.5cqi 7.5cqi 7cqi;
        font-size: max(9px, 2.45cqi);
        line-height: 1.4;
    }

    .testimonial figcaption {
        gap: 2.6cqi;
        margin-bottom: 4.5cqi;
        font-size: max(12px, 3.4cqi);
    }

    .testimonial figcaption img {
        width: 5cqi;
        height: 5cqi;
    }

    .testimonials-grid .testimonial { margin: 0; }
    .testimonials-grid .testimonial--taina { margin-left: 1.1%; }
    .testimonials-grid .testimonial--lara  { margin-inline: 6%; }

    /* Cantos: zera as variantes do desktop e aplica as do mobile */
    .testimonial--francine,
    .testimonial--edivania,
    .testimonial--kananda,
    .testimonial--lara,
    .testimonial--taina,
    .testimonial--wladia,
    .testimonial--kely { border-radius: var(--r); }

    /* topo-esquerda: Francine, Tainá, Kely */
    .testimonial--francine,
    .testimonial--taina,
    .testimonial--kely { border-top-left-radius: 0; }
    .testimonial--francine::before,
    .testimonial--taina::before,
    .testimonial--kely::before {
        top: 0; right: auto; bottom: auto; left: calc(var(--tw) * -1);
        clip-path: polygon(0 0, 100% 0, 100% 100%);
    }

    /* topo-direita: Edivania, Lara */
    .testimonial--edivania,
    .testimonial--lara { border-top-right-radius: 0; }
    .testimonial--edivania::before,
    .testimonial--lara::before {
        top: 0; right: auto; bottom: auto; left: 100%;
        clip-path: polygon(0 0, 100% 0, 0 100%);
    }

    /* baixo-direita: Kananda, Wládia */
    .testimonial--kananda,
    .testimonial--wladia { border-bottom-right-radius: 0; }
    .testimonial--kananda::before,
    .testimonial--wladia::before {
        top: auto; right: auto; bottom: 0; left: 100%;
        clip-path: polygon(0 0, 0 100%, 100% 100%);
    }

    /* Tamanhos de ponta (mobile) */
    .testimonial--francine { --tw: 4.1cqi; --th: 7.4cqi; }
    .testimonial--edivania { --tw: 4.2cqi; --th: 4.2cqi; }
    .testimonial--kananda  { --tw: 4.6cqi; --th: 4.5cqi; }
    .testimonial--lara     { --tw: 4.2cqi; --th: 5cqi; }
    .testimonial--taina    { --tw: 4.2cqi; --th: 5.6cqi; }
    .testimonial--wladia   { --tw: 4.2cqi; --th: 4.2cqi; }
    .testimonial--kely     { --tw: 3.1cqi; --th: 5.6cqi; }
}
/* End Testimonials */