/* LMS Carousel Styles - Only loaded when carousel="yes" */

.pluranza-carousel-wrapper {
    position: relative;
    width: 100%;
    margin: 20px 0;
}

.pluranza-carousel-wrapper .pluranza-courses-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    margin: 0;
    /* Reset margin from grid */
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
    transition: -webkit-mask-image 0.2s ease, mask-image 0.2s ease;
}

.pluranza-carousel-wrapper .pluranza-courses-grid::-webkit-scrollbar {
    display: none;
}

/* Gradient Masks by State */
.pluranza-carousel-wrapper.is-start .pluranza-courses-grid {
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
}

.pluranza-carousel-wrapper.is-middle .pluranza-courses-grid {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.pluranza-carousel-wrapper.is-end .pluranza-courses-grid {
    -webkit-mask-image: linear-gradient(to left, black 90%, transparent 100%);
    mask-image: linear-gradient(to left, black 90%, transparent 100%);
}

.pluranza-carousel-wrapper.no-scroll .pluranza-courses-grid {
    -webkit-mask-image: none;
    mask-image: none;
}

.pluranza-carousel-wrapper .pluranza-course-item {
    scroll-snap-align: start;
    /* Divide 100% by cols + 0.15 so the extra 0.15 corresponds exactly to the peek of the next item */
    flex: 0 0 calc((100% - (var(--pluranza-cols, 5) * 20px)) / (var(--pluranza-cols, 5) + 0.15));
}

@media (max-width: 1024px) {
    .pluranza-carousel-wrapper .pluranza-course-item {
        /* Fallback to max 3 columns for tablet */
        flex: 0 0 calc((100% - (3 * 20px)) / 3.15);
    }
}

@media (max-width: 767px) {
    .pluranza-carousel-wrapper .pluranza-course-item {
        /* Fallback to 2 columns for mobile landscape */
        flex: 0 0 calc((100% - (2 * 20px)) / 2.15);
    }
}

@media (max-width: 479px) {
    .pluranza-carousel-wrapper .pluranza-course-item {
        /* 1 column for mobile portrait (show 15% of next item) */
        flex: 0 0 calc((100% - 20px) / 1.15);
    }
}

/* Carousel Buttons */
.pluranza-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
    padding: 0;
    opacity: 0.8;
}

.pluranza-carousel-btn img {
    width: 15px;
    height: auto;
    filter: brightness(0) invert(1);
}

.pluranza-carousel-btn:hover {
    background: transparent;
    transform: translateY(-50%) scale(1.15);
    opacity: 1;
}

.pluranza-carousel-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.pluranza-carousel-prev {
    left: 0px;
}

.pluranza-carousel-next {
    right: 0px;
}

/* Button Visibility by State */
.pluranza-carousel-wrapper:not(.initialized) .pluranza-carousel-prev,
.pluranza-carousel-wrapper.is-start .pluranza-carousel-prev,
.pluranza-carousel-wrapper.is-end .pluranza-carousel-next,
.pluranza-carousel-wrapper.no-scroll .pluranza-carousel-prev,
.pluranza-carousel-wrapper.no-scroll .pluranza-carousel-next {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pluranza-carousel-wrapper.is-middle .pluranza-carousel-prev,
.pluranza-carousel-wrapper.is-middle .pluranza-carousel-next,
.pluranza-carousel-wrapper.is-end .pluranza-carousel-prev,
.pluranza-carousel-wrapper.is-start .pluranza-carousel-next {
    opacity: 0.8;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 767px) {
    .pluranza-carousel-btn {
        display: none !important;
    }
    
    .pluranza-carousel-wrapper .pluranza-courses-grid,
    .pluranza-carousel-wrapper.is-start .pluranza-courses-grid {
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }

    .pluranza-carousel-wrapper.is-middle .pluranza-courses-grid {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    }

    .pluranza-carousel-wrapper.is-end .pluranza-courses-grid {
        -webkit-mask-image: linear-gradient(to left, black 85%, transparent 100%);
        mask-image: linear-gradient(to left, black 85%, transparent 100%);
    }

    .pluranza-carousel-wrapper.no-scroll .pluranza-courses-grid {
        -webkit-mask-image: none;
        mask-image: none;
    }
}