/* Image optimization CSS to fix Lighthouse sizing and performance issues */

/* Prevent layout shift by setting explicit dimensions and improve quality */
img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Enhanced image rendering for better quality */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    /* GPU acceleration for better quality */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Fix specific image sizing issues identified by Lighthouse */
/* Main homepage banner image optimization */
.hero-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
}

/* Category card images - responsive sizing */
.category-image img {
    width: 500px;
    height: 350px;
    max-width: 100%;
    aspect-ratio: 10/7;
    object-fit: cover;
    object-position: center;
}

/* Dolce Vita yacht images - fix oversized dimensions */
img[src*="dolce-vita-2"] {
    width: 364px;
    height: 243px;
    max-width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
}

/* Gallery images - standardized sizing */
img[src*="homepagebanner"] {
    width: 364px;
    height: 243px;
    max-width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
}

/* Maxum and yacht gallery images - proper sizing */
img[src*="maxum"],
img[src*="sundancer"],
img[src*="gordita"] {
    width: 364px;
    height: 273px;
    max-width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

/* Logo optimization with proper dimensions */
.logo,
img[src*="logoWithBackgroun"] {
    width: 120px;
    height: 60px;
    aspect-ratio: 2/1;
    object-fit: contain;
}

/* Gallery images optimization - Fix for Lighthouse sizing issues */
.gallery-image {
    width: 100%;
    height: 250px;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    transition: transform 0.3s ease;
    aspect-ratio: 16/10;
    display: block;
}

/* Hero background image optimization */
.hero {
    background-attachment: scroll; /* Better for mobile performance */
}

/* Logo optimization - Fix sizing issues */
.logo {
    width: 120px;
    height: 60px;
    object-fit: contain;
    aspect-ratio: 2/1;
}

/* About section image - Fix for proper aspect ratio */
.about-us-img {
    width: 600px;
    height: 400px;
    max-width: 100%;
    object-fit: cover;
    border-radius: 12px;
    aspect-ratio: 3/2;
}

/* Prevent cumulative layout shift */
.gallery-card {
    contain: layout style paint;
}

/* Sport boat image specific sizing */
.sport-boat-image {
    width: 400px;
    height: 250px;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    background: #f8f9fa;
    aspect-ratio: 16/10;
}

/* Optimize images for different screen sizes */
@media (max-width: 768px) {
    .gallery-image {
        width: 100%;
        height: 200px;
        aspect-ratio: 16/10;
    }
    
    .sport-boat-image {
        width: 100%;
        height: 200px;
        aspect-ratio: 16/10;
    }
    
    .about-us-img {
        width: 100%;
        height: 300px;
        aspect-ratio: 4/3;
    }
    
    .logo {
        width: 100px;
        height: 50px;
        aspect-ratio: 2/1;
    }
}

/* Lazy loading optimization - Let browser handle natively */
img[loading="lazy"] {
    transition: opacity 0.3s;
}

/* WebP fallback support */
.webp img {
    /* WebP images loaded */
}

.no-webp img {
    /* Fallback for browsers without WebP support */
}

/* Fix aspect ratios to prevent layout shift */
.gallery-card picture,
.gallery-card img {
    width: 100%;
    display: block;
    aspect-ratio: 16/10;
}

/* Ensure proper sizing for all picture elements */
picture {
    display: block;
    width: 100%;
}

/* Image preloading optimization */
.preload-image {
    content-visibility: auto;
    contain-intrinsic-size: 400px 250px;
}

/* Enhanced Gallery Photo Quality - Fix pixelation issues */
.gallery-photo {
    /* High quality image rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    /* GPU acceleration for smoother display */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Better object-fit for high quality */
    object-fit: cover;
    object-position: center;
    /* Prevent blurry scaling */
    -webkit-filter: contrast(1.02) saturate(1.05);
    filter: contrast(1.02) saturate(1.05);
}

/* Gallery boat card images - Main gallery page */
.gallery-boat-image img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Enhance sharpness for thumbnail views */
    -webkit-filter: contrast(1.02) saturate(1.05) brightness(1.02);
    filter: contrast(1.02) saturate(1.05) brightness(1.02);
}

/* Modal content high resolution display */
.modal-content {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    /* Prevent pixelation when zoomed */
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    /* Better quality for large display */
    -webkit-filter: contrast(1.01) saturate(1.02);
    filter: contrast(1.01) saturate(1.02);
}

/* High DPI/Retina display optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .gallery-photo,
    .gallery-boat-image img,
    .modal-content {
        /* Enhanced rendering for high DPI displays */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: pixelated;
        image-rendering: high-quality;
    }
}