/*
 * Ajustes sobre o tema (style.css). Carregado por último.
 * Cada bloco diz o problema que resolve.
 */

/* ---------------------------------------------------------------
 * Marcas: o JS gera <img> direto em .thumbnail, sem o <a> que o tema
 * espera, e com max-height:130% inline — nada limitava o tamanho e
 * o ícone do Mundpay ocupava o card inteiro.
 * ------------------------------------------------------------- */
/* Caixa fixa + contain: logo quadrada e wordmark largo (Mundpay, 6:1)
 * ocupam a mesma área visual em vez de cada um ficar num tamanho. */
#clients .client-card .main-content .thumbnail img {
    width: 100%;
    height: 64px;
    max-height: none !important;
    object-fit: contain;
}

/* No celular o tema empilha uma marca por linha (17 cards gigantes).
 * Duas colunas e logos menores. */
@media only screen and (max-width: 767px) {
    #clients .client-card {
        padding: 0;
        margin: -12px -6px 0;
    }
    #clients .client-card .main-content {
        flex-basis: 50% !important;
        padding: 0 6px;
        margin-top: 12px;
    }
    #clients .client-card .main-content .thumbnail {
        height: 96px;
        padding: 18px;
    }
    #clients .client-card .main-content .thumbnail img {
        height: 40px;
    }
    #clients .client-card .main-content .client-name span {
        font-size: 13px;
    }
}

/* ---------------------------------------------------------------
 * Grade do /portfolio: capas com proporções diferentes deixavam os
 * cards serrilhados. Miniatura sempre 4:3, cortada no centro.
 * ------------------------------------------------------------- */
#projetos .rn-portfolio {
    height: 100%;
}
#projetos .rn-portfolio .inner .thumbnail a img {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Mesmo critério no carrossel "Latest Projects" da home */
#portfolioCarrousel .thumbnail img {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ---------------------------------------------------------------
 * Logo da Be Interactive ocupava quase a tela toda no celular.
 * ------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .testimonial .inner .card-info .card-thumbnail {
        max-width: 120px !important;
        margin: 0 auto 20px;
    }
}