:root { --profile-green:#164e3f; --profile-pink:#9b0b62; --profile-gold:#d2a94f; --profile-ink:#1e293b; --profile-muted:#64748b; --profile-line:#e2e8f0; }
.staff-detail-page { padding:.25rem 0 1rem; }.staff-breadcrumb { display:flex; margin:1rem 0 1.5rem; align-items:center; gap:.6rem; color:var(--profile-muted); font-size:.82rem; white-space:nowrap; overflow:hidden; }.staff-breadcrumb a { color:var(--profile-green); text-decoration:none; }.staff-breadcrumb > i { color:#a8b2bf; font-size:.65rem; }.staff-breadcrumb span { overflow:hidden; text-overflow:ellipsis; }
.staff-detail-layout { display:grid; margin-bottom:5rem; grid-template-columns:340px minmax(0,1fr); align-items:start; gap:1.25rem; }.staff-profile-card { position:sticky; top:160px; overflow:hidden; background:#fff; border:1px solid var(--profile-line); box-shadow:0 8px 24px rgba(15,23,42,.07); }.staff-profile-header { position:relative; display:grid; min-height:230px; padding:2.25rem 1.5rem 1.5rem; background:var(--profile-green); place-items:center; }.staff-profile-avatar { width:170px; height:170px; overflow:hidden; background:#e2ebe7; border:5px solid #fff; border-radius:50%; box-shadow:0 7px 20px rgba(0,0,0,.15); }.staff-profile-avatar img { width:100%; height:100%; object-fit:cover; object-position:top; }.staff-profile-avatar > span { display:grid; width:100%; height:100%; background:#e2e8f0 url('../images/default-avatar.svg') center/cover no-repeat; }.staff-leadership-badge { position:absolute; right:1rem; top:1rem; padding:.35rem .55rem; color:#fff; background:var(--profile-pink); border-radius:.45rem; font-size:.68rem; font-weight:700; }.staff-leadership-badge i { margin-right:.25rem; color:var(--profile-gold); }.staff-profile-body { padding:1.5rem; text-align:center; }.staff-profile-label,.staff-info-card header span,.staff-related-heading > span { color:var(--profile-pink); font-size:.66rem; font-weight:700; letter-spacing:.14em; }.staff-profile-body h1 { margin:.5rem 0 .3rem; color:var(--profile-green); font-size:1.4rem; }.staff-position { margin:0 0 .7rem; color:var(--profile-pink); font-size:.86rem; font-weight:700; }.staff-department { display:flex; align-items:center; justify-content:center; gap:.4rem; color:var(--profile-muted); font-size:.75rem; }.staff-department i { color:var(--profile-green); }.staff-profile-contact { display:grid; margin-top:1.35rem; gap:.6rem; text-align:left; }.staff-profile-contact > a,.staff-profile-contact > div { display:grid; min-width:0; padding:.65rem; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:.55rem; color:var(--profile-ink); background:#f6f8f7; border:1px solid var(--profile-line); font-size:.72rem; text-decoration:none; overflow-wrap:anywhere; }.staff-profile-contact > * > i { display:grid; width:34px; height:34px; color:#fff; border-radius:.6rem; place-items:center; }.staff-contact-email > i { background:#0a66c2; }.staff-contact-phone > i { background:#18864b; }.staff-contact-office > i { background:var(--profile-pink); }.staff-profile-contact small { display:block; color:var(--profile-muted); font-size:.62rem; }.staff-back-link { display:inline-flex; margin-top:1.25rem; align-items:center; gap:.35rem; color:var(--profile-green); font-size:.76rem; font-weight:700; text-decoration:none; }
.staff-information { display:grid; gap:1.25rem; }.staff-info-card { scroll-margin-top:160px; padding:clamp(1.5rem,4vw,2.25rem); background:#fff; border:1px solid var(--profile-line); }.staff-info-card header { display:grid; margin-bottom:1.3rem; padding-bottom:1.1rem; grid-template-columns:46px 1fr; align-items:center; gap:.8rem; border-bottom:1px solid var(--profile-line); }.staff-info-card header > i { display:grid; width:46px; height:46px; color:#fff; background:var(--profile-green); border-radius:.75rem; place-items:center; }.staff-info-card header h2 { margin:.25rem 0 0; color:var(--profile-green); font-size:1.18rem; }.staff-info-content { color:#475569; font-size:.88rem; line-height:1.9; }.staff-no-data { margin:0; color:var(--profile-muted); }.staff-expertise-list { display:flex; flex-wrap:wrap; gap:.6rem; }.staff-expertise-list > span { display:inline-flex; padding:.5rem .7rem; align-items:center; gap:.35rem; color:var(--profile-green); background:#eef5f2; border:1px solid #d2e2dc; font-size:.76rem; font-weight:600; }.staff-expertise-list i { color:var(--profile-pink); }.staff-current-work { position:relative; display:grid; padding-left:1.5rem; grid-template-columns:14px 1fr; gap:.7rem; }.staff-current-work::before { position:absolute; top:.5rem; bottom:.5rem; left:.42rem; width:2px; content:""; background:#cbded7; }.staff-current-work > span { position:relative; z-index:1; width:14px; height:14px; margin-top:.35rem; background:var(--profile-pink); border:3px solid #f4d9e9; border-radius:50%; }.staff-current-work strong,.staff-current-work small { display:block; }.staff-current-work strong { color:var(--profile-ink); }.staff-current-work p { margin:.25rem 0; color:var(--profile-muted); }.staff-current-work small { color:var(--profile-pink); }
.staff-related-section { margin-bottom:5rem; }.staff-related-heading { margin-bottom:1.5rem; }.staff-related-heading h2 { margin:.4rem 0; color:var(--profile-green); font-size:clamp(1.5rem,3vw,2rem); }.staff-related-heading p { margin:0; color:var(--profile-muted); }.staff-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.staff-related-card { display:grid; padding:1rem; grid-template-columns:72px 1fr; align-items:center; gap:.8rem; background:#fff; border:1px solid var(--profile-line); }.staff-related-avatar { display:block; width:72px; height:72px; overflow:hidden; background:#e7efec; border-radius:50%; }.staff-related-avatar img { width:100%; height:100%; object-fit:cover; object-position:top; }.staff-related-avatar > span { display:grid; height:100%; color:#8ca39a; place-items:center; font-size:2rem; }.staff-related-card h3 { margin:0 0 .25rem; font-size:.85rem; }.staff-related-card h3 a { color:var(--profile-green); text-decoration:none; }.staff-related-card p { margin:0 0 .45rem; color:var(--profile-muted); font-size:.68rem; }.staff-related-link { color:var(--profile-pink); font-size:.7rem; font-weight:700; text-decoration:none; }
@media(max-width:991.98px){.staff-detail-layout{grid-template-columns:300px minmax(0,1fr)}.staff-profile-avatar{width:150px;height:150px}.staff-related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767.98px){.staff-detail-layout{grid-template-columns:1fr}.staff-profile-card{position:static}.staff-info-card{scroll-margin-top:110px}.staff-related-grid{grid-template-columns:1fr}}
@media(max-width:575.98px){.staff-profile-header{min-height:210px}.staff-info-card{padding:1.35rem}.staff-info-card header{grid-template-columns:42px 1fr}.staff-info-card header>i{width:42px;height:42px}.staff-info-card header h2{font-size:1rem}}