/**
 * @file
 * Person.
 */

.person {
  display: flex;
  gap: 1.5rem;
  padding: 1rem;
}

.person__media {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
}

.person__media img {
  max-width: 150px;
  height: auto;
}

.person__photo-link {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: var(--imtm-color-text);
}

.person__photo-link:not(:last-child) {
  margin-right: 1rem;
}

.person__body {
  flex-grow: 1;
  min-width: 0;
}

/* h3 elements styled like the former h5. */
.person__name,
h3.person__role {
  font-size: 1.25rem;
}

.person__about p:last-child {
  margin-bottom: 0;
}

/* Board members. */
.person--board .person__name,
.person--board .person__name-link {
  font-size: 1.35rem;
  color: var(--imtm-color-darkred);
}

.person--board .person__role {
  font-size: 1.075em;
  font-style: italic;
}

/* Management / administration. */
.person--management .person__role {
  font-size: 1.35rem;
  font-style: italic;
  color: var(--imtm-color-darkred);
}

.person--management .person__name {
  font-size: 1.125rem;
  font-weight: 700;
}

.person--management .person__name-link {
  color: var(--imtm-color-text);
}

.person__photo--fixed {
  width: 150px;
  max-width: none;
  height: 186px;
  margin-bottom: 0.25rem;
}

/* Staff contacts and students. */
.person--contact,
.person--student {
  gap: 1rem;
}

.person--contact .person__name {
  margin-bottom: 1rem;
}

.person--contact .person__details p,
.person--student .person__details p.person__detail {
  margin-bottom: 0;
}

.person--student .person__details .person__detail--mentor {
  margin-bottom: 0.25rem;
}

/* Small screens: keep the photo beside the text, just smaller. */
@media (max-width: 575.98px) {
  .person {
    gap: 1rem;
  }

  .person__media img,
  .person__photo--fixed {
    width: auto;
    max-width: 90px;
    height: auto;
  }

  .person__media {
    flex-direction: column;
    gap: 0.5rem;
  }
}