/* ---------- Desktop Styles ---------- */

/* Overall Page Layout */
.pageLayout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    background-color: #F7F7D5;
    /* extraLightYellow */
}

/* Left Container (Carousel Slider) */
.leftContainer {
    width: 50%;
    padding-right: 8px;
    padding-left: 35px;
}

.leftContainer .eventsCalendarTitle {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
    color: #12372F;
    /* darkGreen */
}

.leftContainer .eventsContainer {
    display: block;
}

/* Carousel Card Style for Slider Items */
.leftContainer .lefteventCard {
    width: 300px;
    /* fixed width on desktop */
    height: 200px;
    /* fixed height */
    background-color: #123C32;
    /* green */
    color: #F2F2B9;
    /* lightYellow */
    padding: 1rem;
    margin: 0 auto 1.5rem;
    text-transform: uppercase;
    border-radius: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

.leftContainer .lefteventCard .eventDate .event-location {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    /* Set date color to same as title (yellow) */
    color: #E4E76C;
}

.leftContainer .lefteventCard .eventDate .eventDay {
    font-size: 2rem;
    font-weight: bold;
    margin-right: 5px;
}

.leftContainer .lefteventCard .eventDate .eventMonth {
    font-size: 1rem;
}

.leftContainer .lefteventCard .eventDetails .eventTitle {
    font-size: 1.4rem;
    margin-bottom: 5px;
    color: #E4E76C;
    /* yellow */
}

.leftContainer .eventTitle {
    color: #E4E76C;
}

/* Omit event description on the left card as not required */
.leftContainer .lefteventCard .eventDetails .event-datetime .event-location {
    font-size: 0.9rem;
    color: #F2F2B9;
    /* lightYellow */
}

.leftContainer .lefteventCard:hover {
    transform: scale(1.01);
}

/* Right Container (Event List / Rolodex) */
.rightContainer {
    width: 50%;
    padding-left: 15px;
}

.rightContainer .eventsCalendarTitle {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 10px;
    /* Reduced margin so "2025" is directly above the cards */
    color: #12372F;
    /* green */
    padding: 10px;
    width: 300px;
    margin: 0 auto 10px auto;
}

.rightContainer #list-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rightContainer .eventCard {
    min-width: 400px;
    max-width: 400px;
    /* fixed width */
    height: 200px;
    /* fixed height */
    background-color: #123C32;
    /* green */
    color: #F2F2B9;
    /* lightYellow */
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    border-radius: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

.rightContainer .eventCard .eventDate {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
    /* Set date color to same as title (yellow) */
    color: #E4E76C;
}

.rightContainer .eventCard .eventDate .eventDay {
    font-size: 2rem;
    font-weight: bold;
    margin-right: 5px;
}

.rightContainer .eventCard .eventDate .eventMonth {
    font-size: 1rem;
}

.rightContainer .eventCard .eventDetails .eventTitle {
    font-size: 1.4rem;
    margin: 0;
    color: #E4E76C;
    /* yellow */
}

/* Force the eventDetails container to have a minimum height */
.rightContainer .eventCard .eventDetails {
    min-height: 4em;
}

.rightContainer .eventCard .eventDetails .event-location {
    font-size: 1rem;
    color: #F2F2B9;
    /* lightYellow */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 15ch;
    /* ~15 characters */
}

.rightContainer .eventCard .eventDetails .eventDescription {
    display: none;
}

.rightContainer .eventCard .eventDetails .event-datetime {
    font-size: 0.9rem;
    color: #F2F2B9;
    /* lightYellow */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 20ch;
    /* ~20 characters */
}

.rightContainer .eventCard:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.slick-dots li button:before {
    font-size: 12px;
    color: #F2F2B9;
    /* lightYellow */
}

.slick-dots li.slick-active button:before {
    color: #F2F2B9;
    /* lightYellow */
}

/* Override card text color */
.leftContainer .lefteventCard .eventDate,
.leftContainer .lefteventCard .eventDetails,
.rightContainer .eventCard .eventDate,
rightContainer .eventCard .eventDetails .eventTitle {
    color: #F2F2B9;
}

/* ---------- Mobile Adjustments (max-width: 768px) ---------- */
@media (max-width: 768px) {
    .pageLayout {
        flex-direction: column;
        padding: 10px;
        align-items: center;
    }

    /* Increase horizontal padding so the arrows are not cut off */
    .leftContainer,
    .rightContainer {
        width: 100%;
        padding: 0 20px;
        text-align: center;
    }

    .rightContainer .eventsCalendarTitle {
        width: auto !important;
        margin: 10px 0 !important;
        padding: 0 !important;
    }

    /* Expand the left container's card width for mobile */
    .leftContainer .lefteventCard {
        width: 300px !important;
        margin: 0 auto 1.5rem;
    }

    /* Truncate the left container's event location text */
    .leftContainer .lefteventCard .event-location {
        font-size: 1rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 15ch !important;
        margin: 0 auto;
    }

    /* Additional Slick adjustments for proper centering on mobile */
    .slick-list {
        padding: 0 20px;
        margin: 0 auto;
    }

    .slick-track {
        display: flex !important;
        justify-content: center;
    }

    .slick-slide {
        display: flex !important;
        justify-content: center;
        align-items: center;
    }
}

/* ---------- Additional Adjustments for Displays Less Than 1200px ---------- */
@media (max-width: 1200px) {

    /* Truncate the left container's event location and event-datetime text */
    .leftContainer .lefteventCard .event-location {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 15ch;
    }

    .leftContainer .lefteventCard .event-datetime {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 20ch;
    }
}

/* ---------- Desktop Override: Halve Left/Right Padding ---------- */
/* This only applies on screens wider than 768px (desktop). 
   Reduces the sum of padding-left/padding-right by ~50%. */
@media (min-width: 769px) {
    .leftContainer {
        padding-left: 9px !important;
        /* was 35px */
        padding-right: 2px !important;
        /* was 8px */
    }

    .rightContainer {
        padding-left: 4px !important;
        /* was 15px */
    }
}

/* fix overlap around ~1200px by making the right container or card narrower */
@media (max-width: 1200px) {

    /* Option A: Keep both containers at 50% but make the card itself responsive */
    .rightContainer .eventCard {
        width: auto;
        /* let it shrink dynamically */
        max-width: 400px;
        min-width: 400px;
        /* or whatever width you prefer to prevent collision */
    }

    /* 
       Option B (if needed): 
       Adjust container widths slightly so there's more space for the 500px card.
       (Uncomment if you prefer to do this in addition to or instead of shrinking the card.)

       .leftContainer {
         width: 45%;
       }
       .rightContainer {
         width: 55%;
       }
    */
}