/* ============================================================
   Hero Slideshow — dependency-free replacement for Owl Carousel
   No jQuery, no third-party library. Pure CSS transform + JS.
   ============================================================ */

.hero-slideshow{
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #fff;
}

.hero-slideshow .hero-track{
	display: flex;
	transition: transform 600ms ease-in-out;
}

.hero-slideshow .hero-slide{
	flex: 0 0 100%;
	width: 100%;
	aspect-ratio: 21 / 7;
	position: relative;
}

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

/* Arrows */
.hero-slideshow .hero-nav{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	background-color: rgba(255,255,255,0.8);
	border: none;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	color: #333;
	cursor: pointer;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 200ms ease-in-out;
}

.hero-slideshow .hero-nav:hover{
	background-color: rgba(255,255,255,0.95);
}

.hero-slideshow .hero-prev{ left: 20px; }
.hero-slideshow .hero-next{ right: 20px; }

/* Dots */
.hero-slideshow .hero-dots{
	position: absolute;
	bottom: 14px;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 5;
}

.hero-slideshow .hero-dots button{
	width: 20px;
	height: 4px;
	border: none;
	padding: 0;
	margin: 0 4px;
	background: rgba(255,255,255,0.6) !important;
	cursor: pointer;
	vertical-align: middle;
}

.hero-slideshow .hero-dots button.active{
	background: #faad1e !important;
}

@media (max-width: 576px){
	.hero-slideshow .hero-nav{
		width: 34px;
		height: 34px;
		font-size: 14px;
	}
	.hero-slideshow .hero-prev{ left: 8px; }
	.hero-slideshow .hero-next{ right: 8px; }
	.hero-slideshow .hero-slide{
		aspect-ratio: 4 / 3;
	}
}