/* =======================================================
   Blog listing + article styles
   Extends the base theme in style.css (same variables/tokens)
   ======================================================= */
 
/* ---------- Blog listing cards ---------- */
.blog-thumb{ position:relative; overflow:hidden; border-radius:1.1rem 1.1rem 0 0; height:200px; }
.blog-thumb img{ transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.blog-card:hover .blog-thumb img{ transform:scale(1.08); }
.blog-card{ overflow:hidden; display:flex; flex-direction:column; }
 
/* ---------- Reading progress bar ---------- */
#readProgress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:60;
  background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
  transition:width .1s linear;
}
 
/* ---------- Table of contents (sticky left sidebar) ---------- */
.toc-wrap{ position:sticky; top:7.5rem; }
.toc-list{ border-left:1px solid rgba(255,255,255,0.1); }
.toc-list a{
  display:block; padding:.4rem 0 .4rem 1rem; margin-left:-1px; border-left:1px solid transparent;
  font-size:.82rem; color:var(--muted); transition:color .25s ease, border-color .25s ease;
}
.toc-list a.toc-sub{ padding-left:1.75rem; font-size:.78rem; }
.toc-list a:hover{ color:#fff; }
.toc-list a.active{ color:var(--accent); border-left-color:var(--accent); }
 
/* ---------- Article prose ---------- */
.article-content{ color:rgba(255,255,255,0.75); font-size:1.0625rem; line-height:1.85; min-width:0; overflow-wrap:break-word; word-break:break-word; }
.article-content > *:first-child{ margin-top:0; }
 
.article-content h2{
  font-family:'Space Grotesk', sans-serif; font-weight:600; color:#fff;
  font-size:1.75rem; line-height:1.3; margin-top:3rem; margin-bottom:1.1rem;
  scroll-margin-top:6.5rem;
}
.article-content h3{
  font-family:'Space Grotesk', sans-serif; font-weight:600; color:#fff;
  font-size:1.3rem; line-height:1.35; margin-top:2.25rem; margin-bottom:.9rem;
  scroll-margin-top:6.5rem;
}
.article-content p{ margin-top:1.25rem; }
.article-content p:first-of-type{ margin-top:0; }
 
.article-content a:not(.magnetic){
  color:var(--accent); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(0,229,255,0.35); transition:text-decoration-color .25s ease;
}
.article-content a:not(.magnetic):hover{ text-decoration-color:var(--accent); }
 
.article-content ul, .article-content ol{ margin-top:1.25rem; padding-left:1.4rem; }
.article-content ul{ list-style:none; }
.article-content ul > li{ position:relative; padding-left:1.1rem; margin-top:.6rem; }
.article-content ul > li::before{
  content:''; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));
}
.article-content ol{ list-style:decimal; }
.article-content ol > li{ padding-left:.3rem; margin-top:.6rem; }
.article-content ol > li::marker{ color:var(--accent); font-family:'JetBrains Mono', monospace; font-size:.85em; }
 
.article-content strong{ color:#fff; font-weight:600; }
 
/* ---------- Pull quote / blockquote ---------- */
.article-content blockquote{
  position:relative; margin:2.5rem 0; padding:1.75rem 2rem 1.75rem 2.75rem;
  border-left:3px solid; border-image:linear-gradient(var(--primary),var(--accent)) 1;
  background:rgba(255,255,255,0.03); border-radius:0 1rem 1rem 0;
  font-family:'Space Grotesk', sans-serif; font-size:1.3rem; line-height:1.5; color:#fff;
}
.article-content blockquote::before{
  content:'\201C'; position:absolute; left:.75rem; top:.35rem; font-size:2.75rem; line-height:1;
  color:var(--primary); font-family:Georgia, serif; opacity:.7;
}
.article-content blockquote cite{
  display:block; margin-top:.9rem; font-family:'Inter', sans-serif; font-style:normal;
  font-size:.8rem; color:var(--muted); letter-spacing:.03em;
}
 
/* ---------- Table ---------- */
.table-wrap{ margin:2.25rem 0; overflow-x:auto; border-radius:1rem; border:1px solid rgba(255,255,255,0.08); }
.article-content table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px; }
.article-content thead th{
  text-align:left; font-family:'JetBrains Mono', monospace; font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); background:rgba(255,255,255,0.04);
  padding:.9rem 1.1rem; border-bottom:1px solid rgba(255,255,255,0.08);
}
.article-content tbody td{
  padding:.9rem 1.1rem; border-bottom:1px solid rgba(255,255,255,0.06); color:rgba(255,255,255,0.75);
  vertical-align:top;
}
.article-content tbody tr:last-child td{ border-bottom:none; }
.article-content tbody tr:hover td{ background:rgba(255,255,255,0.03); }
 
/* ---------- Figures / internal images ---------- */
.article-content figure{ margin:2.5rem 0; }
.article-content figure img{ width:100%; border-radius:1.25rem; display:block; }
.article-content figcaption{
  margin-top:.75rem; font-size:.8rem; color:var(--muted); text-align:center;
}
 
/* ---------- Full-bleed horizontal banner (breaks out of article column) ---------- */
.article-banner{
  margin:3rem 0; padding:2.25rem 2rem; border-radius:1.5rem; position:relative; overflow:hidden;
  background:linear-gradient(120deg, rgba(255,0,85,0.16), rgba(108,99,255,0.16) 55%, rgba(0,229,255,0.12));
  border:1px solid rgba(255,255,255,0.1);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
}
.article-banner::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(circle at 85% 20%, rgba(0,229,255,0.25), transparent 60%);
}

@media (max-width: 480px){
  .article-banner{ padding:1.75rem 1.25rem; }
  .article-banner > a.whitespace-nowrap{ width:100%; justify-content:center; white-space:normal; text-align:center; }
}
 
/* ---------- Author card ---------- */
.author-card{ display:flex; align-items:center; gap:1rem; }
.author-card img{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
 
/* ---------- Bio card gradient background (same treatment as .article-banner) ---------- */
.bio-banner{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg, rgba(255,0,85,0.16), rgba(108,99,255,0.16) 55%, rgba(0,229,255,0.12));
  border:1px solid rgba(255,255,255,0.1);
}
.bio-banner::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 85% 20%, rgba(0,229,255,0.25), transparent 60%);
}
.bio-banner > *{ position:relative; z-index:1; }
 
/* ---------- Bio card gradient background (same treatment as .article-banner) ---------- */
.bio-banner{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg, rgba(255,0,85,0.16), rgba(108,99,255,0.16) 55%, rgba(0,229,255,0.12));
  border:1px solid rgba(255,255,255,0.1);
}
.bio-banner::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 85% 20%, rgba(0,229,255,0.25), transparent 60%);
}
.bio-banner > *{ position:relative; z-index:1; }
 
/* ---------- Tag pill ---------- */
.tag-pill{
  display:inline-flex; align-items:center; font-family:'JetBrains Mono', monospace; font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  background:rgba(0,229,255,0.08); border:1px solid rgba(0,229,255,0.25);
  padding:.35rem .75rem; border-radius:999px;
}
 
@media (max-width: 1023px){
  .toc-wrap{ position:static; }
}