/**
 * Azizia Slider Manager — front end (on top of Swiper's own CSS).
 * Logical properties + [dir] variants: works RTL (ar) and LTR (fr).
 * Before Swiper loads, the first slide is already laid out (no layout shift).
 */

.az-slider {
	--_ink: var(--az-ink, #0b0b0b);
	--_or: var(--az-orange, #ff6a00);
	--_or-h: var(--az-orange-hover, #e65f00);
	position: relative;
	margin-block: 0 28px;
	font-family: var(--az-font, "IBM Plex Sans Arabic", system-ui, sans-serif);
}

.az-slider__viewport {
	overflow: hidden;
}

.az-slider--hero .az-slider__viewport {
	border-radius: 16px;
	background: var(--_ink);
}

.az-slide {
	position: relative;
	overflow: hidden;
}

.az-slider--promo .az-slide {
	border-radius: 12px;
}

.az-slide__media,
.az-slide__link {
	display: block;
}

.az-slide__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* ---------- Text over the image ---------- */
.az-slide__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
	padding: clamp(18px, 4vw, 56px);
	padding-inline-end: 45%;
	pointer-events: none;
}

.az-slide__content a {
	pointer-events: auto;
}

/* Scrims follow the reading direction (text side = start). */
.az-slide--light .az-slide__content {
	color: #fff;
	background: linear-gradient(to right, rgb(0 0 0 / 0.68), rgb(0 0 0 / 0.35) 45%, rgb(0 0 0 / 0) 75%);
}

[dir="rtl"] .az-slide--light .az-slide__content {
	background: linear-gradient(to left, rgb(0 0 0 / 0.68), rgb(0 0 0 / 0.35) 45%, rgb(0 0 0 / 0) 75%);
}

.az-slide--dark .az-slide__content {
	color: var(--_ink);
	background: linear-gradient(to right, rgb(255 255 255 / 0.88), rgb(255 255 255 / 0.5) 45%, rgb(255 255 255 / 0) 75%);
}

[dir="rtl"] .az-slide--dark .az-slide__content {
	background: linear-gradient(to left, rgb(255 255 255 / 0.88), rgb(255 255 255 / 0.5) 45%, rgb(255 255 255 / 0) 75%);
}

.az-slide--center .az-slide__content {
	align-items: center;
	padding-inline: clamp(18px, 8vw, 120px);
	text-align: center;
}

.az-slide--light.az-slide--center .az-slide__content {
	background: rgb(0 0 0 / 0.45);
}

.az-slide--dark.az-slide--center .az-slide__content {
	background: rgb(255 255 255 / 0.6);
}

.az-slide__eyebrow {
	color: var(--_or);
	font-size: 0.875rem;
	font-weight: 700;
}

.az-slide--dark .az-slide__eyebrow {
	color: var(--az-orange-text, #b84a00);
}

.az-slide__title {
	margin: 0;
	color: inherit;
	font-size: clamp(1.375rem, 1rem + 2vw, 2.75rem);
	font-weight: 700;
	line-height: 1.2;
}

.az-slider--promo .az-slide__title {
	font-size: clamp(1.125rem, 0.95rem + 1vw, 1.75rem);
}

.az-slide__desc {
	max-inline-size: 46ch;
	margin: 0;
	font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.0625rem);
	line-height: 1.65;
	opacity: 0.92;
}

.az-slide__cta {
	display: inline-flex;
	align-items: center;
	min-block-size: 48px;
	margin-block-start: 6px;
	padding: 10px 26px;
	border-radius: 10px;
	background: var(--_or);
	color: var(--_ink) !important;
	font-weight: 700;
	text-decoration: none;
}

.az-slide__cta:hover {
	background: var(--_or-h);
}

/* ---------- Controls ---------- */
.az-slider__btn {
	position: absolute;
	inset-block-start: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	margin-block-start: -22px;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.92);
	color: var(--_ink);
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
	cursor: pointer;
}

.az-slider__btn:hover {
	background: #fff;
}

.az-slider__btn .az-icon {
	inline-size: 18px;
	block-size: 18px;
}

.az-slider__prev { inset-inline-start: 12px; }
.az-slider__next { inset-inline-end: 12px; }

.az-slider__btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

.az-slider__dots {
	position: absolute;
	inset-block-end: 14px;
	inset-inline: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 6px;
	pointer-events: none;
}

.az-slider--promo .az-slider__dots {
	position: static;
	margin-block-start: 12px;
}

.az-slider__dots .swiper-pagination-bullet {
	inline-size: 10px;
	block-size: 10px;
	margin: 0 !important;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 5px;
	background: rgb(0 0 0 / 0.35);
	opacity: 1;
	pointer-events: auto;
	cursor: pointer;
	transition: inline-size 0.2s;
}

.az-slider--promo .az-slider__dots .swiper-pagination-bullet {
	border-color: transparent;
	background: #c9c9c9;
}

.az-slider__dots .swiper-pagination-bullet-active {
	inline-size: 26px;
	background: var(--_or);
}

.az-slider__pause {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-end: 12px;
	z-index: 6;
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border: 0;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.55);
	color: #fff;
	cursor: pointer;
}

.az-slider--promo .az-slider__pause {
	inset-block-end: auto;
	inset-block-start: 10px;
}

.az-slider__pause .az-slider__ico-play,
.az-slider__pause.is-paused .az-slider__ico-pause {
	display: none;
}

.az-slider__pause.is-paused .az-slider__ico-play {
	display: inline;
}

.az-slider :focus-visible {
	outline: 3px solid var(--_or);
	outline-offset: 2px;
}

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
	.az-slide__content {
		justify-content: flex-end;
		padding: 18px 18px 44px;
	}

	.az-slide--light .az-slide__content,
	[dir="rtl"] .az-slide--light .az-slide__content {
		background: linear-gradient(to top, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.25) 55%, rgb(0 0 0 / 0));
	}

	.az-slide--dark .az-slide__content,
	[dir="rtl"] .az-slide--dark .az-slide__content {
		background: linear-gradient(to top, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.4) 55%, rgb(255 255 255 / 0));
	}

	.az-slider__btn {
		display: none;
	}

	.az-slide__desc {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

@media (prefers-reduced-motion: reduce) {
	.az-slider__dots .swiper-pagination-bullet {
		transition: none;
	}
}