/* 页面标题样式 - 蓝色文字加下划线 */
.h2t {
  color: #527bbd;
  border-bottom: 2px solid #527bbd;
}

.h3t{
  color: #527bbd;        /* 与 h2t 一致 */
  font-size: 1.2rem;       /* 与正文一致（body = 16px） */
  margin-top: 2px;       /* 紧跟 h2 */
  margin-bottom: 0px;    /* 和正文留一点呼吸 */
}

.empty-line{
  height: 1em;   /* 一整行高度 */
}

/* 通用阴影效果 - Safari 兼容 */
.shadow {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* 通用内边距 */
.padd00101010 {
  padding: 0px 10px 10px 10px;
}

/* 通用内边距 */
.padd20205020 {
  padding: 10px 20px 20px 20px;
}

/* 主要内容区布局 */
.people {
  display: -webkit-box;
  /* Safari 旧版兼容 */
  display: -webkit-flex;
  /* Safari 兼容 */
  display: flex;
  -webkit-box-pack: justify;
  /* Safari 兼容 */
  -webkit-justify-content: space-between;
  /* Safari 兼容 */
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  /* 左侧导航栏 */
  /* 右侧主要内容区 */
}
.people .panel {
  flex: 0 0 26ch;      /* 固定 22 个字符宽度（你可改 20/22/24ch） */
  background-color: #f6f6f6;
  border-radius: 5px;
  height: -webkit-max-content;
  /* Safari 兼容 */
  height: max-content;
  position: relative;
  top: 80px;
  -webkit-transition: all 0.7s;
  /* Safari 兼容 */
  transition: all 0.7s;
  /* 导航标题 */
  /* 导航菜单 */
}
.people .panel h4 {
  font-weight: 600;
  padding: 10px 30px;
  color: #527bbd;
  border-bottom: 3px solid #527bbd;
}
.people .panel ul li {
  /* 鼠标悬停效果 */
}
.people .panel ul li a {
  display: block;
  padding: 10px 30px;
  font-size: 15px;
  line-height: 1.33;
  color: #626262;
  font-family: Helvetica, Arial, sans-serif;
}
.people .panel ul li:hover {
  background-color: #dddddd;
}
.people .people-main {
  flex: 0 0 95ch;      /* 固定 95 个字符宽度 */
  max-width: 95ch;
  background-color: #fff;
  padding: 20px;
}
.people .people-main .principle .content {
  padding: 20px 20px 20px 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  gap: 30px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.people .people-main .principle .content img {
  width: 25%;
  -webkit-align-self: flex-start;
  /* Safari 防止图片拉伸 */
  align-self: flex-start;
}

.people .people-main .postdoctoral .content,
.people .people-main .phd .content,
.people .people-main .visiting .content {
  padding: 20px 10px 20px 10px;
  display: -webkit-grid;
  /* Safari 兼容 */
  display: grid;
  gap: 0.8rem;
  -webkit-grid-template-columns: repeat(2, 1fr);
  /* Safari 兼容 */
  grid-template-columns: repeat(2, 1fr);
}

.people .people-main .postdoctoral .content .item,
.people .people-main .phd .content .item,
.people .people-main .visiting .content .item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  gap: 15px;
  align-items: stretch;
}

.people .people-main .postdoctoral .content .item img,
.people .people-main .phd .content .item img,
.people .people-main .visiting .content .item img{
  width: 38%;
  -webkit-align-self: flex-start;
  align-self: flex-start;
}

.people .people-main .group .content {
  padding: 20px 20px 20px 20px;
}
.people .people-main .group .content .item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  gap: 30px;
}
.people .people-main .group .content .item img {
  width: 50%;
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.people .people-main .research .content {
  padding: 20px 20px 20px 20px;
}

.people .people-main .group .content .item.group-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  gap: 30px;
  align-items: stretch;  /* 让左右两列等高（可选） */
}

/* 左侧两张图容器：占 50% */
.people .people-main .group .content .group-photos {
  width: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  gap: 12px;             /* 两张图之间的间隔 */
}

