/* Post listing; header, footer and pagination reuse the shared stylesheet. */
.post-content {
  width:calc(100% - 80px);
  max-width:1200px;
  margin-inline:auto;
  padding-block:80px 60px;
  display:grid;
  gap:48px;
  color:#333;
}
.post-listing {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px 24px;
}
.post-card {
  display:grid;
  align-content:start;
  gap:16px;
  min-width:0;
  padding:20px;
  background:var(--surface);
  border-radius:8px;
}
.post-card-link {display:grid;gap:16px;min-width:0}
.post-card img {
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:4px;
}
.post-card h2 {font-size:18px;font-weight:700;line-height:28px;overflow-wrap:anywhere}
.post-meta {
  display:flex;
  flex-wrap:wrap;
  gap:4px 16px;
  color:#555;
  font-size:14px;
  line-height:22px;
}
.post-category {text-decoration:underline;text-underline-position:from-font}
@media(max-width:1199px) {
  .post-listing {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1099px) {
  .post-page .menu-overlay {top:56px}
}
@media(max-width:767px) {
  .post-content {width:calc(100% - 16px)}
  .post-listing {grid-template-columns:minmax(0,1fr);gap:24px}
  .post-card img {aspect-ratio:346 / 258}
}