/* Responsive Images CSS */

/* Ensure images are responsive */
.responsive-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.responsive-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Prevent layout shift while images load */
.responsive-image {
    position: relative;
    overflow: hidden;
}

/* Image loading states */
img[loading="lazy"] {
    opacity: 1; /* Changed from 0 to 1 to make images visible by default */
    transition: opacity 0.3s ease-in-out;
}

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

/* High priority images should load immediately */
img[fetchpriority="high"] {
    opacity: 1;
}

/* Aspect ratio containers for preventing CLS */
.aspect-ratio-16-9 {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 */
}

.aspect-ratio-4-3 {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* 4:3 */
}

.aspect-ratio-1-1 {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* 1:1 */
}

.aspect-ratio-16-9 img,
.aspect-ratio-4-3 img,
.aspect-ratio-1-1 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Blog post featured images */
.featured-image .responsive-image {
    border-radius: 1rem;
    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
    margin-bottom: 1rem;
}

/* Card images */
.card-img-top.responsive-image {
    border-top-left-radius: calc(0.375rem - 1px);
    border-top-right-radius: calc(0.375rem - 1px);
}

/* Performance optimizations */
picture {
    display: block;
}

/* Dark mode adjustments */
.dark .responsive-image img {
    filter: brightness(0.9);
}

/* Print styles */
@media print {
    .responsive-image img {
        max-width: 100% !important;
        height: auto !important;
    }
}