/* team-theme.css
 *
 * Companion stylesheet for team-theme.ejs.md. Together they form a
 * self-contained "theme" for a grouped team/people page: the .ejs.md file
 * groups a flat folder of person pages by their own `group:` metadata field
 * into titled sections (Principal Investigator, Ph.D. Students, ...), and
 * this file styles the resulting sections and photo cards.
 *
 * To reuse on another Quarto site: copy both files into that site's
 * people/ folder, set `template: team-theme.ejs.md` + `type: custom` on
 * the listing, and add `css: team-theme.css` to the page's front matter.
 */

#title-block-header h1.title,
.people-grid h1.title {
  text-align: center;
}

.people-grid h2 {
  text-align: center;
  border-bottom: none;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
}

/* O grid de 3 colunas do Quarto usa faixas de largura igual (1fr each),
   então um grupo cujo número de pessoas não é múltiplo de 3 (ex.: o único
   card do Principal Investigator, ou a última linha de um grupo) fica
   "sobrando" grudado à esquerda em vez de centralizado na linha. Trocamos
   para flexbox, que centraliza qualquer quantidade de cartões por linha. */
.people-grid .list.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.people-grid .g-col-1 {
  flex: 0 1 220px;
}

.people-grid .quarto-grid-item,
.people-grid .card {
  text-align: center;
  border: none;
  background: transparent;
}

.people-grid .card .card-img-top,
.people-grid .card img {
  /* !important porque a listagem do Quarto injeta um height inline
     (image-height do listing), que sozinho (sem width igual) achatava
     a foto num oval em vez de um círculo perfeito. */
  width: 140px !important;
  height: 140px !important;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto;
}

.people-grid .card-body {
  align-items: center;
}

.people-grid .card-title {
  font-size: 1rem;
  margin-top: 0.75rem;
  margin-bottom: 0.15rem;
}

.people-grid .card-text.listing-subtitle {
  color: #6c757d;
  font-size: 0.85em;
  margin-bottom: 0.4rem;
}

.people-grid .card-text.listing-description {
  font-size: 0.8em;
  color: #495057;
}