/* ============================================================
   blog-post.css — Individual article
   ============================================================ */
.article-hero { position: relative; height: clamp(240px, 40vw, 500px); overflow: hidden; border-bottom: 1px solid var(--clr-border); background: var(--clr-bg-surface); }
.article-hero img, .article-hero .img-ph { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.article-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,15,.9), transparent 60%); }

.article-wrap { max-width: 760px; margin-inline: auto; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--clr-text-muted); margin-block: var(--space-6) var(--space-4); }
.article-meta .dot { opacity: .5; }
.article h1 { font-size: clamp(1.9rem, 5vw, var(--text-4xl)); line-height: 1.08; margin-bottom: var(--space-6); }

.author-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-block: 1px solid var(--clr-border); margin-bottom: var(--space-8); }
.author-row .av { width: 44px; height: 44px; border-radius: 50%; background: var(--clr-accent-glow); color: var(--clr-accent-gold); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; border: 1px solid var(--clr-border-strong); }
.author-row b { font-family: var(--font-display); }
.author-row span { color: var(--clr-text-muted); font-size: var(--text-sm); }

.takeaways {
  background: var(--clr-accent-glow); border: 1px solid var(--clr-border-strong); border-radius: var(--radius-md);
  padding: var(--space-6); margin-bottom: var(--space-8);
}
.takeaways h4 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-3); color: var(--clr-accent-gold); }
.takeaways ul { margin: 0; padding-left: var(--space-6); list-style: disc; }
.takeaways li { color: var(--clr-text-primary); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.takeaways li:last-child { margin-bottom: 0; }

.inline-tg {
  background: linear-gradient(120deg, var(--clr-telegram), #1b7fae); border-radius: var(--radius-md);
  padding: var(--space-6); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin-block: var(--space-8); color: #fff;
}
.inline-tg img { width: 40px; height: 40px; }
.inline-tg div { flex: 1; min-width: 200px; }
.inline-tg b { font-family: var(--font-display); font-size: var(--text-lg); display: block; }
.inline-tg p { color: rgba(255,255,255,.85); font-size: var(--text-sm); }
.inline-tg .btn { background: #fff; color: var(--clr-telegram); }

.related-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 700px) { .related-posts { grid-template-columns: 1fr; } }