.post-card__image {
    position: relative;
    overflow: hidden;
}

.post-card__image img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease-in-out;
}

.blog-hover-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease-in-out !important;
    z-index: 5 !important;
    pointer-events: none;
}

/* Only apply hover effects if hover image is present */
.blog-post-type .post-card:has(.blog-hover-image):hover .post-card__image img:not(.blog-hover-image) {
    opacity: 0;
}

.blog-post-type .post-card:has(.blog-hover-image):hover .post-card__image img.blog-hover-image {
    opacity: 1 !important;
}

/* Keep overlay at zero opacity only for posts with hover images */
.blog-post-type .post-card:has(.blog-hover-image) .post-card__overlay {
    opacity: 0 !important;
}