/* === POSTS (grid responsivo) === */
.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colunas no desktop */
  gap: 24px;
  align-items: stretch;
}

.post-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.post-card .thumb {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 12px;
}
.post-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.post-card:hover img {
  transform: scale(1.05);
}

.post-card h3 {
  margin: 12px 0 6px;
  font-size: 1.1rem;
}
.post-card .excerpt {
  flex: 1;
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: 12px;
}
.post-card time {
  font-size: .8rem;
  color: var(--muted);
  display: block;
  margin-top: auto;
  text-align: right;
}

/* Responsivo */
@media (max-width: 1024px) {
  .posts {
    grid-template-columns: repeat(2, 1fr); /* tablet: 2 colunas */
  }
}
@media (max-width: 768px) {
  .posts {
    grid-template-columns: 1fr; /* celular: 1 coluna */
  }
}