/* 1. O Contêiner Principal (A ID que você usou no JS) */
#apoiadores {
    display: grid;
    /* MOBILE: Define exatamente 2 colunas por linha */
    grid-template-columns: repeat(2, 1fr);
    gap: 16px; /* Espaçamento entre as logos no celular */
    
    /* Centraliza na página caso o site tenha largura máxima */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 2. DESKTOP/TABLET: Adapta para o que couber */
@media (min-width: 768px) {
    #apoiadores {
        /* Cria quantas colunas couberem, cada uma com no mínimo 180px */
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 24px; /* Espaçamento um pouco maior em telas grandes */
    }
}

/* 3. O Visual do Card (A classe que o JS cria para o <a>) */
.card-apoiador {
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* Borda elegante e sutil */
    border-radius: 12px; /* Cantos arredondados */
    padding: 20px;
    text-decoration: none; /* Garante que o link não fique sublinhado */
    
    /* Flexbox para centralizar a imagem dentro do link perfeitamente */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Sombra inicial bem leve */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    
    /* Transição para o efeito do mouse */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    
    /* Opcional: Garante que todos os cards tenham a mesma proporção (altura/largura) */
    aspect-ratio: 4 / 3; 
}

/* 4. Efeito Elegante ao passar o mouse (Hover) */
.card-apoiador:hover {
    transform: translateY(-4px); /* Dá uma leve "levantada" no card */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Aumenta a sombra */
    border-color: #cccccc; /* Borda fica levemente mais escura */
}

/* 5. Comportamento das Imagens criadas pelo JS */
.card-apoiador img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Garante que a logo não seja distorcida ou esticada */
    
    /* Suaviza as imagens caso alguma venha quebrada antes do onerror agir */
    color: transparent; 
}

/* Configuração base para não bugar o espaçamento do JavaScript */
#banner-lateral > a {
    margin-bottom: 0 !important;
    display: flex !important;
    justify-content: center; /* Centraliza a imagem no próprio espaço */
    align-items: center;
}

/* =========================================
   MOBILE (Até 768px): 2 Banners por linha
   ========================================= */
@media (max-width: 768px) {
    #banner-lateral {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        /* justify-items centraliza o item no grid sem esticar */
        justify-items: center; 
    }
}

/* =========================================
   DESKTOP (Acima de 768px): O que couber
   ========================================= */
@media (min-width: 769px) {
    #banner-lateral {
        display: grid;
        
        flex-wrap: wrap; /* Permite que os banners pulem de linha quando acabar o espaço */
        gap: 15px;
        /* Alinha os banners no começo do contêiner. 
           Se preferir todos centralizados, troque para: justify-content: center; */
        justify-content: center; 
    }
}