/**
 * Estilo do banner no site.
 *
 * Mínimo de propósito: o banner precisa se comportar dentro do layout do tema,
 * não impor um layout próprio. Cada regra aqui existe por um motivo:
 *
 * - `max-width` no elemento, definido pelo espaço, para o banner nunca estourar
 *   a coluna que o abriga
 * - `aspect-ratio` no espaço vago, para o convite ocupar exatamente o tamanho
 *   que o banner ocuparia — sem isso, a página pula quando o espaço é vendido
 * - `margin-inline: auto` porque o topo do portal é centralizado
 */

/*
 * SEM margem inferior. Ela existia (12px) e era invencao minha: o bloco antigo
 * do topo (`.bannerp`) nao tinha regra de CSS nenhuma, entao o banner encostava
 * no menu como o dono desenhou. Os 12px empurravam tudo para baixo e criavam
 * uma faixa vazia entre o banner e o mega menu.
 *
 * O espacamento de cada lugar quem da e o tema: `.e3lan-top` no topo, o widget
 * na lateral, o bloco do construtor no meio. Espaco de banner nao se inventa.
 */
.painel-ads {
	margin: 0 auto;
	max-width: 100%;
	line-height: 0;
}

/*
 * No rodape, o tema deixa 25px sob `.e3lan-widget-content` — sobravam 30px
 * abaixo dos banners contra 5px na coluna do contato, e o dono viu. A regra e
 * do Sahifa e vale para o site todo; aqui ela e anulada SO dentro do nosso
 * widget, para nao mexer em nenhum outro lugar que dependa dela.
 */
.painel-ads-widget .e3lan-widget-content {
	margin-bottom: 0;
}

.painel-ads__item {
	line-height: 0;
}

.painel-ads__link {
	display: block;
	line-height: 0;
}

.painel-ads__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Espaço vago: ocupa o mesmo lugar que o banner ocuparia. */
.painel-ads--vago {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	line-height: 1.3;
	background: #f3f4f6;
	border: 1px dashed #c9ced6;
	border-radius: 4px;
	color: #6b7280;
	font: 600 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.painel-ads--vago .painel-ads__link {
	line-height: 1.3;
	color: inherit;
	text-decoration: none;
}

.painel-ads--vago:hover {
	border-color: #9aa2ad;
	color: #4b5563;
}

/* No celular a lateral vira coluna cheia; o banner acompanha sem estourar. */
@media (max-width: 767px) {
	.painel-ads {
		max-width: 100% !important;
	}
}

/**
 * Espaço fixo que usa a marcação do tema.
 *
 * `width:100%` esticaria uma imagem menor que a célula, e o tema não estica:
 * ele limita com `max-width` e centraliza. Sem esta regra, um banner pequeno
 * apareceria borrado no rodapé — e só no dia em que alguém subisse um.
 */
[data-painel-ads-modo="fixo"] .painel-ads__img {
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * MENOS BRANCO EM VOLTA DOS BANNERS — pedido do dono, medido antes de cortar.
 *
 * TOPO. A faixa branca acima e abaixo do banner e o `padding: 20px 0` que o
 * tema poe em `.header-content`. Medido: banner 90px, faixa 130px — os 40px de
 * diferenca sao esse padding. Cai para 10px de cada lado (metade exata).
 *
 * A regra usa `:has()` para so valer quando o banner do painel esta ali. Assim
 * a faixa do cabecalho nao encolhe em pagina onde o topo esta vago, e nenhum
 * outro site que use este plugin tem o cabecalho mexido sem ter banner nenhum.
 * Em navegador sem `:has()` nada acontece — fica como estava, nunca quebrado.
 *
 * RODAPE. Sao duas fontes somadas: `padding: 5px` na celula e `padding: 5px 0`
 * no contenedor do widget. Vinte pixels no total, que caem para dez.
 *
 * SO O VERTICAL MUDA. O padding lateral da celula continua 5px de proposito:
 * e ele que define a largura util de cada banner (142,86px). Mexer nele faria
 * as imagens crescerem e sairiam dos 143x119 e 143x130 registrados no
 * CONTRATO.md — reduzir espaco em branco nao pode virar redimensionar anuncio.
 */

.header-content:has(.painel-ads--topo) {
	padding-top: 10px;
	padding-bottom: 10px;
}

/*
 * Segunda passada no rodape: as folgas verticais que sobravam vao a zero.
 *
 * Medido antes de cortar — a coluna tinha 189px assim: 48 do bloco do titulo,
 * 6 de folga acima dos banners, 130 do banner mais alto, 5 de folga abaixo.
 * Os 11px de folga sao estes dois `padding`, e saem inteiros.
 *
 * O BLOCO DO TITULO NAO E TOCADO, e isso e decisao, nao esquecimento. A folga
 * de 10px dele e a MESMA da coluna vizinha ("Portal Direto Noticias"); apertar
 * so a nossa faria o "PARCEIROS" subir e desalinhar dos outros titulos do
 * rodape. Trocaria espaco em branco por desalinhamento, que incomoda mais.
 *
 * O lateral continua 5px: e ele que da a largura util de 142,86px e mantem os
 * banners em 143x119 e 143x130, como registrado no CONTRATO.md.
 */
.painel-ads-widget .footer-widget-container {
	padding-top: 0;
	padding-bottom: 0;
}

.painel-ads-widget .e3lan-cell {
	padding-top: 0;
	padding-bottom: 0;
}