/* ═══════════════════════════════════════════════════════════════
   Cytognosis: Team pages (roster + bio) — page-specific styling
   Round 2 redesign. Layers on top of landing/styles.css and
   landing/site-extend.css; reuses existing design tokens and the
   shared .section / .section-lead / .card-grid / .member /
   .profile-* systems rather than introducing new ones. Linked from
   team.html and team/member.html only -- the shared stylesheets are
   never edited.
   ═══════════════════════════════════════════════════════════════ */

/* ── roster section (team.html) ─────────────────────────────── */

/* Sits directly under the page hero, which already carries its own
   bottom padding, so this section needs less top padding than a
   standalone .section. */
.team-roster-section { padding-top: 32px; }

/* Bigger, more spacious cards than the shared .member/.card-grid
   defaults -- an ND-friendly "generous spacing, big readable type"
   pass. #teamGrid is a stable, unique element id, so this wins
   deterministically over site-extend.css's .card-grid/.team-grid
   rules regardless of stylesheet load order. */
#teamGrid.card-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.team-card.member { padding: 32px 28px 30px; }
.team-card .member-avatar {
  width: 84px; height: 84px; border-radius: 18px;
  font-size: 26px; margin-bottom: 22px;
}
.team-card .member-name { font-size: 20px; }
.team-card .member-role { font-size: 14.5px; margin-top: 5px; }
.team-card .member-bio { font-size: 15px; line-height: 1.62; margin-top: 14px; }
.team-card .member-links { margin-top: 18px; gap: 8px; }
.team-card .member-link { padding: 8px 14px; font-size: 13px; }

.team-card.member-featured .member-avatar-lg { width: 128px; height: 128px; font-size: 36px; }
.team-card.member-featured .member-name { font-size: 23px; }
.team-card.member-featured .member-bio { font-size: 15.5px; }

/* Compact, icon-only contact links on the roster card (r4-content):
   email/website/scholar/linkedin/github, rendered by landing/team.js's
   memberContactLinksHTML(). Sits below the existing .member-links row. */
.member-contact-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.member-contact-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px;
  color: var(--ink-2); background: rgba(26,26,46,0.05);
  border: 1px solid rgba(26,26,46,0.08);
  transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.dark .member-contact-link { color: var(--on-night-2); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); }
.member-contact-link:hover, .member-contact-link:focus-visible { color: var(--violet); background: rgba(110,91,209,0.12); border-color: rgba(110,91,209,0.3); }

/* Skeleton loading cards mirror the same footprint so nothing jumps
   in size once real data replaces them. */
.skeleton-card.team-card .sk-avatar { width: 84px; height: 84px; border-radius: 18px; }

@media (max-width: 480px) {
  .team-card.member { padding: 26px 22px 24px; }
  .team-card .member-avatar,
  .skeleton-card.team-card .sk-avatar { width: 68px; height: 68px; font-size: 21px; margin-bottom: 18px; }
}

/* ── bio page hero (team/member.html) ───────────────────────── */

/* Wider photo column than the shared .profile-hero-grid default,
   for a larger, more prominent portrait/initials treatment. */
.team-profile-hero-grid {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 64px;
}
@media (max-width: 1000px) {
  .team-profile-hero-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* Full bio in a readable measure (~65-75ch) instead of the shared
   fixed 760px cap. #memberBio is a stable, unique element id. */
#memberBio { max-width: var(--measure); }

/* Edit panel: a touch more breathing room than the shared
   .profile-card default, since it holds the longest form on the page. */
#editCard.profile-card { padding: 26px; }
#editCard .form { gap: 20px; }

/* Labeled contact-link icons in the "Connect" card (r4-content):
   email/website/scholar/linkedin/github, rendered by team/member.html's
   contactLinkHTML(). Icon + visible label, unlike the compact roster
   version above, since this page has the room for a text label. */
#connectLinks { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.profile-connect-link {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink-2); font-size: 14.5px; font-weight: 500;
  transition: color var(--dur-base) var(--ease);
}
.dark .profile-connect-link { color: var(--on-night-2); }
.profile-connect-link:hover, .profile-connect-link:focus-visible { color: var(--violet); }
.profile-connect-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  color: inherit; background: rgba(26,26,46,0.05); border: 1px solid rgba(26,26,46,0.08);
}
.dark .profile-connect-icon { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); }