/* Responsive Images CSS - Lighthouse Optimized */

/* Aspect ratio containers to prevent CLS (Cumulative Layout Shift) */
.responsive-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.responsive-image-container img,
.responsive-image-container picture {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Common aspect ratios */
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

.aspect-ratio-21-9 {
    aspect-ratio: 21 / 9;
}

.aspect-ratio-3-2 {
    aspect-ratio: 3 / 2;
}

/* Ensure images maintain aspect ratio */
img[width][height] {
    /*height: auto;*/
    max-width: 100%;
}

/* Picture element styling */
picture {
    display: block;
    width: 100%;
    height: auto;
}

picture img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Prevent layout shift during image load */
img[loading="lazy"] {
    content-visibility: auto;
}

/* Optimize LCP (Largest Contentful Paint) images */
img[fetchpriority="high"] {
    content-visibility: auto;
    contain-intrinsic-size: auto;
}

/* Ensure images don't overflow containers */
.f-case-img,
.f-case-img img,
.f-case-img picture {
    max-width: 100%;
    object-fit: cover;
}

/* Hero slider images */
.hero-slide img,
.hero-slide picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Services slider images */
.services-slide img,
.services-slide picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}