/**
 * ==========================================
 * ARQUITETURA DE IMAGENS DO POST
 * ==========================================
 * 
 * HIERARQUIA DE ESPECIFICIDADE (da mais genérica para a mais específica):
 * 1. .post-content__image (base para todas as imagens)
 * 2. .post-content__image--editor (imagens do editor Quill)
 * 3. .post-content__image--resized (imagens com resize customizado)
 * 4. .post-content__image--[size] (small, medium, large)
 * 5. .post-content__image--[align] (left, right, center, full)
 * 
 * IMPORTANTE: Classes seguem metodologia BEM (Block Element Modifier)
 * IMPORTANTE: Evitamos !important exceto onde absolutamente necessário
 */

/* ==================== 1. BASE: Todas as imagens do conteúdo ==================== */
.materia .post-content img:not(.post-cover-image):not(.post-thumbnail-image):not(.post-featured-image):not(.post-latest-image),
.materia .post-content .post-content__image {
    max-width: 100%;
    height: auto;
    margin: 20px auto;
    display: block;
    border: 1px solid var(--preto, #000);
    box-sizing: border-box;
    object-fit: contain;
    transition: filter 0.3s ease, box-shadow 0.3s ease;
}

/* ==================== 2. EDITOR: Imagens do Quill com classes padrão ==================== */
.materia .post-content .ql-image-pro,
.materia .post-content .post-content__image--editor {
    /* Herda da base, sem overrides desnecessários */
}

/* ==================== 3. RESIZE: Imagens com tamanho customizado (PRIORIDADE MÁXIMA) ==================== */
/* Estas imagens DEVEM manter o tamanho especificado via inline style */
.materia .post-content img.ql-image-pro[style*="width"],
.materia .post-content img.post-content__image--resized {
    /* Remove limites para permitir resize customizado */
    max-width: none !important;
    /* Permite que inline styles funcionem */
    width: auto; /* O inline style vai sobrescrever */
    height: auto; /* O inline style vai sobrescrever */
    /* Mantém estilos visuais */
    margin: 20px auto;
    display: block;
    border: 1px solid var(--preto, #000);
    box-sizing: content-box; /* CRÍTICO: Respeita width exato sem incluir border */
    object-fit: contain;
}

/* ==================== 4. HOVER: Efeitos visuais ==================== */
.materia .post-content img.ql-image-pro:hover,
.materia .post-content .post-content__image:hover {
    filter: grayscale(0%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==================== 5. TAMANHOS: Classes de tamanho predefinido ==================== */
/* Apenas aplicado se NÃO houver resize customizado */
.materia .post-content .post-content__image--small:not([style*="width"]) {
    max-width: 300px;
    margin: 15px auto;
}

.materia .post-content .post-content__image--medium:not([style*="width"]) {
    max-width: 600px;
    margin: 25px auto;
}

.materia .post-content .post-content__image--large:not([style*="width"]) {
    max-width: 90%;
    margin: 30px auto;
}

/* Compatibilidade com classes antigas */
.materia .post-content .post-image-small { max-width: 300px; }
.materia .post-content .post-image-medium { max-width: 600px; }
.materia .post-content .post-image-large { max-width: 90%; }

/* ==================== 6. ALINHAMENTOS: Classes de posicionamento ==================== */
/* IMPORTANTE: Suporta tanto nomenclatura BEM quanto classes do Quill */

/* Left: Float à esquerda com texto ao redor */
.materia .post-content .post-content__image--align-left,
.materia .post-content .ql-align-left,
.materia .post-content .ql-image-pro.float-left,
.materia .post-content figure.float-left {
    float: left !important;
    margin: 0 20px 20px 0 !important;
    max-width: 50%;
}

/* Right: Float à direita com texto ao redor */
.materia .post-content .post-content__image--align-right,
.materia .post-content .ql-align-right,
.materia .post-content .ql-image-pro.float-right,
.materia .post-content figure.float-right {
    float: right !important;
    margin: 0 0 20px 20px !important;
    max-width: 50%;
}

/* Center: Centralizado sem float */
.materia .post-content .post-content__image--align-center,
.materia .post-content .ql-align-center,
.materia .post-content .ql-image-pro.align-center,
.materia .post-content figure.align-center {
    float: none !important;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 80%;
}

/* Full: Largura total do container */
.materia .post-content .post-content__image--align-full,
.materia .post-content .ql-align-full,
.materia .post-content .ql-image-pro.align-full,
.materia .post-content figure.align-full {
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
    float: none !important;
}

/* ==================== IMAGEM DE CAPA DO POST ==================== */
.materia .imgCapa.post-cover-image,
.materia img.post-cover-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
    max-height: 600px !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 2px solid var(--preto, #000) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: filter 0.3s ease, box-shadow 0.3s ease !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 auto 20px auto !important;
}

.materia .imgCapa.post-cover-image:hover,
.materia img.post-cover-image:hover {
    filter: grayscale(0%) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    transform: scale(1.005) !important;
}

/* ==================== MINIATURAS DE POSTS RECENTES ==================== */
/* REMOVIDO - Agora aplicado via JavaScript em Blog/js/utils/force-recent-posts-styles.js */

/* ==================== IMAGENS DE POSTS EM DESTAQUE ==================== */
.conteudoTemaY .conteudoBox img.post-featured-image,
.postsDestaquesCard img.post-featured-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: 350px !important;
    object-fit: cover !important;
    object-position: center !important;
    margin-bottom: 5px !important;
    margin-top: 10px !important;
    padding-right: 10px !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* ==================== IMAGEM DO ÚLTIMO POST ==================== */
.ultimoPostBloco img.post-latest-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
    max-height: 490px !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 1px solid var(--preto, #000) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: filter 0.3s ease, box-shadow 0.3s ease !important;
    display: block !important;
    box-sizing: border-box !important;
}

.ultimoPostBloco img.post-latest-image:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* ==================== 7. RESPONSIVIDADE: Mobile (< 768px) ==================== */
@media (max-width: 768px) {
    /* Base: Todas as imagens em full width no mobile */
    .materia .post-content img,
    .materia .post-content .post-content__image {
        max-width: 100%;
        margin: 15px auto;
    }
    
    /* Alinhamentos: Remover floats no mobile */
    .materia .post-content .post-content__image--align-left,
    .materia .post-content .post-content__image--align-right,
    .materia .post-content .ql-align-left,
    .materia .post-content .ql-align-right {
        float: none;
        display: block;
        margin: 15px auto;
        max-width: 100%;
    }
    
    /* Resize customizado: Limitar max-width no mobile */
    .materia .post-content img.ql-image-pro[style*="width"] {
        max-width: 100% !important; /* Override para mobile */
    }
    
    /* Imagem de capa: Ajustar altura */
    .materia .imgCapa.post-cover-image,
    .materia img.post-cover-image {
        min-height: 200px;
        max-height: 400px;
    }
    
    /* Último post: Ajustar altura */
    .ultimoPostBloco img.post-latest-image {
        min-height: 200px;
        max-height: 300px;
    }
    
    /* Posts em destaque: Ajustar altura */
    .conteudoTemaY .conteudoBox img.post-featured-image {
        min-height: 150px;
        max-height: 250px;
    }
}