/*
 * Custom CSS for the Timeline Slider Plugin (Updated for Vertical Centering and Custom Dots)
 */

/* =========================================
 * Layout and Styling
 * ========================================= */

/* General Container for spacing */
.cht-timeline-slider-container {
    padding: 40px 0;
    margin-bottom: 50px;
    overflow: hidden; 
}

/* The individual slide item */
.cht-slide {
    padding: 0 10px;
    box-sizing: border-box;
}

/* Flex layout for image and text inside the slide */
.cht-content-wrapper {
    display: flex;
    /* FIX: ALIGNMENT CORRECTION: This centers the image and text vertically */
    align-items: center; 
    /* You may want to remove the box-shadow if your design is cleaner */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
    overflow: hidden;
}

/* Left Image Column */
.cht-image-col {
    flex: 0 0 40%; /* Image takes 50% width */
    max-width: 40%;
    overflow: hidden;
    margin-left:0px !important;
}

/* Black and White Effect */
.cht-event-image {
    width: 300px;
    height: 400px !important;
    display: block;
    transition: filter 0.3s ease;
}

/* Right Text Column */
.cht-text-col {
    flex: 1;
    padding: 10px;
    /* Ensuring the content inside the text column is also centered if needed */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cht-title {
    font-size: 1.8em;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
}

/* Hide the old timeline elements used only for data */
.cht-timeline-info {
    display: none; 
}


/* =========================================
 * Custom Paging (Labels: FALL, SUMMER, etc.)
 * ========================================= */

/* Styles the container holding the navigation buttons */
.slick-dots {
    list-style: none;
    margin: 30px auto 0 !important;
    padding: 0;
    text-align: left;
    position: relative;
    /* Creates the grey horizontal timeline line behind the buttons */
    background: linear-gradient(to right, #ccc 0%, #ccc 100%);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: center 50%;
}

/* Spacing for each label item */
.slick-dots li {
    display: inline-block;
    margin: 0 225px 0 0; 
}

/* Style for the custom label button (FALL, SUMMER) */
.slick-dots button {
    font-size: 0.9em;
    font-weight: 500; /* Lighter font weight */
    color: #2f2e2c;
    background: #b9a292; /* White background to cover the line */
    padding: 10px 16px;
    border:1px solid #2f2e2c;
    border-radius:0px;
    cursor: pointer;
    line-height: 1;
    display: block; 
    transition: all 0.2s ease;
}

/* Active state for the label button */
.slick-dots li.slick-active button {
    color: #2f2e2c; 
    border-color: #2f2e2c;
    background: #fdfcfa;
    font-weight: bold;
}

/* Remove default Slick dot button styling */
.slick-dots li button:before,
.slick-dots li button:after {
    content: none !important;
}

/* =========================================
 * Slick Carousel Overrides (for Arrows)
 * ========================================= */

/* Hides default arrows if you want to use the browser-provided 'Next' button */
/* You can delete this section if you need to custom-style the slick arrows */

.slick-prev, .slick-next {
    /* Hide the default Slick arrows if you are relying on the custom 'Next' button */
    display: none !important; 
}