/**
 * ویجت المنتور — کروسل تصویر
 */

.ns-el-img-carousel {
	--ns-img-carousel-height: 420px;
	--ns-img-carousel-overlay-color: #000000;
	--ns-img-carousel-overlay-opacity: 0.25;
	--ns-img-carousel-arrow-color: #ffffff;
	--ns-img-carousel-arrow-bg: rgba(255, 255, 255, 0.15);
	--ns-img-carousel-dot-color: rgba(255, 255, 255, 0.4);
	--ns-img-carousel-dot-active: #ffffff;
	--ns-img-carousel-anim-duration: 0.75s;
	--ns-img-carousel-title-delay: 0.2s;
	--ns-img-carousel-subtitle-delay: 0.1s;
	--ns-img-carousel-btn-delay: 0.45s;
	width: 100%;
}

.ns-el-img-carousel__viewport {
	position: relative;
	width: 100%;
	height: var(--ns-img-carousel-height);
	min-height: 200px;
	overflow: hidden;
	background: #1a1410;
	isolation: isolate;
}

.ns-el-img-carousel__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.ns-el-img-carousel__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 0;
	pointer-events: none;
}

.ns-el-img-carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	pointer-events: auto;
}

/* Transitions */
.ns-el-img-carousel--transition-fade .ns-el-img-carousel__slide {
	transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
}

.ns-el-img-carousel--transition-slide .ns-el-img-carousel__slide {
	transform: translateX(5%);
	transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.7s;
}

.ns-el-img-carousel--transition-slide .ns-el-img-carousel__slide.is-active {
	transform: translateX(0);
}

.ns-el-img-carousel--transition-slide .ns-el-img-carousel__slide.is-leaving {
	transform: translateX(-5%);
}

.ns-el-img-carousel--transition-zoom .ns-el-img-carousel__slide {
	transform: scale(1.05);
	transition: opacity 0.75s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.75s;
}

.ns-el-img-carousel--transition-zoom .ns-el-img-carousel__slide.is-active {
	transform: scale(1);
}

.ns-el-img-carousel--transition-zoom .ns-el-img-carousel__slide.is-leaving {
	transform: scale(0.97);
	opacity: 0;
}

/* Media */
.ns-el-img-carousel__slide-link {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	text-decoration: none;
}

.ns-el-img-carousel__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.ns-el-img-carousel__media-inner {
	width: 100%;
	height: 100%;
	will-change: transform;
}

.ns-el-img-carousel--ken-burns .ns-el-img-carousel__slide.is-active .ns-el-img-carousel__media-inner {
	animation: ns-img-carousel-ken-burns var(--ns-img-carousel-autoplay, 5.5s) ease-out forwards;
}

@keyframes ns-img-carousel-ken-burns {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.08);
	}
}

.ns-el-img-carousel__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--ns-img-carousel-object-position, center right);
	display: block;
}

.ns-el-img-carousel__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--ns-img-carousel-overlay-color) calc(var(--ns-img-carousel-overlay-opacity, 0.25) * 180%), transparent) 0%,
		color-mix(in srgb, var(--ns-img-carousel-overlay-color) calc(var(--ns-img-carousel-overlay-opacity, 0.25) * 80%), transparent) 45%,
		color-mix(in srgb, var(--ns-img-carousel-overlay-color) calc(var(--ns-img-carousel-overlay-opacity, 0.25) * 40%), transparent) 100%
	);
	pointer-events: none;
}

/* Content */
.ns-el-img-carousel__content {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	padding: clamp(24px, 5vw, 48px);
	pointer-events: none;
}

.ns-el-img-carousel__content-inner {
	pointer-events: auto;
}

/* Horizontal align */
.ns-el-img-carousel__content--h-start {
	justify-content: flex-start;
}
.ns-el-img-carousel__content--h-center {
	justify-content: center;
}
.ns-el-img-carousel__content--h-end {
	justify-content: flex-end;
}

/* Vertical align */
.ns-el-img-carousel__content--v-start {
	align-items: flex-start;
}
.ns-el-img-carousel__content--v-center {
	align-items: center;
}
.ns-el-img-carousel__content--v-end {
	align-items: flex-end;
}

.ns-el-img-carousel__content--h-center .ns-el-img-carousel__content-inner {
	text-align: center;
	margin-inline: auto;
}

.ns-el-img-carousel__content--h-end .ns-el-img-carousel__content-inner {
	text-align: end;
	margin-inline-start: auto;
}

