/*------------------- SISSA -------------------*/

/* Per-area accent colour (from the `sissa_area` prop -> .card-person--area-<slug>).
   The custom property inherits down to the photo underline. Token names in
   global-sissa.css differ from the slugs, so map them explicitly; "sissa"/"ilas"
   have no token and fall back to --main-accent-color. */
.card-person--area-mathematics {
  --card-accent: var(--math);
}
.card-person--area-physics {
  --card-accent: var(--phisycs);
}
.card-person--area-neuroscience {
  --card-accent: var(--neuroscience);
}

.card-person.card:hover {
  background-color: transparent;
  .card-body {
    background-color: #f8f8f5;
  }
}

.card-person.card {
  display: flex;
  flex-direction: row;
  border: 0px solid #000;
  padding: 0;

  .profile-picture {
    width: 116px;
    height: 116px;
    position: relative;
    flex-shrink: 0;

    picture,
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    img {
      border-bottom: 6px solid var(--card-accent, var(--main-accent-color));
    }
  }

  .card-body {
    border: 1px solid #000;
    justify-content: space-between;
    display: flex;
    padding: 1rem;

    div:first-child > * {
      margin-bottom: 0px;
    }
    div:first-child > *:last-child {
      margin-bottom: 0px;
    }

    h5.card-title {
      font-size: 18px;
      margin-bottom: 6px;
      color: #262626;
      font-weight: 500;
    }
    .role {
      font-size: 16px;
      color: #737373;
      font-weight: 500;
    }

    .office {
      font-size: 14px;
      color: #737373;
      display: flex;
      align-items: center;
      img {
        width: 10px;
        height: auto;
        margin-right: 5px;
        position: relative;
        top: -1px;
      }
    }

    /* contact links only — the name link keeps its h5.card-title sizing */
    .mail a,
    .phone a {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: #262626;
      margin-block: 4px;

      &:hover {
        opacity: 0.8;
      }
    }

    /* area / phd-course logos, pulled into the top-right corner of the body */
    .card-taxonomy {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      position: relative;
      top: -1px;
      right: -1px;
      flex-shrink: 0;
      position: absolute;
    }

    .phd-course img,
    .sissa-area img {
      display: block;
      width: auto;
      height: 30px;
    }
  }
}