/* ============================================
   ESPACOS
   ============================================

   O espaco nasce escondido e so aparece quando ha campanha sorteada — e por
   isso que pagina sem campanha nao fica com buraco reservado.

   O min-height por classe de viewport nao e redundante com o width/height do
   <img>: ele cobre o caso em que a imagem NAO carrega (criativo apagado do
   Blob, rede caindo no meio). Sem ele a caixa colapsaria para zero e o
   conteudo abaixo pularia uma segunda vez.

   As tres variaveis vem do manifesto, escritas no markup de cada pagina.

   Nenhum espaco pode receber classe de DISPLAY do Tailwind (flex, grid,
   block, inline-flex). O Tailwind por CDN injeta o <style> dele DEPOIS
   deste arquivo, e utilitario de uma classe so venceria o
   `.tb-espaco { display: none }` por ordem de fonte — o espaco apareceria
   vazio antes de haver campanha. As classes que os divs carregam hoje
   (px-, max-w-, mx-, w-, mt-) nao mexem em display. O estado revelado nao
   corre esse risco: `.tb-espaco[data-tb-pronto]` tem especificidade maior
   que qualquer utilitario de uma classe. */

.tb-espaco {
  display: none;
}

.tb-espaco[data-tb-pronto] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Nao usar o atalho `margin: 0 auto`: ele tambem zera margin-top e
     margin-bottom, e com especificidade 0,2,0 vence a classe `mt-24` do
     Tailwind (0,1,0) no slot de comprar.html, colando o espaco no bloco
     acima. Mexendo so em left/right, a margem vertical do utilitario
     sobrevive. */
  margin-left: auto;
  margin-right: auto;
}

.tb-espaco[data-tb-pronto] a {
  display: block;
  line-height: 0;
  max-width: 100%;
}

.tb-espaco[data-tb-pronto] img {
  display: block;
  height: auto;
  max-width: 100%;
  /* Raio leve, no <img> e nao no <a>: o <a> e transparente e abraca a imagem
     (line-height 0), entao arredondar a imagem basta e dispensa o
     overflow: hidden que o raio no pai exigiria. Mais discreto que os cards
     ao redor, que usam 12 e 16px — o anuncio nao deve competir com eles. */
  border-radius: 10px;

  /* Contorno de 1px para destacar o criativo do fundo.
     BRANCO a 12%, e nao o brand-border (azul a 18%): o criativo e arte de
     terceiro e pode ter qualquer cor, e um contorno azul sumiria sobre uma
     arte azul e brigaria com uma arte quente. Neutro funciona sobre todas.
     A sombra e o que faz o anuncio descolar do fundo escuro sem precisar de
     borda mais forte. */
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* ============================================
   ESPACO QUE SAI DE UMA CAIXA ESTREITA

   O /duvidas tem o conteudo num <main> de 1024px com 5% de recuo, e sobram
   882px — um criativo de 970 encolheria para 91% do tamanho real. Esta classe
   deixa o espaco sair da caixa SEM alargar a pagina: largura fixa do criativo,
   centrada no viewport, e limitada a 100vw menos uma folga para nunca criar
   rolagem horizontal nas larguras logo acima de 1024px.

   So vale de 1024px para cima, que e onde a classe desktop comeca; abaixo
   disso o criativo ja e 320x100 e cabe sem ajuda.

   As margens levam !important porque o `space-y-12` do main e um seletor mais
   especifico (`.space-y-12 > :not([hidden]) ~ :not([hidden])`) e venceria uma
   classe simples. O -1rem embaixo colapsa com os 3rem que o irmao seguinte
   recebe do mesmo space-y, e o resultado e 2rem — igual ao de cima. */
.tb-espaco--largura-real[data-tb-pronto] {
  margin-top: 2rem !important;
  margin-bottom: -1rem !important;
}

@media (min-width: 1024px) {
  .tb-espaco--largura-real[data-tb-pronto] {
    width: min(970px, calc(100vw - 2rem));
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (min-width: 1024px) {
  .tb-espaco[data-tb-pronto] { min-height: var(--h-d); }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .tb-espaco[data-tb-pronto] { min-height: var(--h-t); }
}

@media (max-width: 767.98px) {
  .tb-espaco[data-tb-pronto] { min-height: var(--h-m); }
}