/* ==========================================================================
   team.css — person-card component (extends .card from cards.css) and the
   Team page's own layout adjustments. Team-page-only. See plans/team.MD
   §6 (person card), §7 (PI variant), §8 (grid/breakpoints), §3.3 (wave
   divider background).
   ========================================================================== */

/* -- Person card: extend .card, horizontal row layout (§6.1, §6.3) -- */
.card--person {
  flex-direction: row;
  gap: var(--space-6);
  align-items: flex-start;
}

.person__portrait {
  flex: 0 0 112px;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--green-100) 0%, var(--green-200) 55%, var(--green-300) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.person__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.person__portrait-fallback {
  width: 28px;
  height: 28px;
  color: var(--green-400);
}

.person__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  align-self: stretch; /* required — keeps .person__links aligned across a grid row, see §6.3 */
}

.person__name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--text-primary);
}

.person__room {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

.person__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
.person__mail svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--kit-green);
}
.person__mail a {
  font-size: var(--fs-small);
  color: var(--link);
  overflow-wrap: anywhere; /* load-critical at 320px — see §6.4, §12.6 */
  text-decoration: underline;
  text-decoration-color: var(--green-200);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}

.person__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}
.person__points li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-body);
  max-width: 46ch;
  text-wrap: pretty;
}
.person__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--kit-green);
  transform: rotate(45deg);
}

.person__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: auto;
  width: 100%;
}
/* Three uniform circular icon chips (INSPIRE-HEP, Google Scholar, personal
   website) — same size on every breakpoint. Each icon is a real fetched
   asset (favicon/apple-touch-icon) except the website glyph, which is
   inline SVG like the site's other generic icons (mail, back-to-top). */
.person__icons {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-evenly;
}
.person__icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-100);
  transition: background-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.person__icons a:focus-visible {
  border-radius: 50%; /* ring follows the circular chip, not base.css's 4px default — §12.4 */
}
.person__icons a img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.person__icons a svg {
  width: 28px;
  height: 28px;
  color: var(--kit-green);
}

/* -- Hover (§6.5) -- */
@media (hover: hover) {
  .person__icons a:hover {
    background: var(--green-200);
    transform: translateY(-1px);
  }
  .person__mail a:hover {
    color: var(--link-hover);
    text-decoration-color: var(--kit-green);
  }
}

/* -- A person card is not a link: neutralise .card's whole-card lift and
   focus ring (§6.7). Each inner link carries its own focus ring instead. -- */
.card--person { transform: none; }
@media (hover: hover) {
  .card--person:hover,
  .card--person:focus-within {
    transform: none;
    box-shadow: var(--shadow-md);
    border-color: var(--green-200);
  }
}
.card--person:focus-within {
  outline: none;
}

/* -- PI card variant (§7.1) -- */
.card--pi {
  gap: var(--space-8);
}
.card--pi .person__portrait {
  flex: 0 0 200px;
  aspect-ratio: 4 / 5;
}
.card--pi .person__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
}

/* -- Wave divider sits on --surface-alt on this page, not white (§3.3) -- */
.page-team .wave-divider--footer {
  background: var(--surface-alt);
}

/* -- Desktop: one wide row per person, not two square-ish cards side by
   side. Full-width grid track (span 6, overriding cards.css's default
   span-3 half-width), but the card itself caps at 80% and alternates
   left/right within that track — odd cards flush left, even cards flush
   right — so a long roster reads as a rhythm, not a wall. Excludes .card--pi
   (styled separately, just below — centered and wider, not alternating).
   nth-child counts per <ul>, so Postdocs and Doctoral Students each restart
   their own left/right pattern. Portrait is also enlarged to match the PI
   card's 200px/4:5 treatment (up from the 112px/1:1 base) now that there's
   a much wider card to fill — desktop only, mobile/tablet keep the smaller
   portrait from the base .person__portrait rule. */
@media (min-width: 900px) {
  .card--person:not(.card--pi) {
    grid-column: span 6;
    width: 80%; /* not max-width: with justify-self overriding the default
      stretch below, an unstretched box with only a max-width shrinks to fit
      its content instead of actually reaching 80% (same class of bug as the
      homepage portrait fix — see css/home.css's §9 comment). */
  }
  .card--person:not(.card--pi):nth-child(odd) {
    justify-self: start;
  }
  .card--person:not(.card--pi):nth-child(even) {
    justify-self: end;
  }
  .card--person:not(.card--pi) .person__portrait {
    flex: 0 0 200px;
    aspect-ratio: 4 / 5;
  }

  /* PI is the group's one lead card — larger than the person cards above
     (90% vs 70%) and centered, not alternating, since there's only one. */
  .card--pi {
    grid-column: span 6;
    width: 90%;
    justify-self: center;
  }

  /* Bullet text was still capped at the mobile-era 46ch, leaving a large
     empty gap on the right of these now much wider (80%/90%) desktop
     cards. Applies to every person card, PI included: fill the available
     text column, minus a 5% margin on the right. */
  .person__points li {
    max-width: none;
    width: 95%;
  }
}

/* -- Grid breakpoints (§8.2) — must be written explicitly, cards.css's
   single-column rule alone would leave person cards 2-up through 899px -- */
@media (max-width: 899px) {
  .card--person { grid-column: span 6; }
  .card--pi     { grid-column: span 6; }
  /* the square crop would otherwise cut the top of the head off tall
     portrait photos; square and landscape photos are unaffected */
  .person__portrait img { object-position: 50% 10%; }
}

/* -- Internal stacking below --bp-xs (§8.3) — the portrait sits alone above
   the text on every phone, not only below 420px. At 421-639px the row layout
   left a ~200px text column: names and emails wrapped badly, and the PI
   card's Fraunces name overflowed and was clipped. Stacked, the name becomes
   the card's headline at --fs-h3 and the room/email/bullets/links read as
   the quieter tier beneath it. -- */
@media (max-width: 639px) {
  .card--person { flex-direction: column; gap: var(--space-5); }
  .person__portrait { flex-basis: auto; width: 112px; }
  .card--pi .person__portrait { flex-basis: auto; width: 128px; }
  .person__name { font-size: var(--fs-h3); }
}