/*
 * Meu Banner Plugin — estilos públicos de exibição.
 *
 * Banners de imagem são exibidos em modo ampliado: podem ocupar até 1200 px
 * no desktop, ainda que a coluna do artigo seja mais estreita. Em telas
 * menores, a largura é reduzida proporcionalmente para nunca gerar rolagem
 * horizontal.
 */
.mbp-banner {
    display: block;
    clear: both;
    box-sizing: border-box;
}

/*
 * Mantém imagens de banner em destaque, centralizadas em relação à viewport.
 * A largura máxima respeita 1200 px e reserva 16 px de respiro de cada lado
 * em telas menores.
 */
.mbp-banner.mbp-banner-image {
    width: 1200px;
    max-width: calc(100vw - 32px);
    margin-right: 0 !important;
    margin-left: 50% !important;
    transform: translateX(-50%);
    text-align: center;
}

.mbp-banner.mbp-banner-image a {
    display: block;
    width: 100%;
    max-width: 100%;
}

/*
 * !important é usado apenas dentro do wrapper do plugin para neutralizar
 * regras genéricas do tema que definem width, max-width ou altura de imagens.
 */
.mbp-banner.mbp-banner-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Mantém códigos de vídeo incorporados responsivos. */
.mbp-banner video,
.mbp-banner iframe {
    display: block;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}

/* Em telas estreitas, preserva uma margem mínima de 12 px. */
@media (max-width: 480px) {
    .mbp-banner.mbp-banner-image {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
    }
}