/* ==========================================================================
   Profile page (students/<id>.html, generated by tools/build-people.php)

   Two columns: a sticky identity card on the left holding the photo and the
   member's details, and the tabbed content on the right.

   Everything here is scoped under .profile-page. The old markup reused
   .team-details and .articles-section, which professor.html, publications.html
   and team-details.html also use - scoping keeps those pages untouched.
   ========================================================================== */

.profile-page {
  --pp-brand: #005BAC;
  --pp-ink: #222222;
  --pp-muted: #6d7278;
  --pp-line: #e5e7ea;
  --pp-panel: #f7f5f5;
  --pp-radius: 2px;   /* sharp, squared-off corners */

  /* Corner rounding of the panel behind the portrait. 50% turns it into a
     full oval ring; a small px value (e.g. 14px) gives rounded corners on a
     rectangle instead, and 0 a hard rectangle. */
  --pp-photo-radius: 50%;

  /* Overall size of that ring. 1 is the full width of the card less its
     margins; 0.9 draws it 10% smaller. Both the panel and the portrait inside
     it scale by this, so the ring keeps its shape and only changes size. */
  --pp-photo-scale: 0.9;

  position: relative;
  padding: 70px 0px 90px 0px;
  background: #ffffff;
}

.profile-page .profile-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.profile-page .profile-aside,
.profile-page .profile-main {
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

/* Back to the listing, above both columns so they start at the same height. */
.profile-page .back-link {
  display: inline-block;
  font-size: 19px;
  font-weight: 600;
  color: var(--pp-ink);
  margin-bottom: 22px;
  transition: color 300ms ease;
}

.profile-page .back-link:hover {
  color: var(--pp-brand);
}

/* --------------------------------------------------------------- left card */

.profile-card {
  position: relative;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  background: #ffffff;
  overflow: hidden;
}

/* Plain white behind the portrait, so the background-removed PNGs sit on the
   same white as the rest of the card with nothing tinting them. Because that
   white matches the card, the outline is what makes the panel read as a shape
   at all - without it the rounding would be invisible.
   The panel still carries the rounding: the portraits are transparent at the
   top corners but opaque at the bottom, so rounding the <img> alone would only
   show on one edge. Clipping the panel rounds the photo evenly all round. */
.profile-card .profile-photo {
  position: relative;
  /* 32px is the 16px margin that used to sit either side; the ring is then
     scaled down from there and re-centred. */
  width: calc((100% - 32px) * var(--pp-photo-scale));
  margin: 16px auto 0px auto;
  padding: 18px 18px 0px 18px;
  background: #ffffff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-photo-radius);
  overflow: hidden;
}

/* Portraits are background-removed PNGs of differing sizes; a fixed box with
   `contain` keeps every member's card the same shape. */
.profile-card .profile-photo img {
  display: block;
  width: 100%;
  height: calc(320px * var(--pp-photo-scale));
  object-fit: contain;
  object-position: center bottom;
}

.profile-card .profile-identity {
  padding: 22px 26px 18px 26px;
  border-bottom: 1px solid var(--pp-line);
}

.profile-card .profile-name {
  font-family: 'Hind', sans-serif;
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
  color: var(--pp-ink);
  margin: 0px 0px 4px 0px;
}

/* Korean name reads inline, in brackets after the English name. */
.profile-card .profile-name .profile-name-kr {
  font-size: 19px;
  font-weight: 400;
  color: var(--pp-muted);
  white-space: nowrap;
}

.profile-card .profile-role {
  font-size: 15px;
  font-weight: 600;
  color: var(--pp-brand);
}

/* Detail rows: a small grey label above the value. */
.profile-card .profile-facts {
  list-style: none;
  margin: 0;
  padding: 20px 26px 4px 26px;
}

.profile-card .profile-facts > li {
  position: relative;
  margin-bottom: 18px;
}

.profile-card .profile-facts .fact-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--pp-ink);
  margin-bottom: 4px;
}

.profile-card .profile-facts .fact-value {
  display: block;
  font-size: 15px;
  line-height: 25px;
  color: var(--pp-ink);
}

.profile-card .profile-facts .fact-value b {
  color: var(--pp-ink);
  font-weight: 600;
}

.profile-card .profile-facts a {
  color: var(--pp-brand);
  word-break: break-word;
}

.profile-card .profile-facts a:hover {
  text-decoration: underline;
}

/* Email and Scholar sit side by side at the foot of the card. They share the
   row equally so they stay on one line however narrow the column gets. */
.profile-card .profile-links {
  display: flex;
  gap: 10px;
  padding: 4px 26px 24px 26px;
}

.profile-card .profile-links a {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  color: var(--pp-ink);
  background: #ffffff;
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  padding: 10px 12px;
  transition: all 300ms ease;
}

.profile-card .profile-links a:hover {
  border-color: var(--pp-brand);
  background: var(--pp-brand);
  color: #ffffff;
}

.profile-card .profile-links a i {
  font-size: 19px;
  line-height: 1;
}

/* ------------------------------------------------------------- right column */

/* Tab buttons. The class names are what js/script.js binds to, so they stay;
   only the presentation changes (left-aligned, underline instead of pills). */
.profile-page .custom-tab-title {
  margin-bottom: 28px;
  border-bottom: 1px solid var(--pp-line);
}

.profile-page .custom-tab-title .tab-title {
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-page .custom-tab-title .tab-title li {
  position: relative;
  display: inline-block;
  font-family: 'Hind', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--pp-muted);
  cursor: pointer;
  padding: 10px 2px 14px 2px;
  margin-right: 32px;
  transition: color 300ms ease;
}

.profile-page .custom-tab-title .tab-title li:last-child {
  margin-right: 0;
}

