/*
 * بنر هیرو — الگوی سراسری سایت.
 *
 * مقادیر عیناً از طراحی المنتور برداشته شده‌اند تا نسخه‌ی کدنویسی‌شده و
 * صفحات المنتوری در دوره‌ی گذار یکسان دیده شوند:
 *   کارت      : شعاع ۳۰px، پدینگ ۵۰px، گپ ۳۵px، تصویر cover + پوشش #004C73 با آلفای ۴۷٪
 *   بخش       : حداقل ارتفاع ۷۰vh، فاصله‌ی پایین ۶۰px
 *   تیتر      : ۵۵/۴۵/۲۷px، وزن ۹۰۰، رنگ #EAF1F3
 *   متن معرف  : ۱.۱rem/۰.۸rem، ارتفاع خط ۲rem/۱.۴rem، عرض ۵۰٪/۹۰٪/۱۰۰٪
 *   بَج       : پس‌زمینه rgb(59 130 246 / .2)، حاشیه rgb(96 165 250 / .3)، شعاع ۲۵px
 *   شِوران    : ۳۵/۲۵/۲۰px، رنگ #C0ECFF، نوسان ۵px
 */

/*
 * ارتفاع عیناً مطابق المنتور: بخش بیرونی حداقل ۷۰vh دارد و ارتفاع خودِ کارت
 * را محتوا تعیین می‌کند (در المنتور min_height کارت خالی است). کشیدن کارت تا
 * کل ویوپورت اشتباه بود و تناسب طراحی را به هم می‌ریخت.
 */
.dt-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 70vh;
	margin-block-end: 60px;
}

.dt-hero .dt-container { width: 100%; }

.dt-hero__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 35px;
	padding: 50px;
	border-radius: 30px;
	overflow: hidden;
	background-color: var(--dt-primary);
	background-image: var(--dt-hero-bg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	/* خود کارت اول ظاهر می‌شود (fadeIn با مدت fast المنتور = ۰.۷۵s)،
	   بعد محتوای داخلش به‌ترتیب می‌آید. */
	animation: dt-fade-in 0.75s var(--dt-ease) both;
}

/* پوشش رنگی روی تصویر — #004C73 با آلفای ۰x78 برابر ۴۷٪ */
.dt-hero__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 76, 115, 0.47);
	pointer-events: none;
}

/* محتوا باید بالای پوشش بنشیند */
.dt-hero__card > * {
	position: relative;
	z-index: 1;
	margin: 0;
}

/* ---------- بَج ---------- */
.dt-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	padding: 5px 20px;
	border: 1px solid rgb(96 165 250 / 0.3);
	border-radius: 25px;
	background-color: rgb(59 130 246 / 0.2);
	animation: dt-fade-in-down 2s var(--dt-ease) both;
}

.dt-hero__eyebrow {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.9;
	color: var(--dt-blue-ultralight);
}

/* نقطه‌ی تپنده — بازنویسی انیمیشن clear-flicker-glow طراحی اصلی */
.dt-hero__dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: var(--dt-radius-full);
	background: var(--dt-blue-light);
	animation: dt-flicker-glow 1.5s ease-in-out infinite;
}

@keyframes dt-flicker-glow {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
		box-shadow: 0 0 5px var(--dt-blue-light),
		            0 0 10px rgba(192, 236, 255, 0.7);
	}
	50% {
		transform: scale(0.7);
		opacity: 0.05;
		box-shadow: none;
	}
}

/* ---------- تیتر ---------- */
.dt-hero__title {
	margin-block-start: 30px;
	font-size: 55px;
	font-weight: 900;
	line-height: 1.3;
	color: var(--dt-blue-ultralight);
	animation: dt-fade-in 2s var(--dt-ease) 200ms both;
}

/* ---------- متن معرف ---------- */
.dt-hero__intro {
	width: 50%;
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 2rem;
	text-align: justify;
	color: var(--dt-blue-ultralight);
	animation: dt-fade-in-up 2s var(--dt-ease) 400ms both;
}

