/**
 * NIYAPRESS: Hero Slider Caption Position Fix
 * CRITICAL: Move title to BOTTOM of slide (not middle)
 * Fix overlapping with image content
 */

/* ========================================
   CAPTION - FORCE BOTTOM POSITIONING
   ======================================== */

.hero-section-slider .hero-slide-caption {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	top: auto !important;
	padding: clamp(24px, 4vw, 50px) !important;
	z-index: 10 !important;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.4) 60%,
		transparent 100%
	) !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	align-items: flex-start !important;
	min-height: 180px !important;
	transform: none !important;
}

/* ========================================
   TITLE - BOTTOM ALIGNED
   ======================================== */

.hero-section-slider .hero-slide-title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: clamp(22px, 3vw, 36px) !important;
	font-weight: 900 !important;
	line-height: 1.4 !important;
	max-width: 95% !important;
	direction: rtl !important;
	text-align: right !important;
	align-self: flex-end !important;
	position: relative !important;
	bottom: 0 !important;
}

.hero-section-slider .hero-slide-title a {
	color: #ffffff !important;
	text-decoration: none !important;
	text-shadow: 
		0 3px 6px rgba(0, 0, 0, 0.9),
		0 6px 12px rgba(0, 0, 0, 0.7),
		0 10px 20px rgba(0, 0, 0, 0.5) !important;
	transition: opacity 0.3s ease !important;
	display: block !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	hyphens: auto !important;
}

.hero-section-slider .hero-slide-title a:hover {
	opacity: 0.95 !important;
}

/* ========================================
   OVERLAY - STRONGER AT BOTTOM
   ======================================== */

.hero-section-slider .hero-slide-overlay {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	top: auto !important;
	height: 70% !important;
	background: linear-gradient(
		to top, 
		rgba(0, 0, 0, 0.95) 0%, 
		rgba(0, 0, 0, 0.85) 20%,
		rgba(0, 0, 0, 0.70) 35%,
		rgba(0, 0, 0, 0.45) 50%, 
		rgba(0, 0, 0, 0.20) 70%,
		transparent 100%
	) !important;
	pointer-events: none !important;
	z-index: 3 !important;
}

/* ========================================
   MEDIA - NO CENTER ALIGNMENT
   ======================================== */

.hero-section-slider .hero-slide-media {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	max-height: 600px !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
}

/* ========================================
   SLIDE CONTAINER - NO CENTERING
   ======================================== */

.hero-section-slider .hero-slide {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-height: 600px !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
}

.hero-section-slider .hero-slide.is-active {
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 1 !important;
	transform: scale(1) !important;
}

/* ========================================
   RESPONSIVE - MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 1024px) {
	.hero-section-slider .hero-slide-caption {
		min-height: 160px !important;
		padding: clamp(20px, 3vw, 40px) !important;
	}
	
	.hero-section-slider .hero-slide-title {
		font-size: clamp(20px, 3vw, 28px) !important;
	}
	
	.hero-section-slider .hero-slide-overlay {
		height: 85% !important;
	}
}

@media (max-width: 768px) {
	.hero-section-slider .hero-slide-caption {
		min-height: 140px !important;
		padding: 20px !important;
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.95) 0%,
			rgba(0, 0, 0, 0.5) 70%,
			transparent 100%
		) !important;
	}
	
	.hero-section-slider .hero-slide-title {
		font-size: clamp(18px, 4vw, 24px) !important;
		max-width: 100% !important;
	}
	
	.hero-section-slider .hero-slide-overlay {
		height: 90% !important;
		background: linear-gradient(
			to top, 
			rgba(0, 0, 0, 1) 0%, 
			rgba(0, 0, 0, 0.95) 25%,
			rgba(0, 0, 0, 0.80) 45%,
			rgba(0, 0, 0, 0.55) 65%,
			rgba(0, 0, 0, 0.25) 85%,
			transparent 100%
		) !important;
	}
}

@media (max-width: 480px) {
	.hero-section-slider .hero-slide-caption {
		min-height: 120px !important;
		padding: 15px !important;
	}
	
	.hero-section-slider .hero-slide-title {
		font-size: clamp(16px, 4.5vw, 20px) !important;
		line-height: 1.5 !important;
	}
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
	.hero-section-slider .hero-slide-caption {
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 1) 0%,
			rgba(0, 0, 0, 0.7) 80%,
			transparent 100%
		) !important;
	}
	
	.hero-section-slider .hero-slide-overlay {
		background: linear-gradient(
			to top, 
			rgba(0, 0, 0, 1) 0%, 
			rgba(0, 0, 0, 0.95) 50%,
			rgba(0, 0, 0, 0.7) 80%,
			transparent 100%
		) !important;
	}
	
	.hero-section-slider .hero-slide-title a {
		text-shadow: 
			0 0 10px rgba(0, 0, 0, 1),
			0 3px 6px rgba(0, 0, 0, 1) !important;
	}
}

/* ========================================
   PREVENT CENTERING FROM OTHER CSS
   ======================================== */

.hero-section-slider .hero-slide-caption,
.hero-section-slider .hero-slide-title,
.hero-section-slider .hero-slide-title a {
	transform: none !important;
	vertical-align: bottom !important;
}

/* Force bottom positioning even if other CSS tries to center */
.hero-section-slider .hero-slides-wrapper .hero-slide .hero-slide-caption {
	top: auto !important;
	bottom: 0 !important;
	transform: translateY(0) !important;
}