/* Natige — homepage hero: rounded banner aligned with the floating header. */

.hero {
	--hero-blue: #3A78BA;
	--hero-lime: #C6E260;
	--hero-sun: #FCB43C;
	--hero-ink: #243040;
	--hero-stack: var(--nav-stack, 106px);
	--hero-radius: 32px;
	position: relative;
	overflow: visible;
	background: #fff;
	padding: calc(var(--hero-stack) + 12px) 24px 40px;
}

.hero__swiper {
	position: relative;
	width: 100%;
	aspect-ratio: 1672 / 941;
	border-radius: var(--hero-radius);
	overflow: hidden;
	background: #1c2430;
	box-shadow: 0 16px 40px rgba(36, 48, 64, 0.14);
}

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

.hero__banner {
	display: block;
	height: 100%;
	line-height: 0;
}

.hero__banner:focus-visible {
	outline: 3px solid var(--hero-sun);
	outline-offset: -3px;
}

.hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.hero__controls {
	display: contents;
}

.hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--hero-ink);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(36, 48, 64, 0.16);
	transform: translateY(-50%);
	transition: box-shadow 180ms ease, transform 120ms ease;
}

.hero__arrow--prev {
	left: 18px;
}

.hero__arrow--next {
	right: 18px;
}

.hero__arrow i {
	line-height: 1;
}

.hero__arrow:hover {
	box-shadow: 0 10px 24px rgba(36, 48, 64, 0.22);
}

.hero__arrow:focus-visible {
	outline: 2px solid var(--hero-sun);
	outline-offset: 3px;
}

.hero__arrow:active {
	transform: translateY(-50%) scale(0.96);
}

.hero__dots {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto;
	transform: translateX(-50%);
}

.hero__dots .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0;
	opacity: 0.9;
	border-radius: 999px;
	background: #fff;
	transition: width 180ms ease, opacity 180ms ease;
}

.hero__dots .swiper-pagination-bullet-active {
	width: 28px;
	height: 8px;
	opacity: 1;
	background: #fff;
}

@media (max-width: 1199.98px) {
	.hero {
		--hero-radius: 24px;
		padding: calc(var(--hero-stack) + 10px) 8px 28px;
	}

	.hero__arrow {
		width: 40px;
		height: 40px;
		font-size: 24px;
	}

	.hero__arrow--prev {
		left: 12px;
	}

	.hero__arrow--next {
		right: 12px;
	}

	.hero__dots {
		bottom: 16px;
	}
}

@media (max-width: 767.98px) {
	.hero {
		--hero-radius: 20px;
	}

	.hero__swiper {
		aspect-ratio: 4 / 5;
	}

	.hero__img {
		object-position: 12% 32%;
	}

	.hero__arrow {
		width: 36px;
		height: 36px;
		font-size: 22px;
	}

	.hero__arrow--prev {
		left: 10px;
	}

	.hero__arrow--next {
		right: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__arrow,
	.hero__dots .swiper-pagination-bullet {
		transition: none;
	}
}