/* =====================================================================
   blog-post.css — blog article template (/blog/<slug>/)
   ===================================================================== */
.article { padding-top: 180px; padding-bottom: 75px; }
.article__inner { max-width: 800px; display: flex; flex-direction: column; }
.article .breadcrumb { margin-bottom: 24px; }
.article__meta { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--brown); }
.article__meta .ico { width: 10px; height: 10px; color: var(--red); opacity: .3; }
.article__cover { margin-top: 20px; overflow: hidden; border-radius: var(--radius); }
.article__cover img { width: 100%; height: 534px; object-fit: cover; }
.article__title { margin-top: 40px; }
.article__body { margin-top: 40px; }
.article__body .answer { margin-bottom: 40px; }
.article__body .text + .text { margin-top: 12px; }
.article__body .h6 { margin-top: 40px; }
.article__body .h6 + .text, .article__body .h6 + .article__list { margin-top: 14px; }
.article__list { margin-top: 12px; padding-left: 20px; list-style: disc; display: grid; gap: 6px; }
.article__list li { font-size: 16px; line-height: 26px; color: var(--gray); }
.article__list + .text { margin-top: 12px; }
.article__cta { margin-top: 40px; padding: 30px; display: flex; flex-wrap: wrap; gap: 20px 30px; align-items: center; justify-content: space-between; }
.article__cta .text { flex: 1 1 320px; }

.related { padding-top: 75px; padding-bottom: 150px; }
.related__grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

@media (max-width: 1359px) {
  .article { padding-top: 160px; }
  .article__cover img { height: auto; aspect-ratio: 800 / 534; }
  .related { padding-bottom: 100px; }
  .related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 809px) {
  .article { padding-top: 140px; padding-bottom: 40px; }
  .article__title { margin-top: 30px; }
  .article__body { margin-top: 24px; }
  .article__body .h6 { margin-top: 30px; }
  .related { padding-top: 40px; padding-bottom: 60px; }
  .related__grid { grid-template-columns: 1fr; gap: 40px; margin-top: 30px; }
}