/**
 * Novamira - CSS do artigo (single post).
 * Layout com barra lateral, indice, card de autor e CTA. Leve e responsivo.
 */

:root {
	--nv-max: 1200px;
	--nv-gap: 48px;
	--nv-side: 320px;
	--nv-ink: #1a1a24;
	--nv-muted: #5b5b6b;
	--nv-line: #e7e7ee;
	--nv-bg-soft: #f6f6fb;
	--nv-brand: #4f46e5;
	--nv-brand-ink: #ffffff;
	--nv-radius: 14px;
}

.nv-single-main {
	max-width: var(--nv-max);
	margin: 0 auto;
	padding: 40px 20px 72px;
	color: var(--nv-ink);
	font-size: 18px;
	line-height: 1.7;
}

/* ---- Cabecalho ---- */
.nv-article-header {
	max-width: 760px;      /* mesma largura do conteudo, alinhado a esquerda */
	margin: 0 0 8px;
}
.nv-eyebrow {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 13px;
	font-weight: 700;
	color: var(--nv-brand);
	margin-bottom: 14px;
}
.nv-eyebrow a { color: inherit; text-decoration: none; }
.nv-article-title {
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.15;
	margin: 0 0 18px;
	letter-spacing: -.01em;
}
.nv-article-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--nv-muted);
	font-size: 15px;
	margin-bottom: 28px;
}
.nv-article-meta .nv-avatar img {
	border-radius: 50%;
	display: block;
	width: 40px;
	height: 40px;
}
.nv-article-meta .nv-meta-by strong { color: var(--nv-ink); }
.nv-dot { opacity: .5; }
.nv-featured {
	margin: 0 0 8px;
}
.nv-featured img {
	width: 100%;
	max-width: 1200px;
	aspect-ratio: 1200 / 630;   /* espaco fixo p/ imagem destacada 1200x630 (evita CLS) */
	height: auto;
	object-fit: cover;
	border-radius: var(--nv-radius);
	display: block;
}
/* placeholder quando o artigo ainda nao tem imagem destacada */
.nv-featured-ph {
	width: 100%;
	max-width: 1200px;
	aspect-ratio: 1200 / 630;
	border-radius: var(--nv-radius);
	background:
		repeating-linear-gradient(45deg, rgba(79,70,229,.06) 0 14px, transparent 14px 28px),
		var(--nv-bg-soft);
	border: 1px dashed #c9c9db;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	color: var(--nv-muted);
}
.nv-featured-ph-size { font-size: 20px; font-weight: 700; color: var(--nv-brand); letter-spacing: .02em; }
.nv-featured-ph-label { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }

/* ---- Layout duas colunas ---- */
.nv-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--nv-side);
	gap: var(--nv-gap);
	align-items: start;
	margin-top: 32px;
}
.nv-content-col { min-width: 0; }
.nv-entry-content { max-width: 760px; }

/* ---- Tipografia do conteudo ---- */
.nv-entry-content h2 {
	font-size: 28px;
	line-height: 1.25;
	margin: 44px 0 14px;
	scroll-margin-top: 90px;
	letter-spacing: -.01em;
}
.nv-entry-content h3 {
	font-size: 22px;
	line-height: 1.3;
	margin: 32px 0 10px;
	scroll-margin-top: 90px;
}
.nv-entry-content p { margin: 0 0 18px; }
.nv-entry-content ul,
.nv-entry-content ol { margin: 0 0 20px; padding-left: 22px; }
.nv-entry-content li { margin-bottom: 8px; }
.nv-entry-content a { color: var(--nv-brand); }
.nv-entry-content img { max-width: 100%; height: auto; border-radius: 10px; }
.nv-entry-content blockquote {
	margin: 24px 0;
	padding: 8px 20px;
	border-left: 4px solid var(--nv-brand);
	background: var(--nv-bg-soft);
	border-radius: 0 10px 10px 0;
	color: var(--nv-muted);
	font-style: italic;
}
.nv-entry-content figure { margin: 24px 0; }

/* ---- Barra lateral ---- */
.nv-sidebar { min-width: 0; }
.nv-sidebar-sticky {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.nv-side-title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--nv-muted);
	margin: 0 0 12px;
	font-weight: 700;
}

/* indice */
.nv-toc {
	background: var(--nv-bg-soft);
	border: 1px solid var(--nv-line);
	border-radius: var(--nv-radius);
	padding: 18px 20px;
}
.nv-toc-list { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.nv-toc-list li { margin: 0; }
.nv-toc-list a {
	display: block;
	padding: 6px 0;
	color: var(--nv-ink);
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: color .15s, border-color .15s;
}
.nv-toc-list a:hover { color: var(--nv-brand); }
.nv-toc-l3 a { padding-left: 14px; font-size: 14px; color: var(--nv-muted); }

/* card autor */
.nv-author-card {
	border: 1px solid var(--nv-line);
	border-radius: var(--nv-radius);
	padding: 18px 20px;
}
.nv-author-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.nv-author-head img { border-radius: 50%; display: block; }
.nv-author-id { display: flex; flex-direction: column; }
.nv-author-name { font-weight: 700; }
.nv-author-role { font-size: 13px; color: var(--nv-muted); }
.nv-author-bio { font-size: 14px; color: var(--nv-muted); margin: 0; line-height: 1.6; }

/* cta lateral */
.nv-side-cta {
	background: linear-gradient(160deg, #4f46e5, #7c3aed);
	color: #fff;
	border-radius: var(--nv-radius);
	padding: 22px 20px;
}
.nv-side-cta .nv-side-title { color: rgba(255,255,255,.75); }
.nv-side-cta p { font-size: 15px; margin: 0 0 16px; line-height: 1.55; }

/* botoes CTA */
.nv-cta-btn {
	display: inline-block;
	background: var(--nv-brand);
	color: var(--nv-brand-ink);
	font-weight: 700;
	text-decoration: none;
	padding: 13px 24px;
	border-radius: 10px;
	transition: transform .12s, box-shadow .12s, background .12s;
}
.nv-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(79,70,229,.28); }
.nv-side-cta .nv-cta-btn { background: #fff; color: var(--nv-brand); }
.nv-cta-btn--block { display: block; text-align: center; }

/* box CTA abaixo do artigo */
.nv-cta-box {
	max-width: 760px;
	margin: 48px 0 8px;
	background: var(--nv-bg-soft);
	border: 1px solid var(--nv-line);
	border-radius: var(--nv-radius);
	padding: 34px 32px;
	text-align: center;
}
.nv-cta-title { font-size: 24px; margin: 0 0 10px; line-height: 1.25; }
.nv-cta-text { color: var(--nv-muted); margin: 0 0 22px; font-size: 16px; }

/* navegacao entre posts */
.nv-postnav {
	max-width: 760px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--nv-line);
	font-size: 15px;
}
.nv-postnav a { color: var(--nv-brand); text-decoration: none; font-weight: 600; }
.nv-postnav .nv-next { margin-left: auto; text-align: right; }

/* ---- Responsivo ---- */
@media (max-width: 900px) {
	.nv-layout { grid-template-columns: 1fr; gap: 36px; }
	.nv-sidebar-sticky { position: static; }
	.nv-entry-content,
	.nv-cta-box,
	.nv-postnav { max-width: none; }
	.nv-single-main { font-size: 17px; }
}