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

.testimonials {
    position: relative;

    padding:
        58px
        0
        68px;

    background:
        #fbfaf7;
}


/* =========================================================
   HEADER
========================================================= */

.testimonials__header {
    max-width: 900px;

    margin:
        0 auto
        30px;

    text-align:
        center;
}

.testimonials__title {
    margin: 0;

    color:
        var(--ppg-navy);

    font-family:
        var(--ppg-font-heading);

    font-size:
        clamp(
            1.9rem,
            3vw,
            2.65rem
        );

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -0.025em;
}


/* =========================================================
   GRID
========================================================= */

.testimonials__grid {
    display: grid;

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

    gap:
        24px;

    align-items:
        stretch;
}


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

.testimonial-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 220px;

    padding:
        24px
        26px
        22px;

    background:
        rgba(
            255,
            255,
            255,
            0.58
        );

    border:
        1px solid
        #cdd3d2;

    border-radius:
        15px;

    box-shadow:
        0 7px 22px
        rgba(
            15,
            39,
            68,
            0.035
        );

    transition:
        transform
        var(--ppg-transition),
        border-color
        var(--ppg-transition),
        box-shadow
        var(--ppg-transition);
}

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

    border-color:
        rgba(
            22,
            168,
            159,
            0.6
        );

    box-shadow:
        0 15px 34px
        rgba(
            15,
            39,
            68,
            0.08
        );
}


/* =========================================================
   QUOTE + RATING
========================================================= */

.testimonial-card__top {
    display: flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        13px;
}

.testimonial-card__quote {
    display: block;

    height:
        28px;

    color:
        var(--ppg-teal);

    font-family:
         var(--ppg-font-heading);

    font-size:
        2.35rem;

    font-weight:
        700;

    line-height:
        1;
}

.testimonial-card__rating {
    display: flex;

    align-items:
        center;

    gap:
        3px;

    color:
        var(--ppg-lime-dark);

    font-size:
        0.78rem;
}


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

.testimonial-card__testimonial {
    flex: 1;

    margin:
        0
        0
        19px;

    padding: 0;

    color:
        var(--ppg-text-primary);

    font-family:
        var(--ppg-font-body);

    font-size:
        0.84rem;

    font-style:
        normal;

    line-height:
        1.55;

    quotes: none;
}


/* =========================================================
   ATTRIBUTION
========================================================= */

.testimonial-card__footer {
    margin-top:
        auto;
}

.testimonial-card__name {
    margin:
        0
        0
        2px;

    color:
        var(--ppg-navy);

    font-size:
        0.78rem;

    font-weight:
        700;

    line-height:
        1.35;

    text-transform:
        uppercase;
}

.testimonial-card__name span {
    margin-right:
        3px;
}

.testimonial-card__company {
    margin: 0;

    color:
        var(--ppg-text-secondary);

    font-size:
        0.74rem;

    line-height:
        1.35;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .testimonials__grid {
        gap:
            18px;
    }

    .testimonial-card {
        padding:
            22px;

        min-height:
            230px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .testimonials {
        padding:
            50px
            0
            56px;
    }

    .testimonials__header {
        margin-bottom:
            26px;
    }


    /* Stack cards vertically */

    .testimonials__grid {
        grid-template-columns:
            1fr;

        gap:
            16px;
    }

    .testimonial-card {
        width:
            100%;

        min-height:
            0;

        padding:
            24px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .testimonials {
        padding:
            44px
            0
            48px;
    }

    .testimonials__header {
        text-align:
            left;
    }

    .testimonials__title {
        font-size:
            clamp(
                1.8rem,
                8vw,
                2.3rem
            );
    }

    .testimonial-card {
        padding:
            20px
            18px;

        border-radius:
            13px;
    }

    .testimonial-card__quote {
        font-size:
            2.1rem;
    }

    .testimonial-card__testimonial {
        font-size:
            0.82rem;
    }

}