/**
  * ============================================
 * Standardized Images CSS for Zox News Theme
 * ============================================
 * 
 * This CSS ensures all images fill their containers completely
 * without distortion, using object-fit: cover for professional
 * cropping and consistent proportions across all sections.
 * 
 * Proportions:
 * - Featured images: 16:9 (widescreen)
 * - Grid images: 4:3
 * - Thumbnails: 1:1 (square)
 * - Video thumbnails: 16:9
 * - Sidebar images: 3:2
 */

/* ============================================
   BASE IMAGE STYLES
   ============================================ */

/* All images fill their containers - EXCEPT LOGOS */
img:not(.mvp-nav-logo):not([class*="logo"]):not([class*="logo-"]):not([src*="logo"]) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* EXCLUDE LOGOS FROM IMAGE TRANSFORMATIONS */
.mvp-nav-logo,
.mvp-logo,
#mvp-main-nav-top img,
#mvp-main-nav-small img,
#mvp-main-nav-bot img,
.mvp-fly-nav-menu img,
#mvp-foot-logo img,
.footer-logo img,
.site-logo img,
[class*="header-logo"],
[class*="footer-logo"] {
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transform: none !important;
    max-width: 100%;
    display: inline-block !important;
}

/* Header Logo Container - Centered */
#mvp-main-nav-top,
#mvp-main-nav-small,
.mvp-nav-top-mid {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mvp-nav-top-mid {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Logo Sizing - Regular State */
.mvp-nav-logo-small,
.mvp-nav-small .mvp-nav-logo-reg {
    display: none;
    height: 36px;
    width: 100px;
}

/* Logo sizing for small navigation state */
#mvp-main-nav-small .mvp-nav-logo-small {
    display: none;
    height: 36px;
    width: 100px;
}

#mvp-main-nav-small .mvp-nav-logo-reg {
    display: none;
    height: 36px;
    width: 100px;
}

#mvp-main-nav-top .mvp-nav-logo-wrap img,
#mvp-main-nav-small .mvp-nav-logo-wrap img {
    max-width: 100%;
    height: auto;
    display: inline-block !important;
    object-fit: contain;
}

/* Footer Logo Container - Centered */
#mvp-foot-logo,
.footer-logo-wrap,
.site-footer .mvp-nav-logo-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    overflow: visible !important;
    background: transparent !important;
}

#mvp-foot-logo img,
.footer-logo img,
.site-footer .mvp-nav-logo-wrap img {
    max-width: 100%;
    height: auto;
    display: inline-block !important;
}

/* Ensure all image containers have proper positioning - EXCEPT LOGO CONTAINERS */
.mvp-feat1-img,
.mvp-feat2-img,
.mvp-feat3-img,
.mvp-feat4-img,
.mvp-feat5-img,
.mvp-feat6-img,
.mvp-blog-img,
.mvp-widget-img,
.mvp-related-img,
.mvp-flex-img,
.mvp-trend-img,
.mvp-cat-img,
.mvp-search-img,
.mvp-post-img,
.mvp-archive-img {
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0; /* Placeholder color while loading */
}

/* Logo containers should not have overflow hidden or transformations */
.mvp-nav-logo-wrap,
.mvp-logo-wrap,
[class*="logo-"] {
    overflow: visible !important;
    background: transparent !important;
}

.mvp-feat1-img img,
.mvp-feat2-img img,
.mvp-feat3-img img,
.mvp-feat4-img img,
.mvp-feat5-img img,
.mvp-feat6-img img,
.mvp-blog-img img,
.mvp-widget-img img,
.mvp-related-img img,
.mvp-flex-img img,
.mvp-trend-img img,
.mvp-cat-img img,
.mvp-search-img img,
.mvp-post-img img,
.mvp-archive-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

/* Hover effect - subtle zoom */
.mvp-feat1-img:hover img,
.mvp-feat2-img:hover img,
.mvp-feat3-img:hover img,
.mvp-feat4-img:hover img,
.mvp-blog-img:hover img,
.mvp-widget-img:hover img {
    transform: translate(-50%, -50%) scale(1.05);
}

/* ============================================
   FEATURED SECTIONS - 16:9 Aspect Ratio
   ============================================ */

