/* ============================================
   文章列表页（articles.php）
   ============================================ */

/* ========== 主容器 ========== */
.list-page{
  max-width:1100px;
  margin:0 auto;
  padding:0 1.4rem 4rem;
}

/* ========== 头部 ========== */
.list-header{
  margin-top:2.5rem;
  margin-bottom:2rem;
  padding:2.2rem 2rem;
  background:linear-gradient(135deg, rgba(15,48,68,.95) 0%, rgba(6,26,38,.95) 100%);
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px -20px rgba(0,10,20,.7);
  position:relative;
  overflow:hidden;
}
.list-header::before{
  content:"";
  position:absolute; top:-50%; right:-10%;
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(245,166,35,.14), transparent 70%);
  pointer-events:none;
}
.list-header .breadcrumb{
  font-size:.82rem;
  color:#9fb8ca;
  margin-bottom:.8rem;
  position:relative; z-index:1;
}
.list-header .breadcrumb a{
  color:#ffd98a;
  text-decoration:none;
}
.list-header .breadcrumb a:hover{ text-decoration:underline; }
.list-header h1{
  font-size:clamp(1.5rem,4vw,2rem);
  font-weight:800;
  color:#fff;
  margin:0 0 .6rem;
  position:relative; z-index:1;
}
.list-header p{
  color:#9fb8ca;
  font-size:.95rem;
  margin:0;
  position:relative; z-index:1;
}
.list-header p strong{
  color:#ffd98a;
  font-weight:800;
}

/* ========== 文章网格 ========== */
.list-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:1.2rem;
}

/* ========== 卡片 ========== */
.list-card{
  display:flex;
  flex-direction:column;
  background:linear-gradient(160deg, rgba(20,55,78,.72), rgba(12,36,52,.72));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.list-card:hover{
  transform:translateY(-6px);
  border-color:rgba(245,166,35,.45);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.9);
}

/* 封面图 */
.list-cover{
  width:100%;
  aspect-ratio:16/9;
  background-size:cover;
  background-position:center;
  background-color:#0a2433;
  position:relative;
}
.list-cover::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.05), rgba(6,26,38,.7));
}
.list-cat{
  position:absolute;
  top:.75rem;
  left:.75rem;
  background:rgba(245,166,35,.95);
  color:#2a1a00;
  font-size:.72rem;
  font-weight:800;
  padding:.25rem .75rem;
  border-radius:20px;
  letter-spacing:.3px;
  z-index:2;
  box-shadow:0 4px 10px -4px rgba(245,166,35,.7);
}

/* 卡片内容 */
.list-body{
  padding:1.1rem 1.2rem 1.3rem;
  flex:1;
  display:flex;
  flex-direction:column;
}
.list-title{
  font-size:1.05rem;
  color:#fff;
  font-weight:800;
  line-height:1.45;
  margin:0 0 .7rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  letter-spacing:.2px;
}
.list-excerpt{
  font-size:.86rem;
  color:#9fb8ca;
  line-height:1.65;
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0 0 1rem;
}
.list-meta{
  display:flex;
  align-items:center;
  gap:.85rem;
  font-size:.74rem;
  color:#7a92a8;
  padding-top:.75rem;
  border-top:1px solid rgba(255,255,255,.06);
  flex-wrap:wrap;
}
.list-more{
  margin-left:auto;
  color:#ffd98a;
  font-weight:700;
  font-size:.78rem;
}
.list-card:hover .list-more{
  text-decoration:underline;
}

/* ========== 空状态 ========== */
.list-empty{
  text-align:center;
  color:#9fb8ca;
  padding:4rem 1.5rem;
  font-size:.95rem;
  background:rgba(12,38,54,.5);
  border-radius:20px;
  border:1px dashed rgba(255,255,255,.15);
}
.list-empty a{
  color:#ffd98a;
  text-decoration:none;
}

/* ========== 返回按钮 ========== */
.list-back{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:2.5rem;
  padding:.75rem 1.5rem;
  background:rgba(245,166,35,.15);
  border:1px solid rgba(245,166,35,.4);
  color:#ffd98a;
  border-radius:40px;
  text-decoration:none;
  font-size:.88rem;
  font-weight:600;
  transition:all .2s;
}
.list-back:hover{
  background:rgba(245,166,35,.28);
  transform:translateX(-3px);
}

/* ========== 页脚 ========== */
.list-footer{
  text-align:center;
  margin-top:3rem;
  color:#9fb8ca;
  font-size:.82rem;
  padding-top:1.8rem;
  border-top:1px solid rgba(255,255,255,.07);
  line-height:2;
}
.list-footer a{
  color:#ffd98a;
  text-decoration:none;
  margin:0 .3rem;
}
.list-footer a:hover{ text-decoration:underline; }

/* ========== 手机端 ========== */
@media (max-width:640px){
  .list-page{ padding:0 1rem 3rem; }
  .list-header{
    margin-top:1.4rem;
    padding:1.5rem 1.2rem;
    border-radius:20px;
  }
  .list-header h1{ font-size:1.3rem; }
  .list-header p{ font-size:.85rem; }

  .list-grid{
    grid-template-columns:1fr;
    gap:.9rem;
  }

  /* 手机端：横向卡片 图在左 文字在右 */
  .list-card{
    flex-direction:row;
    border-radius:16px;
  }
  .list-cover{
    width:120px;
    min-width:120px;
    aspect-ratio:auto;
    height:auto;
  }
  .list-cover::after{
    background:linear-gradient(to right, transparent 60%, rgba(6,26,38,.4));
  }
  .list-cat{
    font-size:.62rem;
    padding:.18rem .55rem;
    top:.5rem;
    left:.5rem;
  }
  .list-body{
    padding:.9rem .95rem .9rem .9rem;
  }
  .list-title{
    font-size:.92rem;
    margin-bottom:.4rem;
    -webkit-line-clamp:2;
  }
  .list-excerpt{
    font-size:.76rem;
    line-height:1.5;
    -webkit-line-clamp:2;
    margin-bottom:.55rem;
  }
  .list-meta{
    font-size:.68rem;
    gap:.5rem;
    padding-top:.55rem;
  }
  .list-more{
    font-size:.72rem;
    margin-left:0;
  }
}

@media (max-width:380px){
  .list-cover{ width:100px; min-width:100px; }
  .list-title{ font-size:.86rem; }
  .list-excerpt{ font-size:.72rem; }
}