/* ============================================================
   list.css — 列表页专属样式（newslist + productlist 共用）
   公共样式（:root / reset / head / foot / mqq / back-top /
   面包屑 / 分页 .pg-bar / 页面标题 / 公共响应式）见 style.css
   ============================================================ */

/* ======================== newslist ======================== */

/* 通用容器 */
.nl-wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* 顶部标题区 */
.nl-head{
  background:linear-gradient(135deg,#111418 0%,#1d2128 100%);
  padding:56px 0 44px;
  border-bottom:3px solid var(--gold);
  position:relative;
  overflow:hidden;
}
.nl-head::after{
  content:"";
  position:absolute;
  right:-60px;top:-60px;
  width:240px;height:240px;
  border:1px solid rgba(201,169,106,.18);
  border-radius:50%;
  pointer-events:none;
}
.art-h{
  font-family:'Noto Serif SC',serif;
  font-size:38px;
  font-weight:700;
  color:var(--gold);
  letter-spacing:3px;
  line-height:1.2;
  position:relative;
  display:inline-block;
}
.art-h::after{
  content:"";
  display:block;
  width:48px;height:2px;
  background:var(--gold);
  margin-top:14px;
}
.nl-sub{
  margin-top:14px;
  font-size:14px;
  color:var(--txt-mute);
  letter-spacing:1px;
}

/* 主体布局 */
.nl-main{padding:48px 0 64px}
.nl-layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:40px;
  align-items:start;
}