/* 两张图各占一半，且不变形 */
.people .people-main .group .content .group-photos img {
  width: 50%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右侧文字：占剩余空间 */
.people .people-main .group .content .item.group-item p {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}

.people .people-main .research .content .item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  gap: 30px;
}
.people .people-main .research .content .item img {
  width: 38%;
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.people .people-main .laboratory .content {
  padding-bottom: 20px;
}
.people .people-main .laboratory video {
  width: 100%;
  min-height: 350px;
  margin-bottom: 20px;
  /* Safari 视频播放器优化 */
  -webkit-transform: translateZ(0);
  /* 强制硬件加速 */
  transform: translateZ(0);
}
.people .people-main .laboratory video:last-of-type {
  margin-bottom: 0;
}
.people .people-main .journal .jourItem {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  margin-bottom: 10px;
  font-size: 15px;
}
.people .people-main .journal .jourItem:last-of-type {
  margin-bottom: 0;
}
.people .people-main .journal .jourItem span {
  width: 7%;
  -webkit-flex-shrink: 0;
  /* Safari 防止内容挤压 */
  flex-shrink: 0;
}
.people .people-main .journal .jourItem p {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.people .people-main .gallery .jItem {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: 30px;
}
.people .people-main .gallery .jItem img {
  width: 45%;
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.people .people-main .gallery .jItem p {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.people .people-main .jPhd .jourItem {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  margin-bottom: 10px;
  font-size: 15px;
}
.people .people-main .jPhd .jourItem:last-of-type {
  margin-bottom: 0;
}
.people .people-main .jPhd .jourItem span {
  width: 5%;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.people .people-main .jPhd .jourItem p {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.people .people-main .postdocs ul,
.people .people-main .jPhd ul {
  list-style: disc;
  padding-left: 40px;
  /* Safari 列表样式优化 */
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-padding-start: 40px;
}
.people .people-main .ctc {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding-bottom: 20px;
  /* Safari flex 容器优化 */
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.people .people-main .ctc ul li {
  font-size: 14px;
  word-break: break-word;
  /* Safari 长文本换行 */
}
.people .people-main .ctc img {
  width: 30%;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}



/* ==========================
   PI layout (People page)
   ========================== */

/* Make PI content stack as 2 rows */
.people .people-main .principle .content.pi-wrap{
  display: flex;
  flex-direction: column;
  gap: 18px;              /* row1-row2 spacing */
  padding: 20px 20px 20px 20px; /* keep your original padding */
}

/* Row 1: photo + info */
.people .people-main .principle .pi-top{
  display: flex;
  gap: 30px;
  align-items: stretch;
}

/* Photo size */
.people .people-main .principle .pi-photo{
  width: 25%;             
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.25em;   /* 试试 0.1em~0.25em 之间微调 */
  display: block;
}

/* Right-side info */
.people .people-main .principle .pi-info{
  display: flex;
  flex-direction: column;
  justify-content: center;	
}

/* Multi-line block */
.people .people-main .principle .pi-lines > div{
  line-height: 1.6;
}

/* Links: show as a clean list */
.people .people-main .principle .pi-links{
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Make PI links blue (and consistent) */
.people .people-main .principle .pi-links a,
.people .people-main .principle .pi-meta a{
  color: #1a73e8;
  text-decoration: underline;
}
.people .people-main .principle .pi-links a:hover,
.people .people-main .principle .pi-meta a:hover{
  text-decoration-thickness: 2px;
}

/* Email/Address block */
.people .people-main .principle .pi-meta{
  margin-top: 5px;
  line-height: 1.6;
}

/* Row 2 bio spacing */
.people .people-main .principle .pi-bio p{
  margin: 0;
  text-indent: 0;         /* PI bio通常不需要首行缩进 */
  line-height: 1.7;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Google Scholar + LinkedIn in one row */
.people .people-main .principle .pi-link-row{
  display: flex;
  gap: 16px;        /* 固定中间间隔 */
  align-items: center;
}

.people .people-main .postdoctoral .content .item img,
.people .people-main .phd .content .item img,
.people .people-main .visiting .content .item img{
  align-self: stretch !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* People photos: percentage width, full display */
.people .people-main .postdoctoral .content .item.person-card img.person-photo,
.people .people-main .phd .content .item.person-card img.person-photo,
.people .people-main .visiting .content .item.person-card img.person-photo{
  width: 37%;                 /* 用百分比 */
  height: auto !important;    /* 取消 height:100% */
  align-self: flex-start !important;  /* 不等高 */
  object-fit: contain !important;     /* 不裁剪 */
  flex-shrink: 0;
  display: block;
}

.person-card {
  align-items: flex-start;
}

.people .people-main .content .item.person-card {
  gap: 12px !important;
}

/* =================================================
   News entry layout (text + fixed-width images)
   ================================================= */
.news .news-entry{
  display: flex;
  flex-direction: column;
  gap: 6px;                /* 整体更紧凑 */
}

/* square bullet text */
.news .news-bullet{
  margin: 0;
  padding-left: 1.2em;
  position: relative;
  line-height: 1.6;
}

.news .news-bullet::before{
  content: "■";
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 0.7em;
}

/* fixed-width image, centered, tight spacing */
.news .news-img-fixed{
  width: 600px;            /* ← 调节图片的宽度 */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;          /* ← 关键：图片不再拉开与文字的距离 */
}

/* =================================================
   Side-by-side images for News
   ================================================= */
.news .news-img-row{
  display: flex;
  justify-content: center; /* 整体居中 */
  gap: 18px;               /* 两张图之间的间隔 */
  flex-wrap: wrap;         /* 小屏自动换行 */
}

/* 并排时，图片稍微小一点更协调（可选） */
.news .news-img-row .news-img-fixed{
  margin: 0;                 /* ★ 关键：不要 auto */
  width: 360px;            /* 可按需要调：320 / 360 / 400 */
}


/* ============================================
   Research Topics Layout – Stable Final Version
============================================ */

/* 外层容器 */
.people .people-main .research .content .item.research-pro{
  display: flex;
  align-items: center;     /* 垂直居中 */
  gap: 1rem;             /* 间距缩小 */
  margin-bottom: 2rem;
}

/* 左侧图片 40% */
.people .people-main .research .content .item.research-pro .research-media{
  flex: 0 0 40%;
  max-width: 40%;
}

/* 关键：覆盖旧的 img 规则 */
.people .people-main .research .content .item.research-pro .research-media img{
  width: 100%;
  height: auto;            /* 保持比例 */
  display: block;
  object-fit: contain;     /* 完整显示 */
}

/* 右侧文字 60% */
.people .people-main .research .content .item.research-pro .research-text{
  flex: 1;
}

/* 标题 */
.people .people-main .research .research-title{
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  padding-left: 12px;
  border-left: 4px solid #527bbd;
}

/* 列表 */
.people .people-main .research .research-list{
  list-style: disc;
  padding-left: 1.3rem;
  line-height: 2;
}

/* =====================================
   Highlights: bullet + video vertical
   ===================================== */

.people .people-main .laboratory .highlights-list{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;           /* 每个视频之间 1.5rem */
}

/* 每个视频块 */
.people .people-main .laboratory .hl-item{
  display: flex;
  flex-direction: column;
}

/* Bullet 标题 */
.people .people-main .laboratory .hl-title{
  width: 100%;           /* 占满整行 */
  font-size: 1.1rem;     /* 稍大 */
  font-weight: 600;      /* 加粗 */
  line-height: 1.6;
  margin-bottom: 0.7rem;
}

/* 视频区域 */
.people .people-main .laboratory .hl-video{
  width: 60%;
  margin: 0 auto;        /* 视频居中 */
}

/* 16:9 自适应 */
.people .people-main .laboratory .hl-video iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  display: block;
}

/* 小屏幕优化 */
@media (max-width: 900px){
  .people .people-main .laboratory .hl-video{
    width: 90%;
  }
}



/* =================================================
   Publications 自动标号
   ================================================= */
/* Journal 自动编号 */
#Journal .content { counter-reset: j; }
#Journal .jourItem { counter-increment: j; }
#Journal .jourItem .pubLabel::before { content: "[J" counter(j) "]"; }

/* Conference 自动编号 */
#conference .content { counter-reset: c; }
#conference .jourItem { counter-increment: c; }
#conference .jourItem .pubLabel::before { content: "[C" counter(c) "]"; }

/* Book 自动编号 */
#book .content { counter-reset: b; }
#book .jourItem { counter-increment: b; }
#book .jourItem .pubLabel::before { content: "[B" counter(b) "]"; }

/* Dissertation 自动编号 */
#dissertation .content {
    counter-reset: pubD;
}
#dissertation .jourItem {
    counter-increment: pubD;
}
#dissertation .jourItem .pubLabel::before {
    content: "[D" counter(pubD) "]";
}

/* 保留你原来给 span 的宽度习惯（你现在是 .jourItem span { width: 7%; }）*/
.people .people-main .journal .jourItem .pubLabel{
  width: 7%;
  flex-shrink: 0;
}


/* ===============================
   Join us About HKUST: 40% image + text
   =============================== */
.people .people-main .ctc .hkust-about{
  display: flex;
  gap: 3rem;                 /* 图片与文字间距 */
  align-items: center;   /* 顶对齐，更学术 */
}

/* 左侧图片：固定 40% */
.people .people-main .ctc .hkust-about img{
  flex: 0 0 40%;
  width: 40%;
  height: auto;
  object-fit: cover;
  align-self: flex-start;
}

/* 右侧文字：自动占剩余空间 */
.people .people-main .ctc .hkust-about p{
  flex: 1;
  margin: 0;
  line-height: 1.6;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* ===============================
   Postdocs paragraph justification
   =============================== */
.people .people-main .jPhd .content p,
.people .people-main .postdocs .content p{
  text-align: justify;          /* 两端对齐 */
  text-justify: inter-word;     /* 英文排版更自然 */
  hyphens: auto;                /* 自动断词，避免大空隙 */
  line-height: 1.6;             /* 学术网页推荐 */
  margin-bottom: 0em;         /* 和列表/段落呼吸感 */
}


/* Safari 特定修复 */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance:none) {
    /* Safari 网格布局回退方案 */
    .postdoctoral .content,
    .phd .content {
      display: -webkit-flex !important;
      display: flex !important;
      -webkit-flex-wrap: wrap !important;
      flex-wrap: wrap !important;
    }
    .postdoctoral .content .item,
    .phd .content .item {
      width: calc(50% - 15px) !important;
    }
    /* Safari gap 属性回退 */
    .people {
      margin: 0 -10px;
    }
    .people > .panel,
    .people > .people-main {
      margin: 0 10px;
    }
    /* Safari 视频最小高度修复 */
    video {
      min-height: auto !important;
      height: auto !important;
    }
  }
}
/* 针对 Safari 15+ 的优化 */
@supports (-webkit-touch-callout: none) {
  .panel {
    -webkit-backdrop-filter: blur(10px);
    /* 毛玻璃效果 */
    backdrop-filter: blur(10px);
  }
  /* 防止 Safari 中 flex 项目被压缩 */
  .item img {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
  }
}