#homeContainer{
    display:flex;
    max-width:1250px;
    margin:30px auto;
    flex-direction: row;
}

#leftContainer{
    flex: 1;
    min-width: 0;
    order: 1;
}

#recentEvents{
    min-height:200px;
}

#latestPhotos{
    min-height: 200px;
}

#comingAttractions{
    min-height:200px;
    background-color:#FFF;
}

.summary{font-weight:bold; color:#333; margin-top:10px}
.summary:hover{cursor: pointer}
div.clickMe{color:blue}

#screen{display:none; width:2500px; height:3000px; top: 0; left:-100px; background-color:#000; opacity:0.5; padding:0; margin:0; position:fixed; z-index: 1}
#descriptionTarget{
    position:relative;
    margin:5% auto;
    max-width:700px;
    top:-50px;
    background-color: #FFFFFF;
    padding:30px 20px;
    border:4px solid #484;
    border-radius:20px;
    text-align:left
}
#descriptionTarget .dt1{
    overflow:auto;
    /* max-height:400px; */
    margin:0;
    padding:0 20px 0 0
}
#outerDescription{
    top:0;
    display:none;
    position:fixed;
    width:100%;
    z-index:10;
    background-color: transparent;
}
#descriptionTarget img.closeButton{position:absolute; width:30px; top:15px; right:15px}
#descriptionTarget .dt2{text-align:center}
#descriptionClose{
    margin:20px auto;
    width:60px;
}
.middleBlog p{text-align:justify}
.middleBlog{padding: 30px 0}


.tt-item{height:150px; overflow-x:hidden; overflow-y: scroll}
.tt-item p{font-size: .85em}


/* Modal styling */
#eventModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 600px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    max-height: 80vh; /* Prevents modal from overflowing viewport */
    overflow-y: auto; /* Allows modal to scroll if needed */
}

/* Overlay for background blur effect */
#modalOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.close-btn {
    float: right;
    cursor: pointer;
    font-size: 20px;
}

/* Scrollable event list */
#eventList {
    max-height: 60vh; /* Ensures scrolling inside modal */
    overflow-y: auto;
    padding-right: 10px;
}

.event-item {
    margin-bottom: 15px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    #eventModal {
        width: 90%; /* Makes it take most of the screen width */
        max-width: none; /* Removes the max-width constraint */
        padding: 15px;
    }
}
/* end Modal */


#webcamContainer{
    width:100%;
    margin-top:10px;
    margin-left:0;
    aspect-ratio: 16/9;
}

#weatherContainer {
    width: 100%;
    margin-top: 10px;
    margin-left: 0;
    clear: both;
    /* no aspect-ratio — let content height drive it */
}
/* Desktop: keep your left offset + fixed height if you want */



/* Make iframe fill container */
#webcamContainer iframe{
    width:100%;
    aspect-ratio: 16/9;
    border:0;
}

#weatherContainer iframe{
    width: 100%;
    border: 0;
    display: block;
}





@media only screen and (max-width: 900px) {
    #homeContainer { flex-direction: column; margin: 0 !important; padding: 0 !important; }
    #rightContainer { width: 97%; margin: 0 auto; order: 2; }
    #leftContainer { width: 100%; margin: 0; order: 1; flex-direction: column; }
    #leftContainer p { font-size: 16px !important; }

    #leftContainer > div {
        scroll-snap-align: start;
        flex: 0 0 100%;   /* each panel = full width */
        width: 100%;
        overflow: hidden;
    }

    #weatherContainer {
        overflow-x: hidden;  /* locked until pinched */
        touch-action: pan-y; /* single finger scrolls page vertically only */
    }
    #weatherContainer.expanded {
        overflow-x: scroll;  /* unlocked after pinch */
        touch-action: pan-x pan-y; /* allows horizontal scroll when expanded */
    }
}




@media only screen and (min-width: 901px){
    #rightContainer{
        margin:0 0 0 20px;
        width:20%;
        min-width:200px;
        order:2;
    }
    #carouselDots { display: none; }
}