﻿:root {
  --bg: #f5f7fa;
  --panel: #ffffff;
  --card: #ffffff;
  --muted: #666666;
  --text: #333333;
  --brand: #409EFF;
  --border: #e8e8e8;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,0.1);
  --nav-bg: #2c3e50;
  --nav-text: #ffffff;
}

html, body { height: 100%; margin: 0; padding: 0; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 导航栏 */
.navbar {
  height: 64px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nav-bg);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 100%;
  box-sizing: border-box;
}
.logo-circle { width: 40px; height: 40px; background:#3498db; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:14px; color:white; }
.logo-text { font-size:14px; line-height:1.2; }
.logo-text div:first-child { font-weight:bold; }
.navbar-menu { display:flex; gap:18px; list-style:none; margin:0; padding:0; flex: 1; justify-content: center; }
.navbar-menu li { cursor:pointer; font-size:14px; color:white; transition:color .2s; line-height: 64px; }
.navbar-menu li:hover { color:#3498db; }
.navbar-menu li.active { color:#3498db; border-bottom:2px solid #3498db; }

/* 页面布局 */
.container { max-width: 1200px; margin:0 auto; padding:20px; flex:1; }
.page { padding: 0 0 24px; }
.section { margin-bottom:16px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.section-title { margin:0; padding:14px 16px; border-bottom:1px solid var(--border); font-size:16px; color:#3d4b63; }

/* 卡片网格（导师） */
.card-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); justify-content:center; gap:24px; padding:16px; }
.card-grid.center-three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card-grid.center-two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* 通用卡片样式 */
.member-card { display:flex; flex-direction:column; gap:12px; border:1px solid var(--border); border-radius:6px; background:#fff; padding:16px; box-shadow:0 2px 8px rgba(31,45,61,.08); transition: box-shadow .18s ease, transform .18s ease; }
.member-card:hover { box-shadow:0 8px 20px rgba(31,45,61,.14); transform: translateY(-2px); }
.member-card .photo { width:100%; max-width:260px; aspect-ratio:1 / 1; height:auto; border:1px dashed var(--border); border-radius:50%; background:#f8fbff; display:flex; align-items:center; justify-content:center; overflow:hidden; margin:0 auto; }
.member-card .photo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.member-card .info { display:flex; flex-direction:column; gap:6px; flex:1; }
.member-card .info .name { margin:0; font-size:15px; color:#2f3b52; }
.member-card .info .role { margin:0; color:#72809a; }
.member-card .info .desc { margin:0; color:#6b7c93; }

/* 赵静梅照片下移，显示脸部区域 */
.member-card .photo img[alt="赵静梅"] { object-position: 50% 13%; }
/* 邢容照片微调：下移对齐面部 */
.member-card .photo img[alt="邢容"] { object-position: 50% 58%; }

/* 文本收起效果 */
.member-card .info .desc.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}
.member-card .info .desc.clamp::after {
  content: "";
  position: absolute;
  height: 1.6em;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff);
}
.member-card .info .read-more { color: #4c95c7; text-decoration: none; margin-top: auto; }
.member-card .info .read-more:hover { text-decoration: underline; }

/* 让导师卡片高度一致，按钮贴底 */
.card-grid .member-card { min-height: 360px; }
.card-grid .member-card .info { flex:1; }
.card-grid .member-card .read-more { align-self: flex-start; }

/* 执行团队：单列纵向排列 */
.card-list.vertical.single-column { display:grid; grid-template-columns: 1fr; gap:16px; padding:16px; }
.card-list.vertical.single-column .member-card { min-height:auto; display:grid; grid-template-columns: 160px 1fr; grid-template-rows:auto; align-items:flex-start; gap:14px; padding:14px 16px; }
.card-list.vertical.single-column .member-card .photo { width:160px; height:160px; aspect-ratio:1 / 1; border:1px dashed var(--border); border-radius:50%; margin:0; }
.card-list.vertical.single-column .member-card .info { gap:6px; }
.card-list.vertical.single-column .member-card .info .name { font-size:16px; }
.card-list.vertical.single-column .member-card .desc { white-space: normal; overflow: visible; display: block; }

/* 钟艾希头像：使用 contain 避免裁剪脸部 */
.member-card .photo img.fit-contain { object-fit: contain; padding: 12px; }

@media (max-width: 900px) {
  .card-list.vertical.single-column .member-card { grid-template-columns: 140px 1fr; }
}

@media (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr; }
  .card-list.vertical.single-column .member-card { grid-template-columns: 1fr; }
  .card-list.vertical.single-column .member-card .photo { width: 160px; height: 160px; margin: 0 auto; }
}

/* 成员详情页 */
.profile-wrap { padding: 0 0 12px; }
.profile-wrap .section-title { border-bottom: 1px solid var(--border); margin: 0; }
.breadcrumb { color: var(--muted); font-size: 14px; padding: 12px 16px 0; }
.profile-header { display:flex; gap:16px; align-items:center; padding: 12px 16px 0; }
.profile-avatar img { width:140px; height:140px; border-radius:50%; object-fit:cover; border:1px solid var(--border); box-shadow: var(--shadow); background: #fff; }
.profile-meta { display:flex; flex-direction:column; gap:6px; }
.profile-name { margin:0; font-size:20px; color: var(--text); }
.profile-role { margin:0; color: var(--muted); }
.profile-desc { padding: 8px 16px 16px; line-height: 1.7; color: var(--text); white-space: pre-line; }
@media (max-width: 640px) {
  .profile-header { flex-direction: column; align-items: flex-start; }
  .profile-avatar img { width:120px; height:120px; }
}

/* 页脚 */
.footer { background:#f5f7fa; color:#444; padding:40px 0 0 0; margin-top:auto; font-size:15px; }
.footer-main { display:flex; justify-content:space-around; max-width:1200px; margin:0 auto; padding:0 40px 24px 40px; border-bottom:1px solid #e0e0e0; }
.footer-section { min-width:200px; line-height:2; }
.footer-links { text-align:center; color:#888; font-size:14px; padding:16px 0 24px 0; }

/* 顶部与内容间距 */
.container.page { margin-top: 24px; }
@media (max-width: 720px) { .container.page { margin-top: 16px; } }
