/* =============================================================
   team.html 专属样式 —— 团队介绍
   骨架：简洁页头 / 三肖像错落卡 / 四图标岗位卡 / 深色引用带 /
         纵向协作步骤 / 招聘横带
   ============================================================= */

/* ---------- 1. 页头 ---------- */
.tm-hero{
  background:var(--paper-deep);
  padding:calc(var(--topbar-h) + var(--header-h) + 48px) 0 54px;
}
.tm-hero h1{
  font-size:clamp(28px,3.8vw,44px);margin:16px 0 14px;letter-spacing:.03em;
}
.tm-hero p{font-size:15.5px;color:var(--ink-soft);max-width:640px;line-height:1.95}

/* ---------- 2. 肖像卡 ---------- */
.portrait-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.portrait-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .35s ease,box-shadow .35s ease;
}
.portrait-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.portrait-card--offset{margin-top:34px}
.portrait-img img{
  width:100%;height:320px;object-fit:cover;filter:saturate(.9);
}
.portrait-body{padding:24px 24px 28px}
.portrait-role{
  display:inline-block;font-size:12px;letter-spacing:.18em;color:var(--earth-deep);
  border:1px solid rgba(174,135,73,.4);padding:4px 12px;border-radius:16px;
  margin-bottom:12px;
}
.portrait-body h3{font-size:17px;margin-bottom:10px}
.portrait-body p{font-size:13.5px;color:var(--ink-soft);line-height:1.9}

/* ---------- 3. 图标岗位卡 ---------- */
.role-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.role-card{
  background:var(--paper);border:1px solid var(--line);
  padding:28px 24px;border-radius:var(--radius);
  transition:border-color .3s ease,transform .3s ease;
}
.role-card:hover{border-color:rgba(174,135,73,.45);transform:translateY(-4px)}
.role-icon{
  width:48px;height:48px;border-radius:50%;
  background:rgba(174,135,73,.12);color:var(--earth-deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.role-icon svg{width:24px;height:24px}
.role-card h3{font-size:17px;margin-bottom:10px}
.role-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.9}
.role-card a{color:var(--earth-deep);border-bottom:1px dashed rgba(142,107,54,.5)}

/* ---------- 4. 深色引用带 ---------- */
.tm-quote blockquote{
  text-align:center;max-width:760px;margin:0 auto 46px;
}
.tm-quote blockquote p{
  font-family:var(--font-serif);font-size:clamp(20px,2.6vw,28px);
  color:#EFE9DC;line-height:1.8;
}
.tm-quote blockquote footer{
  margin-top:16px;font-size:13px;color:#8F8677;letter-spacing:.12em;
}
.tm-quote-points{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.tm-quote-points h3{color:#EFE9DC;font-size:17px;margin-bottom:10px}
.tm-quote-points p{color:#A49C8C;font-size:13.5px;line-height:1.9}

/* ---------- 5. 协作步骤 ---------- */
.collab-list{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  counter-reset:collab;
}
.collab-list li{
  position:relative;padding:26px 24px;border:1px solid var(--line);
  border-left:none;background:var(--paper);
}
.collab-list li:first-child{border-left:1px solid var(--line)}
.collab-step{
  display:inline-block;font-size:12px;letter-spacing:.2em;
  color:var(--earth-deep);margin-bottom:12px;
}
.collab-list p{font-size:13.5px;color:var(--ink-soft);line-height:1.9}

/* ---------- 6. 招聘横带 ---------- */
.join-band{
  display:flex;justify-content:space-between;align-items:center;gap:30px;
  flex-wrap:wrap;
}
.join-band .lead{margin-top:8px}
.join-band a{color:var(--earth-deep);border-bottom:1px dashed rgba(142,107,54,.5)}

/* ---------- 响应式 ---------- */
@media (max-width:991px){
  .portrait-grid{grid-template-columns:1fr;gap:20px}
  .portrait-card--offset{margin-top:0}
  .role-grid{grid-template-columns:1fr 1fr}
  .tm-quote-points{grid-template-columns:1fr}
  .collab-list{grid-template-columns:1fr}
  .collab-list li{border-left:1px solid var(--line);border-top:none}
  .collab-list li:first-child{border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .role-grid{grid-template-columns:1fr}
}