@charset "UTF-8";

/* =========================================================
   ghaithkfmc — صفحة مجلس الإدارة (members-page.php)
   Built on the design tokens and sections of ghaith.css.
   ========================================================= */

/* ============ شجرة المجلس ============ */
.board-tree{background:#fff}
.tree{display:flex;flex-direction:column;align-items:center}
.tree-level{position:relative;width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:18px}

/* Dashed connector + dot between levels */
.tree-level + .tree-level{margin-top:64px}
.tree-level + .tree-level::before{
  content:"";position:absolute;top:-64px;left:50%;height:46px;
  border-left:2px dashed var(--gold-300);transform:translateX(-1px);
}
.tree-level + .tree-level::after{
  content:"";position:absolute;top:-20px;left:50%;width:12px;height:12px;border-radius:50%;
  background:var(--gold-500);box-shadow:0 0 0 4px var(--gold-100);transform:translateX(-50%);
}

/* ============ بطاقة العضو ============ */
.bm{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 18px 22px;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.bm:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}

.bm-photo{
  width:84px;height:84px;flex:none;margin-bottom:16px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--green-50),var(--green-100));border:3px solid #fff;
  box-shadow:0 0 0 2px var(--gold-300),var(--shadow-sm);
}
.bm-photo img{width:100%;height:100%;object-fit:cover}
.bm-photo span{font-size:32px;font-weight:800;color:var(--green-700);line-height:1}

.bm h3{font-size:16px;line-height:1.6;margin-bottom:8px}
.bm-role{
  display:inline-block;padding:3px 12px;border-radius:999px;background:var(--gold-100);
  font-size:12.5px;font-weight:800;color:var(--gold-700);
}

/* Chairman */
.bm-chair{
  width:100%;max-width:440px;padding:34px 24px 30px;overflow:hidden;border-color:transparent;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--green-800),var(--green-600));box-shadow:var(--shadow);
}
.bm-chair::before{
  content:"";position:absolute;top:-90px;inset-inline-end:-90px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(216,188,139,.28),transparent 68%);pointer-events:none;
}
.bm-chair:hover{box-shadow:var(--shadow-lg)}
.bm-chair .bm-photo{
  width:120px;height:120px;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);
  box-shadow:0 0 0 3px var(--gold-300),0 14px 30px rgba(0,0,0,.18);
}
.bm-chair .bm-photo span{font-size:46px;color:#fff}
.bm-chair h3{font-size:clamp(19px,2.2vw,22px);color:#fff}
.bm-chair .bm-role{background:rgba(216,188,139,.18);color:var(--gold-300);font-size:13.5px;padding:4px 14px}

/* Vice chairman and other officers */
.bm-officer{flex:0 1 320px;padding:30px 20px 26px}
.bm-officer::after{
  content:"";position:absolute;top:0;inset-inline:22%;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--green-600),var(--gold-500));
}
.bm-officer .bm-photo{width:100px;height:100px}
.bm-officer .bm-photo span{font-size:38px}
.bm-officer h3{font-size:17.5px}

/* Members panel */
.tree-members{
  padding:40px 16px 18px;border-radius:var(--radius-lg);background:var(--cream-2);border:1px solid var(--line);
  gap:14px;
}
.bm-member{flex:0 1 calc((100% - 14px) / 2);padding:22px 12px 18px}
.bm-member .bm-role{background:var(--green-50);color:var(--green-700)}

/* ============ الاستجابة ============ */
@media (min-width:600px){
  .tree-members{padding:44px 24px 26px;gap:18px}
  .bm-member{flex-basis:calc((100% - 36px) / 3);padding:26px 16px 22px}
}
@media (min-width:900px){
  .bm-member{flex:0 1 210px}
}
@media (max-width:420px){
  .bm-member h3{font-size:14.5px}
  .bm-member .bm-photo{width:68px;height:68px}
  .bm-member .bm-photo span{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .bm{transition:none}
}