.post-card {
    position:       relative;
    display:        flex;
    flex-direction: column;
    height:         100%;
    overflow:       hidden;
    border:         1px solid var(--border-default);
    border-radius:  var(--radius-xl);
    background:     var(--neutral-0);
}

.post-card__media {
    display:     block;
    flex-shrink: 0;
    height:      140px;
    overflow:    hidden;
    background:  var(--bg-subtle);
}

.post-card__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.post-card:hover .post-card__image {
    transform: scale(1.04);
}

.post-card__body {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    padding:        16px;
}

.post-card__date {
    font-size: 13px;
    color:     var(--text-secondary);
}

.post-card__title {
    display:            -webkit-box;
    overflow:           hidden;
    font-size:          16px;
    line-height:        22px;
    font-weight:        500;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.post-card__link {
    color:           var(--text-primary);
    text-decoration: none;
}

.post-card__link::after {
    content:  '';
    position: absolute;
    inset:    0;
}

.post-card:hover .post-card__link {
    color: var(--blue-500);
}

.blog-list__grid {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   48px 24px;
}

/* Картка запису — великий варіант */
.post-card--large {
    border:        0;
    border-radius: 0;
    background:    transparent;
    overflow:      visible;
}

.post-card--large .post-card__media {
    height:        auto;
    aspect-ratio:  340 / 227;
    border-radius: 16px;
}

.post-card--large .post-card__body {
    gap:     10px;
    padding: 16px 0 0;
}

.post-card--large .post-card__date {
    font-size:   14px;
    line-height: 20px;
    font-weight: 500;
    color:       var(--neutral-500);
}

.post-card--large .post-card__title {
    font-size:          19px;
    line-height:        1.4;
    font-weight:        600;
    -webkit-line-clamp: 3;
}

@media (max-width: 1279px) {
    .blog-list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
    .blog-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
}

@media (max-width: 767px) {
    .blog-list__grid { grid-template-columns: 1fr; gap: 28px; }
}