/* ==========================================================================
   teacher.css —— 师资详情页（teacher-detail.html）专用版式
   原先把这段样式复制进了 17 位老师的正文 HTML 里，属于重复硬编码，
   现已统一抽到本文件，正文只保留纯内容。
   ========================================================================== */

.td-hero { background:radial-gradient(ellipse at 82% 16%, rgba(230, 0, 35, .10), transparent 52%), linear-gradient(135deg, #1A1715 0%, #221E1B 55%, #2C2622 100%); color:#fff; padding:44px 0 40px; }
.td-hero__wrap { display:grid; grid-template-columns:220px 1fr; gap:34px; align-items:center; }
.td__pic { width:220px; height:280px; border-radius:16px; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.35); background:#141414; }
.td__pic img { width:100%; height:100%; object-fit:cover; display:block; }
.td__name { font-size:clamp(28px,3.4vw,36px); font-weight:900; }
.td__name small { font-size:14px; color:var(--brand-light); font-weight:700; margin-left:8px; letter-spacing:.1em; }
.td__role { margin-top:8px; font-size:15.5px; color:rgba(255,255,255,.88); }
.td__tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.td__tag { font-size:12.5px; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:5px 12px; }
.td-body { max-width:880px; margin:0 auto; }
.td-body h3 { font-size:19px; font-weight:800; color:var(--ink); margin:32px 0 14px; text-align:center; }
.td__creds { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 26px; list-style:none; }
.td__creds li { padding:9px 0; font-size:14px; color:var(--ink-2); border-bottom:1px dashed var(--line); display:flex; align-items:flex-start; gap:10px; }
.td__creds li:last-child { border-bottom:none; }
.td__creds li::before { content:""; flex-shrink:0; width:6px; height:6px; border-radius:50%; background:var(--brand-light); margin-top:9px; }

/* ==========================================================================
   师资详情页 · 底部「热门推荐」版式覆盖
   · 师资页一行 5 条，封面用 3:4（宽3高4）竖版，比默认 4 列 4:3 更贴合人物头像
   · 用 .page-teacher 作用域限定，不影响课程/作品/视频/新闻等其他详情页
   ========================================================================== */
.page-teacher .lh-rec__grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.page-teacher .rec-item__pic { aspect-ratio: 3 / 4; }

@media (max-width: 1024px){
  .page-teacher .lh-rec__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 720px){
  .page-teacher .lh-rec__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width:720px){
  .td-hero__wrap { grid-template-columns:1fr; text-align:center; }
  .td__pic { width:160px; height:200px; margin:0 auto; }
  .td__tags { justify-content:center; }
}