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

   منسوخة عن board-of-directors.min.css في صفحة الهيئة العامة للعقار:
       .manager-img { height:250px; width:227px; border-radius:8px; object-fit:cover }
       .member-img  { height:250px; width:227px; border-radius:8px; object-fit:cover }
   وبقية الشكل من أصناف Bootstrap القياسية (card / row / col-lg-4 / text-start)
   المتوفّرة أصلاً في حزمة UDesign. */

.board-section {
    padding: 40px 0 72px;
}

/* صورة الرئيس ونائبه وصور الأعضاء — نفس المقاس في المصدر */
.manager-img,
.member-img {
    width: 227px;
    height: 250px;
    border-radius: 8px;
    object-fit: cover;   /* بلا object-position — كما في المصدر، فيتوسّط تلقائياً */
}

/* بطاقة Bootstrap: حدّ رفيع واستدارة 16px، بلا ظل — كما في المصدر */
.board-section .card {
    border: 1px solid #dee2e6;
    border-radius: 16px;
    background: #fff;
}

.board-section .title {
    font-size: 1.25rem;   /* --Text-xlF عند ريجا */
    line-height: 1.7;
    color: #1b8354;
}

.board-section .bord-details {
    font-size: 1rem;       /* 16px كما في المصدر */
    line-height: 1.8;
    color: #4b5563;
}

.board-section .bord-details .content {
    color: #6b7280;
}

@media (max-width: 767.98px) {
    .board-section {
        padding: 24px 0 48px;
    }
    /* الصورة تملأ عرض البطاقة على الجوال بدل مقاسها الثابت */
    .manager-img,
    .member-img {
        width: 100%;
        max-width: 227px;
    }
}

/* ── البطاقة الأفقية (الرئيس ونائبه) ────────────────────────────────────────
   ريجا تعتمد على .w-md-auto لتحرير عرض التفاصيل على الديسكتوب، لكن هذا الصنف
   غير موجود في حزمة Bootstrap عندنا (مرافق العرض المتجاوبة غير مفعّلة —
   تحققت: w-100 و w-auto موجودان و w-md-auto غير موجود). فتبقى w-100 فاعلة
   وتضغط صورة الرئيس من 227px إلى 184px. نمنع انكماش غلاف الصورة مباشرة. */
@media (min-width: 768px) {
    .board-section .card.flex-md-row .img {
        flex: none;
    }
    .board-section .card.flex-md-row .bord-details {
        width: auto;
    }
}

/* ── النص التعريفي تحت عنوان الصفحة ─────────────────────────────────────────
   موضعه كما في ريجا: مباشرة تحت <h1> داخل صندوق العنوان،
   بمقاس 16px الذي تستخدمه (font-size:16px inline في ترميزهم). */
.title-box .page-description {
    margin: 8px 0 0;
    max-width: 900px;
    font-size: 1rem;
    line-height: 1.9;
    color: #4b5563;
}
.board-role{
	display:flex;
	flex-direction: column;
}