/* ─────────────────────────────────────────────────────────────────
   Pinvdl Blog — styles for /blog/ pages and for the site-wide
   "Latest post" strip injected into the header of every page.
   Uses the same design tokens as pinvdl.css (works in light + dark).
   ───────────────────────────────────────────────────────────────── */

.blog-hero{
  padding:70px 24px 40px;text-align:center;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,59,59,0.16), transparent 70%);
}
.blog-hero h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-0.02em;}
.blog-hero p{color:var(--muted);margin-top:10px;}

.blog-main{padding:40px 24px 70px;}
.blog-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.blog-card{
  display:block;background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--radius);overflow:hidden;transition:transform .2s ease,border-color .2s ease;
}
.blog-card:hover{transform:translateY(-3px);border-color:var(--accent1);}
.blog-card-img{width:100%;height:180px;object-fit:cover;display:block;}
.blog-card-body{padding:20px 22px 24px;}
.blog-card-body h2{font-size:1.15rem;font-weight:700;margin:6px 0 10px;line-height:1.35;}
.blog-card-body p{color:var(--muted);font-size:0.93rem;}
.blog-date{font-size:0.78rem;color:var(--accent1);font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.blog-more{display:inline-block;margin-top:14px;font-size:0.88rem;font-weight:600;color:var(--accent1);}
.blog-empty{color:var(--muted);text-align:center;padding:40px 0;}

.blog-post{max-width:760px;margin:0 auto;}
.blog-back{display:inline-block;color:var(--muted);font-size:0.88rem;margin-bottom:18px;}
.blog-back:hover{color:var(--text);}
.blog-post h1{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;line-height:1.2;letter-spacing:-0.02em;}
.blog-meta{color:var(--muted);font-size:0.85rem;margin:10px 0 24px;}
.blog-post-cover{width:100%;border-radius:var(--radius);margin-bottom:28px;}
.blog-content{font-size:1.02rem;}
.blog-content p{margin-bottom:18px;}
.blog-content h2{font-size:1.4rem;font-weight:700;margin:32px 0 12px;}
.blog-content h3{font-size:1.15rem;font-weight:700;margin:26px 0 10px;}
.blog-content ul,.blog-content ol{margin:0 0 18px 22px;}
.blog-content li{margin-bottom:8px;}
.blog-content a{color:var(--accent1);text-decoration:underline;}
.blog-content img{max-width:100%;border-radius:var(--radius);margin:12px 0;}
.blog-content blockquote{
  border-left:3px solid var(--accent1);padding:6px 0 6px 16px;color:var(--muted);margin:0 0 18px;
}
.blog-content code{background:var(--bg-soft);padding:2px 6px;border-radius:6px;font-size:0.92em;}

/* ── Latest-post strip injected into the site header ───────────── */
.latest-post-bar{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:9px 18px;font-size:0.86rem;
  background:linear-gradient(135deg,rgba(255,59,59,0.14),rgba(192,0,0,0.14));
  border-bottom:1px solid var(--card-border);
  position:sticky;top:0;z-index:60;
}
.latest-post-bar .lp-tag{
  background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff;
  font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.latest-post-bar a.lp-link{
  font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70vw;
}
.latest-post-bar a.lp-link:hover{color:var(--accent1);text-decoration:underline;}
@media(max-width:620px){.latest-post-bar{font-size:0.8rem;padding:7px 12px;}}

/* ── "Latest from the Blog" section inside the site footer ─────────
   Shown on every page. Rendered statically on /blog/ pages and
   injected by pinvdl.js everywhere else — it updates by itself each
   time a post is published from the admin panel.                     */
.footer-blog{
  max-width:1100px;margin:0 auto 34px;padding:30px 24px 0;text-align:left;
  border-top:1px solid var(--card-border);
}
.footer-blog .fb-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:18px;
}
.footer-blog .fb-head h3{font-size:1rem;font-weight:700;letter-spacing:.01em;}
.footer-blog .fb-all{font-size:0.85rem;font-weight:600;color:var(--accent1);}
.footer-blog .fb-all:hover{text-decoration:underline;}
.footer-blog .fb-grid{
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.footer-blog .fb-card{
  display:flex;flex-direction:column;gap:8px;padding:12px;
  background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--radius);transition:transform .2s ease,border-color .2s ease;
}
.footer-blog .fb-card:hover{transform:translateY(-3px);border-color:var(--accent1);}
.footer-blog .fb-thumb{
  width:100%;height:106px;object-fit:cover;border-radius:10px;display:block;
}
.footer-blog .fb-title{
  display:block;font-size:0.92rem;font-weight:650;line-height:1.35;color:var(--text);
}
.footer-blog .fb-excerpt{
  display:block;margin-top:6px;font-size:0.8rem;line-height:1.5;color:var(--muted);
}
.footer-blog .fb-date{
  display:block;margin-top:8px;font-size:0.7rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent1);
}
@media(max-width:620px){
  .footer-blog{padding:24px 16px 0;margin-bottom:24px;}
  .footer-blog .fb-thumb{height:92px;}
}