/* staff.css — Staff directory & profile, matching theme.css tokens */

.staff-grid{
  --gap: .9rem;
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--gap);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1200px){ .staff-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .staff-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .staff-grid{ grid-template-columns: 1fr; } }

.s-card.card{
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.s-card.card:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.10); }

.s-media{
  display:block; line-height:0; background: var(--paper-2);
}
.s-media img{
  width:100%; height: 220px; object-fit:cover; display:block;
}

.s-name{ text-decoration:none; color:var(--ink); }
.s-name:hover{ color: var(--brand-900); }

.s-ctas{ margin-top:.6rem; display:flex; flex-wrap:wrap; gap:.5rem; }

/* Profile page */
.s-article.card{
  overflow:hidden; border-radius:18px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.s-header{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1rem 0 1rem;
}
.s-avatar{
  width:168px; height:168px; object-fit:cover;
  border-radius:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.s-headtext{ flex:1; }
.s-social .social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  background: rgba(0,0,0,.06);
  color: var(--ink);
  transition: background .2s ease, transform .08s ease;
}
.s-social .social-link:hover{ background: rgba(0,0,0,.10); transform: translateY(-1px); }