/* The Container */
.testimonial-carousel {
    display: flex; 
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 20px;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.testimonial-carousel::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
}

/* The Individual Card */
.testimonial-card {
    flex: 0 0 85%; /* Shows 85% of the card, leaving 15% for the 'peek' */
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    min-width: 270px;
}

@media (min-width: 768px) {
    .testimonial-card {
        flex: 0 0 500px; /* Fixed width on desktop */
    }
}

/* Truncation Logic */
.testimonial-content {
    max-height: 200px; 
    overflow: hidden;
    position: relative;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.testimonial-content.expanded {
    max-height: 1000px; /* Large enough to fit any review */
}

.testimonial-content.expanded::after {
    opacity: 0; /* Fades out the gradient as it opens */
}

/* Smoothly hide the gradient when expanded */
.testimonial-content.has-overflow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--wp--preset--color--bright-snow, #ffffff));
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
    opacity: 1;
}

/* Only show gradient if the 'has-overflow' class is present */
.testimonial-content.has-overflow:not(.expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Taller for a smoother transition */
    background: linear-gradient(to bottom, transparent, var(--wp--preset--color--bright-snow, #ffffff));
    pointer-events: none;
}

.read-more-btn {
    all: unset;
    background-color: var(--wp--preset--color--navy-blue);
    border-radius: 100px;
    color: var(--wp--preset--color--bright-snow);
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: var(--wp--preset--font-size--medium);
    font-style: normal;
    font-weight: 400;
    padding-top: 0.667em;
    padding-right: 1.8em;
    padding-bottom: 0.667em;
    padding-left: 1.8em;
    box-shadow: 0 4px 0 0 
                color-mix(in srgb, var(--wp--preset--color--navy-blue) 60%, #000 5%);
    transition: transform 0.13s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.13s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;

}

.read-more-btn:hover {
    /* Lift the button up 2px */
    transform: translateY(-2px);
    /* Increase shadow to 6px to make it look taller/more pressable */
    box-shadow: 0 6px 0 0 color-mix(in srgb, var(--wp--preset--color--navy-blue) 60%, #000 5%);
}

.read-more-btn:active {
    transform: translateY(3px);
    box-shadow: 0 0.5px 0 0 color-mix(in srgb, var(--wp--preset--color--bright-snow) 60%, #000 5%);
}