/* Slider Component */
.cite-slider-section {
    padding: 4rem 0;
    width: 100%;
    margin: 0 auto;
}

.cite-slider-section .container {
    max-width: var(--site-width);
    padding-left: var(--site-padding);
    padding-right: var(--site-padding);
    margin: 0 auto;
}

.cite-slider-headline {
    text-align: center;
    margin-bottom: 1.5rem;
}

.cite-slider {
    position: relative;
    width: 100%;
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 0 3rem;
}

.cite-slide {
    padding: 1rem;
    text-align: center;
    transition: transform 0.3s ease;
}

.cite-slide__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: 1rem;
}

.cite-slide__icon {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cite-slide__icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.cite-slide__headline {
    font-size: 24px;
    margin-bottom: 1rem;
    letter-spacing: 2px;
    color: var(--cite-dark);
}

.cite-slide__content {
    font-size: 16px;
    line-height: var(--line-height-body);
    color: var(--cite-dark);
    opacity: 0.9;
}

/* Slider Navigation */
.cite-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border: 2px solid transparent;
    background: var(--pure-white);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.cite-slider__arrow:hover {
    transform: translateY(-50%) scale(1.05);
    background-image: linear-gradient(var(--pure-white), var(--pure-white)), 
                    linear-gradient(55deg, var(--cite-blue) 0%, var(--cite-lime) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.cite-slider__arrow img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.cite-slider__arrow--prev {
    left: 0px;
    transform: translateY(-50%) rotate(180deg);
}

.cite-slider__arrow--prev:hover {
    transform: translateY(-50%) rotate(180deg) scale(1.05);
}

.cite-slider__arrow--next {
    right: 0px;
}

/* Hide default slick button content */
.cite-slider .slick-prev:before,
.cite-slider .slick-next:before {
    display: none !important;
}

/* Slick Dots Styling - Hidden by default */
.cite-slider .slick-dots {
    display: none !important;
}

/* Mobile Responsive Styles */
@media (max-width: 1024px) {
    .cite-slider-section {
        padding: 3rem 0;
    }

    .cite-slider {
        max-width: none;
        padding: 0;
    }

    .cite-slider-headline {
        font-size: 32px;
    }

    /* Show dots and style them */
    .cite-slider .slick-dots {
        display: flex !important;
        position: relative;
        bottom: -30px;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin: 0;
        padding: 1rem 0 0;
        list-style: none;
        width: 100%;
    }

    .cite-slider .slick-dots li {
        margin: 0;
        padding: 0;
    }

    .cite-slider .slick-dots button {
        font-size: 0;
        width: 12px;
        height: 12px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--cite-sky);
        opacity: 0.3;
        transition: all 0.3s ease;
    }

    .cite-slider .slick-dots li.slick-active button {
        opacity: 1;
        transform: scale(1.2);
    }
}

@media (max-width: 768px) {
    .cite-slider-section {
        padding: 2rem 0;
    }

    .cite-slider-headline {
        margin-bottom: 2rem;
        font-size: 28px;
    }

    .cite-slide__icon img {
        width: 48px;
        height: 48px;
    }

    .cite-slide__headline {
        font-size: 20px;
    }
}