/* GYM PLUS - blog (/blog/...): list of articles and the article page. Pages are rendered by the Worker (bot/blog.js). */
.blog-section{padding-left:24px;padding-right:24px}
.blog-wrap{max-width:820px;margin:0 auto}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 22px;font-size:.8rem;color:var(--text2)}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--text2)}
.crumbs a{color:var(--text2)}.crumbs a:hover{color:var(--accent2)}
.blog-head{margin-bottom:28px}
.blog-head .section-sub{max-width:620px}
.blog-empty{color:var(--text2);margin:20px 0 40px}

/* list */
.post-list{display:grid;gap:18px}
.post-card{display:grid;grid-template-columns:240px 1fr;gap:18px;background:var(--card);border:1px solid var(--card-border);border-radius:10px;overflow:hidden;transition:border-color .2s,transform .2s}
.post-card:hover{border-color:var(--accent2);transform:translateY(-2px)}
.post-card-img img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1200/630}
.post-card-body{padding:18px 18px 18px 0}
.post-card:not(:has(.post-card-img)){grid-template-columns:1fr}
.post-card:not(:has(.post-card-img)) .post-card-body{padding:20px 22px}
.post-card h2{font-size:1.15rem;line-height:1.3;margin:0 0 8px;font-weight:800;letter-spacing:-.2px}
.post-card h2 a{color:var(--text)}.post-card h2 a:hover{color:var(--accent)}
.post-card p{color:var(--text2);font-size:.92rem;line-height:1.6;margin:0 0 10px}
.post-meta{font-size:.78rem;color:var(--text2)}

/* article */
.post-head h1{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:900;letter-spacing:-.8px;line-height:1.15;color:var(--text);margin:0 0 12px}
.post-lead{font-size:1.08rem;line-height:1.65;color:var(--text2);margin:16px 0 0}
.post-cover{margin:26px 0 0}
.post-cover img{width:100%;height:auto;border-radius:10px;display:block;aspect-ratio:1200/630;object-fit:cover}
.post-toc{margin:26px 0 0;padding:16px 20px;border:1px solid var(--card-border);border-radius:10px;background:var(--bg2)}
.post-toc strong{display:block;font-size:.75rem;letter-spacing:2px;text-transform:uppercase;color:var(--accent2);margin-bottom:8px}
.post-toc ol{margin:0;padding-left:20px}.post-toc li{margin:4px 0;font-size:.92rem}
.post-toc a{color:var(--text)}.post-toc a:hover{color:var(--accent)}
.post-body{margin-top:26px;font-size:1.02rem;line-height:1.8;color:var(--text)}
.post-body h2{font-size:1.45rem;font-weight:800;letter-spacing:-.3px;line-height:1.25;margin:38px 0 12px;scroll-margin-top:120px}
.post-body h3{font-size:1.15rem;font-weight:800;margin:26px 0 8px;scroll-margin-top:120px}
.post-body p{margin:0 0 16px}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:22px}
.post-body li{margin:6px 0}
.post-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.post-body a:hover{color:var(--accent2)}
.post-body strong{font-weight:800}
.post-body blockquote{margin:0 0 18px;padding:12px 18px;border-left:4px solid var(--accent);background:var(--bg2);border-radius:0 8px 8px 0}
.post-body blockquote p{margin:0}

/* call to action + related */
.post-cta{margin:40px 0 0;padding:26px;border-radius:12px;background:linear-gradient(135deg,rgba(232,39,42,.08),rgba(148,0,211,.08));border:1px solid var(--card-border);text-align:center}
.post-cta h2{font-size:1.35rem;font-weight:900;margin:0 0 8px;color:var(--text)}
.post-cta p{color:var(--text2);margin:0 0 16px;line-height:1.6}
.post-cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.post-related{margin-top:44px}
.post-related>h2{font-size:1.3rem;font-weight:900;margin:0 0 16px;color:var(--text)}

@media(max-width:700px){
  .blog-section{padding-left:16px;padding-right:16px}
  .post-card{grid-template-columns:1fr}
  .post-card-body{padding:16px}
  .post-body{font-size:1rem}
}