/* =========================================================
   مشاريعنا — assets/css/projects.css
   مطابق للنموذج المعتمد: هيرو بصورة وتدرّج كحلي، شريط قطاعات بفواصل،
   خريطة + تبويبات مناطق، بطاقات مشاريع، ثم شريط ختامي بصورة.
   كل شيء مقيّد بـ body.page-projects-a.
   ========================================================= */

body.page-projects-a {
	--pr-ink:    #08111f;
	--pr-ink-2:  rgba(8, 17, 31, .62);
	--pr-ink-3:  rgba(8, 17, 31, .42);
	--pr-line:   rgba(8, 17, 31, .10);
	--pr-paper:  #f3f1ec;
	--pr-navy:   #14293f;
	--pr-navy-d: #0d1e30;
	--pr-teal:   #2e7f92;
}

body.page-projects-a .reveal { transition-delay: var(--d, 0ms); }

/* =========================================================
   1) الهيرو
   ========================================================= */
body.page-projects-a .pr-hero {
	position: relative;
	overflow: hidden;
	display: grid;
	align-items: center;
	min-height: clamp(340px, 34vw, 430px);
	background: var(--pr-navy-d);
	color: #fff;
}
body.page-projects-a .pr-hero-bg { position: absolute; inset: 0; }
body.page-projects-a .pr-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
/* التدرّج يبدأ من جهة القراءة ليبقى النص مقروءًا فوق أي صورة */
body.page-projects-a .pr-hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to left, rgba(13, 30, 48, .96) 0%, rgba(13, 30, 48, .88) 30%, rgba(13, 30, 48, .45) 62%, rgba(13, 30, 48, .12) 100%);
}
html[dir="ltr"] body.page-projects-a .pr-hero-bg::after { background: linear-gradient(to right, rgba(13, 30, 48, .96) 0%, rgba(13, 30, 48, .88) 30%, rgba(13, 30, 48, .45) 62%, rgba(13, 30, 48, .12) 100%); }

body.page-projects-a .pr-hero-inner { position: relative; padding-block: clamp(48px, 6vw, 76px); }

body.page-projects-a .pr-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-block-end: 18px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .82);
}
body.page-projects-a .pr-eyebrow i { display: block; width: 28px; height: 1px; background: rgba(255, 255, 255, .5); }

body.page-projects-a .pr-hero h1 {
	max-width: 12ch;
	margin: 0 0 18px;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.125rem);
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -.02em;
}
body.page-projects-a .pr-hero p {
	max-width: 52ch;
	margin: 0;
	font-size: clamp(.9375rem, .88rem + .2vw, 1.0625rem);
	line-height: 1.95;
	color: rgba(255, 255, 255, .8);
}

/* =========================================================
   2) شريط القطاعات
   ========================================================= */
body.page-projects-a .pr-sectors { background: var(--pr-paper); }
/* ستة أعمدة: العدد يقسم على ٦ و٣ و٢ بلا مربع وحيد في آخر صف على أي مقاس */
body.page-projects-a .pr-sectors-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
body.page-projects-a .pr-sectors-list li {
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: clamp(26px, 3vw, 38px) 14px;
	text-align: center;
	/* الفواصل الرفيعة هي ما يعطي الشريط طابعه في النموذج */
	border-inline-start: 1px solid var(--pr-line);
}
body.page-projects-a .pr-sectors-list li:first-child { border-inline-start: 0; }
body.page-projects-a .pr-sector-ico { color: var(--pr-navy); }
body.page-projects-a .pr-sector-ico svg { width: 30px; height: 30px; }
body.page-projects-a .pr-sectors-list strong {
	margin-block-start: 8px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--pr-ink);
}
body.page-projects-a .pr-sector-note { font-size: .8125rem; line-height: 1.7; color: var(--pr-ink-3); }

/* =========================================================
   3) عنوان القسم المشترك
   ========================================================= */
body.page-projects-a .pr-head { margin: 0 0 32px; }
body.page-projects-a .pr-head h2 {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 8px;
	font-size: clamp(1.375rem, 1.05rem + 1.2vw, 1.875rem);
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--pr-ink);
}
body.page-projects-a .pr-rule { display: block; width: 34px; height: 1px; background: rgba(8, 17, 31, .3); flex: none; }
body.page-projects-a .pr-head p { margin: 0; font-size: .9375rem; line-height: 1.8; color: var(--pr-ink-2); }

