/* ==========================================================================
   PRÊMIOS -- /premios
   --------------------------------------------------------------------------
   10/09/2026 -- conteúdo real de abmes.org.br/projetos (ver o cabeçalho de
   Application\Model\Premios). Cartão com a mesma técnica dos de "Ideal para"
   do Auditório (servicos.css, `.aud-ideal`) -- barra colorida no topo
   variando por posição, dentro da família de verdes do site, com o mesmo
   efeito de destaque ao passar o mouse.

   🔴 2ª rodada, mesmo dia -- GANHOU MINIATURA (a 1ª versão era só cor +
   texto; o Jonh pediu a imagem de cada prêmio de volta, com print
   mostrando o resultado sem elas). Os 4 banners têm proporção e resolução
   diferentes entre si -- `.pre-cartao__imagem` usa `object-fit: contain`
   sobre fundo claro pra encaixar qualquer um sem cortar texto da logo.
   ========================================================================== */

.pre-grade {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.pre-cartao {
    background: var(--branco);
    border-top: 6px solid var(--lima-escuro);
    border-radius: 4px 4px 16px 16px;
    box-shadow: 0 8px 20px rgba(33, 65, 56, .08);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-top-color .18s ease;
}
.pre-cartao:nth-child(4n+2) { border-top-color: var(--verde-escuro); }
.pre-cartao:nth-child(4n+3) { border-top-color: var(--lima); }
.pre-cartao:nth-child(4n+4) { border-top-color: var(--verde-quase-preto); }

/** mesmo "efeito legal" pedido pelo Jonh para `.aud-ideal__item` -- levanta o cartão e a barra do topo engrossa. */
.pre-cartao:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 28px rgba(33, 65, 56, .16);
    border-top-width: 9px;
}

/**
 * Os 4 banners de origem têm proporção e resolução diferentes entre si (uma
 * é logo de site alheio, as outras 3 são o mesmo recorte de `/projetos`) --
 * `contain` sobre fundo claro encaixa qualquer uma sem cortar texto da logo,
 * ao custo de uma faixa de fundo visível nas laterais quando a imagem é mais
 * "quadrada" que a caixa.
 */
.pre-cartao__imagem {
    display: block;
    width: 100%;
    aspect-ratio: 2.4 / 1;
    object-fit: contain;
    background: var(--faixa-clara, #E1E9D4);
    padding: 16px 24px;
}

.pre-cartao__corpo {
    padding: 22px 26px 26px;
}

.pre-cartao__titulo {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--verde-escuro);
}

.pre-cartao__texto {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--verde-escuro);
}

.pre-cartao__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--verde-escuro);
    text-decoration: none;
}
.pre-cartao__link:hover { text-decoration: underline; }
.pre-cartao__link i { color: var(--lima-escuro); font-size: 14px; }

@media (max-width: 767.98px) {
    .pre-grade { grid-template-columns: minmax(0, 1fr); }
}