/* ============================================================
   晋城凤凰整形 · 栏目列表页  list.html 专用样式
   设计基准：list1.html（米金色系 / 居中 800px 自适应）
   配色：主色 #d4a373  浅色 #faedcd  文字 #2b2d42 / 辅助 #8d99ae
   ============================================================ */

:root{
  --primary:#d4a373;          /* 主色：米金 */
  --primary-light:#faedcd;    /* 主色浅底 */
  --primary-dark:#b98a55;     /* 主色深（链接 / 描述文字） */
  --bg:#f8f9fa;
  --card-bg:#ffffff;
  --text:#2b2d42;
  --text-strong:#1a1a1a;
  --text-sub:#8d99ae;
  --border:#f1f1f1;
  --radius:12px;
  --maxw:800px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background-color:var(--bg);
  color:var(--text);
  line-height:1.6;
  padding-bottom:100px;        /* 给底部固定栏留出空间 */
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;height:auto;}

/* 居中容器：PC 居中 800px，移动端满宽 */
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px;}

/* ============================================================
   1. 顶部导航
   ============================================================ */
.header-nav{
  position:sticky;top:0;z-index:40;
  height:52px;
  display:flex;align-items:center;justify-content:space-between;
  background-color:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
  padding:0 16px;
  padding-left:max(16px,calc((100% - 800px)/2 + 16px));
  padding-right:max(16px,calc((100% - 800px)/2 + 16px));
}
.nav-back,.nav-more{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:bold;line-height:1;
  color:var(--text);
  background-color:#f6f3ee;
  border:1px solid #efe9df;
  border-radius:50%;
  cursor:pointer;
  transition:background-color .2s;
}
.nav-back:active,.nav-more:active{background-color:var(--primary-light);}
.nav-title{font-size:16px;font-weight:700;color:var(--text-strong);}
/* 栏目页没有返回按钮：左侧用等宽占位，让标题与文章页一样保持居中 */
.header-nav::before{content:"";flex:0 0 34px;width:34px;height:34px;}

/* ============================================================
   2. 搜索框（圆角胶囊，按钮内嵌在右侧）
   ============================================================ */
