/* css styles */

/* ---- People page ------------------------------------------------------- */

.person {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* the paragraph Pandoc wraps around the image */
.person > p:first-child {
  margin: 0;
  flex: 0 0 auto;
}

.person img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* stand-in circle for people without a photo, so their names line up with
   everyone else's; applies automatically to any .person that has no img */
.person:not(:has(img))::before {
  content: "";
  flex: 0 0 130px;
  height: 130px;
  border-radius: 50%;
  background-color: #f1f3f5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ced4da'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M12 14c-4.4 0-8 2.9-8 6.5V22h16v-1.5c0-3.6-3.6-6.5-8-6.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 58px 58px;
}

.person-body {
  flex: 1 1 auto;
  min-width: 0;
}

.person-body h4 {
  margin: 0 0 0.15rem 0;
  font-size: 1.15rem;
}

.person-body p {
  margin-bottom: 0.5rem;
}

/* small grey line under a name, for roles and affiliations */
.person-role {
  color: #6c757d;
  font-size: 0.9rem;
  font-style: italic;
  margin: 0 0 0.5rem 0 !important;
}

/* people listed without a bio: tighter spacing */
.person-body h4:only-child {
  margin: 0;
}

.person:has(.person-body > h4:only-child) {
  margin-bottom: 1rem;
}

/* alumni and other simple name lists */
.name-list {
  list-style: none;
  padding-left: 0;
}

.name-list li {
  margin-bottom: 0.4rem;
}

.name-list .note {
  color: #6c757d;
}

/* section spacing (the People page adds a rule under its h2s locally) */
h2 {
  margin-top: 2.5rem;
}

/* stack on narrow screens */
@media (max-width: 576px) {
  .person {
    flex-direction: column;
    gap: 0.75rem;
  }
  .person img {
    width: 110px;
    height: 110px;
  }
  .person:not(:has(img))::before {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    background-size: 50px 50px;
  }
}