/* =========================================================
Hero session Layout
========================================================= */

.vbxwoo-hero-main,
.vbxwoo-hero-side-item {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--vbxwoo-light);
}

.vbxwoo-hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Desktop: keep banner ratio close to the reference image. */
@media (min-width: 992px) {
	.vbxwoo-hero-main {
		height: 268px;
	}

	.vbxwoo-hero-side {
		height: 268px;
	}

	.vbxwoo-hero-side-item {
		flex: 1 1 0;
		min-height: 0;
	}
}

/* Tablet/mobile */
@media (max-width: 991.98px) {
	.vbxwoo-hero-main {
		aspect-ratio: auto;
		overflow: hidden;
	}

	.vbxwoo-hero-side {
		flex-direction: row !important;
	}

	.vbxwoo-hero-side-item {
		width: 50%;
		aspect-ratio: auto;
		overflow: hidden;
	}
}

/* Small mobile: stack side banners for easier scanning. */
@media (max-width: 575.98px) {
	.vbxwoo-hero-banner {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.vbxwoo-hero-main {
		aspect-ratio: auto;
		overflow: hidden;
	}

	.vbxwoo-hero-side {
		flex-direction: column !important;
	}

	.vbxwoo-hero-side-item {
		width: 100%;
		aspect-ratio: auto;
		overflow: hidden;
	}
}

/* Carousel controls: hidden by default. */
.vbxwoo-hero-control {
	width: 42px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Show carousel controls when the main banner is hovered or focused. */
.vbxwoo-hero-main:hover .vbxwoo-hero-control,
.vbxwoo-hero-main:focus-within .vbxwoo-hero-control {
	opacity: 1;
	visibility: visible;
}

/* Style icon prev/next */
.vbxwoo-hero-control .carousel-control-prev-icon,
.vbxwoo-hero-control .carousel-control-next-icon {
	width: 32px;
	height: 50px;
	background-size: 18px 18px;
	background-color: rgba(0, 0, 0, 0.65);
	transition: background-color 0.2s ease;
}

/* Darken carousel controls on direct hover. */
.vbxwoo-hero-control:hover .carousel-control-prev-icon,
.vbxwoo-hero-control:hover .carousel-control-next-icon {
	background-color: rgba(0, 0, 0, 0.85);
}

.vbxwoo-hero-control .carousel-control-prev-icon,
.vbxwoo-hero-control .carousel-control-next-icon {
	width: 32px;
	height: 50px;
	background-size: 18px 18px;
	background-color: rgba(0, 0, 0, 0.65);
}

.vbxwoo-hero-control:hover .carousel-control-prev-icon,
.vbxwoo-hero-control:hover .carousel-control-next-icon {
	background-color: rgba(0, 0, 0, 0.85);
}

.vbxwoo-hero-main.carousel-fade .carousel-item {
	transition: opacity 0.8s ease-in-out;
}

/* =========================================================
End Hero session Layout
========================================================= */