/* ---------- شِوران ---------- */
.dt-hero__chevron {
	display: inline-block;
	align-self: center;
	margin-block-start: 40px;
	color: var(--dt-blue-light);
	animation: dt-fade-in-down 2s var(--dt-ease) 600ms both,
	           dt-float-wave 2s ease-in-out 2600ms infinite;
}

.dt-hero__chevron svg {
	width: 35px;
	height: 35px;
}

@keyframes dt-float-wave {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(5px); }
}

/* ---------- انیمیشن‌های ورود ---------- */
@keyframes dt-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes dt-fade-in-down {
	from { opacity: 0; transform: translateY(-20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes dt-fade-in-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- تبلت ---------- */
@media (max-width: 1024px) {
	.dt-hero__title { font-size: 45px; margin-block-start: 20px; }
	.dt-hero__intro { width: 90%; }
}

/* ---------- موبایل ---------- */
@media (max-width: 767px) {
	/* حداقل ارتفاع ۷۰vh در المنتور برای موبایل هم بازنویسی نشده، پس
	   همان مقدار می‌ماند و فقط فاصله‌ی پایین کم می‌شود. */
	.dt-hero { margin-block-end: 40px; }

	.dt-hero__card {
		gap: 24px;
		padding: 32px 20px;
		border-radius: 20px;
	}

	.dt-hero__title { font-size: 27px; margin-block-start: 30px; }

	.dt-hero__eyebrow { font-size: 0.8rem; }

	.dt-hero__intro {
		width: 100%;
		font-size: 0.8rem;
		line-height: 1.4rem;
	}

	.dt-hero__chevron { margin-block-start: 30px; }
	.dt-hero__chevron svg { width: 20px; height: 20px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.dt-hero__chevron svg { width: 25px; height: 25px; }
}

/* ---------- احترام به کاهش حرکت ---------- */
@media (prefers-reduced-motion: reduce) {
	.dt-hero__card,
	.dt-hero__badge,
	.dt-hero__title,
	.dt-hero__intro,
	.dt-hero__chevron,
	.dt-hero__dot {
		animation: none;
	}
}

/* ============================================================
   سه سبک هیرو
   ------------------------------------------------------------
   center — پیش‌فرض. متن وسط‌چین روی تصویر تمام‌عرض. قواعدش بالا آمده.
   split  — کارت دو قسمتی؛ متن روی رنگ تخت، تصویر در نیمه‌ی دیگر.
   band   — نوار تصویر بالا، متن روی رنگ تخت زیر آن.

   دلیل وجود سه سبک: تیتر کوتاه شعارگونه روی تصویر خوانا می‌ماند، ولی تیتر
   بلند جمله‌ای به‌همراه متن معرف و متادیتا روی تصویر پرجزئیات کنتراست را
   به حدود ۴:۱ می‌رساند. سبک‌های پنلی متن را روی رنگ تخت می‌برند و کنتراست
   از ۱۳:۱ بالاتر می‌رود، بدون آنکه تم عوض شود.
   ============================================================ */

/* ---------- مشترک سبک‌های پنلی ---------- */
.dt-hero--panel .dt-hero__card {
	padding: 0;
	background-color: var(--dt-blue-dark);
	background-image: none;
	text-align: right;
}

.dt-hero--panel .dt-hero__card::before { content: none; }

.dt-hero--panel .dt-hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--dt-space-5);
	padding: clamp(1.75rem, 4vw, 3.25rem);
}

.dt-hero--panel .dt-hero__title,
.dt-hero--panel .dt-hero__intro {
	max-width: none;
	margin-inline: 0;
	text-align: right;
}

.dt-hero--panel .dt-hero__title { margin-block-start: 0; }

/* ---------- سبک split ---------- */
.dt-hero--split .dt-hero__card {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.dt-hero--split .dt-hero__card { grid-template-columns: 1.08fr 0.92fr; }
}

/*
 * تصویر در سبک دو قسمتی.
 *
 * زیر ۹۰۰px کارت تک‌ستونه می‌شود و تصویر با order به بالا می‌رود: در موبایل
 * اول تصویر دیده می‌شود و متن در نیمه‌ی پایین می‌نشیند. نسبت ۱۶:۱۰ به تصویر
 * ارتفاع واقعی می‌دهد؛ نوار باریک ۲۰۰px تصویر را به یک حاشیه تبدیل می‌کرد.
 */
.dt-hero__media {
	position: relative;
	order: -1;
	aspect-ratio: 16 / 10;
	min-height: 240px;
	background-image: var(--dt-hero-bg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* محو کردن درز میان تصویر و پنل رنگی — در موبایل درز لبه‌ی پایینی تصویر است */
.dt-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 55%, var(--dt-blue-dark) 100%);
}

@media (min-width: 900px) {
	/* در دسکتاپ تصویر به ستون کنار برمی‌گردد و درز، لبه‌ی کناری آن می‌شود. */
	.dt-hero__media {
		order: 0;
		aspect-ratio: auto;
		min-height: 340px;
	}

	.dt-hero__media::after {
		background: linear-gradient(to right, transparent 52%, var(--dt-blue-dark) 100%);
	}
}

.dt-hero--split .dt-hero__title { font-size: clamp(1.55rem, 3vw, 2.35rem); }

/* ---------- سبک band ---------- */
.dt-hero__strip {
	position: relative;
	aspect-ratio: 21 / 7;
	min-height: 150px;
	background-image: var(--dt-hero-bg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.dt-hero__strip::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 76, 115, 0.35) 0%, var(--dt-blue-dark) 100%);
}

.dt-hero--band .dt-hero__title { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }

/* ---------- ردیف متادیتا ---------- */
.dt-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dt-space-2) var(--dt-space-4);
	width: 100%;
	margin: 0;
	padding-block-start: var(--dt-space-4);
	border-block-start: 1px solid rgba(192, 236, 255, 0.18);
	font-size: var(--dt-fs-sm);
	color: var(--dt-blue-light);
}

