/* Artigo individual e listagens de post.

   ------------------------------------------------------------------
   Tipografia: o artigo herda o CSS da página de notícias, e ela é a
   ÚNICA das 15 páginas do site que declara Purista à frente da pilha
   de fontes — as outras 14 declaram "DM Sans" primeiro. Isso vem do
   site estático original, não da conversão.

   Como o padrão do site é DM Sans, as três variáveis são redeclaradas
   aqui para as páginas de conteúdo, com as mesmas pilhas usadas pela
   home. Assim tudo nelas — inclusive .nc-hero__title e .nc-card__title,
   que leem as variáveis — sai na fonte certa.
   ------------------------------------------------------------------ */

/* (as variáveis de fonte são normalizadas em jrc-tipografia.css) */

/* Segue o sistema tipográfico do site:

     --font-display    títulos    peso 800-900
     --font-body       texto      peso 500
     --font-technical  etiquetas  peso 800, caixa alta, tracking largo

   Cores tiradas do próprio site: título #0F172A, texto #475569,
   destaque #1F49D8, fundo da página #F4F4F4. */

/* ------------------------------------------------------------------
   Faixas: conteúdo em branco, "Leia também" no cinza da página.
   A divisão entre o topo e o conteúdo é reta — sem o notch arredondado.
   ------------------------------------------------------------------ */
.jrc-artigo__corpo {
	background: #ffffff;
	padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 112px);
}

.jrc-artigo__mais {
	background: #f4f4f4;
	border-top: 1px solid rgba(148, 163, 184, 0.22);
	padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 104px);
}

/* ------------------------------------------------------------------
   Data do artigo — mesma pauta das etiquetas do site
   ------------------------------------------------------------------ */
.jrc-artigo__data {
	margin-top: 22px;
	font-family: var(--font-technical);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #64748b;
}

/* ------------------------------------------------------------------
   Corpo do texto — mesma medida do .nc-hero__subtitle (18px / 500)
   ------------------------------------------------------------------ */
.jrc-artigo__conteudo {
	max-width: 46rem;
	font-family: var(--font-body);
	font-size: clamp(16px, 1.15vw, 18px);
	font-weight: 500;
	line-height: 1.75;
	color: #475569;
}

.jrc-artigo__conteudo > * + * {
	margin-top: 1.4em;
}

/* Hierarquia dos títulos internos, na mesma escala das seções do site. */
.jrc-artigo__conteudo h2,
.jrc-artigo__conteudo h3,
.jrc-artigo__conteudo h4 {
	font-family: var(--font-display);
	color: #0f172a;
	letter-spacing: -0.015em;
	line-height: 1.15;
	text-wrap: balance;
}

.jrc-artigo__conteudo h2 {
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 900;
	margin-top: 2.2em;
}

.jrc-artigo__conteudo h3 {
	font-size: clamp(20px, 1.8vw, 25px);
	font-weight: 800;
	margin-top: 2em;
}

.jrc-artigo__conteudo h4 {
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 800;
	margin-top: 1.8em;
}

.jrc-artigo__conteudo strong,
.jrc-artigo__conteudo b {
	font-weight: 800;
	color: #0f172a;
}

.jrc-artigo__conteudo a {
	color: #1f49d8;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jrc-artigo__conteudo a:hover { color: #142c8e; }

.jrc-artigo__conteudo ul,
.jrc-artigo__conteudo ol {
	padding-left: 1.3em;
}

.jrc-artigo__conteudo li + li { margin-top: 0.5em; }
.jrc-artigo__conteudo ul { list-style: disc; }
.jrc-artigo__conteudo ol { list-style: decimal; }

.jrc-artigo__conteudo img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

.jrc-artigo__conteudo figcaption {
	margin-top: 10px;
	font-family: var(--font-technical);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #94a3b8;
}

.jrc-artigo__conteudo blockquote {
	border-left: 3px solid #2d5bff;
	padding-left: 24px;
	font-size: clamp(17px, 1.3vw, 20px);
	font-weight: 500;
	color: #334155;
}

.jrc-artigo__conteudo code {
	font-family: var(--font-technical);
	font-size: 0.9em;
	background: #f1f5f9;
	padding: 2px 6px;
	border-radius: 4px;
	color: #0f172a;
}

/* ------------------------------------------------------------------
   Rodapé do artigo
   ------------------------------------------------------------------ */
.jrc-artigo__relacionados { margin-bottom: clamp(40px, 5vw, 64px); }

.jrc-artigo__voltar { margin: 0; }

.jrc-artigo__voltar a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-technical);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #1f49d8;
	transition: color 0.2s ease;
}

.jrc-artigo__voltar a:hover { color: #142c8e; }

/* ------------------------------------------------------------------
   Paginação das listagens
   ------------------------------------------------------------------ */
.jrc-paginacao { margin-top: clamp(48px, 6vw, 80px); }

.jrc-paginacao .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.jrc-paginacao .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 16px;
	border: 1px solid rgba(148, 163, 184, 0.35);
	border-radius: 999px;
	font-family: var(--font-technical);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #334155;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.jrc-paginacao .page-numbers:hover { border-color: #2d5bff; color: #1f49d8; }

.jrc-paginacao .page-numbers.current {
	background: linear-gradient(135deg, #142c8e 0%, #1f49d8 55%, #2d5bff 100%);
	border-color: transparent;
	color: #ffffff;
}

.jrc-paginacao .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}