/* =========================================================
   4) الخريطة والمناطق
   ========================================================= */
body.page-projects-a .pr-map-section { padding-block: clamp(52px, 6vw, 82px); background: #fff; }

body.page-projects-a .pr-map-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

/* --- الخريطة --- */
/* الخريطة في العمود البعيد والقائمة في عمود القراءة الأول — كما في النموذج */
body.page-projects-a .pr-map { position: relative; margin: 0; grid-area: 1 / 2; }
body.page-projects-a .pr-regions { grid-area: 1 / 1; }
body.page-projects-a .pr-map svg { display: block; width: 100%; height: auto; }

/* الإحداثيات هنا فيزيائية (left/top) عمدًا: الرسم لا ينقلب مع اتجاه الصفحة،
   فالغرب يبقى يسارًا في الاتجاهين. */
body.page-projects-a .pr-pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	transform: translate(-50%, -100%);
	display: grid;
	justify-items: center;
	gap: 2px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 1;
}

/* دبّوس بتسمية جانبية — للمدن المتجاورة جدًا.
   التسمية تُكتب غربَ الدبّوس (يسارَه) لأن ما شرقه مشغول بدبّوس آخر. */
body.page-projects-a .pr-pin-side {
	grid-auto-flow: column;
	align-items: center;
	gap: 5px;
	transform: translate(calc(-100% + 13px), -50%); /* الدبّوس في الطرف الأيمن فوق النقطة */
}
/* في الاتجاه من اليسار لليمين يقع الدبّوس أولًا، فنعيده إلى الطرف الأيمن */
html[dir="ltr"] body.page-projects-a .pr-pin-side .pr-pin-dot { order: 1; }

body.page-projects-a .pr-pin-dot { color: var(--pr-teal); transition: transform var(--ease), color var(--ease); }
body.page-projects-a .pr-pin-dot svg { display: block; width: 26px; height: 26px; filter: drop-shadow(0 2px 4px rgba(8, 17, 31, .25)); }
body.page-projects-a .pr-pin-label {
	font-size: .8125rem;
	font-weight: 700;
	color: var(--pr-ink-2);
	white-space: nowrap;
	transition: color var(--ease);
}
body.page-projects-a .pr-pin:hover .pr-pin-dot,
body.page-projects-a .pr-pin.is-active .pr-pin-dot { transform: translateY(-3px); color: var(--pr-navy); }
body.page-projects-a .pr-pin.is-active .pr-pin-label { color: var(--pr-ink); }
body.page-projects-a .pr-pin:focus-visible { outline: 2px solid var(--pr-teal); outline-offset: 4px; border-radius: 6px; }

/* --- التبويبات والقائمة --- */
body.page-projects-a .pr-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-end: 18px;
}
body.page-projects-a .pr-tab {
	padding: 11px 26px;
	border: 1px solid var(--pr-line);
	border-radius: 999px;
	background: #faf9f7;
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	color: var(--pr-ink-2);
	cursor: pointer;
	transition: background var(--ease), color var(--ease), border-color var(--ease);
}
body.page-projects-a .pr-tab:hover { border-color: rgba(8, 17, 31, .22); color: var(--pr-ink); }
body.page-projects-a .pr-tab.is-active {
	background: var(--pr-navy);
	border-color: var(--pr-navy);
	color: #fff;
}
body.page-projects-a .pr-tab:focus-visible { outline: 2px solid var(--pr-teal); outline-offset: 2px; }

body.page-projects-a .pr-panel {
	padding: clamp(20px, 2.4vw, 30px);
	border-radius: 6px;
	background: #f7f6f3;
}
body.page-projects-a .pr-panel-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--pr-ink);
}
body.page-projects-a .pr-panel-title svg { width: 18px; height: 18px; color: var(--pr-navy); }

