/**
 * Rounded Images Plugin - CSS Styles
 * Versão: 1.0.0
 * Descrição: Estilos responsivos e elegantes para bordas arredondadas em imagens
 */

/* Reset básico para garantir consistência */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Estilos base para imagens com bordas arredondadas */
.rounded-images-enabled img {
    /* Bordas arredondadas com fallback para navegadores antigos */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    
    /* Transições suaves */
    -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Otimização de renderização */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    
    /* Suavização de bordas */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* Força aceleração de hardware */
    will-change: transform, box-shadow;
}

/* Efeito hover elegante */
.rounded-images-enabled img:hover {
    /* Leve aumento na escala */
    -webkit-transform: scale(1.02) translateZ(0);
    -moz-transform: scale(1.02) translateZ(0);
    -ms-transform: scale(1.02) translateZ(0);
    -o-transform: scale(1.02) translateZ(0);
    transform: scale(1.02) translateZ(0);
    
    /* Sombra sutil */
    -webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    
    /* Leve brilho */
    filter: brightness(1.05);
    -webkit-filter: brightness(1.05);
}

/* Estilos específicos para diferentes contextos */

/* Imagens em galerias */
.gallery img,
.wp-block-gallery img {
    margin-bottom: 10px;
}

/* Imagens em posts e páginas */
.entry-content img,
.post-content img,
.page-content img {
    margin: 10px 0;
}

/* Imagens destacadas */
.post-thumbnail img,
.featured-image img {
    width: 100%;
    object-fit: cover;
}

/* Compatibilidade com temas populares */
.elementor img,
.vc_single_image img,
.wp-block-image img {
    border-radius: inherit;
}

/* RESPONSIVIDADE */

/* Tablets (768px - 1024px) */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .rounded-images-enabled img {
        border-radius: 12px;
    }
    
    .rounded-images-enabled img:hover {
        transform: scale(1.015) translateZ(0);
        -webkit-transform: scale(1.015) translateZ(0);
    }
}

/* Tablets pequenos e smartphones grandes (481px - 768px) */
@media screen and (max-width: 768px) and (min-width: 481px) {
    .rounded-images-enabled img {
        border-radius: 10px;
    }
    
    .rounded-images-enabled img:hover {
        transform: scale(1.01) translateZ(0);
        -webkit-transform: scale(1.01) translateZ(0);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
}

/* Smartphones (até 480px) */
@media screen and (max-width: 480px) {
    .rounded-images-enabled img {
        border-radius: 8px;
    }
    
    /* Reduz efeitos em dispositivos móveis para melhor performance */
    .rounded-images-enabled img:hover {
        transform: none;
        -webkit-transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* Smartphones muito pequenos (até 320px) */
@media screen and (max-width: 320px) {
    .rounded-images-enabled img {
        border-radius: 6px;
    }
}

/* COMPATIBILIDADE COM NAVEGADORES ANTIGOS */

/* Internet Explorer 9+ */
.ie9 .rounded-images-enabled img {
    border-radius: 15px;
    behavior: url(border-radius.htc); /* Fallback para IE8 se necessário */
}

/* Fallback para navegadores sem suporte a border-radius */
.no-borderradius .rounded-images-enabled img {
    border: 2px solid #f0f0f0;
}

/* OTIMIZAÇÕES DE PERFORMANCE */

/* Reduz repaint em animações */
.rounded-images-enabled img {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* Otimização para dispositivos com tela de alta densidade */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .rounded-images-enabled img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* MODO ESCURO */
@media (prefers-color-scheme: dark) {
    .rounded-images-enabled img:hover {
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
        -webkit-box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
    }
}

/* ACESSIBILIDADE */

/* Respeita preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .rounded-images-enabled img {
        transition: none;
        -webkit-transition: none;
    }
    
    .rounded-images-enabled img:hover {
        transform: none;
        -webkit-transform: none;
    }
}

/* Melhora contraste para usuários com baixa visão */
@media (prefers-contrast: high) {
    .rounded-images-enabled img {
        border: 1px solid #000;
    }
}

/* PRINT STYLES */
@media print {
    .rounded-images-enabled img {
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        transition: none !important;
    }
}