/* ═══════════════════════════════════════════════════════════════════════════
   Cards de notícia — altura uniforme e reação ao passar o mouse

   Usado em DOIS lugares, porque os dois usam o mesmo template de loop do
   Elementor (mesmos ids de elemento):
     · /blog.php            — grade dinâmica, vinda do banco (noticias_embed.php)
     · /index.php           — bloco "Últimas notícias e insights", markup estático

   Por isso o CSS vive aqui, num arquivo só: manter duas cópias garantiria que
   um dia elas divergissem.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Altura uniforme ────────────────────────────────────────────────────────
   O grid do Elementor já esticava a CÉLULA, mas o card interno não a
   preenchia: na mesma linha havia cards de 477px e 630px, e a régua do rodapé
   ficava desalinhada. Aqui o card ocupa a célula inteira e o resumo é limitado
   a 3 linhas, o que iguala a altura também ENTRE as linhas.                  */

.elementor-loop-container .e-loop-item { display: flex; }

.elementor-loop-container .e-loop-item > .elementor-element-d40d6e7 {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;              /* ancora a régua do hover */
    transition: transform .35s ease, box-shadow .35s ease;
}

/* O recorte do zoom fica aqui, e não num wrapper novo: o .e-con-inner já
   existe no markup do Elementor e é filho do card, então segura a foto sem
   cortar a régua do rodapé, que é desenhada no card. */
.elementor-loop-container .e-loop-item > .elementor-element-d40d6e7 > .e-con-inner {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* a foto tem altura fixa e é ela que dá o zoom */
.elementor-loop-container .elementor-element-3674c15 {
    flex: 0 0 auto;
    transition: transform .6s cubic-bezier(.2,.6,.2,1);
}

/* o bloco de texto ocupa o resto e empurra o "Saiba Mais" para o rodapé */
.elementor-loop-container .elementor-element-3e1ec93 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* título em no máximo 2 linhas, com a altura reservada mesmo se for curto */
.elementor-loop-container .elementor-element-273d9f2 .elementor-heading-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;               /* 2 linhas de 1.2em */
}

/* o resumo em 3 linhas exatas é o que iguala as alturas entre as linhas */
.elementor-loop-container .elementor-element-63c4f4c {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.5em;               /* 3 linhas de 1.5em */
    margin-bottom: 18px;
}

.elementor-loop-container .elementor-element-76d2a2a { margin-top: auto; }

/* ── Hover ──────────────────────────────────────────────────────────────────
   Quatro movimentos pequenos ao mesmo tempo: o card sobe, a sombra dura vira
   uma sombra difusa, a foto dá um zoom lento e a régua do rodapé se preenche
   de amarelo da esquerda para a direita. Nenhum chama atenção sozinho; juntos
   dão a sensação de que o card respondeu ao mouse.                           */

.elementor-loop-container .e-loop-item > .elementor-element-d40d6e7::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;                    /* exatamente sobre a régua laranja */
    height: 8px;
    width: 0;
    background: #FEB735;             /* o amarelo dos botões do site */
    transition: width .45s cubic-bezier(.2,.6,.2,1);
}
.elementor-loop-container .e-loop-item > .elementor-element-d40d6e7:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(0,0,0,.18);
}
.elementor-loop-container .e-loop-item > .elementor-element-d40d6e7:hover::after {
    width: 100%;
}
.elementor-loop-container .e-loop-item > .elementor-element-d40d6e7:hover .elementor-element-3674c15 {
    transform: scale(1.06);
}

/* a seta do "Saiba Mais" desliza para dentro quando o card está sob o mouse */
.elementor-loop-container .elementor-element-76d2a2a .elementor-button-text::after {
    content: "\2192";
    display: inline-block;
    margin-left: 6px;
    transform: translateX(-4px);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
}
.elementor-loop-container .e-loop-item > .elementor-element-d40d6e7:hover .elementor-button-text::after {
    transform: translateX(0);
    opacity: 1;
}

/* quem pediu menos animação no sistema operacional não recebe movimento */
@media (prefers-reduced-motion: reduce) {
    .elementor-loop-container .e-loop-item > .elementor-element-d40d6e7,
    .elementor-loop-container .e-loop-item > .elementor-element-d40d6e7::after,
    .elementor-loop-container .elementor-element-3674c15,
    .elementor-loop-container .elementor-element-76d2a2a .elementor-button-text::after {
        transition: none;
    }
    .elementor-loop-container .e-loop-item > .elementor-element-d40d6e7:hover,
    .elementor-loop-container .e-loop-item > .elementor-element-d40d6e7:hover .elementor-element-3674c15 {
        transform: none;
    }
}