/* ============================================================
   PARCEIROS
   Gplay — site da banda
   ============================================================
   Painel "papel" — de propósito quieto. Logo de parceiro tem cor
   própria, não dá pra impor vermelho/preto em cima; aqui a seção só
   dá um fundo neutro e deixa os logos falarem. Sem logo real ainda:
   cada item é um placeholder de texto (nome), silencioso por padrão,
   ganha borda vermelha só no hover — quando os logos reais entrarem,
   troque .parceiro-logo__placeholder por <img class="parceiro-logo__img">
   e aplique o mesmo filter:grayscale()/hover que já está aqui pronto
   comentado, sem mexer no resto.
   ============================================================ */

/* padding vertical vem de .painel--papel em css/geral.css (afeta
   todas as seções brancas de uma vez). Não redeclarar aqui. */

.parceiros__container {
    max-width: var(--gp-container);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}

/* título "Quem Apoia" — estilo compartilhado em css/geral.css */

.parceiros__grade {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: clamp(28px, 4vw, 44px);
}

.parceiro-logo {
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px dashed rgba(36, 31, 24, 0.22);
    border-radius: 3px;
    text-decoration: none;
    transition: border-color 0.2s ease;
    padding: 10px;
}

.parceiro-logo:hover {
    border-color: var(--gp-vermelho);
    border-style: solid;
}

.parceiro-logo__placeholder {
    font-family: var(--font-dado);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(36, 31, 24, 0.4);
}

.parceiro-logo:hover .parceiro-logo__placeholder {
    color: var(--gp-vermelho);
}

/* pronto pra quando os logos reais entrarem — troque o <span> por
   <img class="parceiro-logo__img" src="..."> e descomente:
.parceiro-logo__img {
    max-width: 100%;
    max-height: 100%;
    filter: grayscale(1);
    opacity: .6;
    transition: filter .25s ease, opacity .25s ease;
}
.parceiro-logo:hover .parceiro-logo__img {
    filter: grayscale(0);
    opacity: 1;
}
*/

/* ============================================================ RESPONSIVO */
@media (max-width: 900px) {
    .parceiros__grade {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 520px) {
    .parceiros__grade {
        grid-template-columns: repeat(2, 1fr);
    }
}