/* Ager — وبلاگ (assets/blog.css): لیست ۳‌تایی، بنر، فهرست تاپیک‌ها و بخش‌های متن+عکس */
html{scroll-behavior:smooth}
.blog-head{text-align:center;padding:30px 0 22px}
.blog-head h1{margin:0 0 8px}
.blog-head p{color:var(--muted);max-width:560px;margin:0 auto}
.blog-empty{text-align:center;color:var(--muted);padding:70px 0}

/* ----- لیست: هر ردیف ۳ کارت ----- */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:10px 0 30px}
.blog-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.blog-card:hover{transform:translateY(-3px);border-color:var(--orange);box-shadow:0 16px 30px -18px rgba(20,24,31,.28)}
.blog-card .bc-img{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#ffe6d4,#fff4ec);display:flex;align-items:center;justify-content:center;color:#f0b48c}
.blog-card .bc-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.blog-card:hover .bc-img img{transform:scale(1.04)}
.blog-card .bc-img svg{width:54px;height:54px}
.blog-card .bc-title{margin:0;padding:14px 16px 16px;font-size:15.5px;font-weight:800;line-height:1.75}
.blog-pager{display:flex;justify-content:center;gap:8px;margin:6px 0 24px}
.blog-pager a,.blog-pager span{min-width:38px;height:38px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-weight:700;font-size:14px}
.blog-pager a:hover{border-color:var(--orange);color:var(--orange)}
.blog-pager span{background:var(--orange);border-color:var(--orange);color:#fff}

/* ----- صفحهٔ مقاله ----- */
.blog-banner{margin:4px 0 0;border-radius:18px;overflow:hidden;background:var(--surface-2);aspect-ratio:1180/400}
.blog-banner img{width:100%;height:100%;object-fit:cover}
.blog-article-head{padding:20px 0 4px}
.blog-article-head h1{margin:0 0 6px;font-size:28px}
.blog-meta{color:var(--muted);font-size:13.5px}

.blog-toc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:14px 0 24px}
.blog-toc-title{font-size:13px;font-weight:800;color:var(--muted);margin-bottom:10px}
.blog-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.blog-toc a{display:inline-flex;align-items:center;gap:8px;padding:5px 6px 5px 14px;border-radius:999px;background:var(--surface-2);font-size:13.5px;font-weight:600;line-height:1.6;transition:background .15s,color .15s}
.blog-toc a b{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--orange);color:#fff;font-size:12px;display:grid;place-items:center}
.blog-toc a:hover{background:#fff1e7;color:#d9611a}

.bsec{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:20px;scroll-margin-top:96px}
.bsec.rev .bsec-img{order:-1}
.bsec.noimg{grid-template-columns:1fr}
.bsec h2{margin:0 0 12px;font-size:20px}
.bsec p{margin:0 0 12px;color:#2b3340}
.bsec p:last-child{margin-bottom:0}
.bsec-img{margin:0}
.bsec-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--surface-2)}
.bsec:target{animation:bflash 1.6s ease-out}
@keyframes bflash{0%{box-shadow:0 0 0 4px rgba(255,122,46,.35);border-color:var(--orange)}100%{box-shadow:0 0 0 0 rgba(255,122,46,0)}}

.blog-related{margin-top:34px}
.blog-related h2{margin:0 0 6px}

@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:820px){
  .bsec{grid-template-columns:1fr;gap:16px;padding:18px}
  .bsec.rev .bsec-img{order:0}
  .blog-article-head h1{font-size:23px}
  .blog-banner{aspect-ratio:16/8;border-radius:14px}
}
@media(max-width:520px){.blog-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bsec:target{animation:none}.blog-card,.blog-card .bc-img img{transition:none}}