/* ==========================================================================
   BIRL team member cards - "hairline"
   --------------------------------------------------------------------------
   One outer frame per card; zones are separated by rules rather than nested
   boxes. Monochrome by design: the only colour comes from the member's photo
   and the profile brand marks.

   Shared by Team/team.html, staff.html, students.html and alumni.html, which
   build the markup in buildCard(). Edit here, never per page.

   Zone order follows the agreed template:
     photo (top-left) | name + every qualification (top-right)
     roles, newest first
     research interests
     profile links
   Each zone reserves a constant height so cards line up across the grid.
   ========================================================================== */

:root {
  --mc-ink: #0C2233;
  --mc-muted: #5E7284;
  --mc-rule: #B9C6CF;
  --mc-hair: #DCE4E9;
  --mc-tint: #F2F5F7;
}

.member-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mc-rule);
  border-radius: 12px;
  overflow: hidden;
  color: var(--mc-ink);
}

/* ----- top: photo | name + qualifications ------------------------------ */

.mc-top {
  display: grid;
  grid-template-columns: 120px 1fr;
  border-bottom: 1px solid var(--mc-hair);
}

.mc-media {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid var(--mc-hair);
  background: var(--mc-tint);
}

.mc-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.mc-monogram {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  color: var(--mc-ink);
}

.mc-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 13px 14px;
}

.mc-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 7px;
  color: var(--mc-ink);
}

.mc-quals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mc-quals li {
  font-size: 0.81rem;
  line-height: 1.45;
  color: var(--mc-ink);
}

/* ----- middle: roles, current first ------------------------------------ */

/* The roles and research-interest zones reserve the same height, so the two
   middle bands of a card line up. 104px holds two roles, or the two lines an
   interest entry is clamped to - the common worst case on both sides. */
.mc-roles {
  padding: 12px 15px;
  min-height: 104px;
  display: flex;
  align-items: flex-start;
}

.mc-roles ol {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mc-roles li {
  position: relative;
  padding-left: 19px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mc-roles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--mc-ink);
  background: #fff;
}

.mc-roles li.now::before {
  background: var(--mc-ink);
}

.mc-roles li + li::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: -12px;
  height: 14px;
  border-left: 1px solid var(--mc-rule);
}

.mc-when {
  font-size: 0.74rem;
  color: var(--mc-muted);
  font-variant-numeric: tabular-nums;
}

/* A role with no recorded tenure prints nothing at all. The slot still holds
   its line, so the role beneath stays level with the same role on a card that
   does carry a date. */
.mc-when:empty::before {
  content: "\00a0";
}

/* Some records hold a whole paragraph in the role field, so clamp it and keep
   the full value on the title attribute. */
.mc-role {
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ----- research interests ---------------------------------------------- */

/* Each zone carries the rule above it rather than below, so the line always
   sits against the block it introduces. Hanging the rule under a zone put it
   directly below short text while the links row, pushed down by margin-top,
   floated away from it - the line landed in a different place on every card. */
.mc-interests {
  padding: 12px 15px;
  min-height: 104px;
  border-top: 1px solid var(--mc-hair);
  /* Cards stretch to the tallest in their row. The slack is taken here, above
     the research interests, so it lands in the roles zone - the one whose
     height genuinely varies - instead of opening a gap under the interest
     text, which read as though this card had been given a larger interests
     block than its neighbours. */
  margin-top: auto;
}

.mc-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--mc-ink);
}

.mc-interests p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.45;
  color: var(--mc-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ----- profile links ---------------------------------------------------- */

.mc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
  padding: 11px 15px;
  margin-top: auto;
  min-height: 46px;
  border-top: 1px solid var(--mc-hair);
}

/* The interests block has already taken the slack, so the links sit flush
   beneath it. With no interests block, the auto margin above keeps them at
   the foot of the card as before. */
.mc-interests + .mc-links {
  margin-top: 0;
}

.mc-links a {
  display: inline-flex;
  color: var(--brand, var(--mc-ink));
  line-height: 0;
  border-radius: 6px;
  text-decoration: none;
}

.mc-links svg,
.mc-links img {
  width: 21px;
  height: 21px;
  display: block;
}

/* The LUMS crest is a bitmap with its own white ground; contain keeps it
   square and unclipped next to the glyph marks. */
