/* =========================================================
   MCP Smooth Corners - FINAL MASTER STYLESHEET
   Features: Round, Shadow, Border, Zoom (Fixed!), Fit, Glass
========================================================= */

/* 1. BASE: Modern Rounded Corners (.mcp-round) */
img.mcp-round, 
.wp-block-image.mcp-round img,
figure.mcp-round img {
    border-radius: 24px !important; 
    overflow: hidden !important; 
}

/* ========================================================== */
/* 4. HOVER ZOOM IN (.mcp-zoom) - THE NUCLEAR FIX */
/* ========================================================== */

/* 1. Master Container Setup */
.wp-block-image.mcp-zoom,
figure.mcp-zoom {
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important; /* Forces Safari to respect border-radius clipping */
    padding: 0 !important; /* Removes any theme-injected padding */
    margin-bottom: 0 !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Ultimate clipping tool */
}

/* 2. Fix for Images wrapped in Links (This is often the hidden culprit) */
.wp-block-image.mcp-zoom a,
figure.mcp-zoom a {
    display: block !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. The Image Setup */
.wp-block-image.mcp-zoom img,
figure.mcp-zoom img,
img.mcp-zoom {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important; /* Kills the bottom bleed space */
    border-radius: 16px !important; /* Applied directly to image as a fallback */
    
    /* Super smooth, premium animation curve */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important; 
    
    /* translateZ(0) forces hardware acceleration, fixing jagged edges during zoom */
    transform: scale(1) translateZ(0) !important; 
    will-change: transform !important;
}

/* 4. The Hover Effect */
.wp-block-image.mcp-zoom:hover img,
figure.mcp-zoom:hover img,
img.mcp-zoom:hover,
.wp-block-image.mcp-zoom a:hover img {
    transform: scale(1.05) translateZ(0) !important; /* Perfect 5% inner zoom */
}

/* ========================================================== */


/* ========================================================== */
/* 7. SCROLL ENTRANCE ANIMATION (.mcp-animate) */
/* ========================================================== */

/* Initial State: Hidden and slightly pushed down */
.mcp-animate {
    opacity: 0 !important;
    transform: translateY(40px) !important; /* 40px niche se upar aayega */
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: opacity, transform !important;
}

/* Final State: Visible and at original position (Added via JS) */
.mcp-animate.mcp-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ========================================================== */
/* 8. DESKTOP GIANT IMAGE FIX (.mcp-desktop-fit) */
/* ========================================================== */

/* Default (Mobile): Image takes full width automatically */

/* Target only tablets and desktops (768px and wider) */
@media (min-width: 768px) {
    .wp-block-image.mcp-desktop-fit,
    figure.mcp-desktop-fit {
        max-width: 80% !important; /* Adjust to 75% or 80% for premium readability */
        margin-left: auto !important;
        margin-right: auto !important; /* Perfect center alignment */
        display: block !important;
    }
    
    .wp-block-image.mcp-desktop-fit img,
    figure.mcp-desktop-fit img,
    img.mcp-desktop-fit {
        width: 100% !important; 
        height: auto !important;
    }
}