/* ============================================================
   blog-article.css  v8.4
   Professional article typography for /blog and /blog/<slug>
   Scoped to .blog-article and .blog-hero so it never bleeds.
   ============================================================ */

.blog-hero{
  max-width: 820px;
  margin: 24px auto 14px;
  padding: 0 16px;
  text-align: left;
}
.blog-hero .blog-hero-meta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:#6366f1; background:rgba(99,102,241,.10);
  padding:5px 12px; border-radius:99px; margin-bottom:14px;
}
.blog-hero h1.blog-title{
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -.5px;
  color: #0f172a;
}
.blog-hero .blog-hero-sub{
  color:#64748b; font-size:.92rem; margin:0 0 18px;
}
.blog-hero .blog-cover{
  display:block; width:100%; max-height:380px; object-fit:cover;
  border-radius:14px; margin:18px 0 4px;
  box-shadow: 0 10px 30px rgba(15,23,42,.12);
}

.blog-article{
  max-width: 820px;
  margin: 8px auto 28px;
  padding: 28px 32px;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(15,23,42,.06);
  color: #1f2937;
  font-size: 16px;
  line-height: 1.75;
  word-wrap: break-word;
}

.blog-article > *:first-child{ margin-top: 0; }
.blog-article > *:last-child{ margin-bottom: 0; }

