/* =========================================================================
   ESPAÇO DE ANÚNCIO

   Uma faixa deitada de 970 × 90, logo acima do rodapé, em todas as páginas.
   A arte é dela e vai inteira — nada de moldura dourada em volta, que
   roubaria a atenção de quem comprou o espaço.

   O quadrado de 600 × 600 que ficava no meio da home saiu a pedido dela, e
   as regras dele saíram junto.
   ========================================================================= */

.anuncio__link,
.anuncio__img {
	display: block;
}

.anuncio__img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.anuncio__link {
	border-radius: var(--radius-sm);
	transition: opacity var(--speed) var(--ease);
}

.anuncio__link:hover { opacity: 0.92; }

.anuncio__link:focus-visible {
	outline: 2px solid var(--gold-bright);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   A faixa, acima do rodapé
   ---------------------------------------------------------------------- */

.anuncio-largo {
	padding-block: clamp(2rem, 5vw, 3rem);
}

/*
 * 970 é a largura da arte dela. Sem o teto, num monitor largo a faixa seria
 * esticada para 1320 e um GIF de 970 subiria borrado.
 *
 * Em tela estreita ela encolhe junto, mantendo a proporção — é o
 * comportamento normal de um banner deitado, e 970 × 90 vira 335 × 31 num
 * celular comum, que ainda se lê.
 */
.anuncio-largo .anuncio--retangulo {
	max-width: 970px;
	margin-inline: auto;
}

/*
 * Dentro da seção de Parceiros o anúncio anda junto dos blocos.
 *
 * A seção é de tela cheia e centra o conteúdo, então o respiro padrão do
 * anúncio se somava à sobra da centralização e ele acabava boiando longe
 * dos cards. No desenho dela ele fecha a tela logo abaixo deles.
 */
.parceiros .anuncio-largo {
	padding-block: clamp(1.25rem, 3vw, 2rem) 0;
}


/* -------------------------------------------------------------------------
   A FAIXA DE 468 × 60 DENTRO DA PÁGINA

   Entrou no lugar do quadrado preso na lateral, que ela viu no ar e não
   gostou. Quatro lugares, sempre no fluxo da página: nunca por cima do
   conteúdo, nunca acompanhando a rolagem.

   468 é estreita o bastante para caber inteira num celular sem encolher
   muito — 343 × 44px numa tela de 390, contra os 343 × 32px a que a faixa
   de 970 fica reduzida no mesmo espaço. O formato menor entrega mais ao
   anunciante justamente onde está a maior parte do público.
   ---------------------------------------------------------------------- */

.anuncio-faixa {
	display: flex;
	justify-content: center;
	margin-block: clamp(1.75rem, 4vw, 2.75rem);
}

/*
 * 468 é o teto, não a largura.
 *
 * Sem o teto, num monitor largo a arte seria esticada e um GIF de 468 subiria
 * borrado. Abaixo disso ela encolhe junto, mantendo a proporção.
 */
.anuncio-faixa .anuncio {
	width: 100%;
	max-width: 468px;
}

/*
 * Dentro do texto da postagem e da guia a faixa não segue a coluna estreita
 * de leitura: ela se centra na largura toda do bloco, para não parecer um
 * parágrafo que virou imagem.
 */
.post__conteudo > .anuncio-faixa {
	margin-inline: auto;
}

/*
 * Logo abaixo da faixa dourada, o respiro de baixo sai de quem vem depois.
 *
 * Toda página padrão abre com uma seção que já traz o próprio padding no topo.
 * Sem isto os dois se somam e o anúncio fica colado no título e solto do
 * conteúdo, quando o desenho dela pede o contrário.
 */
.faixa-titulo + .anuncio-faixa {
	margin-bottom: 0;
}