.profile-page .custom-tab-title .tab-title li:hover {
  color: var(--pp-ink);
}

.profile-page .custom-tab-title .tab-title li.active {
  color: var(--pp-brand);
}

.profile-page .custom-tab-title .tab-title li.active:after {
  position: absolute;
  content: '';
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--pp-brand);
}

/* Tabs are focusable for keyboard users, so give focus a visible ring. */
.profile-page .custom-tab-title .tab-title li:focus-visible {
  outline: 2px solid var(--pp-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

/* How many publications / projects, without having to open the tab. */
.profile-page .tab-count {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--pp-muted);
  background: rgba(34, 34, 34, 0.07);
  border-radius: 10px;
  padding: 3px 7px;
  margin-left: 6px;
  vertical-align: 1px;
}

.profile-page .custom-tab-title .tab-title li.active .tab-count {
  color: var(--pp-brand);
  background: rgba(0, 91, 172, 0.10);
}

/* Section blocks inside the Personal info tab. */
.profile-page .profile-block {
  margin-bottom: 34px;
}

.profile-page .profile-block:last-child {
  margin-bottom: 0;
}

.profile-page .profile-block h4 {
  font-family: 'Hind', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--pp-ink);
  margin: 0px 0px 12px 0px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pp-line);
}

.profile-page .profile-block .text {
  font-size: 15px;
  line-height: 28px;
  color: #4a4f55;
}

.profile-page .profile-block .text a {
  color: var(--pp-brand);
}

.profile-page .profile-block .text a:hover {
  text-decoration: underline;
}

.profile-page .profile-block ul.plain {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-page .profile-block ul.plain li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 28px;
  color: #4a4f55;
  margin-bottom: 6px;
}

.profile-page .profile-block ul.plain li:before {
  position: absolute;
  content: '';
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pp-brand);
}

/* Publication / project entries. */
.profile-page .single-item {
  position: relative;
  display: block;
  background: #ffffff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 24px 28px 22px 28px;
  margin-bottom: 18px;
  transition: box-shadow 300ms ease;
}

.profile-page .single-item:hover {
  box-shadow: 0 2px 10px rgba(34, 34, 34, 0.06);
}

.profile-page .single-item:last-child {
  margin-bottom: 0;
}

/* Year sits top-right of the entry so a list scans chronologically. */
.profile-page .single-item .year-chip {
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-muted);
  background: #ffffff;
  border: 1px solid var(--pp-line);
  border-radius: 20px;
  padding: 3px 10px;
}

/* Leave room for the chip so long titles never run under it. */
.profile-page .single-item .year-chip ~ h4,
.profile-page .single-item .year-chip ~ h5 {
  padding-right: 62px;
}

/* This member's own name inside an author list. */
.profile-page .single-item .is-me {
  font-weight: 600;
  color: var(--pp-ink);
}

.profile-page .single-item h4,
.profile-page .single-item > h5:first-child,
.profile-page .single-item .year-chip + h5 {
  font-family: 'Hind', sans-serif;
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  color: var(--pp-ink);
  margin: 0px 0px 10px 0px;
}

.profile-page .single-item .item-authors {
  font-size: 14px;
  line-height: 24px;
  color: #4a4f55;
  margin: 0px 0px 4px 0px;
}

.profile-page .single-item .item-venue {
  font-size: 14px;
  line-height: 24px;
  font-style: italic;
  color: var(--pp-muted);
  margin: 0;
}

.profile-page .single-item .text {
  font-size: 14px;
  line-height: 25px;
  color: #4a4f55;
}

.profile-page .single-item .item-meta {
  margin-top: 14px;
}

.profile-page .single-item .item-meta .doi {
  display: inline-block;
  font-size: 13px;
  color: var(--pp-muted);
  margin-right: 14px;
}

.profile-page .single-item .item-meta .pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-brand);
}

.profile-page .single-item .item-meta .pdf-link:hover {
  text-decoration: underline;
}

/* Project status pill. */
.profile-page .status-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 20px;
  padding: 4px 12px;
  margin-top: 14px;
}

.profile-page .status-badge.is-ongoing {
  background: rgba(0, 91, 172, 0.10);
  color: var(--pp-brand);
}

.profile-page .status-badge.is-finished {
  background: rgba(34, 34, 34, 0.07);
  color: #55595e;
}

/* Shown when a tab has no entries yet. */
.profile-page .empty-note {
  font-size: 15px;
  line-height: 26px;
  color: var(--pp-muted);
  background: #ffffff;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 22px 28px;
  margin: 0;
}

/* ------------------------------------------------------------- responsive */

@media only screen and (min-width: 992px) {
  .profile-page .profile-aside {
    width: 33.333333%;
  }
  .profile-page .profile-main {
    width: 66.666667%;
  }
  /* Keep the card in view while a long publication list scrolls. */
  .profile-page .profile-card {
    position: sticky;
    top: 30px;
  }
}

@media only screen and (max-width: 991px) {
  .profile-page {
    padding: 50px 0px 70px 0px;
  }
  .profile-card {
    margin-bottom: 40px;
  }
  .profile-card .profile-photo img {
    height: calc(360px * var(--pp-photo-scale));
  }
}

@media only screen and (max-width: 767px) {
  .profile-card .profile-photo {
    padding: 18px 18px 0px 18px;
  }
  .profile-card .profile-photo img {
    height: calc(300px * var(--pp-photo-scale));
  }
  .profile-card .profile-identity,
  .profile-card .profile-facts,
  .profile-card .profile-links {
    padding-left: 20px;
    padding-right: 20px;
  }
  .profile-page .custom-tab-title .tab-title li {
    margin-right: 20px;
    font-size: 14px;
  }
  .profile-page .single-item {
    padding: 20px 20px 18px 20px;
  }
}