/**
 * ads.css — slots de anúncio do tema.
 *
 * Carregado globalmente (os slots aparecem em quase todas as páginas). Reserva
 * espaço por slot para reduzir o layout shift (CLS) e mantém um placeholder
 * discreto exibido apenas para admin/dev. Não contém nenhum script de anúncio.
 *
 * Sumário:
 *   1. Container base + altura reservada por slot
 *   2. Placeholder (admin/dev)
 *   3. Âncora mobile fixa
 */

/* ==========================================================================
   1. Container base + altura reservada por slot (anti-layout-shift)
   ========================================================================== */
.ee-ad-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-block: var(--ee-space-4);
	overflow: hidden;
}

/* Centraliza o conteúdo do anúncio dentro do container. */
.ee-ad-slot > * {
	max-width: 100%;
}

/* Alturas mínimas reservadas por slot (mobile-first). Os valores espelham os
   registrados em inc/ad-slots.php (min_height / min_height_lg). */
.ee-ad-slot--home-top,
.ee-ad-slot--single-after-header,
.ee-ad-slot--archive-top {
	min-height: 90px;
}

.ee-ad-slot--home-middle,
.ee-ad-slot--single-middle,
.ee-ad-slot--archive-between-posts {
	min-height: 250px;
}

.ee-ad-slot--single-sidebar,
.ee-ad-slot--archive-sidebar {
	min-height: 250px;
}

/* No desktop os slots laterais reservam altura maior (formato vertical),
   espelhando min_height_lg em inc/ad-slots.php. */
@media (min-width: 992px) {
	.ee-ad-slot--single-sidebar,
	.ee-ad-slot--archive-sidebar {
		min-height: 600px;
	}
}

.ee-ad-slot--mobile-anchor-placeholder {
	min-height: 50px;
}

/* ==========================================================================
   2. Placeholder (visível apenas para admin/dev — controlado no PHP)
   ========================================================================== */
.ee-ad-slot__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	width: 100%;
	height: 100%;
	min-height: inherit;
	padding: var(--ee-space-3);
	color: var(--ee-text-muted);
	background-color: var(--ee-bg-alt);
	background-image: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 12px,
		rgba(91, 102, 117, 0.05) 12px,
		rgba(91, 102, 117, 0.05) 24px
	);
	border: 1px dashed var(--ee-border);
	border-radius: var(--ee-radius-md);
}

.ee-ad-slot__label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ee-ad-slot__hint {
	font-size: 0.65rem;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	opacity: 0.7;
}

/* ==========================================================================
   3. Âncora mobile fixa (sticky bottom) — apenas em telas pequenas
   ========================================================================== */
.ee-ad-slot--mobile-anchor-placeholder {
	display: none; /* oculto por padrão; ativado só no mobile abaixo */
}

@media (max-width: 991.98px) {
	.ee-ad-slot--mobile-anchor-placeholder {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1040;
		margin: 0;
		background-color: var(--ee-white);
		border-top: 1px solid var(--ee-border);
		box-shadow: 0 -2px 8px rgba(26, 34, 51, 0.08);
	}

	/* Botão de fechar da âncora: pequeno, EM CIMA da faixa fixa (sobressai pelo
	   topo, no canto direito), por cima dela (z-index maior). A faixa tem ~50px
	   de altura a partir de bottom:0, então ~46px coloca o botão no topo dela. */
	.ee-ad-anchor__close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 8px;
		bottom: 46px;
		z-index: 1041;
		width: 24px;
		height: 24px;
		padding: 0;
		color: var(--ee-text, #1a2233);
		background-color: var(--ee-white, #fff);
		border: 1px solid var(--ee-border, #dce3ec);
		border-radius: 50%;
		box-shadow: 0 1px 4px rgba(26, 34, 51, 0.18);
		cursor: pointer;
		line-height: 0;
	}

	.ee-ad-anchor__close:hover,
	.ee-ad-anchor__close:focus-visible {
		color: #b32d2e;
		border-color: #b32d2e;
		outline: none;
	}

	.ee-ad-anchor__close:focus-visible {
		outline: 2px solid var(--ee-blue, #1565c0);
		outline-offset: 2px;
	}

	/* Garante que o conteúdo não fique escondido sob a âncora fixa. */
	body:has(.ee-ad-slot--mobile-anchor-placeholder) {
		padding-bottom: 50px;
	}

	/* Dispensada: some a âncora e o botão, e libera o espaço reservado embaixo. */
	.ee-ad-anchor.is-dismissed {
		display: none;
	}

	body:has(.ee-ad-anchor.is-dismissed) {
		padding-bottom: 0;
	}
}

/* O botão de fechar só existe junto da âncora mobile — nunca no desktop. */
@media (min-width: 992px) {
	.ee-ad-anchor__close {
		display: none;
	}
}

/* Em telas grandes a âncora mobile nunca aparece nem reserva espaço. */
@media (min-width: 992px) {
	.ee-ad-slot--mobile-anchor-placeholder {
		display: none;
		min-height: 0;
		margin: 0;
	}
}

/* Respeita movimento reduzido (sem transições nos placeholders). */
@media (prefers-reduced-motion: reduce) {
	.ee-ad-slot {
		scroll-behavior: auto;
	}
}