.blog-article h1,
.blog-article h2,
.blog-article h3,
.blog-article h4,
.blog-article h5,
.blog-article h6{
  color:#0f172a;
  font-weight:700;
  line-height:1.3;
  margin: 1.6em 0 .55em;
  scroll-margin-top: 90px;
}
.blog-article h1{ font-size: 1.85rem; }
.blog-article h2{ font-size: 1.5rem;  border-bottom:1px solid rgba(15,23,42,.08); padding-bottom:.3em; }
.blog-article h3{ font-size: 1.22rem; color:#1e293b; }
.blog-article h4{ font-size: 1.06rem; }
.blog-article h5{ font-size: .98rem; }
.blog-article h6{ font-size: .92rem; color:#475569; text-transform:uppercase; letter-spacing:.5px; }

.blog-article p{
  margin: 0 0 1em;
  color: #1f2937;
}
.blog-article p:first-of-type{
  font-size: 1.04rem;
  color: #334155;
}

.blog-article a{
  color:#4f46e5;
  text-decoration: underline;
  text-decoration-color: rgba(79,70,229,.35);
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
  word-break: break-word;
}
.blog-article a:hover{ color:#3730a3; text-decoration-color:#3730a3; }

.blog-article img{
  display:block; max-width:100%; height:auto;
  border-radius:12px; margin:1.4em auto;
  box-shadow:0 6px 20px rgba(15,23,42,.10);
}

.blog-article ul, .blog-article ol{
  margin: .4em 0 1.2em;
  padding-left: 1.5em;
}
.blog-article li{ margin: .25em 0; }
.blog-article ul li::marker{ color:#6366f1; }
.blog-article ol li::marker{ color:#6366f1; font-weight:700; }

.blog-article blockquote{
  margin: 1.2em 0;
  padding: .8em 1.1em;
  border-left: 4px solid #6366f1;
  background: rgba(99,102,241,.06);
  color:#334155; font-style: italic;
  border-radius: 0 10px 10px 0;
}

.blog-article code{
  background: rgba(15,23,42,.06);
  padding: .15em .45em;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  color:#be185d;
}
.blog-article pre{
  background:#0f172a; color:#e2e8f0;
  padding:14px 16px; border-radius:10px;
  overflow-x:auto; line-height:1.55;
  margin: 1.2em 0;
}
.blog-article pre code{ background:transparent; color:inherit; padding:0; }

.blog-article hr{
  border:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.18), transparent);
  margin: 2em 0;
}

.blog-article table{
  width:100%; border-collapse: collapse; margin:1.2em 0;
  font-size:.94rem;
}
.blog-article th, .blog-article td{
  border:1px solid rgba(15,23,42,.10);
  padding: 9px 12px; text-align:left;
}
.blog-article thead th{ background: rgba(99,102,241,.08); color:#1e293b; }
.blog-article tbody tr:nth-child(even){ background: rgba(15,23,42,.02); }

.blog-article strong{ color:#0f172a; font-weight:700; }
.blog-article em{ color:#334155; }

/* Back-button bar */
.blog-back-bar{
  max-width:820px; margin: 6px auto 40px; padding: 0 16px;
}
.blog-back-bar .blog-back-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 18px; border-radius:10px;
  background:#ffffff; color:#4f46e5;
  border:1px solid rgba(79,70,229,.25);
  font-weight:600; font-size:.92rem; text-decoration:none;
  transition: all .15s;
}
.blog-back-bar .blog-back-btn:hover{
  background:#4f46e5; color:#fff; border-color:#4f46e5;
  transform: translateX(-2px);
}

/* List page cards */
.blog-list{
  max-width: 1080px; margin: 24px auto; padding: 0 16px;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:20px;
}
.blog-card{
  background:#fff; border:1px solid rgba(15,23,42,.08);
  border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.blog-card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(15,23,42,.10); border-color:rgba(99,102,241,.30); }
.blog-card .blog-card-img{
  width:100%; aspect-ratio: 16/9; object-fit:cover; display:block; background:#f1f5f9;
}
.blog-card .blog-card-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-card .blog-card-date{ font-size:.74rem; color:#64748b; font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
.blog-card h3.blog-card-title{ margin:0; font-size:1.05rem; line-height:1.35; color:#0f172a; font-weight:700; }
.blog-card .blog-card-excerpt{ color:#475569; font-size:.88rem; line-height:1.55; margin:0; flex:1; }
.blog-card .blog-card-more{
  display:inline-flex; align-items:center; gap:6px;
  align-self:flex-start; margin-top:6px;
  color:#4f46e5; font-weight:600; font-size:.86rem; text-decoration:none;
}
.blog-card .blog-card-more:hover{ color:#3730a3; text-decoration:underline; }

/* ====== Dark mode (yeti dark, .pubdark-page guest, .dark body) ====== */
body.dark .blog-article,
.pubdark-page .blog-article{
  background: rgba(20,22,40,.88);
  border-color: rgba(255,255,255,.10);
  color: #e2e8f0;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
body.dark .blog-article h1,
body.dark .blog-article h2,
body.dark .blog-article h3,
body.dark .blog-article h4,
.pubdark-page .blog-article h1,
.pubdark-page .blog-article h2,
.pubdark-page .blog-article h3,
.pubdark-page .blog-article h4{ color:#f8fafc; }
body.dark .blog-article p,
.pubdark-page .blog-article p{ color:#cbd5e1; }
body.dark .blog-article p:first-of-type,
.pubdark-page .blog-article p:first-of-type{ color:#e2e8f0; }
body.dark .blog-article a,
.pubdark-page .blog-article a{ color:#a5b4fc; text-decoration-color:rgba(165,180,252,.45); }
body.dark .blog-article a:hover,
.pubdark-page .blog-article a:hover{ color:#c7d2fe; text-decoration-color:#c7d2fe; }
body.dark .blog-article strong,
.pubdark-page .blog-article strong{ color:#f1f5f9; }
body.dark .blog-article code,
.pubdark-page .blog-article code{ background:rgba(255,255,255,.08); color:#fbcfe8; }
body.dark .blog-article blockquote,
.pubdark-page .blog-article blockquote{ background: rgba(99,102,241,.10); color:#cbd5e1; }
body.dark .blog-article h2,
.pubdark-page .blog-article h2{ border-bottom-color: rgba(255,255,255,.10); }
body.dark .blog-hero h1.blog-title,
.pubdark-page .blog-hero h1.blog-title{ color:#f8fafc; }
body.dark .blog-hero .blog-hero-sub,
.pubdark-page .blog-hero .blog-hero-sub{ color:#94a3b8; }

body.dark .blog-card,
.pubdark-page .blog-card{
  background: rgba(20,22,40,.85);
  border-color: rgba(255,255,255,.10);
}
body.dark .blog-card h3.blog-card-title,
.pubdark-page .blog-card h3.blog-card-title{ color:#f1f5f9; }
body.dark .blog-card .blog-card-excerpt,
.pubdark-page .blog-card .blog-card-excerpt{ color:#94a3b8; }
body.dark .blog-card .blog-card-date,
.pubdark-page .blog-card .blog-card-date{ color:#a5b4fc; }
body.dark .blog-back-bar .blog-back-btn,
.pubdark-page .blog-back-bar .blog-back-btn{
  background: rgba(255,255,255,.06); color:#a5b4fc; border-color: rgba(165,180,252,.30);
}
body.dark .blog-back-bar .blog-back-btn:hover,
.pubdark-page .blog-back-bar .blog-back-btn:hover{
  background: linear-gradient(135deg,#6366f1,#06b6d4); color:#fff; border-color:transparent;
}

@media (max-width: 640px){
  .blog-article{ padding: 20px 18px; border-radius:12px; }
  .blog-hero{ padding: 0 12px; }
  .blog-hero h1.blog-title{ font-size: 1.55rem; }
}