/**
 * Image Display Fix - Remove Twist/Rotation & Add Consistent Border Radius
 * 
 * Problem: Images rotate and displace on hover, creating jarring UX
 * Solution: Remove rotation, keep smooth scale only, add consistent border-radius
 */

/* ========================================
   FIX 1: Remove Rotation on Hover
   ======================================== */

/* Blog Box 4 - Remove rotation, keep scale only */
.blog-box4:hover .blog-thumb img {
    -webkit-transform: scale(1.08) !important;
    -ms-transform: scale(1.08) !important;
    transform: scale(1.08) !important;
}

/* Blog Box 5 - Remove rotation, keep scale only */
.blog-box5:hover .blog-thumb img {
    -webkit-transform: scale(1.08) !important;
    -ms-transform: scale(1.08) !important;
    transform: scale(1.08) !important;
}

/* Blog Box 6 - Remove rotation, keep scale only */
.blog-box6:hover .blog-thumb img {
    -webkit-transform: scale(1.08) !important;
    -ms-transform: scale(1.08) !important;
    transform: scale(1.08) !important;
}

/* Gallery Box - Remove rotation, keep scale only */
.gallery__box:hover .thumbnail img:not(.gallery-link img) {
    -webkit-transform: scale(1.08) !important;
    -ms-transform: scale(1.08) !important;
    transform: scale(1.08) !important;
}

/* ========================================
   FIX 2: Consistent Border Radius
   ======================================== */

/* Blog thumbnails - ensure consistent border radius */
.blog-box4 .blog-thumb,
.blog-box5 .blog-thumb,
.blog-box6 .blog-thumb,
.blog-main__box .blog-thumb {
    border-radius: 20px;
    overflow: hidden;
}

/* Blog images - inherit border radius */
.blog-box4 .blog-thumb img,
.blog-box5 .blog-thumb img,
.blog-box6 .blog-thumb img,
.blog-main__box .blog-thumb img {
    border-radius: 20px;
    object-fit: cover;
}

/* Gallery thumbnails - consistent border radius */
.gallery__box .thumbnail {
    border-radius: 20px;
    overflow: hidden;
}

.gallery__box .thumbnail img {
    border-radius: 20px;
    object-fit: cover;
}

/* ========================================
   FIX 3: Prevent Transform Displacement
   ======================================== */

/* Ensure transform-origin is center to prevent displacement */
.blog-thumb img,
.gallery__box .thumbnail img {
    transform-origin: center center !important;
}

/* Smooth transitions without jarring movements */
.blog-thumb img,
.gallery__box .thumbnail img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ========================================
   FIX 4: Sidebar/Widget Images
   ======================================== */

/* Widget post thumbnails */
.widget-post-box .post-thumb,
.post-thumb {
    border-radius: 12px;
    overflow: hidden;
}

.widget-post-box .post-thumb img,
.post-thumb img {
    border-radius: 12px;
    object-fit: cover;
}

/* ========================================
   FIX 5: Mobile Responsiveness
   ======================================== */

@media (max-width: 767px) {
    /* Smaller border radius on mobile */
    .blog-box4 .blog-thumb,
    .blog-box5 .blog-thumb,
    .blog-box6 .blog-thumb,
    .gallery__box .thumbnail {
        border-radius: 15px;
    }
    
    .blog-box4 .blog-thumb img,
    .blog-box5 .blog-thumb img,
    .blog-box6 .blog-thumb img,
    .gallery__box .thumbnail img {
        border-radius: 15px;
    }
    
    .blog-main__box .blog-thumb {
        border-radius: 20px;
    }
    
    .blog-main__box .blog-thumb img {
        border-radius: 20px;
    }
}

@media (max-width: 575px) {
    /* Even smaller on very small screens */
    .blog-main__box .blog-thumb,
    .blog-main__box .blog-thumb img {
        border-radius: 10px;
    }
}

/* ========================================
   FIX 6: Prevent Image Distortion
   ======================================== */

/* Ensure images maintain aspect ratio */
.blog-thumb img,
.gallery__box .thumbnail img,
.post-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

/* For cards with fixed heights */
.blog-box .blog-thumb,
.gallery__box .thumbnail {
    position: relative;
    overflow: hidden;
}

/* ========================================
   FIX 7: Remove Any Skew/Perspective
   ======================================== */

/* Remove any 3D transforms that might cause distortion */
.blog-thumb,
.blog-thumb img,
.gallery__box .thumbnail,
.gallery__box .thumbnail img {
    perspective: none !important;
    transform-style: flat !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ========================================
   FIX 8: Featured/Hero Images
   ======================================== */

/* Hero section images */
.hero-five__thumb img,
.about-us5__thumb img {
    border-radius: 20px;
    object-fit: cover;
}

/* Video section thumbnails */
.video2__player-wrapper video {
    border-radius: 20px;
}

/* ========================================
   FIX 9: Blog Single Page Images
   ======================================== */

/* Main blog post images */
.blog-single .blog-thumb,
.blog-single .blog-thumb img,
figure.blog-thumb {
    border-radius: 40px;
}

@media (max-width: 991px) {
    .blog-single .blog-thumb,
    .blog-single .blog-thumb img,
    figure.blog-thumb {
        border-radius: 20px;
    }
}

@media (max-width: 575px) {
    .blog-single .blog-thumb,
    .blog-single .blog-thumb img,
    figure.blog-thumb {
        border-radius: 10px;
    }
}

/* ========================================
   FIX 10: Portfolio/Project Images
   ======================================== */

.portfolio-details__thumbs img,
.portfolio__box .portfolio-thumb img {
    border-radius: 20px;
    object-fit: cover;
}

/* ========================================
   PERFORMANCE OPTIMIZATION
   ======================================== */

/* Use GPU acceleration for smooth transforms */
.blog-thumb img,
.gallery__box .thumbnail img {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Remove will-change when not hovering */
.blog-thumb,
.gallery__box .thumbnail {
    will-change: auto;
}

.blog-thumb:hover img,
.gallery__box:hover .thumbnail img {
    will-change: transform;
}

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

/* Ensure images have proper focus states */
.blog-thumb a:focus img,
.gallery__box .thumbnail a:focus img {
    outline: 3px solid #d4af37;
    outline-offset: 3px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .blog-thumb img,
    .gallery__box .thumbnail img {
        transition: none !important;
        transform: none !important;
    }
    
    .blog-box4:hover .blog-thumb img,
    .blog-box5:hover .blog-thumb img,
    .blog-box6:hover .blog-thumb img,
    .gallery__box:hover .thumbnail img {
        transform: none !important;
    }
}