/* ============================
   Desktop slider layout
   ============================ */

.testimonial-card {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 10px;
}

.testimonial-card__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 1rem;
}

.testimonial-card__body {
    margin: 0;
}

.testimonial-card__image,
.testimonial-card__stars {
    display: block;
    height: 40px;
    width: auto;
    object-fit: contain;
}

.testimonial-card__image {
    height: 36px !important;
    width: auto;
}

.testimonial-card__label {
    font-weight: 600;
    color: #8D8D8D
}

.testimonial-card__media,
.testimonial-card__footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* Only apply the grid to the DESKTOP slider */
.testimonial-fb--desktop .testimonial-slide-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
    /* big left, narrower right */
    grid-template-rows: repeat(2, minmax(0, 1fr));
    /* two equal rows on the right */
    gap: 2rem;
    align-items: stretch;
}

/* Big card: full height of the left column */
.testimonial-fb--desktop .testimonial-slide-grid>.testimonial-card--large {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    /* span both rows */
}

/* First small card: top-right */
.testimonial-fb--desktop .testimonial-slide-grid>.testimonial-card--small:first-of-type {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

/* Second small card: bottom-right */
.testimonial-fb--desktop .testimonial-slide-grid>.testimonial-card--small:last-of-type {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

@media (max-width: 1024px) {
    .testimonial-fb--desktop .testimonial-slide-grid {
        gap: 1rem;
    }
}

@media (max-width: 767px) {
    .testimonial-fb--desktop .testimonial-slide-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .testimonial-fb--desktop .testimonial-slide-grid>.testimonial-card--large,
    .testimonial-fb--desktop .testimonial-slide-grid>.testimonial-card--small {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}


/* ============================
   WHICH slider shows
   ============================ */

/* Mobile-first: show mobile slider by default */
.testimonial-fb--desktop {
    display: none;
}

.testimonial-fb--mobile {
    display: block;
}

/* From 768px up: show desktop slider, hide mobile slider */
@media (min-width: 768px) {
    .testimonial-fb--desktop {
        display: block;
    }

    .testimonial-fb--mobile {
        display: none;
    }
}