/* Start of Event Slider Homepage */

/* Responsive Container */
		
.eventwrapper {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    border: lightgrey;
    height: 350px; 
    background-color: black;
    background: url('/sites/default/files/2025-01/Tiny%20Squares%20Background.webp');
    display: flex; /* Keep flex for side-by-side behavior */
    flex-wrap: wrap;
    align-items: center;
}

/* --- LAYOUT FIX: #eventone and #eventtwo side-by-side --- */

#eventone {
    width: 35%; 
    padding: 0; /* Keep padding at 0 for max image space */
    height: 350px; 
    box-sizing: border-box;
}



#eventtwo {
overflow: hidden;
width: 65%; /* Takes up the remaining 65% of width */
padding: 25px 0;
height: 350px;
}

/* Ensure the flip containers also use this fixed height */
.flip-container,
.flipper {
    height: 100%;
}

/* Ensure #eventone img scales correctly within its column */
#eventone img {
    max-width: 100%;
    height: 100%; 
    width: 100%; 
    object-fit: cover;
    display: block;
    padding: 25px;
}

/* Removed the blanket display: none; from .event-carousel. 
   The JS will apply display: block; after initialization. */
		
/* Event Slider */
.carousel-container {
position: relative;
width: 100%;
}

/* Base Padding for slick-list: Updated to handle slide clipping on desktop/large screens */
/*.slick-list {padding: 30px 0;} */
		
.event-slide {
background-repeat: no-repeat repeat;
background-size: cover;
background-position: center;
border-radius: 20px;
}
		
.eventwrapper .event-slide {
padding: 10px;
width: 300px;
height: auto;
text-align: center;
max-height: 335px;
margin: 15px;
border: solid darkgrey 2px;
}
	
	@media only screen and (max-width: 728px) {
		.eventwrapper .event-slide { width: 150px; margin: 15px; }
	}
	
	/* Highlight Center Slide */
.slick-center {
transform: scale(1.2);
}

	.event-slide * {
		color: #fff;
		text-decoration: none;
	}

	.eventwrapper .slick-slide img {
		width: 90%; 
		height: 100px; 
		display: block; 
		object-fit: contain; 
		margin: 0 auto;
	}

/* Arrow Styling (Unchanged, but important for visibility) */
.custom-arrow {
    position: absolute;
    top: 50%;
    background: #fff;
    transform: translateY(-50%);
    padding: 20px;
    cursor: pointer;
    z-index: 100; /* High z-index to be above the slides */
    border-radius: 30px;
}
.custom-prev { left: 1%; }
.custom-next { right: 1%; }
	
/* Button and Text Styling (Unchanged) */
	.event-btn-container {
		display: flex;
		width: 50%;
		margin: 0 auto;
	}
	
	#hp-sldr-btn-3-2025:hover {
box-shadow: 0 0 10px #fff;
}

	.event-btn1 {
background-color: rgb(65, 105, 225);
display: block;
font-size: 1.5vw;
font-family: calibri, sans-serif; /* Corrected font family */
padding: 10px;
 border-width: 0px;
border-style: initial;
border-color: initial;
border-image: initial;
margin: 0px auto;
 border-radius: 20px;
	}

	.event-slide .more {
 font-size: 1.2vw;
 font-family: calibri, sans-serif;
 font-weight: 100;
	}

	.event-slide h3 {
		font-size: 1.5vw;
 font-family: calibri, sans-serif;
 font-weight: 100;
		
	}
	
	.event-slide p { font-size: 18px; line-height: 15px; margin: 10px; }
		
	.event-slide p {
 font-size: 1.2vw;
 line-height: 15px;
 font-family: calibri, sans-serif;
 font-weight: 100;
 margin: 10px;
	}

/* Arrow Shapes (Unchanged) */
.custom-arrow.custom-prev::before {
content: " ";
border-left: 5px solid #000;
 border-bottom: 5px solid #000;
 width: 20px;
height: 20px;
 transform: rotate(45deg);
 cursor: pointer;
 display: block;
}

.custom-arrow.custom-next::before {
 content: " ";
 border-right: 5px solid #000;
 border-top: 5px solid #000;
 width: 20px;
 height: 20px;
 transform: rotate(45deg);
 cursor: pointer;
 display: block;
}


	/* Hide slider on load classes (Kept for compatibility, controlled by JS) */
	.event-slider-hide {display: none;}
	.event-slider-show {display: block;}
	
	
/* Tablet and Mobile Media Queries: Forces single column layout on smaller devices */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait),
       only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape),
       only screen and (max-device-width: 812px) {
       	
  .slick-list {padding: 10px !important;}
  .slick-center { transform: scale(1.1); }
       	
  #eventone {margin: 10px;}
/* Ensures stacking on mobile/tablet by removing the desktop floats */
	#eventone, #eventtwo {
		float: none;
 width: 100%;
 height: unset;
	}
	.eventwrapper { height: auto; }
	#eventone img { width: 100%; }
/* ... rest of mobile styles ... */
 .event-slide h3 {font-size: 2.5vw;}
	.event-slide p { font-size: 2.5vw;}
	.event-slide .more {font-size: 3.5vw;}
	.event-btn1 {font-size: 3.5vw;}
	.event-btn-container { width: 100%; }
}

/* --- 2K Screen Adjustments (Min-Width 2000px) --- */

@media only screen and (min-width: 2000px) {
    /* Item Sizing */
 .eventwrapper .event-slide { width: 400px; max-height: 450px; margin: 25px; }

    /* Typography Cap */
 .event-slide h3, .event-slide .more { font-size: 26px; }
 .event-slide p { line-height: 20px; font-size: 20px; }
 .event-btn1 { font-size: 24px; padding: 15px 20px; }

 /* Center Slide Scale & Padding Fix */
 .slick-center { transform: scale(1.3); }
    .slick-list { padding: 25px 100px 25px 100px; }
}

/* --- 4K+ Screen Adjustments (Min-Width 3840px) --- */

@media only screen and (min-width: 3840px) {
    /* Item Sizing */
 .eventwrapper .event-slide { width: 600px; max-height: 650px; margin: 40px; }

    /* Typography Cap */
 .event-slide h3, .event-slide .more { font-size: 36px; }
 .event-slide p { line-height: 30px; font-size: 28px; }
 .event-btn1 { font-size: 34px; padding: 20px 30px; }

 /* Center Slide Scale & Padding Fix */
 .slick-center { transform: scale(1.4); }
    .slick-list { padding: 25px 150px 25px 150px; }
}
/* End of Event Slider Homepage */