/* =========================================================================
   PORTAL DO TEA - Anuncios
   Regra do mundo: anuncio ocupa lugar previsto, nunca roubado.
   Todo slot reserva altura antes de carregar (CLS = 0) e e rotulado.
   Tamanhos GAM/AdSense confirmados com o cliente.
   ========================================================================= */

.anuncio {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  margin-inline: auto;
}

.anuncio__rotulo {
  font-family: var(--placa);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-3);
  line-height: 1;
}

.anuncio__slot {
  display: grid;
  place-items: center;
  width: 100%;
  background: var(--papel-3);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 9px,
    rgba(97, 108, 120, 0.09) 9px 10px
  );
  color: var(--tinta-3);
  font-family: var(--placa);
  font-size: var(--t-mini);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* --- Faixa larga apos o painel de partidas ------------------------------- */
/* Desktop 970x250 (billboard) | 728x90 (leaderboard) | Mobile 320x100 ------ */
.anuncio--faixa { padding-block: var(--e-6); border-block: 1px solid var(--fio); }
.anuncio--faixa .anuncio__slot { max-width: 970px; min-height: 250px; }

.anuncio--faixa-curta { padding-block: var(--e-5); }
.anuncio--faixa-curta .anuncio__slot { max-width: 728px; min-height: 90px; }

/* --- Retangulo no meio do conteudo --------------------------------------- */
/* 300x250 e 336x280 --------------------------------------------------------*/
.anuncio--retangulo .anuncio__slot { max-width: 336px; min-height: 280px; }

/* --- Meia pagina na coluna lateral --------------------------------------- */
/* 300x600. Fica por ultimo na coluna e so entao gruda: um elemento sticky
   no meio da coluna passaria por cima dos blocos seguintes. -----------------*/
.anuncio--meia-pagina { position: sticky; top: var(--e-5); align-self: start; }
.anuncio--meia-pagina .anuncio__slot { max-width: 300px; min-height: 600px; }

/* --- Ancora fixa no rodape do celular ------------------------------------ */
.anuncio-ancora {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-ancora);
  display: none;
  justify-content: center;
  align-items: center;
  background: var(--papel-2);
  border-top: 1px solid var(--fio);
  padding: 0.25rem 0 calc(0.25rem + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 14px rgba(20, 23, 26, 0.12);
}

.anuncio-ancora .anuncio__slot { width: 320px; min-height: 50px; }

.anuncio-ancora__fechar {
  position: absolute;
  top: -22px;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--papel-2);
  border: 1px solid var(--fio);
  border-bottom: 0;
  color: var(--tinta-3);
  line-height: 1;
  transition: transform var(--rapido) var(--saida);
}

.anuncio-ancora__fechar:active { transform: scale(0.9); }
.anuncio-ancora[hidden] { display: none; }

@media (max-width: 860px) {
  .anuncio--faixa .anuncio__slot { max-width: 320px; min-height: 100px; }
  .anuncio--faixa { padding-block: var(--e-5); }
  .anuncio--faixa-curta .anuncio__slot { max-width: 320px; min-height: 100px; }
  .anuncio--meia-pagina { position: static; }
  .anuncio--meia-pagina .anuncio__slot { max-width: 336px; min-height: 280px; }

  .anuncio-ancora { display: flex; }
  /* a ancora cobre 50px do rodape: o conteudo nao pode terminar embaixo dela */
  body.tem-ancora { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
}