/**
 * WP Editor Jornal — estilos do front-end.
 *
 * Valores calibrados pelos exemplos em /exemplo e pela captura de referência.
 * Ajuste as variáveis abaixo conforme o tema oficial do site.
 */

:root {
	--wpej-accent: #f5c400;      /* barra da citação */
	--wpej-quote-color: #174f78; /* texto da citação */
	--wpej-quote-meta: #555;     /* autor / cargo */
	--wpej-data-color: #005ca9;  /* número em destaque */
	--wpej-data-label: #333;     /* texto curto do dado */
	--wpej-text: #444;           /* texto complementar */
	--wpej-serif: Georgia, "Times New Roman", serif;
	--wpej-sans: Arial, Helvetica, sans-serif;
}

/* ============================================================
   Citação editorial — [custom_quote]
   ============================================================ */

.custom-quote {
	margin: 28px 0;
	padding: 0 0 0 18px;
	border-left: 4px solid var(--wpej-accent);
	font-family: var(--wpej-serif);
	font-size: 1.33rem;
	line-height: 1.45;
	font-style: italic;
	color: var(--wpej-quote-color);
}

.custom-quote__text {
	margin: 0;
}

/* Aspas tipográficas como elemento visual, não como caractere digitado. */
.custom-quote__text::before {
	content: "\201C";
}

.custom-quote__text::after {
	content: "\201D";
}

.custom-quote__author {
	display: block;
	margin-top: 10px;
	font-family: var(--wpej-sans);
	font-size: 14px;
	line-height: 1.4;
	font-style: normal;
	font-weight: 600;
	color: var(--wpej-quote-meta);
}

.custom-quote__author::before {
	content: "\2014\00a0"; /* travessão + espaço */
}

.custom-quote__author-role {
	font-weight: 400;
}

.custom-quote__author-role::before {
	content: ", ";
}

@media (max-width: 600px) {
	.custom-quote {
		font-size: 1.15rem;
	}
}

/* ============================================================
   Dado importante ("olho") — [important_data]
   Bloco curto e estreito que flutua para um dos lados; o texto
   seguinte do artigo encaixa ao lado dele.
   ============================================================ */

.important-data {
	font-family: var(--wpej-sans);
	width: 200px;
	padding: 5px 0 10px 0;
	container-type: inline-size; /* habilita as unidades cqi (% da largura do olho) */
}

.important-data__value {
	display: block;
	font-size: 58px;                            /* fallback p/ navegadores sem container units */
	font-size: clamp(2.25rem, 32cqi, 4.5rem);   /* escala com a largura do olho */
	line-height: 1;
	font-weight: 800;
	color: var(--wpej-data-color);
	letter-spacing: -0.05em;                    /* relativo: acompanha o corpo da fonte */
	overflow-wrap: break-word;
}

.important-data__suffix {
	display: block;      /* unidade sempre na própria linha, logo abaixo do número */
	font-size: 16px;
	font-size: clamp(0.85rem, 15cqi, 1.6rem);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: 0;
	margin-top: 2px;
	white-space: nowrap; /* não parte no meio ("mil reais" fica junto) */
}

.important-data__label {
	display: block;
	margin-top: 8px;
	font-size: 16px;
	font-size: clamp(0.8rem, 9cqi, 1.05rem);
	line-height: 1.3;
	font-weight: 600;
	color: var(--wpej-data-label);
}

/* Alinhado à esquerda: o texto do artigo contorna pela direita. */
.important-data--left {
	float: left;
	margin: 5px 25px 15px 0;
}

/* Alinhado à direita: o texto do artigo contorna pela esquerda. */
.important-data--right {
	float: right;
	margin: 5px 0 15px 25px;
}

/* Mobile: o olho para de flutuar e o texto vem abaixo. Mantém uma largura
   limitada para o dimensionamento por cqi continuar coerente. */
@media (max-width: 640px) {
	.important-data--left,
	.important-data--right {
		float: none;
		width: auto;
		max-width: 260px;
		margin: 20px 0;
	}
}