/* Main Featured Story (Left Large) */
.mvp-feat1-left-img {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-feat1-left-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Featured List Images (Fixed dimensions) */
.mvp-feat1-list-img {
    -webkit-backface-visibility: hidden;
    background: #000;
    line-height: 0;
    margin-right: 0;
    overflow: hidden;
    width: 200px;
    height: 88px;
    position: relative;
}

.mvp-feat1-list-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Featured Stories Grid */
.mvp-feat1-grid-img {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-feat1-grid-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Featured Section 2 (Top Featured) */
.mvp-feat2-top-img {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-feat2-top-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Featured Section 2 Bottom Stories */
.mvp-feat2-bot-img {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-feat2-bot-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Featured Section 3 (Main Story) */
.mvp-feat3-main-story,
.mvp-feat3-sub-story {
    width: 100%;
    height: 600px;
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-feat3-main-story img,
.mvp-feat3-sub-story img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Featured Section 3 Main Image Container */
.mvp-feat3-main-img {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-feat3-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Featured Section 3 Sub Stories */
.mvp-feat3-sub-img {
    position: relative;
    width: 100%;
    height: 290px;
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-feat3-sub-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Featured Section 4 */
.mvp-feat4-main-img {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-feat4-main-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Featured Section 5 */
.mvp-feat5-main-img {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-feat5-main-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mvp-feat5-small-img {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-feat5-small-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Featured Section 6 */
.mvp-feat6-img {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-feat6-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   BLOG/ARCHIVE LAYOUTS - 4:3 Aspect Ratio
   ============================================ */

.mvp-blog-story-img {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-blog-story-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   THUMBNAILS - 1:1 Square Aspect Ratio
   ============================================ */

/* Small Thumbnails (Trending, Category lists) */
.mvp-small-thumb {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 square aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-small-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Medium Thumbnails */
.mvp-mid-thumb {
    position: relative;
    width: 100%;
    padding-bottom: 60%; /* Slightly rectangular */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-mid-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Large Thumbnails */
.mvp-large-thumb {
    position: relative;
    width: 100%;
    padding-bottom: 60%; /* 3:2 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-large-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   WIDGET IMAGES - Various Aspect Ratios
   ============================================ */

/* Featured Widget 1 - Top Story */
.mvp-widget-feat1-top-img {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-widget-feat1-top-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Featured Widget 1 - Bottom Stories */
.mvp-widget-feat1-bot-img {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-widget-feat1-bot-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Featured Widget 2 */
.mvp-widget-feat2-left-img {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-widget-feat2-left-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mvp-widget-feat2-right-img {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-widget-feat2-right-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark Featured Widget */
.mvp-widget-dark-feat-img {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-widget-dark-feat-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mvp-widget-dark-sub-img {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-widget-dark-sub-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Flex Widget */
.mvp-flex-img {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-flex-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Flex Story Image (Fixed height) */
.mvp-flex-story-img {
    background: #000;
    line-height: 0;
    overflow: hidden;
    height: 251px;
    position: relative;
    width: 100%;
}

.mvp-flex-story-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================
   VIDEO THUMBNAILS - 16:9 Aspect Ratio
   ============================================ */

.mvp-vid-img {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-vid-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mvp-vid-box-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
}

/* ============================================
   SIDEBAR WIDGETS - 3:2 Aspect Ratio
   ============================================ */

.mvp-side-thumb {
    position: relative;
    width: 100%;
    padding-bottom: 66.67%; /* 3:2 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-side-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   SINGLE POST IMAGES
   ============================================ */

/* Featured Image on Single Post */
#mvp-post-feat-img {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

#mvp-post-feat-img img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    display: block;
}

/* Wide Featured Image */
#mvp-post-feat-img-wide {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#mvp-post-feat-img-wide img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    display: block;
}

/* ============================================
   RELATED POSTS
   ============================================ */

.mvp-related-img {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-related-img img {
    position: absolute;
    top: 1;
    left: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   AUTHOR IMAGES
   ============================================ */

.mvp-author-img {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 square */
    overflow: hidden;
    border-radius: 50%;
    background-color: #f0f0f0;
}

.mvp-author-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ============================================
   SEARCH & ARCHIVE IMAGES
   ============================================ */

.mvp-search-img {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-search-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mvp-archive-img {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-archive-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   MEGA MENU IMAGES
   ============================================ */

.mvp-mega-img {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.mvp-mega-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   AUTO LOAD POSTS (ALP) IMAGES
   ============================================ */

.alp-related-post .post-thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background-color: #f0f0f0;
}

.alp-related-post .post-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   WOOCOMMERCE IMAGES
   ============================================ */

.woocommerce ul.products li.product a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.woocommerce div.product div.images img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.woocommerce .widget_recent_reviews li img {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

/* ============================================
   GALLERY IMAGES
   ============================================ */

.mvp-post-gallery-top img,
.mvp-post-gallery-bot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet (768px and below) */
@media screen and (max-width: 768px) {
    .mvp-feat1-left-img,
    .mvp-feat2-top-img,
    .mvp-feat3-main-img,
    .mvp-feat4-main-img,
    .mvp-feat5-main-img,
    .mvp-feat6-img,
    .mvp-widget-feat1-top-img,
    .mvp-widget-feat2-left-img,
    .mvp-widget-dark-feat-img,
    .mvp-vid-img,
    .mvp-archive-img {
        padding-bottom: 56.25%; /* Maintain 16:9 */
    }
    
    .mvp-feat1-grid-img,
    .mvp-feat2-bot-img,
    .mvp-feat3-sub-img,
    .mvp-feat5-small-img,
    .mvp-widget-feat1-bot-img,
    .mvp-widget-feat2-right-img,
    .mvp-widget-dark-sub-img,
    .mvp-blog-story-img,
    .mvp-flex-img,
    .mvp-related-img {
        padding-bottom: 75%; /* Maintain 4:3 */
    }
    
    .mvp-mid-thumb {
        padding-bottom: 66.67%; /* Slightly rectangular on tablet */
    }
}

/* Mobile (480px and below) */
@media screen and (max-width: 480px) {
    /* More compact aspect ratios for mobile */
    .mvp-feat1-left-img,
    .mvp-feat2-top-img,
    .mvp-feat3-main-img,
    .mvp-feat4-main-img,
    .mvp-feat5-main-img,
    .mvp-feat6-img,
    .mvp-widget-feat1-top-img,
    .mvp-widget-feat2-left-img,
    .mvp-widget-dark-feat-img,
    .mvp-vid-img,
    .mvp-archive-img {
        padding-bottom: 56.25%; /* Keep 16:9 for featured */
    }
    
    .mvp-feat1-grid-img,
    .mvp-feat2-bot-img,
    .mvp-feat3-sub-img,
    .mvp-feat5-small-img,
    .mvp-widget-feat1-bot-img,
    .mvp-widget-feat2-right-img,
    .mvp-widget-dark-sub-img,
    .mvp-blog-story-img,
    .mvp-flex-img,
    .mvp-related-img {
        padding-bottom: 66.67%; /* 2:3 for better mobile display */
    }
    
    .mvp-small-thumb,
    .mvp-author-img {
        padding-bottom: 100%; /* Keep square for small thumbnails */
    }
    
    .mvp-mid-thumb {
        padding-bottom: 60%; /* 3:5 aspect ratio */
    }
    
    .mvp-side-thumb {
        padding-bottom: 60%; /* 3:5 aspect ratio */
    }
}

/* ============================================
   RTL SUPPORT
   ============================================ */

.rtl .mvp-feat1-img img,
.rtl .mvp-feat2-img img,
.rtl .mvp-feat3-img img,
.rtl .mvp-blog-img img,
.rtl .mvp-widget-img img {
    right: 0;
    left: auto;
}

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

/* Skip object-fit on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .mvp-feat1-img:hover img,
    .mvp-feat2-img:hover img,
    .mvp-feat3-img:hover img,
    .mvp-feat4-img:hover img,
    .mvp-blog-img:hover img,
    .mvp-widget-img:hover img {
        transform: translate(-50%, -50%);
    }
}

/* ============================================
   FALLBACK FOR OLDER BROWSERS
   ============================================ */

/* For browsers that don't support object-fit */
@supports not (object-fit: cover) {
    .mvp-feat1-img img,
    .mvp-feat2-img img,
    .mvp-feat3-img img,
    .mvp-blog-img img,
    .mvp-widget-img img {
        height: auto;
        min-height: 100%;
        width: auto;
        max-width: none;
    }
}

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

/* Fade in animation for images */
@keyframes imageFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.mvp-feat1-img img,
.mvp-feat2-img img,
.mvp-feat3-img img,
.mvp-blog-img img,
.mvp-widget-img img {
    animation: imageFadeIn 0.3s ease-in-out;
}

/* Skeleton loading effect */
.mvp-feat1-img,
.mvp-feat2-img,
.mvp-feat3-img,
.mvp-blog-img,
.mvp-widget-img {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Remove loading animation once image is loaded */
.mvp-feat1-img img.loaded,
.mvp-feat2-img img.loaded,
.mvp-feat3-img img.loaded,
.mvp-blog-img img.loaded,
.mvp-widget-img img.loaded {
    animation: none;
    background: none;
}