/* ==========================================================================
   [kw_hero_slider] — Big Hero slider.
   Ported from the flatsome-steroids child theme (UX Builder preview block
   removed — this theme has no builder).
   ========================================================================== */

/* ── Swiper structural rules ──────────────────────────────────────────────
   Swiper's own 18 KB stylesheet is NOT loaded — it is almost entirely themes
   for arrows/bullets/scrollbar that we style ourselves below. These are the
   only rules Swiper genuinely needs to lay slides out and animate them.
   Kept scoped to this block so no other Swiper on the site is affected. */

.kw-hero-slider .swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	box-sizing: content-box;
	transform: translate3d(0, 0, 0);
	transition-property: transform;
}

.kw-hero-slider .swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	position: relative;
	transition-property: transform;
}

.kw-hero-slider.swiper-horizontal > .swiper-wrapper,
.kw-hero-slider .swiper-horizontal > .swiper-wrapper {
	flex-direction: row;
}

.kw-hero-slider .swiper-backface-hidden .swiper-slide {
	transform: translateZ(0);
	backface-visibility: hidden;
}

/* Screen-reader live region Swiper injects for a11y. */
.kw-hero-slider .swiper-notification {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	opacity: 0;
	z-index: -1000;
}

/* ── Block ────────────────────────────────────────────────────────────── */

.kw-hero-slider {
	position: relative;
	overflow: hidden;
}

.kw-hero-slider__track {
	position: relative;
}

.kw-hero-slider__swiper {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.kw-hero-slider__slides {
	align-items: stretch;
}

/* ── Slides ───────────────────────────────────────────────────────────── */

.kw-hero-slider__slide {
	height: auto !important;
	flex-shrink: 0 !important;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.kw-hero-slider__slide > * {
	max-width: 100%;
}

/* <picture> is inline by default — make it (and the link/div wrapper around
   it) a block so the image fills the slide box. */
.kw-hero-slider__picture,
.kw-hero-slider__slide-inner,
.kw-hero-slider__slide-link {
	display: block;
	width: 100%;
	height: 100%;
}

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

/* ── Pre-init height reservation (CLS fix) ────────────────────────────────
   Until Swiper adds .swiper-initialized, reserve the slider viewport at the
   hero image ratio and pin every slide to 100% width so content below
   doesn't jump on init / image load.
   Ratios match the hero artwork: 1920×815 desktop, 1080×1080 mobile. */

.kw-hero-slider__swiper:not(.swiper-initialized) {
	aspect-ratio: 1920 / 815;
}

@media (max-width: 576px) {
	.kw-hero-slider__swiper:not(.swiper-initialized) {
		aspect-ratio: 1 / 1;
	}
}

.kw-hero-slider__swiper:not(.swiper-initialized) .kw-hero-slider__slides {
	height: 100%;
}

.kw-hero-slider__swiper:not(.swiper-initialized) .kw-hero-slider__slides > * {
	width: 100%;
	flex-shrink: 0;
}

/* ── Arrows — small bordered buttons, quiet on a light page ───────────── */

.kw-hero-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: #ffffff;
	border: none;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	padding: 0;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: box-shadow 0.2s;
}

.kw-hero-slider__arrow:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.kw-hero-slider__arrow:focus-visible {
	outline: 2px solid #1e98d4;
	outline-offset: 2px;
}

.kw-hero-slider__arrow--prev { left: 12px; }
.kw-hero-slider__arrow--next { right: 12px; }

.kw-hero-slider__arrow.swiper-button-disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

.kw-hero-slider__arrow-icon {
	display: block;
	width: 16px;
	height: 16px;
}

.kw-hero-slider__arrow-icon path {
	fill: #1e98d4;
	transition: fill 0.2s;
}

.kw-hero-slider__arrow:hover .kw-hero-slider__arrow-icon path {
	fill: #147db1;
}

.kw-hero-slider__arrow.swiper-button-disabled .kw-hero-slider__arrow-icon path {
	fill: #9aa3ab;
}

/* ── Pagination — small grey dots, accent for the current slide ───────── */

.kw-hero-slider__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 20px;
}

.kw-hero-slider__pagination .swiper-pagination-bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #c4c9ce;
	opacity: 1;
	cursor: pointer;
	transition: background 0.2s;
}

.kw-hero-slider__pagination .swiper-pagination-bullet-active {
	background: #1e98d4;
}

/* ── Scrollbar — centered blur pill over the bottom edge ──────────────── */

.kw-hero-slider__scrollbar-wrapper {
	position: absolute;
	bottom: 10px;
	z-index: 1;
	width: 250px;
	left: 50%;
	transform: translateX(-50%);
	padding: 14px 20px;
	backdrop-filter: blur(10px);
	background: #00000026;
	border-radius: 13px;
	overflow: hidden;
}

.kw-hero-slider__scrollbar {
	background: #ffffff21;
	position: unset;
}

.kw-hero-slider__scrollbar .swiper-scrollbar-drag {
	background: #fff;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */

@media (max-width: 849px) {
	.kw-hero-slider__arrow--prev { left: 8px; }
	.kw-hero-slider__arrow--next { right: 8px; }

	.kw-hero-slider__pagination {
		padding: 12px 20px;
	}
}

@media (max-width: 576px) {
	.kw-hero-slider__arrow {
		width: 32px;
		height: 32px;
	}

	.kw-hero-slider__arrow-icon {
		width: 12px;
		height: 12px;
	}

	.kw-hero-slider__pagination {
		padding: 10px 16px;
	}
}