@import "./common.css";
/* ===== 文章详情页主内容 ===== */
.article-page { max-width:1200px; margin:90px auto 40px; padding:0 20px; }

/* 面包屑导航 */
.breadcrumb { font-size:14px; color:#999; padding:12px 0 16px; border-bottom:1px solid #f0f0f0; margin-bottom:24px; }
.breadcrumb a { color:#197149; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb .sep { margin:0 8px; color:#ccc; }
.breadcrumb .current { color:#666; }

/* 文章主体区域 - 两栏布局 */
.article-wrapper { display:flex; gap:40px; }

.article-main { flex:1; min-width:0; }

/* 文章标题 */
.article-title { font-size:28px; font-weight:700; color:#000; line-height:1.4; margin-bottom:12px; }
.article-title .tag { display:inline-block; font-size:13px; font-weight:600; color:#fff; background:#197149; padding:2px 14px; border-radius:4px; margin-right:10px; vertical-align:middle; }
.tag a {color:#fff;font-size:12px; }

/* 文章元信息 */
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; padding:12px 0 16px; border-bottom:1px solid #f0f0f0; margin-bottom:24px; font-size:14px; color:#999; }
.article-meta .meta-item { display:flex; align-items:center; gap:4px; }
.article-meta .meta-item i { color:#197149; }
.article-meta .meta-item .label { color:#999; }
.article-meta .meta-item .value { color:#333; font-weight:500; }
.article-meta .view-count { color:#197149; font-weight:600; }

/* 文章正文 */
.article-body { font-size:16px; color:#444; line-height:1.9; }
.article-body p { margin-bottom:18px; }
.article-body h2 { font-size:22px; font-weight:700; color:#000; margin:32px 0 16px; padding-left:14px; border-left:4px solid #197149; }
.article-body h3 { font-size:18px; font-weight:600; color:#222; margin:24px 0 12px; }
.article-body ul { padding-left:24px; margin-bottom:18px; }
.article-body ul li { list-style:disc; margin-bottom:6px; }
.article-body .highlight-box { background:#f8faf8; border-left:4px solid #197149; padding:16px 20px; border-radius:4px; margin:20px 0; }
.article-body .highlight-box strong { color:#197149; }
.article-body .city-list { display:flex; flex-wrap:wrap; gap:8px 16px; padding:12px 0; }
.article-body .city-list .city-tag { background:#f0f4f0; color:#197149; padding:4px 16px; border-radius:20px; font-size:14px; font-weight:500; }

/* 文章底部标签 */
.article-tags { display:flex; flex-wrap:wrap; gap:8px; padding-top:20px; margin-top:24px; border-top:1px solid #f0f0f0; }
.article-tags .tag-label { font-size:14px; color:#999; margin-right:8px; }
.article-tags .tag-item { font-size:13px; color:#197149; background:#f0f4f0; padding:4px 14px; border-radius:20px; text-decoration:none; transition:all 0.3s; }
.article-tags .tag-item:hover { background:#197149; color:#fff; }

/* 文章底部 - 上一篇/下一篇 */
.article-nav { display:flex; justify-content:space-between; padding-top:20px; margin-top:24px; border-top:1px solid #f0f0f0; font-size:14px; }
.article-nav a { color:#333; text-decoration:none; transition:color 0.3s; }
.article-nav a:hover { color:#197149; }
.article-nav .prev::before { content:'‹ '; }
.article-nav .next::after { content:' ›'; }

/* ===== 侧边栏 ===== */
.article-sidebar { width:340px; flex-shrink:0; }

/* 侧边栏公用标题 */
.sidebar-title { font-size:18px; font-weight:700; color:#000; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid #197149; position:relative; }
.sidebar-title::after { content:''; position:absolute; bottom:-2px; left:0; width:50px; height:2px; background:#197149; }

/* 热门阅读 */
.hot-list { list-style:none; }
.hot-list li { padding:12px 0; border-bottom:1px solid #f5f5f5; }
.hot-list li:last-child { border-bottom:none; }
.hot-list li a { display:flex; align-items:center; gap:10px; color:#333; text-decoration:none; font-size:15px; line-height:1.4; transition:color 0.3s; }
.hot-list li a:hover { color:#197149; }
.hot-list li a .hot-num { display:inline-block; width:24px; height:24px; border-radius:50%; background:#f0f0f0; color:#999; font-size:13px; font-weight:600; text-align:center; line-height:24px; flex-shrink:0; }
.hot-list li a .hot-num.top { background:#197149; color:#fff; }
.hot-list li a .hot-title { flex:1; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.hot-list li a .hot-views { font-size:12px; color:#ccc; flex-shrink:0; }

/* 热点搜索标签 */
.hot-tags { display:flex; flex-wrap:wrap; gap:8px; }
.hot-tags a{color:#333;font-size:14px;}
.hot-tags .hot-tag { display:inline-block; font-size:14px; color:#555; background:#f5f5f5; padding:6px 16px; border-radius:20px; text-decoration:none; transition:all 0.3s; }
.hot-tags .hot-tag:hover { background:#197149; color:#fff; }

/* 侧边栏客服卡片 */
.sidebar-phone { background:linear-gradient(135deg,#f8faf8 0%,#f0f4f0 100%); border-radius:12px; padding:24px 20px; text-align:center; border:1px solid #e8ece8; margin-top:20px; }
.sidebar-phone .phone-icon { font-size:32px; color:#197149; }
.sidebar-phone .phone-number { font-size:28px; font-weight:700; color:#197149; margin:8px 0; }
.sidebar-phone .phone-desc { font-size:14px; color:#888; }
.sidebar-phone .phone-btn { display:inline-block; margin-top:12px; padding:10px 32px; background:#197149; color:#fff; border-radius:30px; text-decoration:none; font-size:16px; font-weight:500; transition:all 0.3s; }
.sidebar-phone .phone-btn:hover { background:#145a3a; transform:translateY(-2px); box-shadow:0 4px 12px rgba(25,113,73,0.2); }


/* ===== 响应式 ===== */
@media (max-width:992px) {
  .article-wrapper { flex-direction:column; }
  .article-sidebar { width:100%; }
  .sidebar-phone { margin-top:16px; }
}
@media (max-width:768px) {
  .article-page { margin-top:70px; }
  .article-title { font-size:22px; }
  .article-body { font-size:15px; }
  .article-meta { gap:10px 16px; font-size:13px; }
  .article-nav { flex-direction:column; gap:8px; }
  .sidebar-title { font-size:16px; }
}
@media (max-width:400px) {
  .article-title { font-size:19px; }
  .article-body { font-size:14px; }
  .article-meta { font-size:12px; }
  .sidebar-phone .phone-number { font-size:22px; }
}