/* Image Optimization CSS - Ensures dimensions don't break responsive design */

/* Global image responsiveness */
img {
    max-width: 100%;
    height: auto;
}

/* Specific responsive overrides */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Logo responsiveness */
.site-logo img {
    max-width: 200px;
    height: auto;
}

/* Hero section images */
.hero-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Icon responsiveness */
.social-icon,
.next-prev-icon img,
.right-arrow {
    width: auto;
    height: auto;
    max-width: 30px;
    max-height: 30px;
}

/* Button and UI icons */
.btn-img img,
.filter-btn-icon img,
.print-page-button,
.share-button img {
    width: auto;
    height: auto;
    max-width: 24px;
    max-height: 24px;
}

/* Vector arrows and small icons */
img[src*="Vector-arrow-red.svg"],
img[src*="arrow-right-red.svg"] {
    width: auto;
    height: auto;
    max-width: 20px;
    max-height: 20px;
}

/* Service and brand icons */
.service-image img,
.brand-icon img,
.link-icon img {
    width: 100%;
    height: auto;
    max-width: 300px;
    object-fit: contain;
}

/* Gallery images */
.selected-image {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
}

.slider-nav img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
}

/* Palm signature */
.signature img {
    width: auto;
    height: auto;
    max-width: 225px;
    max-height: 60px;
}

/* No results and illustration images */
img[src*="no-results.svg"] {
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 200px;
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
    .site-logo img {
        max-width: 150px;
    }
    
    .signature img {
        max-width: 180px;
    }
    
    .hero-image {
        max-height: 300px;
        object-fit: cover;
    }
}

/* Ensure lazy loaded images don't cause layout shift */
img[loading="lazy"] {
    min-height: 1px; /* Prevents collapse */
}

/* Aspect ratio containers for consistent layouts */
.truck-card {
    position: relative;
}

.truck-card .truck-image {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.selected-image-container {
    position: relative;
    width: 100%;
}

.selected-image-container .selected-image {
    width: 100%;
    height: auto;
    display: block;
}