/* REVISOR WP - Estilos para imagens geradas */

.revisor-wp-image {
    margin: 2em 0 !important;
    text-align: center;
}

.revisor-wp-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.revisor-wp-image img:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Estilos para legendas */
.revisor-wp-image .wp-element-caption,
.revisor-wp-image figcaption {
    margin-top: 0.5em !important;
    font-size: 0.9em !important;
    color: #666 !important;
    font-style: italic !important;
    text-align: center !important;
    line-height: 1.4 !important;
    padding: 0 1em !important;
}

/* Garantir que as legendas sejam visíveis no editor */
.wp-block-editor .revisor-wp-image .wp-element-caption,
.wp-block-editor .revisor-wp-image figcaption {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Responsividade */
@media (max-width: 768px) {
    .revisor-wp-image {
        margin: 1.5em 0 !important;
    }
    
    .revisor-wp-image img {
        border-radius: 6px;
    }
    
    .revisor-wp-image .wp-element-caption,
    .revisor-wp-image figcaption {
        font-size: 0.85em !important;
        padding: 0 0.5em !important;
    }
}

@media (max-width: 480px) {
    .revisor-wp-image {
        margin: 1em 0 !important;
    }
    
    .revisor-wp-image img {
        border-radius: 4px;
    }
    
    .revisor-wp-image .wp-element-caption,
    .revisor-wp-image figcaption {
        font-size: 0.8em !important;
        padding: 0 0.25em !important;
    }
}

/* Garantir que as imagens WebP sejam exibidas corretamente */
.revisor-wp-image img[src$=".webp"] {
    background-color: #f8f9fa;
}

/* Estilo para quando a imagem está carregando */
.revisor-wp-image img[loading="lazy"] {
    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;
    }
}

/* Estilos específicos para o editor Gutenberg */
.wp-block-editor .revisor-wp-image {
    margin: 2em 0 !important;
}

.wp-block-editor .revisor-wp-image .wp-element-caption {
    color: #1e1e1e !important;
    font-size: 13px !important;
    text-align: center !important;
    margin-top: 8px !important;
}

/* Compatibilidade com editor clássico */
.mce-content-body .revisor-wp-image .wp-element-caption,
.mce-content-body .revisor-wp-image figcaption {
    display: block !important;
    margin-top: 0.5em !important;
    font-size: 0.9em !important;
    color: #666 !important;
    font-style: italic !important;
    text-align: center !important;
}