/**
 * Timeline Peek CSS
 *
 * Styles for post timeline modules with peek-next-slide functionality.
 * This targets only modules with the 'timeline-peek' class.
 * Version: 1.0.0
 */

/* Define CSS variable for peek width that can be updated via JS */
:root {
    --timeline-peek-width: 80px;
}

/* Main container styling for peek effect */
.timeline-peek .slick-list {
    overflow: visible !important; /* Allow content to overflow for peek effect */
    padding-right: var(--timeline-peek-width) !important; /* Space for the peeking slide */
}

/* Maintain container width to prevent layout shifts */
.timeline-peek .pp-post-timeline-slider-target {
    width: calc(100% - var(--timeline-peek-width)) !important;
    box-sizing: content-box;
}

/* Ensure slide items have consistent styling */
.timeline-peek .pp-post-timeline-item {
    transition: opacity 0.3s ease;
}

/* Styling for the peeking slide */
.timeline-peek .slick-slide:not(.slick-active) {
    opacity: 0.5; /* Slightly fade out the peeking slide */
}

/* Hide any remaining cloned slides */
.timeline-peek .slick-cloned {
    display: none !important;
}

/* Ensure proper navigation arrows visibility at start and end of slider */
.timeline-peek .slick-slider.slick-initialized .slick-prev {
    opacity: 0.25;
    pointer-events: none;
}

.timeline-peek .slick-slider.slick-initialized .slick-track .slick-slide:first-child.slick-active ~ .slick-slide ~ .slick-slide ~ .slick-slide ~ .slick-slide .slick-next,
.timeline-peek .slick-slider.slick-initialized .slick-track .slick-slide:first-child.slick-active ~ .slick-slide ~ .slick-slide ~ .slick-slide:last-child .slick-next {
    opacity: 0.25;
    pointer-events: none;
}

/* Responsive adjustments */
@media screen and (max-width: 992px) {
    /* Adjust for tablet view */
    .timeline-peek .pp-post-timeline-slider-target {
        width: calc(100% - 60px) !important;
    }
}

@media screen and (max-width: 768px) {
    /* Adjust for mobile view */
    .timeline-peek .pp-post-timeline-slider-target {
        width: calc(100% - 40px) !important;
    }
}

/* Handle container width to prevent horizontal scrolling on page */
.timeline-peek {
    overflow-x: hidden;
}

/* Fix slide appearance at start and end of slider */
.timeline-peek .slick-slide {
    transition: transform 0.3s ease;
}