/* ============================================================
   XYZ Lab — style.css
   To change colors/fonts, edit the variables in :root below.
   ============================================================ */

:root {
  --accent:      #1a4fa0;
  --accent-dark: #133a7a;
  --text:        #1a1a1a;
  --text-muted:  #555;
  --bg:          #ffffff;
  --bg-alt:      #f5f7fa;
  --border:      #dde2ea;
  --nav-height:  60px;
  --max-width:   1700px;
  --font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ───────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; margin-bottom: .5rem; }
h3 { font-size: 1.15rem; margin-bottom: .25rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }

main img {
  cursor: zoom-in;
}
/* ── Layout ─────────────────────────────────────────────────── */

.container {
  width: min(92%, 1700px);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Header / Nav ───────────────────────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  height: var(--nav-height);
}

header .container {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 2rem;
}

.site-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  text-decoration: none;
}
.site-title:hover { text-decoration: none; color: var(--accent-dark); }

nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

nav a {
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: .35rem .65rem;
  border-radius: 4px;
  transition: color .15s, background .15s;
  text-decoration: none;
}

nav a:hover {
  color: var(--accent);
  background: var(--bg-alt);
}

nav a.active {
  color: var(--accent);
  background: var(--bg-alt);
  font-weight: 700;
}

/* ── Page body ──────────────────────────────────────────────── */
main {
  padding: 2rem 0 3rem;
}

.page-title {
  font-size: 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: .75rem;
  border-bottom: 3px solid var(--accent);
  display: inline-block;
}

section {
  margin-bottom: 2rem;
}

section h2 {
  margin-bottom: 1rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}

/* ── Hero (Home page) ───────────────────────────────────────── */
.hero {
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 1.87rem 2rem;
  margin-bottom: 2rem;
}

.hero h1 {
  font-size: 2.2rem;
  color: var(--accent);
  margin-bottom: .4rem;
}

.hero .tagline {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}
.hero p {
  text-align: justify;
}
/* ── Highlight cards (Home) ─────────────────────────────────── */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.highlight-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem;
  background: var(--bg-alt);

  display: flex;
  flex-direction: column;
  height: 100%;
}
.highlight-card p {
  flex-grow: 1;
  text-align: justify;
}
.highlight-card a {
  margin-top: 1rem;
  align-self: flex-start;
}

.highlight-card h3 { color: var(--accent); margin-bottom: .5rem; }

/* ── News list ──────────────────────────────────────────────── */
.news-list { list-style: none; padding: 0; }

.news-item {
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
}
.news-item:first-child { padding-top: 0; }
.news-item:last-child { border-bottom: none; }

.news-date {
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .2rem;
}

.news-headline {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .3rem;
}

.news-body { color: var(--text-muted); font-size: .95rem; }

/* Events & News */

.news-event {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}

.news-event:last-child {
  border-bottom: none;
}

.news-event h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.news-description {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.news-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.news-photo-item {
  text-align: center;
}

.news-photo-item img {
  width: 100%;
  height: clamp(220px, 28vw, 420px);
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.news-photo-item p {
  margin-top: 0.5rem;
  font-size: 0.92rem;
}

/* ── home news ─────────────────────────────────────────────────── */
.news-preview-item {
  padding: 0.8rem 0 1rem 0;
}

.news-preview-item h3 {
  font-size: 1rem;
  margin: 0 0 0.45rem 0;  
  color: var(--text);
  font-weight: 700;
}
.news-preview-item p,
.news-description {
  text-align: justify;
}

.news-preview-item p {
  margin: 0;           
  color: var(--text-muted);
  line-height: 1.6;
}
/* ── People ─────────────────────────────────────────────────── */
.pi-card { 
   display: flex; 
   gap: 1.75rem; 
   align-items: flex-start; 
   margin-bottom: 2.5rem; } 
.pi-card img, 
.pi-card .photo-placeholder { 
   width: clamp(110px, 12vw, 180px);
   aspect-ratio: 13 / 16;
   height: auto;
   object-fit: cover; 
   border-radius: 6px; 
   flex-shrink: 0; 
   background: var(--bg-alt); 
   border: 1px solid var(--border); 
   display: flex; 
   align-items: center; 
   justify-content: center; 
   color: var(--text-muted); font-size: .8rem; }

.pi-card .info h3 { font-size: 1.2rem; margin-bottom: .1rem; }
.pi-card .info .role { color: var(--accent); font-size: .9rem; margin-bottom: .6rem; }
.pi-card .info p { text-align: justify;} /* right&left align*/
.pi-card .links { margin-top: .5rem; font-size: .9rem; }
.pi-card .links a { margin-right: .75rem; }

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
}

.person-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
}

