/* ===================================================================
   team-detail.css - 团队详情页
   -------------------------------------------------------------------
   说明：复用 home.css 的 .site-header / .site-footer 等基础样式，
   本文件补充 team-detail 独有的部分。
   =================================================================== */

/* ==============================================================
   1. 顶部大图 Hero
   ============================================================== */
.team-hero {
  position: relative;
  height: 200px;
  background:
    linear-gradient(180deg, rgba(10,23,41,0.0) 0%, rgba(10,23,41,0.0) 60%, rgba(10,23,41,0.55) 100%),
    url("../../images/team-bg-img.png") center / cover no-repeat;
  overflow: hidden;
}

@media (min-width: 768px)  { .team-hero { height: 300px; } }
@media (min-width: 1025px) { .team-hero { height: 400px; } }

/* ==============================================================
   2. 面包屑 + 返回
   ============================================================== */
.team-breadcrumb {
  padding-block: var(--space-5);
}

.team-breadcrumb .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: var(--space-4);
}

.team-breadcrumb__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.team-breadcrumb__nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}

.team-breadcrumb__nav a:hover { color: var(--color-accent); }

.team-breadcrumb__sep {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.team-breadcrumb__current {
  color: var(--color-text-inverse);
}

.team-breadcrumb__back {
  font-size: var(--font-size-sm);
  color: var(--color-text-inverse);
  text-decoration: none;
  transition: color var(--transition-base);
}

.team-breadcrumb__back:hover { color: var(--color-accent); }
.team-breadcrumb__back span { margin-left: 2px; }

/* ==============================================================
   3. 详情主体（两列布局）
   ============================================================== */
.team-detail {
  padding-block: var(--space-8) var(--space-10);
}

.team-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1025px) {
  .team-detail__grid {
    grid-template-columns: 440px 1fr;
    gap: var(--space-10);
    align-items: start;
  }
}

/* 左侧照片 */
.team-detail__photo {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  aspect-ratio: 500 / 673;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}

.team-detail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右侧信息 */
.team-detail__info {
  min-width: 0;
}

/* 成员名称 - 水平白→蓝渐变 */
.team-detail__name {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-2);
  display: inline-block;
  background-image: linear-gradient(90deg, #ffffff 0%, #0095ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.team-detail__role {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  letter-spacing: 0.05em;
}

.team-detail__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
  line-height: 1.6;
}

.team-detail__meta {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}

.team-detail__meta li {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

.team-detail__meta strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.team-detail__divider {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: var(--space-5) 0 var(--space-6);
}

/* 三大板块 */
.team-detail__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.team-detail__section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-2);
}

.team-detail__section-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  flex-shrink: 0;
}

.team-detail__section-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

/* ==============================================================
   4. 上一篇 / 下一篇
   ============================================================== */
.team-pager {
  padding-block: var(--space-5) var(--space-10);
}

.team-pager__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  flex-wrap: wrap;
}

.team-pager__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}

.team-pager__item:hover { color: var(--color-accent); }

.team-pager__item--next { text-align: right; }

.team-pager__label {
  color: var(--color-text-muted);
}

.team-pager__name {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

.team-pager__arrow { color: var(--color-text-muted); font-weight: bold; }

/* ==============================================================
   5. 响应式：移动端
   ============================================================== */
@media (max-width: 767px) {
  .team-hero { height: 160px; }

  .team-breadcrumb { padding-block: var(--space-3); }
  .team-breadcrumb .container { padding-bottom: var(--space-3); }
  .team-breadcrumb__nav { font-size: 0.75rem; }

  .team-detail { padding-block: var(--space-5) var(--space-6); }
  .team-detail__grid { gap: var(--space-5); }

  .team-detail__name { font-size: 1.5rem; }
  .team-detail__role,
  .team-detail__desc { font-size: 0.8125rem; }
  .team-detail__meta li { font-size: 0.8125rem; }

  .team-detail__section-title { font-size: 0.9375rem; }
  .team-detail__section-text { font-size: 0.8125rem; }

  .team-pager { padding-block: var(--space-3) var(--space-5); }
  .team-pager__nav { padding: var(--space-3); }
  .team-pager__item { font-size: 0.75rem; }
}