body.page-projects-a .pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
body.page-projects-a .pr-list li {
	display: grid;
	grid-template-columns: auto minmax(24px, 1fr) auto;
	align-items: baseline;
	gap: 10px;
	padding-block: 7px;
	font-size: .875rem;
}
body.page-projects-a .pr-list-name { color: var(--pr-ink); line-height: 1.7; }
/* خط النقاط الواصل: يربط الاسم بالسنة كما في النموذج */
body.page-projects-a .pr-list-dots {
	height: 1px;
	transform: translateY(-3px);
	border-block-end: 1px dotted rgba(8, 17, 31, .28);
}
body.page-projects-a .pr-list-year {
	color: var(--pr-ink-3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* =========================================================
   5) مشاريع مختارة
   ========================================================= */
body.page-projects-a .pr-featured { padding-block: clamp(44px, 5vw, 70px) clamp(52px, 6vw, 82px); background: #fff; }
body.page-projects-a .pr-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

body.page-projects-a .pr-card {
	overflow: hidden;
	border-radius: 4px;
	background: var(--pr-paper);
	transition: transform var(--ease), box-shadow var(--ease);
}
body.page-projects-a .pr-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(8, 17, 31, .10); }

body.page-projects-a .pr-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd9d2; }
body.page-projects-a .pr-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease-out, ease);
}
body.page-projects-a .pr-card:hover .pr-card-media img { transform: scale(1.04); }
body.page-projects-a .pr-card-ph { position: absolute; inset: 0; background: linear-gradient(135deg, #e2ded7, #cfcac1); }

/* شارة القطاع أسفل الصورة، بلسان مائل كما في النموذج */
body.page-projects-a .pr-card-chip {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: rgba(13, 30, 48, .88);
	color: #fff;
	font-size: .75rem;
	font-weight: 600;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
body.page-projects-a .pr-card-chip svg { width: 15px; height: 15px; flex: none; }

body.page-projects-a .pr-card-body { padding: 20px 22px 22px; }
body.page-projects-a .pr-card-body h3 {
	margin: 0 0 14px;
	min-height: 3.2em;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--pr-ink);
}
body.page-projects-a .pr-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding-block-start: 12px;
	border-block-start: 1px solid rgba(8, 17, 31, .1);
	font-size: .8125rem;
	color: var(--pr-ink-3);
}
body.page-projects-a .pr-card-place { display: inline-flex; align-items: center; gap: 6px; }
body.page-projects-a .pr-card-place svg { width: 15px; height: 15px; }
body.page-projects-a .pr-card-year { font-variant-numeric: tabular-nums; }

/* =========================================================
   6) الشريط الختامي
   ========================================================= */
body.page-projects-a .pr-cta {
	position: relative;
	overflow: hidden;
	display: grid;
	align-items: center;
	min-height: clamp(260px, 24vw, 330px);
	background: var(--pr-navy-d);
	color: #fff;
}
body.page-projects-a .pr-cta-bg { position: absolute; inset: 0; }
body.page-projects-a .pr-cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
body.page-projects-a .pr-cta-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	/* الجهة التي عليها الفقرة والزر أغمق — الصورة تبقى ظاهرة خلف العنوان الكبير */
	background: linear-gradient(to right, rgba(13, 30, 48, .34) 0%, rgba(13, 30, 48, .70) 46%, rgba(13, 30, 48, .92) 100%);
}
html[dir="ltr"] body.page-projects-a .pr-cta-bg::after { background: linear-gradient(to left, rgba(13, 30, 48, .34) 0%, rgba(13, 30, 48, .70) 46%, rgba(13, 30, 48, .92) 100%); }

body.page-projects-a .pr-cta-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(24px, 4vw, 60px);
	padding-block: clamp(40px, 5vw, 62px);
}
/* العنوان الكبير في الجهة البعيدة عن النص — كما في النموذج */
body.page-projects-a .pr-cta-title {
	grid-area: 1 / 2;
	margin: 0;
	font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.02em;
	max-width: 8ch;
}
body.page-projects-a .pr-cta-text { grid-area: 1 / 1; max-width: 46ch; text-align: start; }
body.page-projects-a .pr-cta-text p {
	margin: 0 0 22px;
	font-size: clamp(.9375rem, .88rem + .2vw, 1.0625rem);
	line-height: 1.95;
	color: rgba(255, 255, 255, .86);
}

body.page-projects-a .pr-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 28px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 2px;
	color: #fff;
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
body.page-projects-a .pr-cta-btn svg { width: 18px; height: 18px; flex: none; }
html[dir="rtl"] body.page-projects-a .pr-cta-btn svg { transform: scaleX(-1); }
body.page-projects-a .pr-cta-btn:hover { background: rgba(255, 255, 255, .14); border-color: #fff; transform: translateY(-2px); }
body.page-projects-a .pr-cta-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* =========================================================
   7) الشاشات الأصغر
   ========================================================= */