.dt-hero--center .dt-hero__meta,
.dt-hero--scrim .dt-hero__meta { justify-content: center; }
.dt-hero__sep { color: rgba(192, 236, 255, 0.45); }

/* ---------- سبک scrim ----------
   پوشش تخت ۴۷٪ جای خود را به گرادیان جهت‌دار می‌دهد: تیره‌تر در پایین که
   متن معرف و متادیتا می‌نشیند، روشن‌تر در بالا که تصویر نفس بکشد. blur
   ملایم جزئیات مزاحم تصویر را آرام می‌کند بدون آنکه محو دیده شود. */
.dt-hero--scrim .dt-hero__card::before {
	background: linear-gradient(
		to top,
		rgba(0, 42, 64, 0.94) 0%,
		rgba(0, 42, 64, 0.82) 38%,
		rgba(0, 76, 115, 0.62) 100%
	);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

/* ---------- سبک‌های وسط‌چین: بدنه نباید چیدمان کارت را بشکند ---------- */
.dt-hero--center .dt-hero__body,
.dt-hero--scrim .dt-hero__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 35px;
	width: 100%;
}

/* ---------- کاهش حرکت ---------- */
@media (prefers-reduced-motion: reduce) {
	.dt-hero__media, .dt-hero__strip { animation: none; }
}

/* ---------- اصلاح‌های سبک‌های پنلی ----------
   دو مقدار از سبک center به سبک‌های پنلی نشت می‌کردند و در مرورگر دیده شد:

   ۱. align-items: center روی کارت باعث می‌شد تصویر به‌جای پرکردن کل ارتفاع
      کارت، وسط بنشیند و بالا و پایینش فضای خالی سرمه‌ای بماند.
   ۲. width: 50% متن معرف که برای متن وسط‌چین روی تصویر طراحی شده بود،
      در پنل باعث می‌شد متن در نیمی از عرض ستون بشکند. */
.dt-hero--panel .dt-hero__card { align-items: stretch; }
.dt-hero--panel .dt-hero__intro { width: auto; }