/* 卡片网格 */
.card-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.art-card{
  background:#fff;
  border:1px solid #e3ddd0;
  border-radius:4px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow .28s ease,transform .28s ease,border-color .28s ease;
}
.art-card:hover{
  box-shadow:0 14px 34px rgba(17,20,24,.10);
  transform:translateY(-4px);
  border-color:var(--gold);
}
.art-cover{
  aspect-ratio:3/2;
  overflow:hidden;
  background:#f0ece3;
  position:relative;
}
.art-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(17,20,24,.28) 100%);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.art-card:hover .art-cover::after{opacity:1}
.art-cover img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.art-card:hover .art-cover img{transform:scale(1.05)}
.art-body{
  padding:20px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.art-title{
  font-family:'Noto Serif SC',serif;
  font-size:18px;
  font-weight:700;
  line-height:1.5;
  color:var(--ink);
}
.art-title a{
  color:var(--ink);
  transition:color .2s;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.art-title a:hover{color:var(--gold)}
.art-meta{display:flex;align-items:center;gap:10px}
.art-date{
  font-size:13px;
  color:var(--gold);
  font-weight:500;
  letter-spacing:.6px;
  font-family:'Noto Serif SC',serif;
}
.art-meta-line{flex:1;height:1px;background:#ece6d8}
.art-desc{
  font-size:14px;
  color:#555a63;
  line-height:1.75;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.art-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
  padding-top:10px;
}
.art-tags a{
  font-size:12px;
  padding:3px 11px;
  background:#f5f0e6;
  color:var(--gold);
  border:1px solid #e8dcc4;
  border-radius:2px;
  letter-spacing:.4px;
  transition:background .2s,color .2s,border-color .2s;
}
.art-tags a:hover{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
}

/* 空状态 */
.pg-empty{
  grid-column:1/-1;
  text-align:center;
  padding:72px 20px;
  color:#8a8f99;
  font-size:15px;
  background:#fff;
  border:1px solid #e3ddd0;
  border-radius:4px;
  letter-spacing:1px;
}

/* 侧栏 */
.nl-side{
  display:flex;
  flex-direction:column;
  gap:26px;
  position:sticky;
  top:20px;
}
.side-b{
  background:#fff;
  border:1px solid #e3ddd0;
  border-radius:4px;
  padding:22px 20px;
}
.side-h{
  font-family:'Noto Serif SC',serif;
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  padding-bottom:12px;
  margin-bottom:16px;
  border-bottom:1px solid #e3ddd0;
  position:relative;
  letter-spacing:1px;
}
.side-h::after{
  content:"";
  position:absolute;
  bottom:-1px;left:0;
  width:42px;height:2px;
  background:var(--gold);
}

/* 热门阅读 */
.hot-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:11px 0;
  border-bottom:1px dashed #ece6d8;
}
.hot-list li:last-child{border-bottom:none}
.hot-no{
  flex-shrink:0;
  width:24px;height:24px;
  line-height:24px;
  text-align:center;
  background:#e3ddd0;
  color:#8a8f99;
  font-size:13px;
  font-weight:700;
  border-radius:2px;
  font-family:'Noto Serif SC',serif;
}
.hot-list li:nth-child(-n+3) .hot-no{
  background:var(--gold);
  color:#fff;
}
.hot-list a{
  color:#2b2f36;
  font-size:14px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .2s;
}
.hot-list a:hover{color:var(--gold)}

/* 标签云 */
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-item{
  font-size:13px;
  padding:5px 12px;
  background:#f5f0e6;
  color:#6b5d42;
  border:1px solid #e8dcc4;
  border-radius:2px;
  transition:all .2s;
}
.tag-item:hover{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
}

/* newslist 响应式 */
@media (max-width:992px){
  .nl-layout{grid-template-columns:1fr;gap:32px}
  .nl-side{position:static;order:2}
}
@media (max-width:768px){
  .nl-wrap{padding:0 16px}
  .nl-head{padding:34px 0 30px}
  .art-h{font-size:26px;letter-spacing:2px}
  .nl-main{padding:28px 0 96px}
  .card-grid{grid-template-columns:1fr;gap:18px}
  .art-body{padding:16px 16px 18px}
  .art-title{font-size:17px}
}


/* ======================== productlist ======================== */

/* H1 标题区 */
.hd-1{max-width:1280px;margin:0 auto;padding:14px 20px 22px}
.hd-1 h1{
  font-family:'Noto Serif SC',serif;
  font-size:30px;font-weight:600;
  color:var(--gold);
  letter-spacing:2px;
}

/* 筛选区 */
.flt{max-width:1280px;margin:0 auto;padding:0 20px 26px}
.flt-row{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:8px 8px;
  padding:12px 0;
  border-bottom:1px solid #2a2f37;
}
.flt-row:last-child{border-bottom:none}
.flt-lab{
  flex:0 0 auto;
  font-size:12px;color:#6b7280;
  letter-spacing:1px;
  margin-right:6px;
}
.flt-cap{
  flex:0 0 auto;
  display:inline-block;
  padding:5px 14px;
  font-size:12px;
  color:#cbd0d8;
  border:1px solid #2a2f37;
  border-radius:20px;
  transition:all .25s;
  white-space:nowrap;
}
.flt-cap:hover,.flt-cap.on{
  color:var(--gold);
  border-color:var(--gold);
  background:rgba(201,169,106,.08);
}

/* 列表网格 */
.mgrid{
  max-width:1280px;margin:0 auto;
  padding:0 20px 40px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.mcard{
  background:#1a1e24;
  border:1px solid #2a2f37;
  border-radius:8px;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.mcard:hover{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.mcard-img{
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
  background:#0d0f12;
}
.mcard-img img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.mcard:hover .mcard-img img{transform:scale(1.05)}
.mcard-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.mcard-name{
  font-family:'Noto Serif SC',serif;
  font-size:18px;font-weight:600;
  color:var(--gold);
  display:inline-block;
  letter-spacing:1px;
  transition:opacity .2s;
}
.mcard-name:hover{opacity:.82}
.mcard-line{
  width:30px;height:1px;
  background:var(--gold);
  margin:10px 0 12px;
  opacity:.55;
}
.kwd{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.kwd a{
  display:inline-block;
  padding:2px 9px;
  font-size:11px;
  color:var(--gold);
  border:1px solid rgba(201,169,106,.4);
  border-radius:12px;
  transition:all .2s;
}
.kwd a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.attr{font-size:11px;color:#6b7280;margin-bottom:10px;letter-spacing:.3px}
.attr span{display:inline-block}
.attr span:not(:last-child)::after{content:'·';margin:0 6px;color:#3a3f47}
.mcard-desc{
  font-size:12px;
  color:#8892a0;
  line-height:1.7;
  margin-top:auto;
}

/* productlist 分页（.pg-bar 公共，此处仅 .pagination/.page-item 专属） */
.pagination{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.page-item{
  display:inline-block;
  min-width:34px;height:34px;line-height:32px;
  padding:0 12px;
  font-size:13px;color:#cbd0d8;
  border:1px solid #2a2f37;
  border-radius:4px;
  text-align:center;
  transition:all .2s;
}
.page-item:hover,.page-item.active{color:var(--gold);border-color:var(--gold)}

/* 空状态 */
.tac{text-align:center;color:#6b7280;padding:40px 0 60px;font-size:13px}

/* productlist 响应式 */
@media(max-width:960px){
  .mgrid{grid-template-columns:repeat(2,1fr);gap:16px}
  .hd-1 h1{font-size:24px}
  .flt-cap{padding:4px 12px}
}
@media(max-width:600px){
  .mgrid{grid-template-columns:1fr;gap:16px}
  .hd-1 h1{font-size:22px;letter-spacing:1px}
  .hd-1{padding:12px 16px 18px}
  .flt{padding:0 16px 22px}
  .mgrid{padding:0 16px 32px}
  body{padding-bottom:52px}
}