/* ZHIYAR — header banner slider frame, matching the site's glass/rounded aesthetic.
   Height is locked to the actual banner artwork's own 1983x793 (~2.5:1) ratio via
   aspect-ratio, not a fixed pixel value — so as the viewport grows/shrinks the
   banner scales as one piece (no stretching, no inconsistent cropping) and shows
   the full image at its native resolution with no forced crop. */

.zhb-banner-wrapper {
	/* No bottom margin of its own — the minimal gap to the story rail below
	   is set entirely via .zhiyar-home's padding-top, so it isn't doubled up. */
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	/* Never grows past the artwork's native resolution — keeps it crisp, not upscaled/blurry. */
	max-width: 1983px;
}

.zhb-swiper {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1983 / 793;
}

.zhb-swiper .swiper-wrapper,
.zhb-swiper .swiper-slide {
	height: 100%;
}

.zhb-swiper .swiper-slide a,
.zhb-swiper .swiper-slide picture {
	display: block;
	height: 100%;
}

.zhb-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transform: scale(1);
	transition: transform 6.5s ease-out;
	will-change: transform;
}

/* Subtle, minimal "Ken Burns" drift on the active slide — motion without being loud. */
.zhb-swiper .swiper-slide-active img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.zhb-swiper .swiper-slide img {
		transition: none;
	}

	.zhb-swiper .swiper-slide-active img {
		transform: none;
	}
}

.zhb-swiper .swiper-pagination-bullet {
	background: rgba(255, 255, 255, 0.6);
	opacity: 0.8;
}

.zhb-swiper .swiper-pagination-bullet-active {
	background: var(--ast-global-color-0, #c9a054);
	opacity: 1;
}

.zhb-swiper .swiper-button-next,
.zhb-swiper .swiper-button-prev {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(18, 36, 28, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #f5f0e6;
}

.zhb-swiper .swiper-button-next:after,
.zhb-swiper .swiper-button-prev:after {
	font-size: 16px;
}

/* Mobile: framed with side margins + rounded glass edges, matching cards elsewhere on the site.
   Height still follows the same aspect-ratio — only the decorative frame changes here.
   Tablet keeps the edge-to-edge desktop treatment; only real phones (<=599px) get this. */
@media (max-width: 599px) {
	.zhb-banner-wrapper {
		padding: 0 14px;
		margin: 0;
	}

	.zhb-swiper {
		border-radius: 16px;
		border: 1px solid rgba(255, 255, 255, 0.5);
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06));
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		box-shadow:
			0 12px 28px -12px rgba(13, 31, 23, 0.28),
			0 2px 8px rgba(13, 31, 23, 0.08),
			inset 0 0 0 1px rgba(201, 160, 84, 0.35);
	}

	.zhb-swiper .swiper-slide img {
		border-radius: 15px;
	}
}