.search-box{position:relative;margin:16px 0 12px;}
.search-input{
  width:100%;
  padding:13px 76px 13px 18px;
  border-radius:24px;
  border:1px solid #e6e0d6;
  background-color:#fff;
  font-size:14px;
  color:var(--text);
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.search-input::placeholder{color:#a8a29a;}
.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(212,163,115,.15);}
.search-btn{
  position:absolute;right:6px;top:6px;bottom:6px;
  padding:0 18px;
  border:none;border-radius:20px;
  background-color:var(--primary);
  color:#fff;
  font-size:13px;font-weight:600;
  cursor:pointer;
  transition:opacity .2s;
}
.search-btn:active{opacity:.88;}

/* ============================================================
   3. 分类 Tab（等宽分段控件，栏目多了自动横向滚动）
   ============================================================ */
.tab-nav{
  display:flex;
  gap:4px;
  background-color:#fff;
  border-radius:12px;
  padding:6px;
  margin-bottom:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  overflow-x:auto;
  scrollbar-width:none;
}
.tab-nav::-webkit-scrollbar{display:none;}
.tab-item{
  flex:1 0 auto;
  min-width:70px;
  text-align:center;
  padding:10px 12px;
  font-size:14px;
  font-weight:600;
  color:#666;
  border-radius:8px;
  white-space:nowrap;
  cursor:pointer;
  transition:all .25s ease;
}
.tab-item.active{background-color:var(--primary);color:#fff;}

/* ============================================================
   4. 热门推荐卡片
   ============================================================ */
.top-card-section{margin-bottom:16px;}
.top-card{
  background:linear-gradient(135deg,#fdf6ea 0%,#faedcd 100%);
  border:1px solid #f1e3cc;
  border-radius:12px;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:0 2px 8px rgba(212,163,115,.12);
  transition:transform .2s;
}
.top-card:active{transform:scale(.99);}
.top-card .top-info{flex:1;min-width:0;}
.top-card-title{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  display:flex;
  align-items:center;
  min-width:0;
}
.top-card-title>span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.top-tag{
  background-color:var(--primary);
  color:#fff;
  font-size:10px;
  font-weight:bold;
  padding:2px 6px;
  border-radius:4px;
  margin-right:6px;
  flex-shrink:0;
}
.top-card-desc{
  font-size:12px;
  color:var(--primary-dark);
  margin-top:6px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.top-card-meta{font-size:11px;color:#a8a29a;margin-top:6px;}
.arrow-icon{font-size:20px;font-weight:bold;color:var(--primary);flex-shrink:0;}

/* ============================================================
   5. 文章列表
   ============================================================ */
.item-list{display:flex;flex-direction:column;gap:12px;}
.item-card{
  background-color:#fff;
  border-radius:12px;
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.02);
  transition:transform .2s;
}
.item-card:active{transform:scale(.98);}
.item-info{flex:1;min-width:0;}
.item-title{
  font-size:16px;
  font-weight:700;
  color:var(--text-strong);
  margin-bottom:4px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.item-desc{
  font-size:12px;
  color:#888;
  margin-bottom:6px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.item-meta{font-size:11px;color:#a8a29a;}
.item-meta .hits{font-weight:600;color:#a08b74;}
.item-badge{
  font-size:11px;
  padding:3px 10px;
  border-radius:10px;
  background-color:var(--primary-light);
  color:var(--primary-dark);
  flex-shrink:0;
  white-space:nowrap;
}

/* 空状态 */
.empty-state{
  text-align:center;
  padding:56px 20px;
  color:#a8a29a;
  font-size:13px;
  background-color:#fff;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.02);
}

/* ============================================================
   6. 分页
   ============================================================ */
.pagination-wrap{display:flex;justify-content:center;padding:20px 0 4px;}
.pagination{display:flex;align-items:center;gap:8px;list-style:none;}
.page-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 14px;
  border-radius:17px;border:1px solid #e9e2d6;background-color:#fff;
  color:#6c584c;font-size:13px;
}
.page-item.active .page-link{background-color:var(--primary);border-color:var(--primary);color:#fff;font-weight:600;}
.page-item.disabled .page-link{color:#cfc8bd;background-color:#faf8f5;}

/* ============================================================
   7. 底部固定栏（首页 / 客服 / 在线咨询）
   ============================================================ */
.bottom-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  height:72px;
  display:flex;align-items:center;gap:10px;
  background-color:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  padding:0 16px;
  padding-left:max(16px,calc((100% - 800px)/2 + 16px));
  padding-right:max(16px,calc((100% - 800px)/2 + 16px));
}
.bottom-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:62px;flex-shrink:0;
  background:none;border:none;cursor:pointer;
  color:#7d8597;
  text-decoration:none;
}
.bottom-tab.active{color:var(--primary);}
.bottom-tab svg{width:21px;height:21px;fill:currentColor;}
.bottom-tab span{font-size:11px;margin-top:3px;font-weight:500;}
.consult-btn{
  flex:1;
  height:46px;
  background-color:var(--primary);
  color:#fff;
  border-radius:23px;
  border:none;
  font-size:15px;
  font-weight:bold;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(212,163,115,.35);
}
.consult-btn svg{width:18px;height:18px;fill:#fff;margin-right:6px;}
.consult-btn:active{opacity:.9;}

/* ============================================================
   8. PC 端优化
   ============================================================ */
@media (min-width:768px){
  .item-title{font-size:17px;}
  .item-desc{font-size:13px;}
  .top-card{padding:20px;}
  .top-card-title{font-size:16px;}
  .item-card{padding:20px;}
  .tab-item{font-size:15px;padding:11px 14px;}
  .search-input{padding:15px 84px 15px 20px;font-size:15px;}
}