/* Blog custom styles for responsive image handling */

/* Default responsive behavior for all images */
img {
    max-width: 100%;
    height: auto;
}

/* Blog card images - maintain aspect ratio within bounds */
.card-img-top {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
    background-color: #f8f9fa;
}

/* Featured post gets more height */
.featured-card .card-img-top {
    height: 350px;
}

/* Smaller cards in grid */
.col-lg-6 .card-img-top {
    height: 200px;
}

/* Blog detail page images */
.blog-detail-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Images within blog content - responsive by default */
.blog-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto;
}

/* Different handling based on image type */
/* Portrait images (like game screenshots) */
.image-portrait {
    max-height: 600px;
    width: auto;
    max-width: 100%;
}

/* Landscape images (like UI screenshots) */
.image-landscape {
    max-width: 100%;
    height: auto;
}

/* Square images */
.image-square {
    max-width: 500px;
    width: 100%;
    height: auto;
}

/* Mobile-specific image handling */
@media (max-width: 576px) {
    .image-portrait {
        max-height: 400px;
    }
    
    .image-square {
        max-width: 100%;
    }
    
    .blog-content img {
        margin: 0.5rem auto;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-img-top {
        height: 150px;
    }
    
    .featured-card .card-img-top {
        height: 200px;
    }
    
    .col-lg-6 .card-img-top {
        height: 150px;
    }
}

/* Small mobile devices */
@media (max-width: 576px) {
    .card-img-top {
        height: 120px;
    }
    
    .featured-card .card-img-top {
        height: 180px;
    }
    
    .col-lg-6 .card-img-top {
        height: 120px;
    }
}

/* Card hover effects */
.card {
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card:hover .card-img-top {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Loading state for images */
img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Ensure cards have equal height */
.row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-text {
    flex: 1;
}