/* Cartão de Classificado gerado a partir de campos (título/texto/telefone +
 * cores). Layout inspirado no anúncio de exemplo: caixa vertical com
 * moldura, título grande no topo, texto centrado a meio, telefone
 * destacado no fundo. Cores vêm de CSS custom properties definidas inline
 * por DM2027_Classificado_Card::render() -- assim o mesmo CSS serve tanto
 * o cartão real (cores escolhidas pelo gestor) como o preview live do
 * admin (JS só reescreve as custom properties, nunca a folha de estilos).
 *
 * Prefixo `dm2027-ad-card` (não `dm2027-classificado-*`) -- esse prefixo já
 * pertence à moldura do modo imagem legado (`.dm2027-classificado-card` em
 * classificados.css, à volta de um `<img>`). */
.dm2027-ad-card {
	--dm-card-bg: #ffffff;
	--dm-card-title: #ff3c9f;
	--dm-card-text: #000000;
	--dm-card-phone: #000000;

	width: 100%;
	max-width: 320px;
	aspect-ratio: 3 / 4;
	background: var( --dm-card-bg );
	border: 3px solid #111;
	box-sizing: border-box;
	overflow: hidden;
}

.dm2027-ad-card-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 28px 22px;
	box-sizing: border-box;
	text-align: center;
}

.dm2027-ad-card-title {
	margin: 0;
	font-size: clamp( 22px, 7cqi, 34px );
	font-weight: 800;
	line-height: 1.15;
	color: var( --dm-card-title );
	word-break: break-word;
}

.dm2027-ad-card-text {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 16px 0;
	font-size: 17px;
	line-height: 1.4;
	color: var( --dm-card-text );
	overflow-wrap: break-word;
}

.dm2027-ad-card-text p {
	margin: 0 0 0.6em;
}

.dm2027-ad-card-text p:last-child {
	margin-bottom: 0;
}

.dm2027-ad-card-phone {
	margin: 0;
	font-size: clamp( 20px, 6cqi, 28px );
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var( --dm-card-phone );
}

/* Sem título/texto/telefone (metabox vazio) -- evita uma caixa vazia
 * partida no admin enquanto o gestor ainda não escreveu nada. */
.dm2027-ad-card-placeholder {
	margin: auto;
	color: #999;
	font-size: 14px;
}

/* Preview live no admin -- mesma caixa, só um pouco mais pequena para
 * caber confortavelmente na coluna lateral da metabox. */
#dm2027-classificado-preview-mount .dm2027-ad-card {
	max-width: 260px;
	margin: 0 auto;
}