/**
 * Estilos das posições de anúncio que este add-on acrescenta ao Advanced Ads:
 * pop-up, lateral fixo, rodapé fixo, skin, acima do cabeçalho, entre posts,
 * meio do post e grade.
 *
 * As cores usam var(--nome, fallback) para não depender de o tema ativo
 * definir essas variáveis: sem elas, vale o valor fixo depois da vírgula.
 */

.conexao-ad {
	margin: 24px auto;
	text-align: center;
	max-width: 900px;
}

/* Formatos especiais: pop-up, lateral fixo (sticky) e rodapé fixo (anchor).
   Começam escondidos e o JS acrescenta ".is-visible" (pop-up: ao carregar a
   página; lateral fixo: ao passar de um ponto de rolagem; rodapé fixo: ao
   carregar) — ver assets/js/ads.js. Só existem no HTML quando há um anúncio
   ativo desse formato (ver includes/ad-render.php), então sem anúncio
   publicado não há nenhum CSS/JS extra rodando na página. */

.conexao-ad-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.7);
}

.conexao-ad-popup-overlay.is-visible {
	display: flex;
}

.conexao-ad-popup-box {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	overflow: auto;
	background: var(--conexao-cor-fundo, #fff);
	padding: 32px 16px 16px;
	border-radius: 4px;
}

.conexao-ad-popup-box .conexao-ad {
	margin: 0 auto;
}

.conexao-ad-popup-close {
	position: absolute;
	top: 4px;
	right: 8px;
	background: transparent;
	border: 0;
	font-size: 28px;
	line-height: 1;
	color: var(--conexao-cor-texto, #222);
	cursor: pointer;
}

/* Lateral fixo: some fora da tela (direita) até o JS revelar ao rolar a
   página, e pode recolher (deixando só a aba/botão visível) sem sumir de
   vez — igual às unidades "out-of-page" do Google. */
.conexao-ad-lateral-fixo {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%) translateX(120%);
	z-index: 9000;
	display: flex;
	align-items: center;
	transition: transform 0.3s ease;
}

.conexao-ad-lateral-fixo.is-visible {
	transform: translateY(-50%) translateX(0);
}

.conexao-ad-lateral-fixo.is-visible.is-collapsed {
	transform: translateY(-50%) translateX(calc(100% - 28px));
}

.conexao-ad-lateral-toggle {
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: 0;
	width: 28px;
	height: 56px;
	flex: none;
	cursor: pointer;
	font-size: 14px;
	border-radius: 4px 0 0 4px;
}

.conexao-ad-lateral-fixo.is-collapsed .conexao-ad-lateral-toggle {
	transform: scaleX(-1);
}

.conexao-ad-lateral-content .conexao-ad {
	margin: 0;
}

/* O formato lateral fixo não cabe em telas estreitas — some no mobile/tablet
   (regra no breakpoint @media (max-width: 900px) no fim deste arquivo). */

/* Rodapé fixo (anchor): sobe de baixo da tela ao carregar a página, fica na
   frente do conteúdo, e recolhe numa aba (fica só o botão visível) sem sumir
   de vez — igual ao formato lateral fixo (conexao-ad-lateral-fixo acima). */
.conexao-ad-rodape-fixo {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--conexao-cor-fundo, #fff);
	border-top: 1px solid var(--conexao-borda, #ccc);
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
	padding: 4px 32px 4px 4px;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.conexao-ad-rodape-fixo.is-visible {
	transform: translateY(0);
}

.conexao-ad-rodape-fixo.is-visible.is-collapsed {
	transform: translateY(calc(100% - 28px));
}

.conexao-ad-rodape-fixo-content .conexao-ad {
	margin: 4px auto;
}

/*
 * "top" fixo perto da borda de cima (não centralizado na altura toda) de
 * propósito: quando a barra recolhe (translateY empurra quase tudo pra fora
 * da tela), só sobra visível uma faixa de 28px no topo — um botão
 * centralizado na altura INTEIRA da barra ficaria escondido junto com o
 * conteúdo, fora dessa faixa.
 */
.conexao-ad-rodape-fixo-toggle {
	position: absolute;
	right: 8px;
	top: 6px;
	background: transparent;
	border: 0;
	font-size: 14px;
	line-height: 1;
	color: var(--conexao-cor-texto, #222);
	cursor: pointer;
}

.conexao-ad-rodape-fixo.is-collapsed .conexao-ad-rodape-fixo-toggle {
	transform: rotate(180deg);
}

@media (max-width: 900px) {
	/* O formato "lateral fixo" (skyscraper, até 300px de largura) não cabe
	   numa tela de celular sem cobrir a maior parte do conteúdo. */
	.conexao-ad-lateral-fixo {
		display: none !important;
	}
}

/* Acima do cabeçalho: injetado antes de tudo (ver conexao_advads_maybe_buffer_acima_cabecalho
   em includes/advads-integration.php) — fica no fluxo normal, acima do
   header do tema, sem position:fixed. */
.conexao-ad-acima-cabecalho {
	background: var(--conexao-cor-fundo, #fff);
	padding: 10px 0;
}

/* Entre posts da listagem: precisa de "clear" pra não quebrar grids/floats
   antigos do tema (erlinews usa float nos itens de post). */
.conexao-ad-post-list {
	clear: both;
	width: 100%;
	margin: 20px auto;
	padding: 16px 0;
	border-top: 1px solid var(--conexao-borda, #eee);
	border-bottom: 1px solid var(--conexao-borda, #eee);
}

/* Fundo/lateral (skin): duas colunas fixas fora do wrapper de 1260px do
   tema (ver assets/img/placement-types/skin.svg e a nota técnica em
   advads-integration.php). Escondido por padrão — só mostra a partir de
   telas realmente largas, pra nunca sobrepor o conteúdo nem gerar barra de
   rolagem horizontal. */
.conexao-ad-skin {
	display: none;
	position: fixed;
	top: 140px;
	width: 160px;
	z-index: 1;
}

@media (min-width: 1700px) {
	.conexao-ad-skin {
		display: block;
	}

	.conexao-ad-skin-esquerda {
		right: calc(50% + 646px);
	}

	.conexao-ad-skin-direita {
		left: calc(50% + 646px);
	}
}

/* Placeholder da entrega assíncrona (cache-busting / lazy load): não pode ter
   altura fixa porque o anúncio que chega depois é que define o tamanho, mas
   também não pode colapsar a ponto de o IntersectionObserver do lazy nunca
   disparar — daí a altura mínima de 1px. */
.conexao-ad-async {
	min-height: 1px;
}

/* Grade: aplicada no wrapper de um grupo com vários anúncios (ver
   conexao_ads_marcar_grade em includes/frontend-runtime.php). */
.conexao-ad-grade {
	display: grid;
	gap: 12px;
	align-items: center;
}

.conexao-ad-grade-2 {
	grid-template-columns: repeat(2, 1fr);
}

.conexao-ad-grade-3 {
	grid-template-columns: repeat(3, 1fr);
}

.conexao-ad-grade-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 700px) {
	/* Numa tela de celular, 3 ou 4 colunas deixariam cada anúncio ilegível. */
	.conexao-ad-grade-3,
	.conexao-ad-grade-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}