/* ==========================================================================
   Ovalete Design — واجهة الصفحة الرئيسية على الهاتف والتابلت
   يُحمَّل بعد ovalete-mobile.css. الصورة والنص قطعة واحدة: الصورة أطول،
   وأسفلها يذوب في لوحة النص بدل شريط صورة فوقه مستطيل داكن.
   ========================================================================== */

@media (max-width: 999.98px) {
	.ovd.home .ovd-hero {
		--ovd-hero-img: max(200px, min(clamp(270px, 82vw, 430px), 62vh));
		--ovd-hero-fade: 104px;
		background: var(--ovd-choco-deep);
	}

	/* السلايدر بعرض الشاشة من CSS مباشرة (بدل إزاحة Smart Slider التي تترك خطاً أبيض على الحافة) */
	.ovd.home .ovd-hero > .e-con-inner {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
	}

	.ovd.home .ovd-hero ss3-force-full-width {
		width: 100% !important;
		transform: none !important;
	}

	.ovd.home .ovd-hero .n2-ss-slider .n2-ss-preserve-size--slider {
		width: 100%;
		height: var(--ovd-hero-img);
	}

	.ovd.home .ovd-hero .n2-ss-slider .n2-ss-slide {
		width: 100% !important;
		height: var(--ovd-hero-img) !important;
	}

	.ovd.home .ovd-hero .ovd-hero__caption {
		position: relative;
		z-index: 30;
		margin-top: calc(var(--ovd-hero-fade) * -1);
		padding: calc(var(--ovd-hero-fade) - 34px) 20px 30px;
		background: linear-gradient(
			to bottom,
			rgba(44, 20, 12, 0) 0,
			rgba(44, 20, 12, 0.22) 28px,
			rgba(44, 20, 12, 0.66) 60px,
			rgba(44, 20, 12, 0.93) 88px,
			#2c140c var(--ovd-hero-fade)
		);
	}

	.ovd.home .ovd-hero .ovd-hero__inner {
		max-width: 460px;
	}

	.ovd.home .ovd-hero .ovd-hero__eyebrow {
		gap: 12px;
		font-size: 12px;
		letter-spacing: 0.22em;
	}

	.ovd.home .ovd-hero .ovd-hero__eyebrow::before,
	.ovd.home .ovd-hero .ovd-hero__eyebrow::after {
		content: "";
		display: block;
		width: 28px;
		height: 1px;
		border-radius: 0;
		background: linear-gradient(to left, var(--ovd-gold), rgba(198, 162, 86, 0));
	}

	.ovd.home .ovd-hero .ovd-hero__eyebrow::after {
		background: linear-gradient(to right, var(--ovd-gold), rgba(198, 162, 86, 0));
	}

	.ovd.home .ovd-hero .ovd-hero__title {
		margin: 12px 0 10px;
		font-size: clamp(25px, 7vw, 34px);
		line-height: 1.38;
	}

	.ovd.home .ovd-hero .ovd-hero__text {
		max-width: 42ch;
		margin: 0 auto 22px;
		color: rgba(255, 255, 255, 0.76);
		font-size: 15px;
		line-height: 1.75;
		text-wrap: balance;
	}

	.ovd.home .ovd-hero .ovd-hero__actions {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.ovd.home .ovd-hero .ovd-hero__actions .ovd-btn {
		flex: 1 1 0;
		min-height: 50px;
		padding: 0 12px;
		font-size: 15.5px;
		white-space: nowrap;
	}

	.ovd.home .ovd-hero .ovd-btn--gold {
		box-shadow: 0 12px 24px -12px rgba(198, 162, 86, 0.75);
	}

	.ovd.home .ovd-hero .ovd-btn--ghost {
		border-color: rgba(255, 255, 255, 0.3);
		background: rgba(255, 255, 255, 0.07);
	}

	.ovd.home .ovd-hero .ovd-btn:active {
		transform: scale(0.97);
	}
}

@media (max-width: 999.98px) and (prefers-reduced-motion: no-preference) {
	.ovd.home .ovd-hero .n2-ss-slide-background-image img {
		animation: ovd-hero-settle 2.4s var(--ovd-ease) both;
	}

	.ovd.home .ovd-hero .ovd-hero__inner > * {
		animation: ovd-hero-rise 0.7s var(--ovd-ease) both;
	}

	.ovd.home .ovd-hero .ovd-hero__title {
		animation-delay: 0.08s;
	}

	.ovd.home .ovd-hero .ovd-hero__text {
		animation-delay: 0.16s;
	}

	.ovd.home .ovd-hero .ovd-hero__actions {
		animation-delay: 0.24s;
	}

	@keyframes ovd-hero-settle {
		from {
			transform: scale(1.09);
		}
	}

	@keyframes ovd-hero-rise {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
	}
}