@use "../base/mixins";


section.flexi-block.block--testimonials-04 {
    .content {
        max-width: unset;
        margin-bottom: 34px;

        h2, h3, h4 {
            font-size: clamp(1.75rem, 4vw, 4rem);
            margin-bottom: clamp(22px, 3vw, 46px);
        }
    }

    .swiper-controls {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 32px;
        justify-content: flex-start;
    }

    .testimonial {
        --padding-x-sm: 20px;
        --padding-y-sm: 20px;
        --padding-x-lg: 20px;
        --padding-y-lg: 20px;
        background: var(--c-secondary);
        padding: clamp(var(--padding-y-sm), 2vw, var(--padding-y-lg)) clamp(var(--padding-x-sm), 2vw, var(--padding-x-lg));
        background-color: var(--c-l-grey);

        &__content {
            margin-bottom: 15px;
        }

        &__author {
            font-size: 1.375rem;
            display: inline-block;
            margin-bottom: 14px;
            font-family: var(--t-heading-font-family);
        }

        &__star-rating {
            margin-bottom: 14px;
        }
    }

    .testimonials-carousel {
        position: relative;
    }

    .star-rating {
        list-style: none;
        max-width: fit-content;
        display: flex;
        gap: 2px;
        padding: 0;
        margin: 0 0 15px;
    }

    .swiper-button-prev .swiper-navigation-icon {
        rotate: 180deg;
    }

    .star {
        width: clamp(20px, 3vw, 30px);
        height: clamp(20px, 3vw, 30px);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24px' viewBox='0 0 24 24' width='24px' fill='%23FCD34D'%3E%3Cg%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z'/%3E%3C/g%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .star.half-filled {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23FCD34D'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z'/%3E%3C/svg%3E");
    }

    .star.filled {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24px' viewBox='0 0 24 24' width='24px' fill='%23FCD34D'%3E%3Cg%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z'/%3E%3C/g%3E%3C/svg%3E");
    }

    .swiper {
        position: relative;
    }

    .swiper-pagination {
        display: flex;
        align-items: center;
        gap: 8px;
        position: static; // override swiper's default absolute positioning

        &-bullet {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--c-l-grey);
            opacity: 1;
            transition: width .3s ease, border-radius .3s ease, background .3s ease;

            &-active {
                background: var(--c-black);
            }
        }
    }

    .swiper-button-prev,
    .swiper-button-next {
        position: static; // override swiper's default absolute positioning
        margin: 0;
        width: 16px;
        height: 26px;
        border-radius: 50%;
        color: var(--c-black);
        display: flex;
        align-items: center;
        justify-content: center;


        .swiper-navigation-icon {
            width: 18px;
            height: 18px;
        }
    }

    @include mixins.min-width(m) {

        padding-left: 0;
        padding-right: 0;

        .container {
            max-width: 100vw;
            display: grid;
            grid-template-columns: minmax(var(--site-padding), 1fr) repeat(12, minmax(0, calc(#{var(--container-width)} / 12))) minmax(var(--site-padding), 1fr);

            .content {
                height: 100%;
                grid-column: 2 / span 4;
                padding-right: 32px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .testimonials-carousel {
                grid-column: 6 / -1;
            }

            .swiper-slide {
                width: calc(calc(var(--container-width) / 3 - 16px));

                &:last-of-type {
                    margin-right: var(--site-padding);

                }
            }
        }
    }
}