/* ############################################### */
            /* Event Overview - Complete CSS */
/* ############################################### */

.event_category_container, .other_events_category_container {
    display: flex;
    height: 100%;
    background: #1f1f1f;
    font-family: 'Roboto Condensed';
    position: relative;
}

.other_events_category_container_mobile {
    position: absolute;
    top: 0;
    z-index: 5;
}

/* ############################################### */
            /* Merged Container Structure */
/* ############################################### */

.event_merged_container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all 0.5s ease;
}

/* When there are two events side by side */
.event_category_container .event_merged_container:not(.focused_event) {
    width: 50%;
}

/* Full width when focused */
.event_merged_container.focused_event {
    width: 100%;
}

/* Background Image Layer */
.event_background_layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.event_background_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* Hover Effect on Background */
.event_merged_container:hover .event_background_image {
    transform: scale(1.1);
    filter: blur(7px) brightness(0.7);
}

/* Content Overlay Layer */
.event_content_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    background: rgba(31, 31, 31, 0.3);
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Show content on hover or when focused */
.event_merged_container:hover .event_content_overlay,
.event_merged_container.focused_event .event_content_overlay {
    opacity: 1;
}

/* Content Wrapper */
.event_info_content {
    text-align: center;
    padding: 2rem;
    max-width: 90%;
}

/* ############################################### */
            /* Legacy Support - Hidden */
/* ############################################### */

.event_other_container {
    width: 100%;
    z-index: 5;
    transition: .5s;    
}

.event_bar_bachelor_container, .event_beer_pong_container {
    display: none; /* Hide legacy containers */
}

.event_other_wrapper,
.event_bar_bachelor_wrapper, 
.event_beer_pong_wrapper {
    display: none; /* Hide legacy wrappers */
}

#bar_bachelor_img, 
#beer_pong_img,
#other_event_img {
    display: none; /* Hide legacy images */
}

.event_title_bar_bachelor,
.event_title_beer_pong {
    display: none; /* Hide legacy titles */
}

.event_info_container_right,
.event_info_container_left,
.event_info_container_center {
    display: none; /* Hide legacy info containers */
}

/* ############################################### */
            /* Event Info */
/* ############################################### */

.event_category_info {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    background: rgba(31, 31, 31, 0.9);
    border: 2px solid #fff;
    transition: all 0.3s ease;
}

.event_category_info:hover {
    background: rgba(255, 255, 255, 0.2);
}

.event_info_title_btn_container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
}

