/**
 * 详情页富文本 Tab 组件样式（共享：专家详情 4 tab / 案例详情 3 tab / 服务项详情 3 tab）
 * 命名遵循 BEM 规范（CODE_STANDARDS §3.4）
 *
 * 引入方式：<link rel="stylesheet" href="/static/css/detail-tabs.css" />
 * 全局基础样式已在 style.css 中定义，此处仅做 Tab 组件扩展
 * 依赖：WangEditor 输出的富文本以 .rich-content 包裹，复用 article-prose 排版规则
 */

/* ========================================================================
   1. Tab 导航
   ======================================================================== */

.detail-tabs {
  border-bottom: 2px solid var(--c-line);
  margin-bottom: 32px;
  position: relative;
}

.detail-tabs__nav {
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.detail-tabs__nav::-webkit-scrollbar { display: none; }

.detail-tabs__item {
  padding: 14px 24px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--c-muted);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .25s, border-color .25s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.detail-tabs__item svg { width: 18px; height: 18px; flex-shrink: 0; }

.detail-tabs__item:hover { color: var(--c-ink); }

.detail-tabs__item.is-active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}

/* ========================================================================
   2. Tab 面板（富文本内容区）
   ======================================================================== */

.detail-tabs__pane { display: none; }

.detail-tabs__pane.is-active { display: block; animation: detailTabFade .3s ease; }

@keyframes detailTabFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 富文本排版（复用 article-prose 规则，独立命名以避免与文章详情冲突） */
.rich-content { color: var(--c-text); font-size: 1rem; line-height: 1.85; }
.rich-content :where(h1, h2, h3, h4) { color: var(--c-ink); font-weight: 700; line-height: 1.4; margin: 1.6em 0 .8em; }
.rich-content h2 { font-size: 1.4rem; }
.rich-content h3 { font-size: 1.2rem; }
.rich-content p { margin: 0 0 1em; }
.rich-content :where(ul, ol) { margin: 0 0 1em; padding-left: 1.5em; }
.rich-content li { margin: .3em 0; }
.rich-content img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: 1em 0; }
.rich-content blockquote { margin: 1.2em 0; padding: 12px 20px; border-left: 4px solid var(--c-primary); background: var(--c-bg-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--c-muted); }
.rich-content :where(table) { width: 100%; border-collapse: collapse; margin: 1em 0; }
.rich-content table :where(th, td) { border: 1px solid var(--c-line); padding: 10px 14px; text-align: left; }
.rich-content table th { background: var(--c-bg-soft); font-weight: 600; }
.rich-content a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.rich-content :where(pre, code) { font-family: 'JetBrains Mono', 'Courier New', monospace; }
.rich-content pre { background: var(--c-bg-soft); padding: 14px 18px; border-radius: var(--r-md); overflow-x: auto; font-size: var(--fs-sm); }

/* ========================================================================
   3. 空状态（tab 内容为空时展示，复用全局 .empty-state 组件）
   组件：layout/components/empty-state.htm（文案/图标由后端注入）
   此处仅做 tab 面板内的紧凑化覆盖
   ======================================================================== */

.detail-tabs__pane .empty-state {
  padding: 48px 24px;
  background: var(--c-bg-soft);
  border-radius: var(--r-md);
  box-shadow: none;
}
.detail-tabs__pane .empty-state__icon { width: 48px; height: 48px; margin-bottom: 16px; }
.detail-tabs__pane .empty-state h3 { font-size: 1rem; margin-bottom: 6px; }
.detail-tabs__pane .empty-state p { font-size: var(--fs-sm); margin-bottom: 0; max-width: none; }

/* ========================================================================
   4. 详情页头部信息卡（专家/案例/服务项通用）
   ======================================================================== */

.detail-hero {
  display: flex;
  gap: 32px;
  align-items: center;
  background: var(--c-card);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--sh-sm);
  margin-bottom: 40px;
}

.detail-hero__avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--c-bg-soft);
  display: grid;
  place-items: center;
}

.detail-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero__avatar svg { width: 56px; height: 56px; color: var(--c-muted); }

.detail-hero__body { flex: 1; min-width: 0; }
.detail-hero__title { font-size: 1.6rem; font-weight: 700; color: var(--c-ink); margin: 0 0 8px; }
.detail-hero__subtitle { font-size: 1.05rem; color: var(--c-primary); font-weight: 600; margin: 0 0 12px; }
.detail-hero__meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--c-muted); font-size: var(--fs-sm); }
.detail-hero__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.detail-hero__meta-item svg { width: 16px; height: 16px; }

/* ========================================================================
   5. 响应式
   ======================================================================== */

@media (max-width: 768px) {
  .detail-tabs__item { padding: 12px 16px; font-size: var(--fs-sm); }
  .detail-tabs__item svg { width: 16px; height: 16px; }
  .detail-hero { flex-direction: column; text-align: center; padding: 24px; gap: 20px; }
  .detail-hero__avatar { width: 110px; height: 110px; }
  .detail-hero__meta { justify-content: center; }
  .rich-content { font-size: var(--fs-sm); line-height: 1.75; }
}

@media (max-width: 480px) {
  .detail-tabs__item { padding: 10px 12px; }
  .detail-hero__title { font-size: 1.3rem; }
}