/* CSS Fix Ultra-Estável para Blog - Sem Tremor */



/* Cards totalmente estáveis */

.article-card {

    border: none;

    border-radius: 1rem;

    overflow: hidden;

    height: 100%;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    transition: none !important;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    transform: none !important;

}



/* Eliminar mudança de sombra ao hover para evitar repaints */

.article-card:hover {

    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;

}



/* Remover quaisquer efeitos de foco/active */

.article-card:focus,

.article-card:active {

    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;

    outline: none;

}



/* Fixar tamanho das imagens */

.article-image {

    width: 100%;

    height: 200px;

    object-fit: cover;

    background-color: #f3f4f6;

    display: block;

}



/* Cards de estatística estáveis */

.stats-card {

    background: white;

    border-radius: 1rem;

    padding: 2rem;

    text-align: center;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    transition: none;

    height: 100%;

}



.stats-card:hover {

    box-shadow: 0 4px 8px rgba(0,0,0,0.15);

}



/* Cards de categoria estáveis */

.category-card {

    background: white;

    border-radius: 1rem;

    padding: 1.5rem;

    text-align: center;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    transition: none;

    height: 100%;

    text-decoration: none;

    color: inherit;

}



.category-card:hover {

    box-shadow: 0 4px 8px rgba(0,0,0,0.15);

    color: inherit;

    text-decoration: none;

}



/* Estabilizar grids */

.row.g-4 {

    contain: none !important;

}



.container {

    contain: none !important;

}



/* Botões estáveis */

.btn-outline-primary {

    transition: none;

}



/* Garantir estabilidade total */

.featured-card {

    backface-visibility: initial !important;

    -webkit-backface-visibility: initial !important;

    transform: none !important;

    -webkit-transform: none !important;

}



/* Para usuários que preferem movimento reduzido */

@media (prefers-reduced-motion: no-preference) {

    /* sem efeitos extra */

}



/* Prevenção de layout shifts */

.card-body {

    contain: none !important;

}



/* Garantir que não há movimento indesejado */

* {

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}