/* Blog Image Positioning Fix - Better centering and navbar compensation */

/* Blog post preview images */
.blog-post-image {
    position: relative;
    width: 100%;
    aspect-ratio: 24 / 9;
    overflow: hidden;
    background: #000 !important;
    flex-shrink: 0;
    border-radius: 12px 12px 0 0;
}

.blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center !important; /* Center the image */
    display: block;
    transition: all 0.5s ease;
    opacity: 0.7;
    filter: brightness(0.8);
}

/* For portrait images, show more of the top */
.blog-post-image img[src*="portrait"] {
    object-position: center 30% !important;
}

/* Blog header images on individual posts */
.blog-header-image {
    margin-top: 60px !important; /* Account for navbar height */
    position: relative;
    width: 100%;
    max-height: 50vh;
    overflow: hidden;
}

.blog-header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center !important; /* Keep centered on desktop */
}

/* Mobile adjustments */
@media screen and (max-width: 767px) {
    .blog-post-image {
        aspect-ratio: 16 / 9 !important;
    }

    .blog-post-image img,
    .container .blog-post-image img,
    .section .blog-post-image img {
        object-position: center 35% !important; /* Adjust more to show top on mobile */
        object-fit: cover !important;
    }

    .blog-post-preview .blog-post-image img,
    .container .blog-post-preview .blog-post-image img {
        object-position: center 35% !important; /* Show more top for mobile preview cards */
        object-fit: cover !important;
    }

    .blog-header-image {
        margin-top: 50px !important; /* Smaller navbar on mobile */
        max-height: 40vh !important;
    }

    .blog-header-image img,
    .container .blog-header-image img,
    article .blog-header-image img {
        object-position: center 35% !important; /* Show more top for mobile blog posts */
        object-fit: cover !important;
    }
}

/* Specific adjustments for blog cards that look cropped */
.blog-post-preview .blog-post-image img {
    object-position: center center !important; /* Keep centered on desktop */
}

/* Hover state - maintain the position */
.blog-post-preview:hover .blog-post-image img {
    transform: scale(1.05);
    opacity: 0.85;
    filter: brightness(0.9);
    object-position: center center !important; /* Keep centered on hover */
}