/* ==========================================================================
   Ouazzani Slider - frontend styles
   ========================================================================== */

.oz-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.oz-slider .swiper {
	width: 100%;
	height: 100%;
}

.oz-slider .swiper-slide {
	position: relative;
	display: flex;
	overflow: hidden;
	background-color: #f2f2f2;
}

.oz-slider .oz-slide-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* render the full-resolution source sharply on hi-dpi/phone screens */
	image-rendering: auto;
}

/* When a slide provides a separate mobile banner it is wrapped in <picture>.
   The wrapper must fill the slide so the <img> inside keeps covering it. */
.oz-slider .oz-slide-picture {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.oz-slider .oz-slide-picture .oz-slide-img {
	position: absolute;
	inset: 0;
}

/* ==========================================================================
   AUTO height mode — the image sets its own height and scales to fit the
   device width with no cropping. Ideal for full designed banners that have
   text baked into the artwork.
   ========================================================================== */
.oz-slider.oz-hmode-auto .swiper-slide {
	height: auto !important;
	aspect-ratio: auto !important;
	display: block;
}
.oz-slider.oz-hmode-auto .oz-slide-img {
	position: static;
	width: 100%;
	height: auto;
	object-fit: contain;
}
/* auto mode: the <picture> wrapper (if present) flows in-line too */
.oz-slider.oz-hmode-auto .oz-slide-picture {
	position: static;
	width: 100%;
	height: auto;
}
.oz-slider.oz-hmode-auto .oz-slide-picture .oz-slide-img {
	position: static;
}
/* the text/button overlay still floats over the image in auto mode */
.oz-slider.oz-hmode-auto .swiper-slide {
	position: relative;
}
.oz-slider.oz-hmode-auto .oz-slide-content {
	position: absolute;
	inset: 0;
	justify-content: center;
}

.oz-slider .oz-slide-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* Full-slide link: covers the whole slide, sits above the image + overlay
   but BELOW the content so the title/subtitle/button stay interactive. */
.oz-slider .oz-slide-fulllink {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* ---- Content box ---- */
.oz-slide-content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	max-width: 640px;
	gap: 14px;
	/* let clicks on empty areas of the content box fall through to the
	   full-slide link; real elements (title/button) re-enable pointer events */
	pointer-events: none;
}
.oz-slide-content > * {
	pointer-events: auto;
}
/* the button is its own link and must always be clickable above the overlay */
.oz-slide-btn {
	position: relative;
	z-index: 4;
}

.oz-slide-title {
	margin: 0;
	line-height: 1.15;
	font-size: 34px;
	font-weight: 800;
}

.oz-slide-subtitle {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.oz-slide-btn {
	display: inline-block;
	width: fit-content;
	text-decoration: none;
	transition: background-color .25s ease, transform .25s ease;
	cursor: pointer;
}

.oz-slide-btn:hover {
	transform: translateY(-2px);
}

/* ---- Text positioning within a slide ---- */
.oz-slide-content {
	margin: auto 0;      /* default vertical center */
	align-items: flex-start;
	text-align: left;
}

.oz-pos-top-left,
.oz-pos-top-center,
.oz-pos-top-right      { margin-top: 0; margin-bottom: auto; }

.oz-pos-bottom-left,
.oz-pos-bottom-center,
.oz-pos-bottom-right   { margin-top: auto; margin-bottom: 0; }

.oz-pos-center-center,
.oz-pos-top-center,
.oz-pos-bottom-center  { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }

.oz-pos-center-right,
.oz-pos-top-right,
.oz-pos-bottom-right   { align-items: flex-end; text-align: right; margin-left: auto; }

/* ---- Arrows ---- */
.oz-slider .swiper-button-prev,
.oz-slider .swiper-button-next {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	transition: background-color .25s ease;
}

.oz-slider .swiper-button-prev:after,
.oz-slider .swiper-button-next:after {
	font-size: 18px;
	font-weight: 700;
}

/* ---- Pagination dots ---- */
.oz-slider .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	transition: transform .2s ease;
}

.oz-slider .swiper-pagination-bullet-active {
	transform: scale(1.25);
}

/* ---- Fade effect needs stacked slides ---- */
.oz-slider .swiper-fade .swiper-slide {
	pointer-events: none;
}
.oz-slider .swiper-fade .swiper-slide-active {
	pointer-events: auto;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
	.oz-slide-title { font-size: 24px; }
	.oz-slide-subtitle { font-size: 14px; }
	/* tighten the text inset so content doesn't overflow a short banner */
	.oz-slide-content { gap: 10px; }

	/* When a slide has a dedicated mobile banner, drop the wide desktop
	   aspect-ratio on phones and let the slide take the image's own height,
	   so the mobile artwork shows fully with no crop. Works in every height
	   mode and overrides the Elementor inline ratio via specificity. */
	.oz-slider .swiper-slide.oz-has-mobile-img {
		height: auto !important;
		aspect-ratio: auto !important;
		display: block;
	}
	.oz-slider .swiper-slide.oz-has-mobile-img .oz-slide-picture,
	.oz-slider .swiper-slide.oz-has-mobile-img .oz-slide-img {
		position: static;
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	/* keep the text overlay floating over the now-taller image */
	.oz-slider .swiper-slide.oz-has-mobile-img .oz-slide-content {
		position: absolute;
		inset: 0;
	}
}

/* ==========================================================================
   Full-width (edge-to-edge) mode
   Breaks the slider out of Elementor's centered container so it spans the
   entire viewport width, left to right.
   ========================================================================== */
.oz-slider.oz-full-width {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
}

/* Prevent horizontal scrollbar caused by 100vw + scrollbar width */
.oz-slider.oz-full-width {
	overflow-x: clip;
}