.event_info_title {
    font-family: "Roboto Condensed";
    font-size: clamp(2rem, 4vw, 5.5rem);
    line-height: 1;
    font-weight: 800;    
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.event_info_text {
    font-family: "Roboto Condensed";
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.8rem;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

img.event_ticket_btn_img {
    width: 85%;
    max-width: 300px;
}

/* ############################################### */
            /* Location Items */
/* ############################################### */

.event_location_container {
    margin-top: 2rem;
    max-width: 31rem;
    margin-left: auto;
    margin-right: auto;
}

.event_location_container_other {
    margin-top: 2rem;
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto;
}

.event_location_wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.event_location_item_container {
    display: contents;
    transition: .5s;
}

.event_location_item, 
.event_location_date_item {
    color: #fff;
    font-size: 1.3rem;
    padding: .3rem .4rem;
    border: 2px solid #fff;
    width: 9rem;
    text-align: center;
    margin: 0.6rem;
    background: rgba(31, 31, 31, 0.7);
    transition: all 0.3s ease;
}

.event_location_item:hover,
.event_location_date_item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.event_location_link, 
a.event_location_date_link {
    text-decoration: none!important;
    cursor: pointer;
}

.event_location_date_container {
    opacity: 0;
    z-index: -5;
    position: absolute;
    top: 0;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.event_location_item.has_dates:hover + .event_location_date_container,
.event_location_date_container:hover {
    opacity: 1;
    z-index: 10;
}

/* ############################################### */
            /* Utility Classes */
/* ############################################### */

.map_img_blurred {
    filter: blur(7px);
}

.clicked_event {
    z-index: -1;
}

/* ############################################### */
            /* Large Screens - Prevent Image Stretching */
/* ############################################### */

/* Extra Large Screens (min-width: 1400px) */
@media screen and (min-width: 1400px) {
    .event_background_layer {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #1f1f1f;
    }
    
    .event_background_image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 20%; /* Center horizontally, 20% from top */
    }
}

/* Ultra Wide Screens (min-width: 1800px) */
@media screen and (min-width: 1800px) {
    .event_background_image {
        width: auto;
        height: 120%; /* Make image taller than container */
        max-width: none;
        object-fit: initial;
        position: relative;
        top: -10%; /* Shift image up to show faces */
        left: 50%;
        transform: translateX(-50%);
    }
    
    .event_merged_container:hover .event_background_image {
        filter: blur(7px) brightness(0.7);
    }
}

/* Maximum/Ultra Wide Screens (min-width: 2200px) */
@media screen and (min-width: 2200px) {
    .event_background_image {
        width: auto;
        height: 140%; /* Even taller for ultra-wide */
        top: -20%; /* Shift more to show upper portion */
    }
}

/* For truly massive screens (min-width: 2800px) */
@media screen and (min-width: 2800px) {
    .event_background_image {
        width: 100%;
        height: auto;
        min-height: 100%;
        object-fit: contain; /* Show full image */
        object-position: center center;
        background-color: #1f1f1f;
        top: 0;
        transform: none;
    }
}

/* Large Screens (min-width: 1200px) */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .event_background_image {
        object-position: center 20%; /* Good for medium-large screens */
    }
    
    /* Ensure content doesn't spread too wide */
    .event_info_content {
        max-width: 1000px;
    }
}

/* ############################################### */
            /* RESPONSIVE SECTION */
/* ############################################### */

/* Tablet (max-width: 991px) */
@media screen and (max-width: 991px) and (-webkit-min-device-pixel-ratio: 1) {
    /* Container Layout */
    .event_category_container {
        flex-direction: column;
    }
    
    .event_category_container .event_merged_container:not(.focused_event) {
        width: 100%;
        height: 50vh;
    }
    
    .event_merged_container.focused_event {
        height: 100vh;
    }
    
    /* Always show content on mobile */
    .event_content_overlay {
        opacity: 1;
        background: rgba(31, 31, 31, 0.5);
    }
    
    /* Disable hover effects on mobile */
    .event_merged_container:hover .event_background_image {
        transform: none;
        filter: none;
    }
    
    /* Typography adjustments */
    .event_info_title {
        font-size: clamp(1.8rem, 5vw, 3rem);
    }
    
    /* Scrollable containers */
    .event_location_container, 
    .event_location_container_other {
        max-height: 16rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Custom scrollbar */
    .event_location_container::-webkit-scrollbar, 
    .event_location_container_other::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 5px;
    }

    .event_location_container::-webkit-scrollbar:vertical, 
    .event_location_container_other::-webkit-scrollbar:vertical {
        width: 5px;
    }

    .event_location_container::-webkit-scrollbar:horizontal, 
    .event_location_container_other::-webkit-scrollbar:horizontal {
        height: 5px;
    }

    .event_location_container::-webkit-scrollbar-thumb, 
    .event_location_container_other::-webkit-scrollbar-thumb {
        background: #343434;
        border-radius: 2px;
    }

    .event_location_container::-webkit-scrollbar-track, 
    .event_location_container_other::-webkit-scrollbar-track {
        background-color: #1f1f1f;
    }
    
    /* Hide category info on mobile tablets */
    .event_category_info {
        opacity: 1; /* Changed from 0 to 1 to keep visible */
    }
    
    /* Legacy support for old structure */
    .page-id-33200 .event_bar_bachelor_container,  
    .page-id-4311 .event_bar_bachelor_container {
        display: none;
    }
    
    .clicked_event #bar_bachelor_img, 
    .clicked_event #beer_pong_img,
    .clicked_event .event_title_bar_bachelor, 
    .clicked_event .event_title_beer_pong {
        opacity: 0;
    }
}

/* Phone (max-width: 768px) */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
    .event_info_content {
        padding: 1.5rem;
    }
    
    .event_info_title {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
        margin-bottom: 1rem;
    }
    
    .event_location_container,
    .event_location_container_other {
        max-width: 90%;
    }
    
    .event_location_item,
    .event_location_date_item {
        font-size: 1.1rem;
        width: 7rem;
        margin: 0.4rem;
    }
    
    .event_category_info {
        bottom: 1rem;
        right: 1rem;
        font-size: 1.2rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Small Phone (max-width: 605px) */
@media screen and (max-width: 605px) and (-webkit-min-device-pixel-ratio: 1) {
    .event_location_container,
    .event_location_container_other {
        max-width: 90%;
    }
}

/* Small Phone (max-width: 480px) */
@media screen and (max-width: 480px) {
    .event_info_content {
        padding: 1rem;
    }
    
    .event_info_title {
        font-size: clamp(1.3rem, 7vw, 2rem);
    }
    
    .event_location_item,
    .event_location_date_item {
        font-size: 1rem;
        width: 6rem;
        margin: 0.3rem;
        padding: 0.25rem 0.3rem;
    }
    
    .event_info_text {
        font-size: 1.4rem;
    }
    
    .event_ticket_btn_img {
        width: 70%;
    }
}

/* Extra Small Phone (max-width: 367px) */
@media screen and (max-width: 367px) and (-webkit-min-device-pixel-ratio: 1) {
    .event_location_container, 
    .event_location_container_other {
        max-height: 17.1rem;
        overflow-y: scroll;
    }
    
    .event_location_item, 
    .event_location_date_item {
        font-size: 0.9rem;
        width: 5.5rem;
        margin: 0.25rem;
    }
    
    .event_info_title {
        font-size: 1.2rem;
    }
    
    .event_category_info {
        font-size: 1rem;
        padding: 0.3rem 0.6rem;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .event_merged_container,
    .event_background_image,
    .event_content_overlay,
    .event_location_item,
    .event_location_date_item,
    .event_category_info,
    .event_location_item_container {
        transition: none;
    }
    
    .event_merged_container:hover .event_background_image {
        transform: none;
    }
}