/* Han Category Grid v1.0.0 */
.hcg-grid{
  --hcg-gap:20px; --hcg-r:18px; --hcg-h:220px; --hcg-h-m:180px;
  --hcg-cols:4; --hcg-cols-t:2; --hcg-cols-m:1;
  --hcg-title-fs:28px; --hcg-title-fs-m:22px; --hcg-title-w:800; --hcg-title-w-m:800;
  --hcg-count-fs:16px;
  --hcg-title-color:#fff; --hcg-count-color:#fff;
  --hcg-overlay-op:.7;
  display:grid; grid-template-columns: repeat(var(--hcg-cols), 1fr);
  gap: var(--hcg-gap);
}
@media (max-width: 1024px){
  .hcg-grid{ grid-template-columns: repeat(var(--hcg-cols-t), 1fr); }
}
@media (max-width: 767px){
  .hcg-grid{ grid-template-columns: repeat(var(--hcg-cols-m), 1fr); }
}
.hcg-card{
  position:relative; display:block; border-radius: var(--hcg-r);
  overflow:hidden; min-height: var(--hcg-h);
  color: var(--hcg-title-color); text-decoration:none;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  isolation:isolate;
}
@media (max-width: 767px){
  .hcg-card{ min-height: var(--hcg-h-m); }
}
.hcg-card__bg, .hcg-card__ovl{
  position:absolute; inset:0; pointer-events:none;
}
.hcg-card__bg{
  background-image: var(--hcg-bg, none);
  background-size: cover; background-position: center;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1); transition: transform .35s ease;
}
.hcg-card__ovl{
  background: linear-gradient(var(--hcg-angle, 0deg), var(--hcg-g1, #000), var(--hcg-g2, #ff0077));
  opacity: var(--hcg-overlay-op, .7);
  mix-blend-mode: multiply;
}
.hcg-card:hover .hcg-card__bg{ transform: scale(1.04); }
.hcg-card__title{
  position:absolute; left:18px; right:18px; bottom:46px;
  font-size: var(--hcg-title-fs); font-weight: var(--hcg-title-w); line-height:1.1;
  color: var(--hcg-title-color); text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.hcg-card__count{
  position:absolute; left:18px; right:18px; bottom:16px;
  font-size: var(--hcg-count-fs); color: var(--hcg-count-color);
  text-shadow: 0 1px 5px rgba(0,0,0,.35);
}
@media (max-width: 767px){
  .hcg-card__title{ font-size: var(--hcg-title-fs-m); font-weight: var(--hcg-title-w-m); }
}
/* Dark mode friendly */
html[data-han-dark="1"] .hcg-card{ box-shadow: 0 8px 24px rgba(0,0,0,.4); }