@import '../../../styles/variables.scss';

// 文章详情页 — 阅读优化排版

.article-detail-page {
  padding-bottom: 100px;
  background: $card;
}

.article-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--tk-font-h1);
  font-weight: 700;
  color: $tx;
  display: block;
  line-height: 1.35;
  margin-bottom: var(--tk-gap-md);
  letter-spacing: 0.5px;
}

.article-meta {
  display: flex;
  gap: var(--tk-gap-md);
  font-size: var(--tk-font-cap);
  color: $tx3;
  margin-bottom: var(--tk-gap-lg);
  align-items: center;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-icon {
  font-size: 13px;
  line-height: 1;
}

.article-divider {
  height: 1px;
  background: linear-gradient(90deg, $bd-l, $bd, $bd-l);
  margin-bottom: var(--tk-section-gap);
}

.article-body {
  // RichText 内部样式由 formatArticleHtml 内联注入
  // 这里只控制容器间距
  font-size: var(--tk-font-body);
  color: $tx2;
  line-height: 1.8;

  // 兜底：万一内联样式未生效的标签
  h1, h2, h3, h4, h5, h6 {
    color: $tx;
    line-height: 1.4;
  }
}

.article-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: $card;
  border-top: 1px solid $bd-l;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 0 var(--tk-page-padding);
  z-index: 10;
  // 安全区适配
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgba(45, 42, 38, 0.06);
}

.article-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: $touch-min;
  min-height: $touch-min;
  justify-content: center;
  border-radius: $r-sm;
  transition: background var(--tk-duration-fast);

  &:active {
    background: $surface-alt;
    opacity: var(--tk-touch-feedback-opacity);
  }
}

.article-action-icon {
  font-size: 22px;
  color: $tx2;
  line-height: 1;
}

.article-action-text {
  font-size: var(--tk-font-micro);
  color: $tx3;
}

.loading-state,
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--tk-gap-2xl) 0;
}

.loading-text,
.empty-text {
  font-size: var(--tk-font-body);
  color: $tx3;
}

// ─── 关怀模式覆盖 ───
.elder-mode {
  .article-title {
    font-size: var(--tk-font-h1);
    line-height: 1.3;
  }

  .article-body {
    font-size: var(--tk-font-body);
    line-height: 2;
  }

  .article-bottom-bar {
    height: 72px;
    gap: 56px;
  }

  .article-action-icon {
    font-size: 26px;
  }

  .article-action-text {
    font-size: var(--tk-font-body-sm);
  }
}