/* Responsive Image Styles */

/* Ensure all images are responsive by default */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Image fluid class for responsive images */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Lazy loaded images - show immediately with fade in when loaded */
img[loading="lazy"] {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Service images responsive */
.services-creative img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 370 / 230;
}

/* Post/article images responsive */
.post-amy-figure img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 570 / 505;
}

/* Swiper slide background images responsive */
.swiper-slide {
    background-size: cover;
    background-position: center;
}

@media (max-width: 576px) {
    /* Stack images vertically on mobile */
    .services-creative {
        margin-bottom: 1rem;
    }
    
    .services-creative img {
        aspect-ratio: auto;
    }
    
    .post-amy-figure img {
        aspect-ratio: auto;
    }
}

/* Ensure gallery images are responsive */
.thumbnail-creative img,
.gallery img {
    width: 100%;
    height: auto;
}

/* Logo responsive */
.rd-navbar-brand img {
    height: auto;
    max-width: 100%;
}

/* Parallax images responsive */
[data-parallax-img] {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

@media (max-width: 768px) {
    [data-parallax-img] {
        background-attachment: scroll;
    }
}

/* Picture element support */
picture {
    display: contents;
}

/* Ensure images in containers scale properly */
.container img,
.row img {
    width: 100%;
    height: auto;
}

/* Add a loading placeholder for lazy images */
img[loading="lazy"]:not(.loaded)::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 66.67%;
    background-color: #f0f0f0;
}

/* Responsive typography for image captions */
.services-creative-caption,
.post-amy,
.swiper-slide-caption {
    word-wrap: break-word;
}