/* ==========================================================================
   blog.css  —  styling for blog.html (listing) AND blog-post.html (article)
   Banner + breadcrumb come from components.css.
   Post content lives in assets/js/blog-data.js.
   ========================================================================== */

/* --- Listing grid --------------------------------------------- */
.blog-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--green-100);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--green-600);
}
.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .post-card__media img { transform: scale(1.06); }

.post-card__body { padding: 1.3rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }

.post-meta { display: flex; flex-wrap: wrap; gap: .6rem; font-size: .74rem; color: var(--ink-soft); }
.post-meta span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .2rem .55rem;
}
.post-meta svg { width: 12px; height: 12px; }

.post-card h3 { font-size: 1.15rem; }
.post-card p { font-size: .88rem; }
.post-card .btn { margin-top: auto; align-self: flex-start; padding: .5rem 1.1rem; font-size: .82rem; }

@media (max-width: 1000px) { .blog-page__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .blog-page__grid { grid-template-columns: 1fr; } }

/* --- Single article (blog-post.html) ------------------------- */
.post-article { max-width: 780px; margin: 0 auto; }
.post-article__title { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 1rem; }
.post-article .post-meta { font-size: .8rem; margin-bottom: 1.8rem; }

.post-figure {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.8rem;
  border: 1px solid var(--line);
}
.post-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.post-body p { margin-bottom: 1.1rem; line-height: 1.85; }
.post-body h2 { font-size: 1.4rem; margin: 1.8rem 0 .8rem; }

.post-recent__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}
@media (max-width: 1000px) { .post-recent__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .post-recent__grid { grid-template-columns: 1fr; } }