@media (max-width: 1024px) {
	.ns-el-img-carousel__content--tablet-h-start {
		justify-content: flex-start;
	}
	.ns-el-img-carousel__content--tablet-h-center {
		justify-content: center;
	}
	.ns-el-img-carousel__content--tablet-h-end {
		justify-content: flex-end;
	}
	.ns-el-img-carousel__content--tablet-v-start {
		align-items: flex-start;
	}
	.ns-el-img-carousel__content--tablet-v-center {
		align-items: center;
	}
	.ns-el-img-carousel__content--tablet-v-end {
		align-items: flex-end;
	}
	.ns-el-img-carousel__content--tablet-h-center .ns-el-img-carousel__content-inner {
		text-align: center;
		margin-inline: auto;
	}
	.ns-el-img-carousel__content--tablet-h-end .ns-el-img-carousel__content-inner {
		text-align: end;
		margin-inline-start: auto;
	}
}

@media (max-width: 767px) {
	.ns-el-img-carousel__content--mobile-h-start {
		justify-content: flex-start;
	}
	.ns-el-img-carousel__content--mobile-h-center {
		justify-content: center;
	}
	.ns-el-img-carousel__content--mobile-h-end {
		justify-content: flex-end;
	}
	.ns-el-img-carousel__content--mobile-v-start {
		align-items: flex-start;
	}
	.ns-el-img-carousel__content--mobile-v-center {
		align-items: center;
	}
	.ns-el-img-carousel__content--mobile-v-end {
		align-items: flex-end;
	}
	.ns-el-img-carousel__content--mobile-h-center .ns-el-img-carousel__content-inner {
		text-align: center;
		margin-inline: auto;
	}
	.ns-el-img-carousel__content--mobile-h-end .ns-el-img-carousel__content-inner {
		text-align: end;
		margin-inline-start: auto;
	}
}

.ns-el-img-carousel__subtitle {
	margin: 0 0 10px;
	font-size: clamp(12px, 1.4vw, 14px);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(20px);
}

.ns-el-img-carousel__title {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 600;
	line-height: 1.15;
	opacity: 0;
	transform: translateY(24px);
}

.ns-el-img-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
	border: none;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.3;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	opacity: 0;
	transform: translateY(20px);
}

.ns-el-img-carousel__btn:hover,
.ns-el-img-carousel__btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Staggered entrance */
.ns-el-img-carousel__slide.is-active [data-animate='subtitle'] {
	animation: ns-img-carousel-fade-up var(--ns-img-carousel-anim-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--ns-img-carousel-subtitle-delay) forwards;
}

.ns-el-img-carousel__slide.is-active [data-animate='title'] {
	animation: ns-img-carousel-fade-up var(--ns-img-carousel-anim-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--ns-img-carousel-title-delay) forwards;
}

.ns-el-img-carousel__slide.is-active [data-animate='btn'] {
	animation: ns-img-carousel-fade-up var(--ns-img-carousel-anim-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--ns-img-carousel-btn-delay) forwards;
}

@keyframes ns-img-carousel-fade-up {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Navigation */
.ns-el-img-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--ns-img-carousel-arrow-bg);
	color: var(--ns-img-carousel-arrow-color);
	font-size: 14px;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
	opacity: 0;
}

.ns-el-img-carousel:hover .ns-el-img-carousel__arrow,
.ns-el-img-carousel__arrow:focus-visible {
	opacity: 1;
}

.ns-el-img-carousel__arrow:hover,
.ns-el-img-carousel__arrow:focus-visible {
	background: color-mix(in srgb, var(--ns-img-carousel-arrow-bg) 70%, #ffffff);
	transform: translateY(-50%) scale(1.05);
}

.ns-el-img-carousel__arrow--prev {
	inset-inline-start: 16px;
}

.ns-el-img-carousel__arrow--next {
	inset-inline-end: 16px;
}

.ns-el-img-carousel__dots {
	position: absolute;
	inset-inline: 0;
	bottom: 16px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ns-el-img-carousel__dot {
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--ns-img-carousel-dot-color);
	cursor: pointer;
	transition: transform 0.25s ease, background 0.25s ease, width 0.25s ease;
}

.ns-el-img-carousel__dot.is-active {
	width: 24px;
	border-radius: 999px;
	background: var(--ns-img-carousel-dot-active);
}

.ns-el-img-carousel__dot:hover,
.ns-el-img-carousel__dot:focus-visible {
	transform: scale(1.15);
}

@media (max-width: 767px) {
	.ns-el-img-carousel__arrow {
		width: 36px;
		height: 36px;
		font-size: 12px;
		opacity: 1;
	}

	.ns-el-img-carousel__title {
		font-size: clamp(1.35rem, 6vw, 2rem);
	}
}