.mc-links img {
  object-fit: contain;
}

.mc-links a:hover {
  opacity: 0.72;
}

.mc-links a:focus-visible {
  outline: 2px solid var(--mc-ink);
  outline-offset: 3px;
}

/* ----- empty state ------------------------------------------------------ */

.member-card-empty {
  padding: 22px 18px;
  align-items: flex-start;
  justify-content: center;
  min-height: 160px;
  color: var(--mc-muted);
  font-size: 0.9rem;
}

/* ----- group leader ------------------------------------------------------ */

/* The leader sits alone in its grid rather than in the three-up roster. */
.team-grid.team-leader-grid {
  grid-template-columns: minmax(320px, 1fr);
  max-width: 980px;
  margin-top: 14px;
}

.member-card.team-leader-card {
  display: grid;
  grid-template-columns: 238px 1fr;
}

/* Portrait and profile links share the left column, so the links sit under
   the photograph instead of at the foot of the long bio. */
.team-leader-card .mc-aside {
  display: flex;
  flex-direction: column;
  align-self: start;
  /* No rule down the right. The aside is only as tall as the portrait and the
     links, so a border there stopped level with the links and read as a stray
     line beside the bio rather than a column divider. */
}

.team-leader-card .mc-media {
  border-right: 0;
  border-bottom: 0;
  /* The bio makes this card tall; keep the portrait at its own proportions
     at the top rather than stretching it down the whole column. */
  align-self: start;
}

.team-leader-card .mc-media img {
  aspect-ratio: 3 / 4;
  object-position: top center;
}

.team-leader-card .mc-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.team-leader-card .mc-top {
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--mc-hair);
}

.team-leader-card .mc-who {
  padding: 20px 22px 16px;
}

.team-leader-card .mc-name {
  font-size: 1.62rem;
}

/* The leader has a page to himself, so his profile is shown in full rather
   than clamped like the roster cards. */
.team-leader-card .mc-interests {
  min-height: 0;
}

.team-leader-card .mc-interests p {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.team-leader-card .mc-label {
  font-size: 0.75rem;
  margin-bottom: 6px;
}

.team-leader-card .mc-roles {
  min-height: 0;
}

/* The group leader's card stands alone, so the dates add nothing. */
.team-leader-card .mc-when {
  display: none;
}

.team-leader-card .mc-links {
  justify-content: center;
  gap: 16px;
  padding: 13px 15px;
  border-top: 1px solid var(--mc-hair);
}

/* ----- small screens ----------------------------------------------------- */

@media (max-width: 860px) {
  .mc-top {
    grid-template-columns: 104px 1fr;
  }

  .mc-who {
    padding: 11px 12px;
  }

  .mc-name {
    font-size: 1.08rem;
  }

  /* Fixed heights are a desktop nicety; on a phone the cards are stacked, so
     let them shrink to their content instead of padding out empty space. */
  .mc-roles,
  .mc-interests {
    min-height: 0;
  }

  .member-card.team-leader-card {
    grid-template-columns: 1fr;
  }

  .team-leader-card .mc-aside {
    border-right: 0;
    border-bottom: 1px solid var(--mc-hair);
  }

  .team-leader-card .mc-media {
    border-right: 0;
    border-bottom: 0;
  }

  .team-leader-card .mc-media img {
    aspect-ratio: 16 / 10;
    object-position: center 22%;
  }

  .team-leader-card .mc-name {
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   Training across generations
   --------------------------------------------------------------------------
   Figures supplied by the lab, shown on the Staff, Students and Alumni pages.
   ========================================================================== */

.training-grid {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--mc-rule);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.training-item {
  padding: 20px 14px;
  text-align: center;
  border-right: 1px solid var(--mc-hair);
}

.training-item:last-child {
  border-right: 0;
}

.training-count {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--mc-ink);
}

.training-label {
  display: block;
  margin-top: 7px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--mc-muted);
}

@media (max-width: 860px) {
  .training-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-item {
    border-bottom: 1px solid var(--mc-hair);
  }

  /* Five items in a two-column grid leaves the last one alone on its row. */
  .training-item:nth-child(odd):last-child {
    grid-column: 1 / -1;
    border-right: 0;
  }

  .training-item:nth-child(even) {
    border-right: 0;
  }

  .training-count {
    font-size: 1.7rem;
  }
}