/* =============================================
   WRAPPER — contains slider + overlay grid
   ============================================= */

.banner-boxes-wrapper {
	position: relative;
	overflow: hidden;
	line-height: 0;
	font-size: 0;
}

/* Kill any margins/padding inside the wrapper that inflate its height */
.banner-boxes-wrapper > *:not(.banner-boxes-grid) {
	margin: 0 !important;
	padding: 0 !important;
}

.banner-boxes-wrapper .slick-dotted.slick-slider {
	margin-bottom: 0 !important;
}

/* =============================================
   GRID — absolute overlay on right side
   ============================================= */

.banner-boxes-grid {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
	z-index: 10;
	box-sizing: border-box;
}

/* =============================================
   BOX
   ============================================= */

.banner-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 12px 10px;
	box-sizing: border-box;
	overflow: hidden;
	min-height: 0;
	font-size: 16px;
	line-height: 1.4;
}

.banner-box-heading {
	display: block;
	font-weight: 700;
	margin-bottom: 0.15em;
	line-height: 1.2;
}

.banner-box-text {
	display: block;
	line-height: 1.3;
	margin-bottom: 0.15em;
}

.banner-box-rate {
	display: block;
	font-weight: 700;
	line-height: 1.1;
}

.banner-box-link {
	display: block;
	font-size: 14px;
	color: #ffffff;
	text-decoration: underline;
	margin-top: 0.3em;
	line-height: 1.3;
}

.banner-box-link:hover {
	color: #ffffff;
	opacity: 0.85;
}

/* =============================================
   SLIDER ARROWS & DOTS FIX
   Slick positions arrows at -25px and dots at
   -25px bottom, which get clipped by the slider's
   overflow:hidden. Move them inside the slider.
   ============================================= */

.eb-slider-wrapper .slick-slider {
	overflow: visible;
}

.eb-slider-wrapper .slick-prev {
	left: 10px;
	z-index: 99;
}

.eb-slider-wrapper .slick-next {
	right: 10px;
	z-index: 99;
}

.eb-slider-wrapper .slick-dots {
	bottom: 10px;
}

/* =============================================
   RESPONSIVE – TABLET
   ============================================= */

@media ( max-width: 1024px ) {
	.banner-boxes-grid {
		width: 35% !important;
	}

	.banner-box {
		padding: 8px 6px;
	}
}

/* =============================================
   RESPONSIVE – MOBILE
   ============================================= */

@media ( max-width: 767px ) {
	.banner-boxes-grid {
		position: static;
		width: 100% !important;
		height: auto;
	}

	.banner-box {
		padding: 16px 12px;
	}

	/* ------------------------------------------
	   Slider mobile fix — override every inline
	   height the slider JS sets so the image
	   scales with the viewport. Lives here so it
	   ships with this plugin, not the slider.
	   ------------------------------------------ */
	.eb-slider-wrapper,
	.eb-slider-wrapper .slick-slider,
	.eb-slider-wrapper .slick-list,
	.eb-slider-wrapper .slick-track,
	.eb-slider-wrapper .slick-slide,
	.eb-slider-wrapper .slick-slide > div,
	.eb-slider-wrapper .eb-slider-item {
		height: auto !important;
		min-height: 0 !important;
	}

	.eb-slider-wrapper .eb-slider-item img {
		width: 100%;
		height: auto !important;
		min-height: 0 !important;
		object-fit: contain;
	}
}