/* =================== hc-blog.css =================== */
/* v7.61.16 — Blog page premium styling.
   Fixes: signals strip slipping, TOC margin, share button polish. */

/* ─── INDEX PAGE ─────────────────────────────────────────────── */

.hc-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hc-sp-4);
}

.hc-blog-latest-slot { min-height: 0; }
.hc-blog-latest-slot:empty { display: none; }

@media (max-width: 1024px) {
  .hc-blog-grid { grid-template-columns: 1fr; }
}











/* ─── DETAIL PAGE ────────────────────────────────────────────── */





































@media (max-width: 1024px) {
  .page-blog-detail .blog-detail__layout { grid-template-columns: 1fr; }
  .page-blog-detail .blog-toc { position: static; max-height: none; }
}

/* ==========================================================
   v7.61.20 · Blog premium polish
   ========================================================== */

/* Index · featured card hover effect */
.hc-blog-featured {
position:relative;
  overflow:hidden;
  transition:transform 0.32s cubic-bezier(0.22,1,0.36,1);
}
.hc-blog-featured:hover {
transform:translateY(-2px);
}
.hc-blog-featured__cover {
transition:transform 0.62s cubic-bezier(0.22,1,0.36,1);
}


/* Index · topic chip count badge */
.hc-blog-topic-chip {
position:relative;
}
.hc-blog-topic-chip__count {
display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  background:rgba(180,151,115,0.14);
  border-radius:100px;
  font:500 10px/1.4 "JetBrains Mono",ui-monospace,monospace;
  color:rgba(26,23,20,0.55);
}

/* Detail · reading progress bar (top of page) */
.hc-blog-progress {
position:fixed;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:transparent;
  z-index:99;
  pointer-events:none;
}
.hc-blog-progress__fill {
height:100%;
  background:linear-gradient(90deg,#c8a96a,#a78648);
  width:0%;
  transition:width 0.05s linear;
}

/* Detail · TOC scroll-spy active */
.hc-blog-toc__item {
display:block;
  padding:6px 12px;
  color:rgba(26,23,20,0.62);
  font-size:13px;
  text-decoration:none;
  border-left:2px solid transparent;
  transition:color 0.18s ease, border-color 0.18s ease;
}
.hc-blog-toc__item:hover {
color:var(--hc-ink, #1a1714);
}
.hc-blog-toc__item.is-active {
color:var(--hc-ink, #1a1714);
  border-left-color:#c8a96a;
  font-weight:500;
}

/* Detail · pull-quote with decorative marks */
.hc-blog-quote {
position:relative;
  padding:24px 32px;
  font:italic 400 18px/1.5 "Playfair Display",Georgia,serif;
  color:var(--hc-ink, #1a1714);
  text-align:center;
  border-top:0.5px solid rgba(180,151,115,0.22);
  border-bottom:0.5px solid rgba(180,151,115,0.22);
  margin:24px 0;
}
.hc-blog-quote::before, .hc-blog-quote::after {
font:400 38px/1 "Playfair Display",Georgia,serif;
  color:#c8a96a;
  position:absolute;
}
.hc-blog-quote::before {
content:"«"; left:8px; top:8px;
}
.hc-blog-quote::after {
content:"»"; right:8px; bottom:0;
}

/* Detail · callout variants (warning/info/pro-tip) */
.hc-blog-callout {
display:flex;
  gap:12px;
  padding:14px 18px;
  border-radius:10px;
  margin:18px 0;
  border-left:3px solid;
  font-size:14px;
  line-height:1.5;
}
.hc-blog-callout--warning {
background:rgba(184,115,28,0.06);
  border-color:#b8731c;
  color:var(--hc-ink, #1a1714);
}
.hc-blog-callout--warning::before {
content:"⚠"; font-size:18px; color:#b8731c;
}
.hc-blog-callout--info {
background:rgba(180,151,115,0.06);
  border-color:#c8a96a;
}
.hc-blog-callout--info::before {
content:"ℹ"; font-size:18px; color:#c8a96a;
}
.hc-blog-callout--tip {
background:rgba(61,107,79,0.06);
  border-color:var(--hc-success, #3d6b4f);
}
.hc-blog-callout--tip::before {
content:"✦"; font-size:16px; color:var(--hc-success, #3d6b4f);
}

/* Detail · share buttons hover */
.hc-blog-share__btn {
transition:transform 0.18s ease, color 0.18s ease;
}
.hc-blog-share__btn:hover {
transform:translateY(-1px);
  color:var(--hc-ink, #1a1714);
}
.hc-blog-share__btn.is-copied {
color:var(--hc-success, #3d6b4f);
}
.hc-blog-share__btn.is-copied::after {
content:" ✓";
}

/* Detail · author byline */
.hc-blog-author {
display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  padding:18px;
  background:rgba(212,184,150,0.06);
  border-radius:12px;
  margin:24px 0;
}
.hc-blog-author__avatar {
width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(135deg,#c8a96a,#a78648);
  color:var(--hc-ink, #1a1714);
  display:grid;
  place-items:center;
  font:600 16px/1 "Inter",sans-serif;
}
.hc-blog-author__name {
font:500 14px/1.2 "Inter",sans-serif;
  color:var(--hc-ink, #1a1714);
}
.hc-blog-author__role {
font:500 11px/1.2 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(26,23,20,0.55);
}