/* =========================
   WeChat Articles / 小宿文章
   ========================= */
.article-hero{
  padding: 58px 0 26px;
}
.article-hero-card{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--line);
  background:
    radial-gradient(680px 260px at 8% 8%, rgba(249,115,22,.14), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,247,237,.86));
  box-shadow: var(--shadow);
  padding: 34px;
}
.article-hero-card::after{
  content:"";
  position:absolute;
  right:-80px;
  top:-90px;
  width:280px;
  height:280px;
  border-radius:999px;
  background: rgba(249,115,22,.10);
  border: 1px solid rgba(249,115,22,.16);
}
.article-kicker{
  display:inline-flex;
  width:max-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(249,115,22,.10);
  border:1px solid rgba(249,115,22,.18);
  color:#c2410c;
  font-size:13px;
  font-weight:900;
}
.article-hero-card h1{
  position:relative;
  z-index:1;
  margin: 14px 0 12px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.1;
  letter-spacing: -.5px;
}
.article-hero-card p{
  position:relative;
  z-index:1;
  max-width: 820px;
  margin:0;
  color: var(--muted);
  line-height:1.8;
}
.article-stats{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top: 24px;
}
.article-stat{
  padding:18px;
  border-radius:20px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.82);
}
.article-stat b{
  display:block;
  font-size:26px;
  line-height:1;
  color: rgba(15,23,42,.96);
}
.article-stat span{
  display:block;
  margin-top:8px;
  color: var(--muted);
  font-size:13px;
}
.article-toolbar{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap:14px;
  align-items:center;
  margin-bottom: 18px;
}
.article-search{
  min-height: 52px;
  width:100%;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.90);
  color: var(--text);
  padding: 0 18px;
  font: inherit;
  outline:none;
  box-shadow: var(--shadow-2);
}
.article-search:focus{
  border-color: rgba(249,115,22,.36);
  box-shadow: 0 0 0 4px rgba(249,115,22,.10), var(--shadow-2);
}
.article-result-count{
  color: var(--muted);
  font-weight:800;
  white-space:nowrap;
}
.topic-filter-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:22px;
}
.topic-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 12px;
  background: rgba(255,255,255,.84);
  cursor:pointer;
  font-weight:850;
  color: rgba(15,23,42,.86);
}
.topic-pill span{
  min-width: 24px;
  padding:2px 6px;
  border-radius:999px;
  background: rgba(15,23,42,.06);
  color: var(--muted);
  font-size:12px;
}
.topic-pill.is-active,
.topic-pill:hover{
  border-color: rgba(249,115,22,.28);
  background: rgba(249,115,22,.10);
  color:#c2410c;
}
.article-grid,
.article-featured-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}
.article-featured-grid{
  margin-bottom: 10px;
}
.article-card{
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-2);
  transition: transform .2s ease, box-shadow .2s ease;
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.article-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.article-cover{
  position:relative;
  display:block;
  aspect-ratio: 16 / 10;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(249,115,22,.18), rgba(15,23,42,.08));
}
.article-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .35s ease;
}
.article-card:hover .article-cover img{
  transform: scale(1.04);
}
.article-cover-fallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:32px;
  font-weight:950;
  color: rgba(249,115,22,.68);
  letter-spacing:.08em;
}
.article-card:not(.is-coverless) .article-cover-fallback{
  display:none;
}
.article-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
}
.article-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.article-meta span{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:5px 8px;
  border-radius:999px;
  background: rgba(249,115,22,.09);
  border:1px solid rgba(249,115,22,.14);
  color:#c2410c;
  font-size:12px;
  font-weight:850;
}
.article-meta span + span{
  background: rgba(15,23,42,.05);
  border-color: rgba(15,23,42,.08);
  color: var(--muted);
}
.article-body h3{
  margin:0;
  font-size:18px;
  line-height:1.45;
}
.article-body h3 a:hover{
  color:#ea580c;
}
.article-body p{
  margin:0;
  color: var(--muted);
  line-height:1.7;
  font-size:14px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.article-footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:12px;
  border-top:1px dashed rgba(15,23,42,.12);
  font-size:13px;
}
.article-footer span{
  color: var(--muted);
}
.article-footer a{
  color:#ea580c;
  font-weight:950;
  white-space:nowrap;
}
.article-empty{
  border:1px dashed rgba(15,23,42,.18);
  border-radius:22px;
  padding:26px;
  text-align:center;
  color: var(--muted);
  background: rgba(255,255,255,.75);
}
.article-load-wrap{
  display:flex;
  justify-content:center;
  margin-top:26px;
}
.home-article-section .article-grid{
  margin-top: 12px;
}
.home-article-actions{
  display:flex;
  justify-content:center;
  margin-top:24px;
}
@media (max-width: 980px){
  .article-grid,
  .article-featured-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .article-toolbar{
    grid-template-columns: 1fr;
  }
  .article-stats{
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 620px){
  .article-hero-card{padding:24px;}
  .article-grid,
  .article-featured-grid,
  .article-stats{
    grid-template-columns: 1fr;
  }
}