/* Text Wide Carousel Styles - Based on assets/data/reviews.html */
:root {
    --card-bg: #fdeceb;
    --card-radius: 10px;
    --card-shadow: 0 1px 0 rgba(0,0,0,0.06) inset, 0 2px 6px rgba(0,0,0,0.03);
    --accent: #4d9c89;
    --text: #2b2b2b;
    --container-max: 1280px;
}

.carousel-text-wide-container {
    width: 100%;
    margin: 0 auto;
    padding: 10px 0px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: transparent;
    border-radius: 16px;
    /* Tighter bottom space so the card sits closer to the container border */
    padding: 12px 12px 8px;
}

    .carousel-text-wide .review-card {
        background: var(--card-bg);
        border-radius: var(--card-radius);
        /* Add a soft bottom drop shadow in addition to the subtle base shadows */
        box-shadow: var(--card-shadow), 0 10px 16px -10px rgba(0, 0, 0, 0.22);
        padding: 16px 28px;
        min-height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        text-align: left;
    }

        .carousel-text-wide .review-card .text {
            font-size: 14px; /* 30% smaller than parent font-size */
            font-weight: 300;
            margin-bottom: 4px;
        }

        .carousel-text-wide .review-card .name {
            margin-top: 0px;
            font-weight: 500;
            font-size: 14px;
        }

    /* Arrows */
    .carousel-text-wide .splide__arrows {
        pointer-events: none;
    }

    .carousel-text-wide .splide__arrow {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 1;
        width: 40px;
        height: 40px;
        transform: translateY(-50%);
        top: 50%;
        pointer-events: auto;
        cursor: pointer;
    }

        .carousel-text-wide .splide__arrow:hover,
        .carousel-text-wide .splide__arrow:focus,
        .carousel-text-wide .splide__arrow:active {
            background: transparent !important;
            background-color: transparent !important;
            border: none !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .carousel-text-wide .splide__arrow svg {
            width: 24px;
            height: 24px;
            stroke: var(--accent);
            stroke-width: 2.5;
            fill: none !important;
            background: transparent !important;
        }

            .carousel-text-wide .splide__arrow svg path {
                fill: none !important;
                background: transparent !important;
            }

    /* Fix: prevent Splide default rotation from flipping the prev arrow */
    .carousel-text-wide .splide__arrow--prev svg {
        transform: none !important;
    }

    .carousel-text-wide .splide__arrow--prev {
        left: -6px;
    }

    .carousel-text-wide .splide__arrow--next {
        right: -6px;
    }

@media (max-width: 640px) {
    .carousel-text-wide .splide__arrow--prev {
        left: -2px;
    }

    .carousel-text-wide .splide__arrow--next {
        right: -2px;
    }

    .carousel-text-wide .review-card {
        font-size: 16px;
        padding: 20px;
        /* Slightly reduce the drop shadow on small screens */
        box-shadow: var(--card-shadow), 0 8px 14px -10px rgba(0, 0, 0, 0.2);
    }

    /* Make slide bottom padding tighter on small screens too */
    .carousel-text-wide .splide__slide {
        padding-bottom: 4px;
    }
}

/* === Tweaks to prevent .review-card from stretching under arrows ===
   Adds gutters, caps card width, ensures arrows are on top, and makes the
   Splide root a positioning context.
   If you prefer gutters on the track instead of each slide, comment the
   .splide__slide rule and use the alternative at the bottom.
===================================================================== */

.carousel-text-wide {
    position: relative;
}

    /* Provide horizontal gutters and a little bottom space so shadows are visible inside the track */
    .carousel-text-wide .splide__slide {
        padding: 0 48px 6px; /* space for arrows + room for bottom shadow (tighter) */
    }

    .carousel-text-wide .splide__arrow {
        z-index: 3; /* keep arrows above the card */
    }

    /* Allow vertical overflow so drop shadows aren't clipped by the track */
    .carousel-text-wide .splide__track {
        overflow-y: visible;
    }

/* --- Alternative (use instead of slide padding) --- */
/* .carousel-text-wide .splide__track { */
/*   padding: 0 48px; */
/* } */