/* Band Banners — visual dos espaços no site.
   CSS próprio de propósito: o plugin precisa funcionar em qualquer tema. */

.band-banner {
  position: relative;
  margin: 28px auto;
  max-width: 100%;
  text-align: center;
}

/* Reserva a proporção do espaço antes de a peça carregar, para a página não
   pular sob o dedo do leitor quando o anúncio aparece. */
.band-banner[style*="--band-banner-prop"] .band-banner__peca {
  aspect-ratio: var(--band-banner-prop);
}

/* Teto de altura: se o anunciante mandar uma peça fora de medida, ela
   encolhe para caber em vez de empurrar a página toda para baixo. */
.band-banner[style*="--band-banner-alt"] .band-banner__img,
.band-banner[style*="--band-banner-alt"] .band-banner__video {
  max-height: var(--band-banner-alt);
  width: auto;
  object-fit: contain;
}

.band-banner__peca {
  display: none;
  position: relative;
  margin: 0 auto;
  max-width: 100%;
}

.band-banner__peca.esta-vendo {
  display: block;
  animation: band-banner-entra .45s ease both;
}

@keyframes band-banner-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.band-banner__rotulo {
  display: block;
  margin-bottom: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9aa0a8;
  text-align: center;
}

.band-banner__link {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.band-banner__img,
.band-banner__video {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Versão de celular entra no lugar da de computador em tela estreita. */
.band-banner__img--mobile { display: none; }

@media (max-width: 640px) {
  .band-banner__img--mobile { display: block; }
  .band-banner__img--desktop { display: none; }
  .band-banner { margin: 20px auto; }
}

/* Dentro do texto da matéria o anúncio ganha um respiro maior,
   para não se confundir com o conteúdo. */
.band-banner--materia-meio,
.band-banner--materia-topo,
.band-banner--materia-fim {
  clear: both;
  margin: 36px auto;
  padding: 4px 0;
}

/* Faixas largas encostam nas bordas em telas pequenas. */
.band-banner--topo,
.band-banner--rodape {
  margin: 0 auto;
  padding: 14px 0;
}

/* Barra lateral: ocupa a coluna inteira. */
.band-banner--lateral,
.band-banner--lateral-2 {
  margin: 0 0 24px;
}

/* Enquanto a tag da agência não desenha nada, o espaço não deve
   deixar um buraco visível no meio da página. */
.band-banner__peca:empty { display: none; }