/* ============================================================
   team-cards.css
   Shared styles for "team member" / organizing-committee cards.
   Used on every conference page's "Organizing Committee Members"
   section plus pages/about/management.html, rim-services.html,
   sharad-angadi.html and dogr.html.

   Previously this exact block was copy-pasted inline into all 12
   pages (and two of them — 5f-farming-2019/2020 — additionally used
   a 6-cards-per-row Bootstrap grid that made each card too tall
   and narrow). This file is now the single source of truth; the
   markup is a plain CSS Grid (.team-grid) instead of Bootstrap
   row/col wrappers, so card width is no longer pinned to a fixed
   12-column fraction and reflows naturally at any container width.
   ============================================================ */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 22px;
  margin: 4px 0 8px;
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 16px;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.team-member:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--green-bright);
}

.team-member .image { margin-bottom: 14px; }
.team-member .image img {
  width: 92px; height: 92px; object-fit: cover;
  border-radius: 50%; display: block; margin: 0 auto;
  border: 3px solid var(--green-pale);
  box-shadow: var(--shadow-xs);
}

.team-member h4 {
  font-size: .92rem; font-weight: 700; color: var(--text);
  margin: 0 0 8px; line-height: 1.3;
}

/* Role as a small pill/badge instead of a plain uppercase line —
   reads faster and breaks up the vertical stack of text. */
.team-member .role,
.team-member p.role {
  display: inline-block;
  font-size: .66rem; font-weight: 700; color: var(--green-mid);
  background: var(--green-pale);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 12px; border-radius: 20px;
  margin: 0 0 10px;
}

.team-member span {
  font-size: .78rem; color: var(--text-muted); line-height: 1.45;
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
  .team-member { padding: 18px 10px; }
  .team-member .image img { width: 80px; height: 80px; }
}