/* =====================================================
   MGV Parceiros Rotativos v2.1 — Layout
   ===================================================== */

/* Container: flex row, centralizado */
.mgv-parceiros-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
}

/* Cada slot: largura definida pelo JS (% por colunas)
   Altura fixa — todos os logos têm a mesma altura visual */
.mgv-slot {
    flex: 0 0 var(--mgv-slot-width, 25%);
    max-width: var(--mgv-slot-width, 25%);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/*
 * Imagem do logo:
 * - height: 100% → preenche a altura do slot (80px) como referência
 * - width: auto  → largura proporcional, sem distorcer
 * - max-width: 85% → não ocupa o slot inteiro na horizontal
 * - object-fit: contain → garante que a imagem caiba sem cortar
 *
 * Resultado: todos os logos têm a MESMA ALTURA visual (80px),
 * independente das proporções originais.
 */
.mgv-logo {
    display: block;
    height: 100%;
    width: auto;
    max-width: 85%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* filter e opacity são injetados pelo PHP inline */
    transition: opacity 0.5s ease, filter 0.5s ease;
}

/* Estado visível (JS adiciona/remove esta classe) */
.mgv-logo.mgv-visible {
    opacity: 1; /* sobrescrito pelo inline PHP */
}

/* Estado invisível durante a troca */
.mgv-logo.mgv-hidden {
    opacity: 0 !important;
}

/* ── Responsividade ── */
@media (max-width: 900px) {
    .mgv-slot {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}
@media (max-width: 480px) {
    .mgv-slot {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        height: 60px;
    }
}