/**
 * Image Fallback Styles
 *
 * Provides visual styling for fallback images in non-production environments
 * where production S3 images may not be accessible.
 *
 * Applies a yellow tint to indicate the image is a placeholder.
 */

/* Noticeable yellow tint for fallback images */
img.fallback-image {
    filter: sepia(0.4) saturate(2) hue-rotate(10deg) brightness(1.1);
    border: 2px solid #ffc107;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
}

/* Smooth transition when fallback is applied */
img[onerror] {
    transition: all 0.3s ease-in-out;
}

/* Ensure fallback images don't break layout */
img.fallback-image {
    object-fit: cover;
    max-width: 100%;
    height: auto;
}