/* START CUSTOM SPOTLIGHT V5 */
.spotlight-v5 {
    --transition-time: 1s;
    --arrow-style-5-bg-color: var(--primary-color);
}


#home {
    #spotlightContainer-v5 {

        .cms-image,
        .cms-input,
        .cms-icon,
        .cms-textarea,
        .icons-container {
            border: none;
            padding: 0;
            border-radius: unset;
            margin: 0;
            width: unset;
            height: unset;
        }

        .cms-image {
            img {
                width: 100%;
                margin: 0;
            }
        }
    }
}

.spotlight-v5 {
    opacity: 0;
    transition: all .25s linear;

    &:has(.swiper-initialized) {
        opacity: 1;
    }

    .spotlight-v5-slider {}

    .spotlight-v5-item {
        padding-top: 40px;
        transition: all var(--transition-time) linear;

        .content-wrap-inner {
            opacity: 0;
            text-align: center;
            transition: all var(--transition-time) linear;
        }

        .spotlight-image {
            transform: scale(.5);
            transform-origin: 50%;
            transition: all var(--transition-time) linear;

            @media screen and (max-width: 768px) {
                transform: scale(1);
                opacity: 0;
            }
        }

        .spotlight-name {
            margin-top: 20px;
            font-size: 1.2em;
            text-transform: uppercase;
        }

        .spotlight-school {
            margin-top: .5em;
        }

        .spotlight-description {
            margin-top: 1em;
            --font-size: 16px;
            --line-height: 1.4;
            --lines-to-show: 3;

            display: block;
            display: -webkit-box;
            font-size: var(--font-size);
            line-height: var(--line-height);
            height: calc(var(--line-height) * var(--lines-to-show));
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: var(--lines-to-show);
        }

        .spotlight-button a {
            display: inline-flex;
            text-decoration: none;
            background-color: var(--primary-color);
            border: 2px solid var(--primary-color);
            color: #fff;
            padding: .75em 1.5em;
            border-radius: .3em;
            margin-top: 1em;
            transition: all .25s linear;

            &:hover {
                background-color: transparent;
                color: var(--primary-color);
            }
        }
    }

    .swiper-slide-prev,
    .swiper-slide-next {
        .spotlight-v5-item {
            .spotlight-image {
                transform: scale(.75);

                @media screen and (max-width: 768px) {
                    transform: scale(1);
                }
            }
        }
    }

    .swiper-slide-active {
        .spotlight-v5-item {
            .spotlight-image {
                transform: scale(1.1);
                transform-origin: 50% 50%;

                @media screen and (max-width: 768px) {
                    transform: scale(1);
                    opacity: 1;
                }
            }
        }

        .content-wrap-inner {
            opacity: 1;
        }
    }

    .swiper-slide-prev {
        .spotlight-v5-item {
            .spotlight-image {
                transform-origin: 0 50%;
            }
        }
    }

    .swiper-slide-next {
        .spotlight-v5-item {
            .spotlight-image {
                transform-origin: 100% 50%;
            }
        }
    }



    .custom-swiper-navigation {
        margin-top: 30px;
        justify-content: center;
        column-gap: 10px;

        .custom-swiper-prev,
        .custom-swiper-next {
            border-radius: 50%;
            width: 50px;
            height: 50px;
        }
    }
}

/* END CUSTOM SPOTLIGHT V5 */