/* ============================================
   马雷 Lei Ma — 学术个人网站
   风格：白底黑字 · 国际PI · 简洁大气
   ============================================ */

/* === Reset & Base === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Source Sans 3', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background: #fff;
  color: #2c2c2c;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: #1a6bb5; text-decoration: none; transition: color 0.15s; }
a:hover { color: #0d4a80; text-decoration: underline; }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-weight: 600; color: #1a1a1a; line-height: 1.4; }
h2 {
  font-size: 1.15rem; margin: 1.6rem 0 0.6rem; padding-bottom: 0.35rem;
  border-bottom: 2px solid #1a1a1a; display: inline-block; letter-spacing: 0.02em;
}
h3 { font-size: 0.98rem; margin: 0.6rem 0 0.3rem; }
p { margin-bottom: 0.4rem; }

/* === Layout === */
.container { max-width: 860px; margin: 0 auto; padding: 0 2rem; }

/* === Navigation === */
.navbar {
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  position: sticky; top: 0; z-index: 100;
}
.navbar .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 50px;
}
.nav-brand {
  font-size: 1rem; font-weight: 700; color: #1a1a1a; letter-spacing: 0.03em;
}
.nav-brand:hover { text-decoration: none; color: #1a1a1a; }
.nav-links { display: flex; align-items: center; gap: 0.15rem; list-style: none; }
.nav-links a {
  padding: 0.3rem 0.55rem; font-size: 0.82rem; color: #555;
  border-radius: 4px; transition: background 0.15s, color 0.15s;
}
.nav-links a:hover, .nav-links a.active { color: #1a1a1a; background: #f2f2f2; text-decoration: none; }
.lang-switch {
  font-size: 0.75rem; color: #888; padding: 0.2rem 0.5rem;
  border: 1px solid #ddd; border-radius: 3px; margin-left: 0.3rem;
}
.lang-switch:hover { color: #333; border-color: #aaa; text-decoration: none; }
.mobile-toggle { display: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: #333; padding: 0.2rem; }

/* === Profile Section === */
.profile-section { padding: 2rem 0 0.5rem; }
.profile-grid { display: flex; gap: 1.8rem; align-items: flex-start; }
.profile-photo { flex-shrink: 0; }
.profile-photo img {
  width: 160px; height: 160px; object-fit: cover; border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.profile-info { flex: 1; }
.profile-info h1 { font-size: 1.7rem; margin-bottom: 0.15rem; font-weight: 700; letter-spacing: 0.02em; }
.title-line { font-size: 0.9rem; color: #444; margin-bottom: 0.1rem; }
.affiliation { font-size: 0.87rem; color: #555; margin-bottom: 0.05rem; }
.affiliation a { color: #1a6bb5; }
.contact-line { font-size: 0.85rem; color: #555; margin: 0.35rem 0 0.4rem; }
.contact-line a { color: #1a6bb5; }

.badge-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.badge {
  display: inline-block; padding: 0.15rem 0.5rem;
  font-size: 0.72rem; font-weight: 500;
  border: 1px solid #d0d0d0; border-radius: 3px; color: #555; background: #fafafa;
}

.profile-intro { font-size: 0.88rem; color: #333; line-height: 1.8; margin-top: 0.2rem; }
.profile-intro p { margin-bottom: 0.55rem; text-align: justify; }
.profile-intro p:last-child { margin-bottom: 0; }
.profile-intro strong { color: #1a1a1a; }
.profile-intro em { font-style: italic; }

/* === Section Styles === */
.section { padding: 0.2rem 0; }

/* === Research Table === */
.research-table { width: 100%; border-collapse: collapse; margin-top: 0.4rem; }
.research-table td {
  padding: 0.65rem 0.7rem; vertical-align: top;
  border-bottom: 1px solid #eee; font-size: 0.88rem; line-height: 1.7;
}
.research-table tr:last-child td { border-bottom: none; }
.research-table .rt-title {
  width: 160px; font-weight: 600; color: #1a1a1a;
  white-space: nowrap; font-size: 0.9rem;
}
.research-table .rt-desc { color: #333; }
.research-table .rt-desc em { color: #666; font-size: 0.85rem; }
.research-table .rt-journal {
  display: inline; font-style: italic; color: #1a6bb5; font-weight: 500;
}

/* === Cover Gallery === */
.cover-gallery { display: flex; gap: 16px; margin: 10px 0 14px; }
.cover-item { text-align: center; flex: 0 0 auto; }
.cover-item img {
  width: 140px; height: auto; border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s;
}
.cover-item img:hover { transform: scale(1.03); }
.cover-caption { display: block; font-size: 0.72rem; color: #888; margin-top: 4px; line-height: 1.3; }

/* === Publications === */
.pub-list { margin: 0; padding: 0; }
.pub-item {
  padding: 0.4rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.pub-item:last-child { border-bottom: none; }
.pub-entry { font-size: 0.86rem; color: #333; line-height: 1.7; margin-bottom: 0; }
.pub-entry strong { color: #1a1a1a; }
.pub-entry a { font-size: 0.82rem; color: #1a6bb5; }
.cover-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 600;
  color: #c62828; background: #ffebee; padding: 1px 6px; border-radius: 2px; margin-left: 3px;
}

.more-link { font-size: 0.84rem; color: #1a6bb5; margin-top: 0.3rem; display: inline-block; }
.more-link:hover { color: #0d4a80; }

/* === Media & Talks Summary === */
.link-list { margin: 0.2rem 0; }
.link-item {
  display: flex; align-items: baseline; gap: 6px;
  padding: 0.22rem 0; font-size: 0.86rem; border-bottom: 1px solid #f5f5f5;
}
.link-item:last-child { border-bottom: none; }
.link-item a { flex: 1; color: #1a6bb5; }
.date { font-size: 0.76rem; color: #999; white-space: nowrap; }
.source-tag {
  display: inline-block; font-size: 0.66rem; font-weight: 600;
  padding: 0.08rem 0.35rem; border-radius: 2px; white-space: nowrap; flex-shrink: 0;
}
.source-tag.cctv { background: #ffebee; color: #c62828; }
.source-tag.xinhua { background: #e3f2fd; color: #1565c0; }
.source-tag.keji { background: #e8f5e9; color: #2e7d32; }
.source-tag.rmrb { background: #fff3e0; color: #e65100; }

/* === Academic Service === */
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; margin-top: 0.3rem; }
.service-item { font-size: 0.86rem; color: #333; padding: 0.2rem 0; }
.service-item .sv-label { font-weight: 600; color: #1a1a1a; font-size: 0.84rem; }
.service-item .sv-detail { color: #555; font-size: 0.84rem; }

/* === Honors === */
.honors-list { margin: 0.2rem 0; }
.honor-item { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.22rem 0; font-size: 0.86rem; }
.honor-year { font-weight: 600; color: #888; min-width: 2.5rem; font-size: 0.84rem; }
.honor-text { color: #333; }

/* === Teaching === */
.teaching-list { margin: 0.2rem 0; }
.teaching-item { padding: 0.25rem 0; font-size: 0.86rem; color: #333; border-bottom: 1px solid #f5f5f5; }
.teaching-item:last-child { border-bottom: none; }
.teaching-item .tch-name { font-weight: 600; color: #1a1a1a; }
.teaching-item .tch-detail { color: #666; font-size: 0.82rem; }

/* === Contact === */
.contact-section { margin-top: 0.2rem; }
.contact-info { font-size: 0.87rem; color: #444; line-height: 1.8; }
.contact-info a { color: #1a6bb5; }
.contact-info p { margin-bottom: 0.2rem; }
.recruit-box {
  margin-top: 0.8rem; padding: 0.8rem 1rem;
  background: #f8f9fa; border-left: 3px solid #1a6bb5; border-radius: 0 4px 4px 0;
  font-size: 0.85rem; color: #333; line-height: 1.75;
}
.recruit-box p { margin-bottom: 0.3rem; }
.recruit-box p:last-child { margin-bottom: 0; }
.recruit-box strong { color: #1a1a1a; }

/* === Footer === */
.footer { margin-top: 1.2rem; padding: 0.8rem 0; border-top: 1px solid #e5e5e5; text-align: center; font-size: 0.76rem; color: #aaa; }

/* === Sub-page styles === */
.page-header { padding: 1rem 0 0.5rem; }
.page-header h1 { font-size: 1.3rem; margin-bottom: 0.2rem; }
.page-header p { font-size: 0.87rem; color: #555; }
.back-link { font-size: 0.84rem; color: #1a6bb5; margin-bottom: 0.5rem; display: inline-block; }

/* Media detail page */
.media-group { margin-bottom: 18px; }
.media-group h3 { font-size: 0.95rem; font-weight: 600; color: #222; border-bottom: 1px solid #eee; padding-bottom: 4px; margin-bottom: 6px; }
.media-card {
  display: block; padding: 0.6rem 0.8rem; margin-bottom: 0.4rem;
  border-left: 3px solid #ddd; background: #fafafa; border-radius: 0 4px 4px 0;
  text-decoration: none; color: inherit; transition: background 0.15s;
}
.media-card:hover { background: #f0f4f8; text-decoration: none; color: inherit; }
.media-card.cctv { border-left-color: #c62828; }
.media-card.xinhua { border-left-color: #1565c0; }
.media-card.keji { border-left-color: #2e7d32; }
.media-card.kexue { border-left-color: #6a1b9a; }
.media-card.zhiyuan { border-left-color: #f9a825; }
.media-card.pku { border-left-color: #8b1a2b; }
.media-card.rmrb { border-left-color: #e65100; }
.media-card.other { border-left-color: #888; }
.media-card .mc-source { font-size: 0.72rem; font-weight: 700; margin-bottom: 0.1rem; }
.media-card .mc-title { font-size: 0.88rem; font-weight: 600; color: #222; margin-bottom: 0.1rem; }
.media-card .mc-title a { color: #222; }
.media-card .mc-title a:hover { color: #1a6bb5; }
.media-card .mc-date { font-size: 0.75rem; color: #999; margin-bottom: 0.12rem; }
.media-card .mc-desc { font-size: 0.82rem; color: #555; line-height: 1.55; margin-bottom: 0; }

/* Talks detail page */
.year-group { margin-bottom: 18px; }
.year-group h3 { font-size: 1rem; font-weight: 700; color: #222; margin-bottom: 6px; }
.talk-card {
  display: block; padding: 0.6rem 0.8rem; margin-bottom: 0.4rem;
  border-left: 3px solid #1a6bb5; background: #fafafa; border-radius: 0 4px 4px 0;
  text-decoration: none; color: inherit; transition: background 0.15s;
}
.talk-card:hover { background: #f0f4f8; text-decoration: none; color: inherit; }
.talk-card .tc-meta { font-size: 0.75rem; color: #888; margin-bottom: 0.1rem; }
.talk-card .tc-title { font-size: 0.88rem; font-weight: 600; margin-bottom: 0.1rem; }
.talk-card .tc-title a { color: #222; }
.talk-card .tc-title a:hover { color: #1a6bb5; }
.talk-card .tc-desc { font-size: 0.82rem; color: #555; line-height: 1.55; margin-bottom: 0; }

/* Publications page */
.pub-section { margin-bottom: 18px; }
.pub-section h3 { font-size: 0.95rem; font-weight: 600; color: #222; border-bottom: 1px solid #eee; padding-bottom: 4px; margin-bottom: 6px; }

/* Team page */
.team-placeholder {
  text-align: center; padding: 48px 20px; color: #999; font-size: 0.88rem;
  border: 1px dashed #ddd; border-radius: 6px; margin: 14px 0;
}
.team-section { margin-bottom: 18px; }
.team-section h3 { font-size: 0.95rem; font-weight: 600; color: #222; border-bottom: 1px solid #eee; padding-bottom: 4px; margin-bottom: 6px; }

/* === Responsive === */
@media (max-width: 768px) {
  html { font-size: 15px; }
  .container { padding: 0 1.2rem; }
  .profile-grid { flex-direction: column; align-items: center; text-align: center; }
  .profile-photo img { width: 130px; height: 130px; }
  .badge-row { justify-content: center; }
  .cover-gallery { flex-wrap: wrap; justify-content: center; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute;
    top: 50px; left: 0; right: 0; background: #fff;
    padding: 0.5rem; border-bottom: 1px solid #ddd; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .mobile-toggle { display: block; }
  .link-item { flex-wrap: wrap; }
  .honor-item { flex-wrap: wrap; gap: 0.2rem; }
  .service-grid { grid-template-columns: 1fr; }
  .research-table .rt-title { width: auto; white-space: normal; }
  .profile-intro p { text-align: left; }
}

@media (max-width: 480px) {
  .profile-photo img { width: 110px; height: 110px; }
}