.person-card img,
.person-card .photo-placeholder {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: .8rem;
}

.person-card .card-body { padding: .75rem; }
.person-card h3 { font-size: .95rem; }
.person-card .role { font-size: .8rem; color: var(--text-muted); }
.person-card .area { font-size: .8rem; color: var(--accent); margin-top: .2rem; }

.alumni-list { list-style: none; padding: 0; }
.alumni-list li {
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .95rem;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.alumni-list li:last-child { border-bottom: none; }
.alumni-now { color: var(--text-muted); font-size: .85rem; }
.group-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 1rem;
}

/* groupphoto */
.group-photo-item {
  text-align: center;
}

.group-photo-placeholder,
.group-photo-item img {
  width: 100%;
  height: clamp(240px, 30vw, 420px);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.group-photo-item p {
  margin-top: 0.6rem;
  font-size: 0.95rem;
}
/* ──People Image Lightbox ───────────────────────────── */

.img-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0,0,0,0.82);
  justify-content: center;
  align-items: center;
  padding: 2rem;
  overflow: auto; 
}

.img-modal.show {
  display: flex;
}

.img-modal-content {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  transition: transform 0.15s ease;
  transform-origin: center center; 
  cursor: zoom-in;
}
.img-modal-content.zoomed {
  cursor: grab;
}
.img-close {
  position: absolute;
  top: 18px;
  right: 26px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}

.pi-card img,
.person-card img,
.group-photo-item img {
  cursor: zoom-in;
}
/* ── Research ───────────────────────────────────────────────── */

.research-section {
  margin-bottom: 2rem;
}

.research-topic {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: flex-start;

  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 90px;
}

.research-topic:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* 左边图片区 */
.research-image {
  width: 66.6%;
  flex-shrink: 0;
}

.research-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: contain;
}
/* 右边文字区 */
.research-content {
  width: 33.3%;
}

