/* قواعد صفحة تنظيم الجيومكانية فقط.
   المشترك (الهيدر/الناف/الفوتر) في css/site.css ويُحمَّل قبل هذا الملف.

   البنية تتبع "قالب صفحة المحتوى" في كود المنصات الموحد — النسخة العربية
   في الملف المصدَّر من فيقما (الصفحة 2، عرض التصميم 1440):
       عنوان الصفحة ← فقرة قائدة عريضة ← فقرة تمهيدية ← فاصل أفقي
       ← أقسام (h2) كل قسم فقرات وقوائم ← فروع مرقّمة (h3)
   القوائم في القالب ثلاثة أنواع: مرقّمة، ونقطية، وبعلامة صح — واستعملنا
   النقطية لأن مواد التنظيم بنود غير متسلسلة.

   الألوان استُخرجت من الملف بالعيّنة اللونية لا بالتقدير:
       #1b8354 أخضر الهوية   #074d31 الأخضر الداكن
       #161616 لون النص      #f3f4f6 الرمادي النائب
   وكلها ألوان المشروع نفسها، فلم يتغيّر شيء في الثيم. */

.content-page {
    padding: 24px 0 72px;
}

/* المحتوى يمتد بعرض الحاوية كاملاً (طلب المستخدم). كان محدوداً بـ75ch
   ≈720px اتّباعاً لعمود القراءة في قالب كود المنصات. */
.content-body {
    max-width: none;
}

/* الفقرة القائدة: عريضة وأكبر قليلاً، تحت العنوان مباشرة */
.content-lead {
    margin: 0 0 16px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.9;
    color: #161616;
}

.content-intro {
    margin: 0;
    font-size: 1rem;
    line-height: 1.9;
    color: #4b5563;
}

.content-rule {
    margin: 32px 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
    opacity: 1;
}

/* ===== الأقسام ===== */
.content-section {
    /* UDesign يضع padding: 40px 0 على كل <section> ولم تكن هذه
       الورقة تصفّره — فكان الفراغ بين قسمين 40 حشواً + 28 هامشاً
       + 40 حشواً = 108px، ضعفَ ما في بقية الصفحات.
       ونوحّده على 40px كإيقاع الموقع (كما في صفحة الاتفاقية). */
    padding: 0;
    margin-bottom: 40px;
}

.content-section:last-of-type {
    margin-bottom: 0;
}

.content-title {
    margin: 0 0 12px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.6;
    color: #161616;
}

.content-subtitle {
    margin: 24px 0 12px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.7;
    color: #161616;
}

.content-section p {
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.9;
    color: #1f2a37;
}

.content-section p:last-child {
    margin-bottom: 0;
}

/* ===== القوائم ===== */
.content-list {
    margin: 0 0 12px;
    padding-inline-start: 24px;
    list-style: disc;
}

.content-list > li {
    margin-bottom: 8px;
    font-size: 1rem;
    line-height: 1.9;
    color: #1f2a37;
}

.content-list > li::marker {
    color: #1b8354;
}

.content-list > li:last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .content-page {
        padding: 16px 0 48px;
    }

    .content-title {
        font-size: 1.25rem;
    }

    .content-lead {
        font-size: 1rem;
    }

    .content-section {
        margin-bottom: 24px;
    }
}

/* ===== جدول تشكيل مجلس الإدارة =====
   البيانات مزدوجة (جهة + صفة) فالجدول أنسب من قائمة: يحفظ الاقتران
   بينهما ويقرأه قارئ الشاشة مرتبطاً برأس عموده.
   الغلاف يمرّر أفقياً على الشاشات الضيقة بدل أن يدفع الصفحة كلها. */
.table-wrap {
    margin: 0 0 12px;
    overflow-x: auto;
}

/* النص يمتد بعرض الحاوية، أما الجدول فيُحدّ: ثلاثة أعمدة قصيرة تتباعد
   خلاياها بلا داعٍ لو امتدت 1296px، فيصعب ربط الجهة بصفتها بالعين. */
.content-table {
    width: 100%;
    max-width: 760px;
    border-collapse: collapse;
    font-size: 1rem;
    min-width: 480px;
}

.content-table caption {
    text-align: start;
}

.content-table th,
.content-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    text-align: start;
    line-height: 1.8;
    vertical-align: top;
}

.content-table thead th {
    background: #f3fcf6;
    font-weight: 700;
    color: #0d121c;
    border-bottom: 1px solid #d7f0e2;
}

.content-table tbody td {
    color: #1f2a37;
}

/* عمود الترقيم ضيق وبأرقام لاتينية بمحاذاة موحّدة */
.content-table td:first-child {
    width: 3.5rem;
    color: #6c737f;
    font-variant-numeric: tabular-nums;
}

.content-table tbody tr:last-child th,
.content-table tbody tr:last-child td {
    border-bottom: 0;
}

/* قائمة مرقّمة — القالب يعرض ثلاثة أنواع قوائم، وهذه الثانية.
   الترقيم من المتصفح لا من النص: بنود المصدر تحمل أرقامها نصّاً وقد
   حُذفت عند الاستخراج، وإلا ظهر رقمان لكل بند. */
.content-list--num {
    list-style: decimal;
}

/* ===== قائمة على عمودين =====
   للقوائم الطويلة (استخدامات المعلومات الجيومكانية الاثنا عشر).
   القائمة هنا كتلة عادية لا شبكة، فتعمل columns مباشرة.
   break-inside يمنع انقسام البند بين العمودين، و
   padding-inline-start على العنصر لا القائمة كي لا تُقصّ الأرقام
   في العمود الثاني. */
/* العرض محدود لا الفجوة: القائمة تأخذ عرض الحاوية (1296px) فينقسم
   إلى عمودين عريضين ونصّ البنود قصير، فيتباعد العمودان بصرياً مهما
   صغّرنا column-gap. تحديد العرض هو ما يقرّبهما فعلاً.
   القياس: أعرض بند نصّه 137px + 24px حشوة الترقيم ≈ 161px للعمود،
   فـ360px تكفي عمودين متلاصقين بلا التفاف أي بند. */
.content-list--cols {
    columns: 2;
    column-gap: 32px;
    max-width: 360px;
}

.content-list--cols > li {
    break-inside: avoid;
}

@media (max-width: 575.98px) {
    .content-list--cols {
        columns: 1;
    }
}