/* blog.css — page-specific styles for blog index. Uses variables from main.css */

.posts-list{ display:flex; flex-direction:column; gap:1.25rem; margin-top:1rem; }

/* Post card */
.post-card{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding:0.8rem;
  border-radius:8px;
  transition: transform .08s ease, background .12s ease;
}
.post-card:hover{ transform:translateY(-3px); background: rgba(175,28,46,0.03); }

.post-media{
  flex: 0 0 320px;
  width:320px;
  height:180px;
  overflow:hidden;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#f6f6f6,#fafafa);
}
.post-media img{ width:100%; height:auto; object-fit:cover; display:block; }

/* Body */
.post-body{ flex:1 1 auto; min-width:0; }
.post-title{ margin:0 0 .25rem; font-size:1.1rem; }
.post-title a{ color:var(--brand); text-decoration:none; }
.post-title a:hover{ text-decoration:underline; }

.post-meta{ display:flex; gap:.6rem; align-items:center; color:var(--muted); font-size:.95rem; margin-bottom:.45rem; }
.post-meta .tag{ background:rgba(175,28,46,0.06); color:var(--brand); padding:.18rem .45rem; border-radius:999px; font-weight:700; font-size:.82rem; }

/* excerpt clickable */
.post-excerpt{ margin:0; color:var(--muted); }
.post-excerpt.clickable{ cursor:pointer; }
.post-excerpt.clickable:hover{ color:var(--text); text-decoration:underline; }

/* Pagination */
.pagination{ display:flex; gap:.5rem; margin:1rem 0; }

/* Responsive layout */
@media (max-width:860px){
  .post-card{ flex-direction:column; }
  .post-media{ width:100%; height:200px; }
}

.post-media {
  flex: auto;
  width: 320px;
  height: 180px;
}