/* components/staff.css - circular avatars & scroller */
.staff { padding:18px 0; }
.staff h2 { text-align:center; margin-bottom:12px; }

/* hero circular avatars (3) */
.staff-heroes { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.staff-hero { width:220px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.staff-hero .hero-avatar { width:160px; height:160px; border-radius:50%; overflow:hidden; border:6px solid rgba(52,144,220,0.95); box-shadow:0 10px 30px rgba(10,20,30,0.06); margin-bottom:10px; }
.staff-hero .hero-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.staff-hero .meta h3 { margin:0; font-size:18px; color:#0f172a; }
.staff-hero .meta p { margin:4px 0 0; color:#6b7280; }

/* compact circular staff scroller */
.staff-row { display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:10px 6px; }
.staff-card { flex:0 0 auto; width:120px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.avatar-circle { width:80px; height:80px; border-radius:50%; overflow:hidden; border:4px solid rgba(52,144,220,0.9); margin-bottom:8px; }
.avatar-circle img { width:100%; height:100%; object-fit:cover; display:block; }
.staff-name { font-size:13px; color:#0f172a; }
.staff-role { font-size:12px; color:#6b7280; margin-top:4px; }

/* responsive */
@media (max-width:900px) { .staff-hero { width:45%; } }
@media (max-width:560px) { .staff-hero { width:100%; } .staff-hero .hero-avatar { width:140px; height:140px; } }