/* Han Post Cards v1.1.0 */
.hpc-cards{
  --hpc-gap:28px; --hpc-r:18px;
  --hpc-img-h:240px; --hpc-img-h-m:220px;
  --hpc-cols:4; --hpc-cols-t:2; --hpc-cols-m:1;
  --hpc-pad:18px;
  --hpc-title-fs:28px; --hpc-title-w:800;
  --hpc-title-color:#222; --hpc-meta-color:#7a7a7a;
  --hpc-chip-bg:#5f67ff; --hpc-chip-color:#fff;
  --hpc-chip-fs:15px; --hpc-chip-px:14px; --hpc-chip-py:8px;
  display:grid; gap:var(--hpc-gap); grid-template-columns:repeat(var(--hpc-cols),1fr);
}
@media (max-width:1024px){ .hpc-cards{ grid-template-columns:repeat(var(--hpc-cols-t),1fr);} }
@media (max-width:767px){ .hpc-cards{ grid-template-columns:repeat(var(--hpc-cols-m),1fr);} }

.hpc-card{ background:#fff; border-radius:var(--hpc-r); padding:var(--hpc-pad); box-shadow:0 12px 45px rgba(0,0,0,.06); opacity:1; transform:translateY(0); transition:opacity .35s ease, transform .35s ease; }
html[data-han-dark="1"] .hpc-card{ background:#161616; box-shadow:0 12px 45px rgba(0,0,0,.35); }
.hpc-card.is-new{ opacity:0; transform:translateY(16px); }

.hpc-cover{ position:relative; display:block; border-radius:14px; overflow:hidden; height:var(--hpc-img-h); }
@media (max-width:767px){ .hpc-cover{ height:var(--hpc-img-h-m);} }
.hpc-cover__img{ position:absolute; inset:0; background-image:var(--hpc-bg,none); background-size:cover; background-position:center; transform:scale(1); transition:transform .35s ease; }
.hpc-cover:hover .hpc-cover__img{ transform:scale(1.04); }

.hpc-chip{ position:absolute; top:12px; left:12px; background:var(--hpc-chip-bg); color:var(--hpc-chip-color); padding:var(--hpc-chip-py) var(--hpc-chip-px); border-radius:999px; font-weight:800; font-size:var(--hpc-chip-fs); box-shadow:0 6px 22px rgba(0,0,0,.18); }
.hpc-chip + .hpc-chip{ left:auto; right:12px; }

.hpc-title{ font-size:var(--hpc-title-fs); font-weight:var(--hpc-title-w); line-height:1.2; margin:16px 0 12px; color:var(--hpc-title-color); }
.hpc-title a{ color:inherit; text-decoration:none; }
.hpc-title a:hover{ text-decoration:underline; text-underline-offset:3px; }

.hpc-meta{ color:var(--hpc-meta-color); display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:1rem; }
.hpc-meta__item{ color:var(--hpc-meta-color); }
.hpc-meta__tag{ color:var(--hpc-meta-color); text-decoration:none; }
.hpc-meta__tag:hover{ text-decoration:underline; }
.hpc-meta__sep{ opacity:.6; }

.hpc-more{ margin-top:18px; text-align:center; }
.hpc-more__btn{ position:relative; display:inline-block; padding:10px 14px; border-radius:10px; background:transparent; color:var(--hpc-meta-color); text-decoration:none; border:1px solid rgba(0,0,0,.08); cursor:pointer; transition:background .2s ease; }
html[data-han-dark="1"] .hpc-more__btn{ border-color: rgba(255,255,255,.12); }
.hpc-more__btn:hover{ background: rgba(0,0,0,.04); }
html[data-han-dark="1"] .hpc-more__btn:hover{ background: rgba(255,255,255,.06); }
.hpc-more__btn.is-loading{ pointer-events:none; opacity:.75; }
.hpc-more__btn.is-loading:after{ content:''; display:inline-block; width:14px; height:14px; margin-left:8px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:hpcspin .8s linear infinite; vertical-align:-2px; }
@keyframes hpcspin{ to{ transform:rotate(360deg); } }