/* Testimonials Section */

/* Main container for the testimonials page view */
.testimonialsPage {
    grid-area: testimonials;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: renderRight 1s ease-in-out;
    gap: 1rem;
    height: 100dvh;
    width: 100%;
}

.testimonialsPage span {
    color: var(--flavorColor);
}

.testimonials {
    grid-area: testimonials;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 20% entry 100%;
    overflow-x: hidden;
}

@media (orientation: portrait) and (max-width: 768px) {
    .testimonials {
        width: 100%;
    }
}

.testimonials span {
    color: var(--flavorColor);
}

.testimonials li {
    position: relative;
    right: .1rem;
    zoom: .8;
}

@media (orientation: portrait) and (max-width: 768px) {
    .testimonials li {
        right: .06rem;
    }
}

.testimonialsContainer {
    anchor-name: --testimonialsContainer;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    overflow-x: hidden;
    scroll-behavior: smooth;
    width: 70dvw;
    gap: 1rem;
    
}

@media (orientation: portrait) and (max-width: 768px) {
    .testimonialsContainer {
        width: 75dvw;
    }
}

.testimonialsButtonLeft, .testimonialsButtonRight {
    position: absolute;
    position-anchor: --testimonialsContainer;
    padding: 1rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
        filter: drop-shadow(0 0 .5rem var(--flavorColor));
    }
}

@media (orientation: portrait) and (max-width: 768px) {
    .testimonialsButtonLeft, .testimonialsButtonRight {
        padding: .5rem;
    }
}

.testimonialsButtonLeft:hover, .testimonialsButtonRight:hover {
    background-color: var(--flavorColor);
    color: white;
}

.testimonialsButtonLeft {
    z-index: 10;
    position-area: left center;
    translate:  0rem;
}

.testimonialsButtonRight {
    z-index: 10;
    position-area: right center;
    
}

.testimonial1, .testimonial2, .testimonial3 {
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-self: center;
    flex-shrink: 0;
    width: 70dvw;
}

@media (orientation: portrait) and (max-width: 768px) {
    .testimonial1, .testimonial2, .testimonial3 {
        width: 75dvw;
    }
}

.testimonial1 img, .testimonial2 img, .testimonial3 img {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    border: .25rem solid var(--flavorColor);
    position: relative;
    left: 1rem;
    top: 4rem;
}

.testimonial1 p, .testimonial2 p, .testimonial3 p {
    background-color: #e9e9e9;
    padding: 1rem;
    border-radius: .5rem;
    font-weight: 700;
    font-size: 1.25rem;
}

@media (orientation: portrait) and (max-width: 768px) {
    .testimonial1, .testimonial2, .testimonial3 {
        p {
            font-size: 1rem;
            margin-top: 7rem;
        }
    }
}

.testimonialName {
    display: flex;
    flex-direction: row;
    gap: .5rem;
    width: fit-content;
    position: relative;
    bottom: 2rem;
    left: 10rem;
}

.testimonialName span {
    text-shadow: 0 0 .5rem var(--flavorColor);
}

@media (orientation: portrait) and (max-width: 768px) {
    .testimonialName {
        flex-direction: column;
        top: 5rem;
        left: 1rem;

    }
}

.testimonialRating {
    display: flex;
    flex-direction: row;
    gap: .5rem;
    width: fit-content;
    position: relative;
    bottom: 2rem;
    left: 10rem;
}

.testimonialRating svg {
    width: 2rem;
    height: 2rem;
    fill: var(--flavorColor);
    filter: drop-shadow(0 0 .5rem var(--flavorColor));
}

.testimonial2>.testimonialRating>svg:nth-child(5), .testimonial2>.testimonialRating>svg:nth-child(4) {
    fill: currentColor;
    filter: drop-shadow(0 0 .5rem currentColor);
}

.testimonial3>.testimonialRating>svg:nth-child(5){
    fill: currentColor;
    filter: drop-shadow(0 0 .5rem currentColor);
}

@media (orientation: portrait) and (max-width: 768px) {
    .testimonialRating {
        top: 6rem;
        left: 1rem;
    }
}