/* EsporteMS Anúncios — exibição no site */

.esms-ad {
	--esms-ad-cor: var(--wp--preset--color--primaria, #054bac);
	--esms-ad-cor2: var(--wp--preset--color--secundaria, #00964c);
	--esms-ad-realce: var(--wp--preset--color--realce, #f2b705);
	max-width: 100%;
	margin-inline: auto;
	text-align: center;
}

.esms-ad__rotulo {
	display: block;
	margin-bottom: 4px;
	color: #9aa5b4;
	font: 500 10px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.esms-ad, .esms-ad *, .esms-ad *::before, .esms-ad *::after { box-sizing: border-box; }
.esms-ad__itens { display: grid; }
.esms-ad__item { width: 100%; min-width: 0; max-width: var(--esms-ad-w, 100%); margin-inline: auto; }
.esms-ad__item a { display: block; }
.esms-ad__item iframe { max-width: 100%; }

/* Moldura do espaço: tamanho fixo definido na zona; a imagem se ajusta a ela */
.esms-ad__midia {
	display: block;
	width: 100%;
	aspect-ratio: var(--esms-ad-r, auto);
	overflow: hidden;
	border-radius: 4px;
	background: #eef1f5;
}
.esms-ad__midia picture,
.esms-ad__midia img { display: block; width: 100%; height: 100%; margin: 0; }
.esms-ad__midia img { object-fit: cover; }
.esms-ad__midia--caber { background: var(--wp--preset--color--superficie, #fff); }
.esms-ad__midia--caber img { object-fit: contain; }
/* Sem tamanho definido na zona: imagem no tamanho natural */
.esms-ad:not([style*="--esms-ad-r"]) .esms-ad__midia img { height: auto; }

@media (max-width: 600px) {
	.esms-ad[style*="--esms-ad-rm"] .esms-ad__item { max-width: var(--esms-ad-wm); }
	.esms-ad[style*="--esms-ad-rm"] .esms-ad__midia { aspect-ratio: var(--esms-ad-rm); }
}

/* Carrossel: todos empilhados, só o ativo aparece */
.esms-ad--carrossel .esms-ad__item {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility .6s;
}
.esms-ad--carrossel .esms-ad__item.is-ativo,
.esms-ad--carrossel:not(.is-pronto) .esms-ad__item:first-child { opacity: 1; visibility: visible; }

.esms-ad__pontos { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.esms-ad__pontos button {
	width: 8px; height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #c5ced9;
	cursor: pointer;
	transition: width .25s, background .25s;
}
.esms-ad__pontos button.is-ativo { width: 22px; background: var(--esms-ad-cor); }

/* Grade (logos de parceiros): em cinza, ganham cor ao passar o mouse */
.esms-ad--grade .esms-ad__itens {
	/* Cada logo no tamanho da zona (ex.: 300px), sem esticar; a faixa fica centralizada */
	grid-template-columns: repeat(auto-fit, minmax(140px, var(--esms-ad-w, 220px)));
	justify-content: center;
	gap: 16px;
	align-items: stretch;
}
.esms-ad--grade .esms-ad__item {
	display: grid;
	place-items: center;
	padding: 14px;
	border-radius: 10px;
	background: var(--wp--preset--color--superficie, #fff);
	box-shadow: 0 1px 3px rgba(10, 42, 82, .08), 0 4px 14px rgba(10, 42, 82, .06);
	transition: transform .2s, box-shadow .2s;
}
.esms-ad--grade .esms-ad__item { max-width: none; }
.esms-ad--grade .esms-ad__item:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(10, 42, 82, .16); }
.esms-ad--grade .esms-ad__midia { background: transparent; }
.esms-ad--grade .esms-ad__item img { filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.esms-ad--grade .esms-ad__item:hover img { filter: none; opacity: 1; }

/* Anúncio dentro da notícia */
.esms-ad--post { margin-block: 2em; padding-block: 12px; border-block: 1px solid var(--wp--preset--color--borda, #e3e7ec); }

/* ------------------------------------------------------------------
   "Anuncie aqui" — aparece quando a zona não tem anúncio ativo
   ------------------------------------------------------------------ */
.esms-anuncie {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	overflow: hidden;
	padding: 22px 20px;
	border: 2px dashed color-mix(in srgb, var(--esms-ad-cor) 45%, transparent);
	border-radius: 10px;
	background:
		radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--esms-ad-realce) 22%, transparent), transparent 45%),
		radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--esms-ad-cor2) 16%, transparent), transparent 50%),
		var(--wp--preset--color--superficie, #fff);
	color: var(--wp--preset--color--texto, #1b1f24) !important;
	text-decoration: none !important;
	text-align: center;
	transition: border-color .2s, transform .2s;
}
.esms-anuncie:hover { border-color: var(--esms-ad-cor2); transform: translateY(-2px); }

.esms-anuncie__titulo {
	color: var(--esms-ad-cor);
	font-family: var(--wp--preset--font-family--titulo, "Arial Narrow", sans-serif);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .5px;
	text-transform: uppercase;
}
.esms-anuncie__texto { max-width: 46ch; font-size: .85rem; line-height: 1.4; }
.esms-anuncie__tamanho { color: #8792a2; font-size: .7rem; letter-spacing: .4px; text-transform: uppercase; }
.esms-anuncie__botao {
	margin-top: 4px;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--esms-ad-cor2);
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
}
.esms-anuncie:hover .esms-anuncie__botao { background: var(--esms-ad-cor); }
.esms-anuncie__aviso {
	margin-top: 6px;
	padding: 6px 10px;
	border-radius: 6px;
	background: #fff7d6;
	color: #6b5200;
	font-size: .72rem;
}

/* "Anuncie aqui" ocupa exatamente o tamanho do espaço (mostra ao anunciante o formato real) */
.esms-ad--vazio .esms-anuncie {
	width: 100%;
	max-width: var(--esms-ad-w, 100%);
	aspect-ratio: var(--esms-ad-r, auto);
	margin-inline: auto;
}
@media (max-width: 600px) {
	.esms-ad--vazio[style*="--esms-ad-rm"] .esms-anuncie { max-width: var(--esms-ad-wm); aspect-ratio: var(--esms-ad-rm); }
}
.esms-ad--vazio.esms-ad--meio .esms-anuncie { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
.esms-ad--vazio.esms-ad--topo .esms-anuncie,
.esms-ad--vazio.esms-ad--rodape .esms-anuncie { min-height: 90px; padding: 12px 18px; flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
.esms-ad--vazio.esms-ad--topo .esms-anuncie__titulo,
.esms-ad--vazio.esms-ad--rodape .esms-anuncie__titulo { font-size: 1.3rem; }
.esms-ad--vazio.esms-ad--topo .esms-anuncie__texto,
.esms-ad--vazio.esms-ad--topo .esms-anuncie__tamanho { display: none; }
.esms-ad--vazio.esms-ad--topo .esms-anuncie__aviso { flex-basis: 100%; }

@media (max-width: 600px) {
	.esms-ad--vazio.esms-ad--meio .esms-anuncie { flex-direction: column; }
}