/**
 * Estilos de Anúncios
 */

/* Container principal do banner */
.gv-ad {
	margin: 10px 0;
	padding: 0;
	/* Garante que o container encolhe até o tamanho real da imagem,
	   mesmo quando o tema pai usa flexbox com flex-basis herdado. */
	flex-shrink: 1;
	flex-basis: auto;
	min-height: 0;
}

/* Responsividade */
.gv-ad img {
	max-width: 100%;
	height: auto;
}

/* Placeholder quando não há banner */
.gv-ad.gv-fallback {
	min-height: 50px;
	padding: 20px;
	text-align: center;
	color: #999;
	border: 1px dashed #ddd;
}

/* Múltiplos banners */
.gv-ads {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/*
 * flex-basis: 300px controla a largura mínima no layout em linha (desktop).
 * No mobile o container vira flex-direction: column — nesse eixo o flex-basis
 * controlaria a ALTURA, forçando 300px em banners de 100px. Por isso
 * resetamos para auto no mobile (ver media query abaixo).
 */
.gv-ads .gv-ad {
	flex: 1 1 300px;
}

.gv-ads .gv-ad-topo {
	max-width: 970px;
}

.gv-ads .gv-ad-conteudo {
	max-width: 728px;
}

.gv-ads .gv-ad-sidebar {
	max-width: 300px;
}

/* Listas personalizadas — layout em coluna por padrão */
[class*="gv-ads-list-"] {
	flex-direction: column;
}

/* Posições específicas */
/*
 * Especificidade dupla (.gv-ad.gv-ad-topo) para vencer regras de flex
 * containers do tema que possam sobrescrever max-width via herança.
 */
.gv-ad.gv-ad-topo {
	max-width: 970px;
	margin: 0 auto 20px auto;
}

.gv-ad.gv-ad-conteudo {
	max-width: 728px;
	margin: 20px 0;
}

.gv-ad.gv-ad-sidebar {
	max-width: 300px;
}

/* Media queries para responsividade */
@media (max-width: 768px) {
	/* topo: 970px → 320px (mobile) */
	.gv-ad.gv-ad-topo {
		max-width: 320px;
	}

	/* conteudo: 728px → 320px (mobile) */
	.gv-ad.gv-ad-conteudo {
		max-width: 320px;
	}

	/* sidebar: mantém 300px em mobile (mesmo tamanho que desktop) */
	.gv-ad.gv-ad-sidebar {
		max-width: 300px;
	}

	.gv-ads {
		flex-direction: column;
	}

	/*
	 * Reset do flex-basis para auto no eixo vertical (coluna).
	 * Sem isso, flex-basis: 300px vira altura mínima de 300px,
	 * criando espaço em branco abaixo de banners com < 300px de altura.
	 */
	.gv-ads .gv-ad {
		flex: 0 1 auto;
	}
}

/* Shortcode: centralizar wrapper */
.gv-shortcode .gv-ad.gv-ad-topo {
	text-align: center;
}

/* ============================================================
   Widget (Sprint 6)
   ============================================================ */

.widget.gv-widget-ads {
	padding: 0;
}

.widget.gv-widget-ads .gv-ad {
	margin: 0;
}

/* Título do widget acima do banner */
.widget.gv-widget-ads .widget-title {
	margin-bottom: 8px;
}

/* ============================================================
   Shortcode (Sprint 6)
   ============================================================ */

.gv-shortcode {
	display: block;
	margin: 16px 0;
}

.gv-shortcode .gv-ad {
	margin: 0 auto;
}
