/* ===== Traventia — Página pública do artigo de blog ===== */

.tv-artigo-wrap { padding-bottom: var(--tv-space-16); }

/* Mesmo tratamento do banner do perfil do terapeuta (single-therapist.css)
   — gradiente escuro por baixo pra dar profundidade, object-fit:cover
   nunca distorce a imagem. */
.tv-artigo-banner {
	position: relative;
	max-height: 360px;
	overflow: hidden;
	margin-bottom: var(--tv-space-8);
}

.tv-artigo-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 18, 15, 0) 40%, rgba(20, 18, 15, 0.85) 100%);
	pointer-events: none;
}

.tv-artigo-banner img {
	width: 100%;
	height: 360px;
	object-fit: cover;
	display: block;
}

.tv-artigo-container { padding-top: var(--tv-space-6); }

/* Largura de leitura confortável (~70 caracteres por linha) — o resto da
   página (breadcrumb, banner) continua na largura cheia do container. */
.tv-artigo {
	max-width: 760px;
	margin: 0 auto;
	padding-top: var(--tv-space-6);
}

.tv-artigo-cabecalho { margin-bottom: var(--tv-space-8); }

.tv-artigo-categoria { margin-bottom: var(--tv-space-4); }

.tv-artigo-titulo {
	font-size: var(--tv-text-4xl);
	margin-bottom: var(--tv-space-4);
}

.tv-artigo-meta {
	color: var(--tv-text-muted);
	font-size: var(--tv-text-sm);
	margin: 0;
}

/* ===== Corpo do artigo (conteúdo do editor WP) ===== */

.tv-artigo-conteudo {
	font-size: var(--tv-text-lg);
	line-height: var(--tv-leading-relaxed);
}

.tv-artigo-conteudo > * + * { margin-top: var(--tv-space-5); }

.tv-artigo-conteudo h2 {
	font-size: var(--tv-text-2xl);
	margin-top: var(--tv-space-10);
}

.tv-artigo-conteudo h3 {
	font-size: var(--tv-text-xl);
	margin-top: var(--tv-space-8);
}

.tv-artigo-conteudo :where(a) {
	color: var(--tv-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tv-artigo-conteudo ul,
.tv-artigo-conteudo ol {
	padding-left: var(--tv-space-6);
}

.tv-artigo-conteudo li + li { margin-top: var(--tv-space-2); }

.tv-artigo-conteudo blockquote {
	border-left: 3px solid var(--tv-primary);
	padding-left: var(--tv-space-5);
	color: var(--tv-text-muted);
	font-style: italic;
}

.tv-artigo-conteudo img {
	border-radius: var(--tv-radius-md);
}

.tv-artigo-conteudo figcaption {
	color: var(--tv-text-muted);
	font-size: var(--tv-text-sm);
	text-align: center;
}

@media (max-width: 767px) {
	.tv-artigo-titulo { font-size: var(--tv-text-3xl); }
	.tv-artigo-conteudo { font-size: var(--tv-text-base); }
}