/* Lazy Block: slider - premium swipe image carousel. */

.slider {
	--slider-slide-width: 1024px;
	--slider-slide-height: 600px;
	--slider-gap: 12px;
	--slider-track-offset: 0px;
	--slider-transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	width: 100%;
	padding: 80px 0 56px;
	background: transparent;
	overflow: hidden;
	outline: none;
}

.slider:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.slider__viewport {
	position: relative;
	width: 100%;
	/* Match viewport height to the active slide so arrows stay centered. */
	min-height: var(--slider-slide-height);
	overflow: hidden;
	/* Keep horizontal swipe while allowing page vertical scroll. */
	touch-action: pan-y;
}

.slider__track {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--slider-gap);
	padding: 0;
	will-change: transform;
	transform: translate3d(var(--slider-track-offset), 0, 0);
	transition: var(--slider-transition);
	user-select: none;
	-webkit-user-select: none;
	cursor: grab;
}

.slider__track.is-dragging {
	transition: none;
	cursor: grabbing;
}

.slider__slide {
	position: relative;
	flex: 0 0 auto;
	width: var(--slider-slide-width);
	max-width: 90vw;
	height: var(--slider-slide-height);
	transition: opacity 400ms ease, transform 400ms ease;
	opacity: 0.45;
	transform: scale(0.985);
}

.slider__slide.is-active {
	opacity: 1;
	transform: scale(1);
}

.slider__media {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #f2f2f2;
}

.slider__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.slider__caption {
	margin: 8px auto 0;
	padding: 0;
	max-width: 1024px;
	font-family: 'Sofia Pro', 'Inter', system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 18px;
	letter-spacing: -0.05em;
	color: #969696;
	text-align: center;
	transition: opacity 240ms ease;
}

.slider__caption.is-fading {
	opacity: 0;
}

/* Prev / next arrows - same visual language as value-chain-slider. */
.slider__nav {
	position: absolute;
	inset: 0 88px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}

.slider__nav-btn {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	padding: 0;
	border: 2.66px solid rgba(245, 245, 245, 0.33);
	border-radius: 32px;
	background: rgba(245, 245, 245, 0.33);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	cursor: pointer;
	transition: transform 180ms ease, opacity 180ms ease;
}

.slider__nav-btn:hover {
	transform: scale(1.04);
}

.slider__nav-btn[disabled] {
	opacity: 0.45;
	cursor: default;
	transform: none;
}

.slider__nav-icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
}

.slider__nav-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Tablet <=1280px */
@media (max-width: 1280px) {
	.slider {
		--slider-slide-width: 721.455px;
		--slider-slide-height: 422.727px;
		--slider-gap: 8.455px;
		padding: 64px 0 48px;
	}

	.slider__caption {
		margin-top: 5.636px;
		max-width: 721.455px;
		font-size: 11.273px;
		line-height: 12.682px;
	}

	.slider__nav {
		display: none;
	}
}

/* Mobile <=900px */
@media (max-width: 900px) {
	.slider {
		--slider-slide-width: 331.636px;
		--slider-slide-height: 194.318px;
		--slider-gap: 9px;
		padding: 48px 0 40px;
	}

	.slider__caption {
		margin-top: 9px;
		font-size: 10px;
		line-height: 12px;
		max-width: 331.636px;
	}

	/* On mobile arrows interfere with swipe, so we hide them. */
	.slider__nav {
		display: none;
	}
}