.posts-section { padding-block: var(--section-space); }
.post-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-8); }
.post-card { border: 0; outline: 1px solid var(--color-outline); outline-offset: -1px; border-radius: var(--radius-card); background: var(--color-white); overflow: hidden; display: flex; flex-direction: column; }
.post-card__image { display: block; width: 100%; height: 220px; object-fit: cover; }
.post-card__copy { display: flex; flex-direction: column; padding: var(--space-8); flex: 1; }
.post-card h3 { font-size: var(--text-h6); line-height: var(--leading-h6); margin: 0; }
.post-card h3 a { text-decoration: none; }
.post-card h3 a:hover { color: var(--color-action-text); }
.post-card p { font-size: var(--text-section-body); line-height: var(--leading-body); margin: var(--space-5) 0 var(--space-8); color: var(--color-text-secondary); }
.post-card footer { display: flex; justify-content: space-between; gap: var(--space-5); margin-top: auto; font-size: var(--text-micro); }
.post-card footer a { text-decoration: none; color: var(--color-action-text); }
@media(max-width:1000px) { .post-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) { .post-grid { grid-template-columns: 1fr; } }

.post-card h3 { font-weight: var(--font-weight-medium); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.post-card p { margin: var(--space-3) 0 var(--space-6); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.post-card footer { align-items: center; border-top: 1px solid var(--color-outline); padding-top: var(--space-6); font-size: var(--text-small); line-height: var(--leading-body); }
.post-card footer a { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--font-weight-bold); }
.post-card footer { color: var(--color-text-secondary); }
@media(min-width:768px) { .post-card { background: var(--color-pink-faint); } }
.post-card footer a::after { content: ''; width: 16px; height: 16px; background: url('../../assets/sections/post-arrow.svg') center/16px 16px no-repeat; }
@media(max-width:767px) {
  .post-card p { margin-top: var(--space-5); margin-bottom: var(--space-5); -webkit-line-clamp: 4; }
  .post-card footer { padding-top: var(--space-5); }
  .post-card footer a { min-height: 44px; gap: var(--space-3); }
}