/**
 * Global Image Quality Enhancements
 * Ensures all images across the theme are crisp, clear, and well-displayed
 * 
 * @package StreamBox
 */

/* ===============================================
   GLOBAL IMAGE OPTIMIZATION
   =============================================== */

/* All images get high-quality rendering */
img {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Images in links */
a img {
    display: block;
}

/* WordPress image classes */
.wp-post-image,
.attachment-thumbnail,
.attachment-medium,
.attachment-large,
.attachment-full {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* ===============================================
   THUMBNAIL & POSTER CONTAINERS
   =============================================== */

/* Any element with thumbnail/poster in class name */
[class*="thumbnail"],
[class*="poster"],
[class*="image-wrapper"],
[class*="img-container"] {
    position: relative;
    overflow: hidden;
    background-color: #1a1f3a;
}

[class*="thumbnail"] img,
[class*="poster"] img,
[class*="image-wrapper"] img,
[class*="img-container"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ===============================================
   CONTENT IMAGES
   =============================================== */

/* Images in post content */
.entry-content img,
.post-content img,
article img {
    height: auto;
    max-width: 100%;
    display: block;
    border-radius: 8px;
}

/* Featured images */
.featured-image img,
.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* ===============================================
   ARCHIVE & GRID IMAGES
   =============================================== */

/* Archive grid images */
.archive-grid img,
.content-grid img,
.movies-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* ===============================================
   HERO & BANNER IMAGES
   =============================================== */

/* Hero section images */
.hero img,
.hero-banner img,
.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Background images - ensure they're loaded with high quality */
.hero-background,
.section-background,
[class*="bg-image"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: -webkit-optimize-contrast;
}

/* ===============================================
   SLIDER & CAROUSEL IMAGES
   =============================================== */

/* Carousel/slider images */
.carousel img,
.slider img,
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
}

/* ===============================================
   AVATAR & PROFILE IMAGES
   =============================================== */

.avatar,
.user-avatar,
.profile-image {
    border-radius: 50%;
    object-fit: cover;
}

/* ===============================================
   RESPONSIVE IMAGES
   =============================================== */

/* Ensure srcset images load properly */
img[srcset] {
    width: 100%;
    height: auto;
}

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

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

/* ===============================================
   LAZY LOADING OPTIMIZATION
   =============================================== */

/* Images with loading attribute - don't hide by default */
img[loading="lazy"] {
    transition: opacity 0.3s ease;
}

/* Intersection observer support - don't hide by default */
img.lazyload {
    transition: opacity 0.3s ease;
}

/* ===============================================
   ASPECT RATIOS
   =============================================== */

/* Common aspect ratios for images */
.aspect-square {
    aspect-ratio: 1/1;
}

.aspect-video {
    aspect-ratio: 16/9;
}

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

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

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

/* ===============================================
   IMAGE STATES
   =============================================== */

/* Loading state */
img:not([src]) {
    visibility: hidden;
}

/* ===============================================
   IMAGE STATES
   =============================================== */

/* Loading state - don't hide images */
img:not([src]) {
    background-color: #1a1f3a;
}

/* ===============================================
   ACCESSIBILITY
   =============================================== */

/* Decorative images */
img[alt=""],
img[role="presentation"] {
    opacity: 1;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    img {
        image-rendering: auto;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    img {
        transition: none !important;
        animation: none !important;
    }
}

/* ===============================================
   MOBILE OPTIMIZATION
   =============================================== */

@media (max-width: 768px) {
    /* Optimize image loading on mobile */
    img {
        image-rendering: -webkit-optimize-contrast;
    }
    
    /* Ensure images don't overflow */
    .entry-content img,
    .post-content img {
        max-width: 100%;
        height: auto;
    }
}

/* ===============================================
   SPECIAL CASES
   =============================================== */

/* Logo images - keep aspect ratio */
.site-logo img,
.logo img,
.brand-logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Icon images */
.icon img,
.emoji img,
svg {
    display: inline-block;
    vertical-align: middle;
}

/* Thumbnail galleries */
.gallery img,
.thumbnail-gallery img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.gallery img:hover,
.thumbnail-gallery img:hover {
    transform: scale(1.05);
    opacity: 0.9;
}