/* ===== تفاصيل عضو الفريق — تعتمد site.css + team-card من family.css =====
   لون العضو يُمرَّر عبر متغيّرين inline: --mcolor / --mbg على .mem-wrap */

.mem-wrap { --mcolor: var(--c-teal); --mbg: var(--bg-soft-teal); }

/* ===== البطل ===== */
.mem-star { position: absolute; top: 60px; left: 18%; color: var(--c-accent); font-size: 22px; animation: twinkle 3s ease-in-out infinite; z-index: 1; }
.mem-photo { position: relative; display: inline-block; }
.mem-photo__bg { position: absolute; inset: -10px; border-radius: 34px; background: linear-gradient(150deg, var(--mcolor), var(--c-lime)); opacity: .18; transform: rotate(-5deg); }
.mem-photo__frame { position: relative; width: clamp(180px, 42vw, 224px); height: clamp(180px, 42vw, 224px); border-radius: 30px; overflow: hidden; background: var(--mbg); box-shadow: 0 20px 46px rgba(20,90,84,.2); border: 5px solid #fff; display: flex; align-items: center; justify-content: center; }
.mem-photo__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* الحرف البديل: مخفيّ افتراضيًا، يظهره onerror فقط عند فشل الصورة (يمنع نزيفه خلف PNG الشفّاف) */
.mem-photo__initial { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 72px; color: var(--mcolor); }

.mem-role { display: inline-flex; align-items: center; gap: 8px; background: var(--mbg); color: var(--mcolor); font-weight: 800; font-size: 13px; padding: 7px 16px; border-radius: 24px; margin-bottom: 16px; }
.mem-name { font-family: var(--font-head); font-weight: 800; font-size: clamp(30px, 5.5vw, 46px); line-height: 1.2; margin: 0 0 10px; color: var(--c-ink); }
.mem-tagline { font-size: clamp(15.5px, 2.2vw, 18px); line-height: 1.85; color: #4F6B68; font-weight: 500; margin: 0 0 22px; max-width: 600px; }
.mem-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.mem-chip { background: #fff; color: #3C5754; font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 22px; box-shadow: 0 4px 12px rgba(20,90,84,.07); }
.mem-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.mem-cta { display: inline-flex; align-items: center; gap: 9px; background: var(--mcolor); color: #fff; font-weight: 800; font-size: 15.5px; padding: 13px 26px; border-radius: 13px; box-shadow: 0 10px 22px rgba(20,90,84,.2); }
.mem-cta:hover { opacity: .9; }
.mem-cta--ghost { background: #fff; color: #3C5754; box-shadow: 0 6px 16px rgba(20,90,84,.08); }
.mem-cta--ghost:hover { color: var(--mcolor); }

/* ===== شريط الإحصاءات ===== */
.mem-statcard { background: #fff; border-radius: 18px; padding: 22px 18px; text-align: center; box-shadow: var(--sh-card-sm); height: 100%; }
.mem-statcard__ico { width: 48px; height: 48px; border-radius: 14px; background: var(--mbg); color: var(--mcolor); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.mem-statcard__num { font-family: var(--font-head); font-weight: 800; font-size: 26px; color: var(--mcolor); line-height: 1; }
.mem-statcard__label { font-size: 13px; color: var(--c-muted-2); font-weight: 700; margin-top: 6px; }

/* ===== بطاقات المحتوى ===== */
.mem-sec { background: #fff; border-radius: 22px; padding: clamp(24px, 4vw, 34px); box-shadow: var(--sh-card); margin-bottom: 24px; }
.mem-sechead { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.mem-sechead__bar { width: 7px; height: 24px; border-radius: 5px; background: var(--mcolor); flex-shrink: 0; }
.mem-sechead__bar--accent { background: var(--c-accent); }
.mem-sechead h2 { font-family: var(--font-head); font-weight: 800; font-size: 22px; margin: 0; color: var(--c-ink); }
.mem-bio p { font-size: 16px; line-height: 2.05; color: var(--c-muted); font-weight: 500; margin: 0 0 14px; }
.mem-bio p:last-child { margin-bottom: 0; }

.mem-exp { display: flex; gap: 13px; align-items: flex-start; background: var(--bg-panel); border-radius: 16px; padding: 18px 20px; height: 100%; }
.mem-exp__ico { width: 40px; height: 40px; border-radius: 12px; background: var(--mbg); color: var(--mcolor); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mem-exp__title { font-family: var(--font-head); font-weight: 700; font-size: 16px; margin: 0 0 5px; color: var(--c-ink); }
.mem-exp__desc { font-size: 13.5px; line-height: 1.7; color: var(--c-muted); font-weight: 500; margin: 0; }

/* ===== بطاقة التواصل (جانبية) ===== */
.mem-contact { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--c-teal-d), var(--c-teal)); border-radius: 22px; padding: 28px; color: #fff; box-shadow: 0 14px 34px rgba(14,138,130,.26); margin-bottom: 22px; }
.mem-contact__circle { position: absolute; top: -50px; left: -30px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.08); }
.mem-contact h3 { font-family: var(--font-head); font-weight: 800; font-size: 19px; margin: 0 0 16px; position: relative; z-index: 2; }
.mem-contact__rows { display: flex; flex-direction: column; gap: 13px; position: relative; z-index: 2; }
.mem-contact__row { display: flex; align-items: center; gap: 12px; }
.mem-contact__ico { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mem-contact__label { font-size: 12px; color: #CDEBE7; font-weight: 600; }
.mem-contact__value { font-size: 14.5px; color: #fff; font-weight: 700; }

/* ===== برامج يشرف عليها ===== */
.mem-progcard { background: #fff; border-radius: 22px; padding: 26px; box-shadow: var(--sh-card); }
.mem-progcard h3 { font-family: var(--font-head); font-weight: 800; font-size: 18px; margin: 0 0 16px; color: var(--c-ink); }
.mem-progs { display: flex; flex-direction: column; gap: 12px; }
.mem-prog { display: flex; align-items: center; gap: 13px; background: var(--bg-panel); border-radius: 14px; padding: 13px 15px; transition: background .15s; }
.mem-prog:hover { background: #EEF6E9; }
.mem-prog__tag { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-head); font-weight: 800; font-size: 13px; }
.mem-prog__name { font-weight: 800; font-size: 14px; color: var(--c-ink); line-height: 1.4; }
.mem-prog__meta { font-size: 12.5px; color: var(--c-muted-2); font-weight: 600; margin-top: 2px; }
.mem-prog__chev { color: var(--c-muted-3); font-size: 16px; }