.research-content h3 {
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.research-lines {
  font-size: 1.1rem;
  text-align: justify;
}
.research-line {
  line-height: 1.7;          /* 同一句内部保持原样 */
  margin-bottom: 0.6rem;    /* 句子之间增加约1.3倍 */
}
.research-line:last-child {
  margin-bottom: 0;
}
section {
  scroll-margin-top: 80px;
}
/* ── Publications ───────────────────────────────────────────── */
.pub-year-group { margin-bottom: 2rem; }
.pub-year { font-size: 1.1rem; font-weight: 700; color: var(--accent); margin-bottom: .75rem; }

.pub-list { list-style: none; padding: 0; }
.pub-entry {
  padding: .8rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .95rem;
  line-height: 1.5;
}
.pub-entry:last-child { border-bottom: none; }
.pub-title { font-weight: 600; }
.pub-venue { font-style: italic; color: var(--text-muted); }
.pub-links { margin-top: .3rem; }
.pub-links a {
  display: inline-block;
  margin-right: .5rem;
  font-size: .8rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: .1rem .45rem;
  color: var(--accent);
}
.pub-links a:hover { background: var(--accent); color: #fff; text-decoration: none; }

/* ── Join Us ────────────────────────────────────────────────── */
.join-section { margin-bottom: 2rem; }
.join-section h3 { color: var(--accent); margin-bottom: .5rem; }
.join-section p,
.join-section div {
  text-align: justify;
}
.skills-block {
  margin-left: 1.5rem;
  margin-right: 16ch;
  line-height: 1.7;
  margin-bottom: 1rem;
}
/* ── Footer ─────────────────────────────────────────────────── */
footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
  font-size: .85rem;
  color: var(--text-muted);
  text-align: center;
}

footer a { color: var(--text-muted); }
footer a:hover { color: var(--accent); }

/* ── Loading / error states ─────────────────────────────────── */
.loading, .error {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: .95rem;
}
.error { color: #c0392b; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  header { height: auto; }

  header .container {
    flex-direction: column;
    align-items: flex-start;
    padding: .75rem 1.5rem;
    height: auto;
    gap: .5rem;
  }
   
  .container {
     width: 100%;
     padding: 0 1rem;
  }
  nav { gap: .1rem; }
  nav a { padding: .3rem .5rem; font-size: .85rem; }

  /* ---------- PI section ---------- */
 .pi-card {
   display: block;
 }

 .pi-card img,
 .pi-card .photo-placeholder {
   float: left;
   width: 165px;
   height: 210px;
   margin: 0 1rem .5rem 0;
   object-fit: cover;
   border-radius: 6px;
 }

 .pi-card::after {
   content: "";
   display: block;
   clear: both;
 }
   
 .people-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

 .person-card img,
 .person-card .photo-placeholder {
   height: auto;
   aspect-ratio: 3 / 4;
   object-fit: cover;
 }

 .person-card h3 {
   font-size: 0.9rem;
 }

 .person-card .role,
 .person-card .area {
   font-size: 0.75rem;
 }
  /* ---------- Hero ---------- */
  .hero {
    padding: 1.5rem 1rem;
  }

  .hero h1 {
    font-size: 1.6rem;
  }

  /* ---------- Group Photo--------- */
  .group-photo-grid {
    grid-template-columns: 1fr;
  }

  .group-photo-item img,
  .group-photo-placeholder {
    height: auto;
    max-height: 320px;
    object-fit: cover;
  }
   

  /* ---------- News ---------- */
  .news-photo-grid {
    grid-template-columns: 1fr;
  }

  .news-photo-item img {
    height: auto;
    max-height: 320px;
  }
 /* ---------- text ---------- */
p {
  text-align: justify;
  hyphens: auto;
  overflow-wrap: break-word;
}
   
/* ---------- Research ---------- */

.research-topic {
  display: flex;
  flex-direction: column;  
  gap: 1rem;
}

.research-content {
  width: 100%;
  order: 1;
}

.research-image {
  width: 100%;
  order: 2;
  margin-top: 0;
}

.research-image img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.research-topic,
section {
  scroll-margin-top: 140px;
}

.research-content h3 {
  font-size: 1.15rem;   /* 与全站 h3 一致 */
  margin-bottom: .25rem;
}

.research-content p,
.research-lines {
  font-size: 1rem;    
  line-height: 1.7;     
}
.research-line {
  margin-bottom: 0.4rem;
}
   
/* ---------- join---------- */
.skills-block {
  margin-right: 0;
}
}

/* ── Gallery Slider ───────────────────────────── */

.gallery-slider {
  position: relative;
  margin-top: 1rem;
}

.gallery-viewport {
  overflow: hidden;
  width: 100%;
}

.gallery-track {
  display: grid;
  grid-auto-flow: column;
  gap: 20px;

  /* 默认普通电脑：2张 */
  grid-auto-columns: calc((100% - 14px) / 2);
}

.gallery-track a {
  width: 100%;
  height: clamp(280px, 31vw, 520px);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
}

.gallery-track img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 完整显示图片 */
  background: #fff;
  display: block;
  transition: transform 0.25s ease;
}

.gallery-track a:hover img {
  transform: scale(1.03);
}

/* 按钮 */
.gallery-btn {
  position: absolute;
  bottom: 12px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
}

.gallery-btn:hover {
  background: rgba(0,0,0,0.8);
}

.gallery-btn.prev { right: 58px; }
.gallery-btn.next { right: 10px; }

}

/* 大屏幕：3张 */
@media (min-width: 1600px) {
  .gallery-track {
    grid-auto-columns: calc((100% - 28px) / 3);
  }
  .research-lines {
    font-size: 1.3rem; 
  }
}

/* 普通电脑：2张（默认） */

/* 手机：1张 */
@media (max-width: 768px) {
  .gallery-track {
    grid-auto-columns: 100% !important;
  }

  .gallery-track a {
    height: 260px;
  }
}