/* الستّة تصير ثلاثة قبل أن تضيق الخلية على نصّها (٦ × ~190px عند 1200px) */
@media (max-width: 1200px) {
	body.page-projects-a .pr-sectors-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body.page-projects-a .pr-sectors-list li:nth-child(3n + 1) { border-inline-start: 0; }
	/* صفّان: خطّ رفيع يفصل بينهما */
	body.page-projects-a .pr-sectors-list li:nth-child(n + 4) { border-block-start: 1px solid var(--pr-line); }
}
@media (max-width: 1080px) {
	body.page-projects-a .pr-map-grid { grid-template-columns: minmax(0, 1fr); }
	body.page-projects-a .pr-map { grid-area: auto; max-width: 560px; margin-inline: auto; }
	body.page-projects-a .pr-regions { grid-area: auto; }
	body.page-projects-a .pr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.page-projects-a .pr-cta-inner { grid-template-columns: minmax(0, 1fr); }
	body.page-projects-a .pr-cta-title { grid-area: auto; max-width: none; }
	body.page-projects-a .pr-cta-text { grid-area: auto; justify-self: start; }
}

@media (max-width: 640px) {
	body.page-projects-a .pr-sectors-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.page-projects-a .pr-sectors-list li { border-inline-start: 0; border-block-start: 1px solid var(--pr-line); }
	body.page-projects-a .pr-sectors-list li:nth-child(-n + 2) { border-block-start: 0; }
	body.page-projects-a .pr-sectors-list li:nth-child(odd) { border-inline-end: 1px solid var(--pr-line); }
	body.page-projects-a .pr-cards { grid-template-columns: minmax(0, 1fr); }
	body.page-projects-a .pr-card-body h3 { min-height: 0; }
	body.page-projects-a .pr-pin-label { font-size: .6875rem; }
	body.page-projects-a .pr-list li { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
	body.page-projects-a .pr-list-dots { display: none; }
	body.page-projects-a .pr-cta-btn { width: 100%; justify-content: center; }
}

/* =========================================================
   تعديلات الجوال — مراجعة ما قبل التسليم (2026-09-16)
   ========================================================= */

/* دبابيس الخريطة على الجوال: مواضع الدبابيس نسبة مئوية فتتقارب مع ضيق الرسم،
   أمّا التسميات فمقاسها ثابت بالبكسل فلا تتقارب معها. فتتراكب «أبها» و«خميس
   مشيط» و«نجران» في جنوب الخريطة، وتخرج «خميس مشيط» عن حافة الرسم.

   ولا يُعالَج بإزاحة الدبابيس: مواضعها محسوبة من خطوط الطول والعرض، وتحريكها
   يكذب على القارئ. المدن الثلاث متقاربة فعلًا.

   فالعلاج في التسميات لا المواضع: تُخفى كلها على الجوال وتبقى النقاط، ثم تظهر
   تسمية **المنطقة المختارة وحدها** كبطاقة صغيرة تحت دبّوسها. فلا تراكب، ولا
   تفقد الخريطة معناها، والمعلومة كاملة في التبويبات والقائمة تحتها. */
@media (max-width: 640px) {
	body.page-projects-a .pr-pin-dot svg { width: 20px; height: 20px; }

	/* الدبّوس ذو التسمية الجانبية يعود إلى الشكل العادي: تسميته مخفيّة الآن
	   فلم يبقَ ما يُزاح جانبًا، وإبقاء إزاحته كان يضع نقطته في غير موضعها. */
	body.page-projects-a .pr-pin-side {
		grid-auto-flow: row;
		transform: translate(-50%, -100%);
	}

	body.page-projects-a .pr-pin .pr-pin-label { display: none; }

	body.page-projects-a .pr-pin.is-active .pr-pin-label {
		display: block;
		position: absolute;
		top: 100%;
		inset-inline-start: 50%;
		transform: translateX(-50%);
		margin-top: 3px;
		padding: 3px 8px;
		border-radius: 999px;
		background: #fff;
		color: var(--pr-ink);
		font-size: .6875rem;
		box-shadow: 0 6px 16px -8px rgba(8, 17, 31, .5);
		z-index: 2;
	}
	html[dir="ltr"] body.page-projects-a .pr-pin.is-active .pr-pin-label { transform: translateX(-50%); }

	/* التسمية تتجاوز حدّ الرسم قليلًا عند الدبابيس الطرفية */
	body.page-projects-a .pr-map { overflow: visible; }
}