/**
 * هيدر الصفحات الداخلية لثيم تنمية العرضية (template-parts/header/page-header.php). يُحمَّل في كل الصفحات.
 *
 * تركوازي عميق بنقش البذور الناعم ووهج أخضر في الوسط، والمحتوى كله في الوسط يحتضنه رسمان خطيان متقابلان
 * (تلّ بمدرجات زراعية تعلوه غرسة مضيئة، وشمس، وقطرة ماء)، ومدرجات العرضية وجبالها بلون خلفية الصفحة
 * على الحافة السفلية فيندمج بما تحته.
 */

.tn-page-hero {
	--tn-grid-color: rgba(255, 255, 255, 0.08);
	--tn-terraces-h: 64px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 64px 0 calc(var(--tn-terraces-h) + 54px);
	background:
		radial-gradient(ellipse 50% 70% at 50% 40%, rgba(var(--theme-secondary-rgb), 0.22), transparent 70%),
		var(--tn-grid),
		var(--tn-page-hero-bg, linear-gradient(155deg, var(--theme-primary), var(--tn-deep)));
	color: #ffffff;
}

/* الرسمان الخطيان في الطرفين: الأيسر كما هو، والأيمن معكوس */
.tn-page-hero__drawing {
	position: absolute;
	left: max(12px, calc((100vw - 1320px) / 2));
	bottom: calc(var(--tn-terraces-h) - 6px);
	z-index: -1;
	width: min(300px, 24vw);
	height: auto;
	color: rgba(255, 255, 255, 0.26);
}

.tn-page-hero__drawing--mirror {
	right: max(12px, calc((100vw - 1320px) / 2));
	left: auto;
	transform: scaleX(-1);
}

/* الغرسة والشمس بأخضر الورق: نماء مضيء */
.tn-page-hero__leaf,
.tn-page-hero__sun {
	fill: var(--theme-secondary);
}

.tn-page-hero__leaf {
	filter: drop-shadow(0 0 10px rgba(var(--theme-secondary-rgb), 0.8));
}

.tn-page-hero__leaf--soft {
	fill: var(--tn-leaf-light);
}

.tn-page-hero__sun {
	opacity: 0.55;
}

/* مدرجات العرضية بلون خلفية الصفحة */
.tn-page-hero__terraces {
	position: absolute;
	inset: auto 0 -1px;
	z-index: -1;
	width: 100%;
	height: var(--tn-terraces-h);
	color: var(--theme-bg-body, var(--tn-stone));
}

.tn-page-hero__container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1240px;
	text-align: center;
}

.tn-page-hero__container > * {
	max-width: min(720px, 56%);
}

.tn-page-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 6px 14px;
	border: 1px solid rgba(var(--theme-secondary-rgb), 0.6);
	border-radius: 999px;
	background: rgba(var(--theme-secondary-rgb), 0.16);
	color: #ffffff;
	font-size: 0.85rem;
	font-weight: 700;
}

.tn-page-hero__badge-icon {
	width: 16px;
	height: 16px;
	color: var(--theme-secondary);
}

.tn-page-hero__title {
	margin: 0 0 14px;
	color: #ffffff;
	font-size: clamp(1.7rem, 1.2rem + 2vw, 2.75rem);
	font-weight: 800;
	line-height: 1.3;
}

.tn-page-hero .tn-ornament .tn-ornament__line {
	width: 52px;
}

.tn-page-hero__desc {
	margin: 16px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.05rem;
	line-height: 1.9;
}

.tn-page-hero__meta {
	margin-top: 6px;
}

.tn-page-hero__meta > div {
	justify-content: center !important;
}

.tn-page-hero__meta,
.tn-page-hero__meta span {
	color: rgba(255, 255, 255, 0.8) !important;
}

/* مسار التنقل: سطر بخط رفيع، والصفحة الحالية بأخضر الورق */
.tn-page-hero .breadcrumbs {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 0 0 20px;
	padding: 0 0 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	background: none;
	color: var(--theme-secondary);
	font-size: 0.86rem;
}

.tn-page-hero .breadcrumbs a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.2s ease;
}

.tn-page-hero .breadcrumbs a:hover,
.tn-page-hero .breadcrumbs a:focus-visible {
	color: var(--theme-secondary);
}

.tn-page-hero .breadcrumbs .sep {
	color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 900px) {
	.tn-page-hero {
		--tn-terraces-h: 40px;
		padding: 48px 0 calc(var(--tn-terraces-h) + 44px);
	}

	.tn-page-hero__container > * {
		max-width: 100%;
	}

	/* الرسم يخفت خلف النص على الشاشات الضيقة */
	.tn-page-hero__drawing {
		left: -30px;
		width: 260px;
		color: rgba(255, 255, 255, 0.1);
	}

	/* رسم واحد يكفي على الشاشات الضيقة */
	.tn-page-hero__drawing--mirror {
		display: none;
	}

	.tn-page-hero__leaf,
	.tn-page-hero__sun {
		opacity: 0.4;
	}
}