/* ==========================================================================
   PÁGINA DO ARTIGO (e páginas institucionais)
   ==========================================================================

   Partes (procure os títulos abaixo):
   - ESTRUTURA ............. colunas do texto e do índice
   - CABEÇALHO DO ARTIGO ... editoria, título, linha fina, autor e datas
   - IMAGEM DESTACADA ...... imagem, legenda e crédito
   - RODAPÉ DO ARTIGO ...... assuntos (tags)
   - COMPARTILHAR .......... botões das redes e "Copiar link"
   - SOBRE O AUTOR ......... caixa com a biografia do autor
   - ANTERIOR E PRÓXIMO .... links para os artigos vizinhos
   - RELACIONADOS .......... "Leia também"
   - LARGURA TOTAL ......... modelo de página sem limite de largura

   O texto em si (parágrafos, intertítulos, listas): components/conteudo.css
   HTML: single.php, page.php e template-parts/conteudo/
   ========================================================================== */

/* --------------------------------------------------------------------------
   ESTRUTURA
   Sem índice: uma coluna de leitura centralizada.
   Com índice (computador): índice à esquerda + coluna de leitura.
   -------------------------------------------------------------------------- */
.artigo {
	overflow-x: clip; /* Blocos "largura total" não criam rolagem lateral. */
}

.artigo__topo,
.artigo__corpo {
	max-width: calc(var(--largura-leitura) + 2 * var(--margem-lateral));
	margin-inline: auto;
}

.artigo__corpo {
	padding-inline: 0;
	min-width: 0;
}

.artigo__layout {
	max-width: calc(var(--largura-leitura) + 2 * var(--margem-lateral));
}

.artigo__comentarios {
	max-width: calc(var(--largura-leitura) + 2 * var(--margem-lateral));
	margin-top: var(--espaco-7);
}

@media (min-width: 1100px) {
	/* Largura total do conjunto índice + texto. */
	.tem-indice .artigo__topo,
	.artigo__layout--com-indice {
		max-width: calc(var(--largura-indice) + var(--espaco-8) + var(--largura-leitura) + 2 * var(--margem-lateral));
	}

	.tem-indice .artigo__topo {
		padding-left: calc(var(--margem-lateral) + var(--largura-indice) + var(--espaco-8));
	}

	.artigo__layout--com-indice {
		display: grid;
		grid-template-columns: var(--largura-indice) minmax(0, var(--largura-leitura));
		gap: var(--espaco-8);
		align-items: start;
	}

	.artigo__layout--com-indice .artigo__corpo {
		max-width: none;
		margin: 0;
	}

	.tem-indice .artigo__imagem {
		max-width: calc(var(--largura-indice) + var(--espaco-8) + var(--largura-leitura) + 2 * var(--margem-lateral));
	}
}

/* --------------------------------------------------------------------------
   CABEÇALHO DO ARTIGO
   -------------------------------------------------------------------------- */
.artigo__topo {
	padding-top: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

.artigo__cabecalho {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--espaco-4);
	padding-bottom: var(--espaco-6);
}

.artigo__titulo {
	font-size: var(--titulo-artigo);
	font-weight: var(--peso-extra);
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.artigo__linha-fina {
	font-size: var(--texto-grande);
	line-height: 1.55;
	color: var(--cor-texto-secundario);
}

.artigo__meta {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-2);
	width: 100%;
	padding-top: var(--espaco-4);
	border-top: 1px solid var(--cor-linha);
	font-size: var(--texto-meta);
	color: var(--cor-texto-suave);
}

.artigo__autor {
	color: var(--cor-texto);
	font-weight: var(--peso-medio);
}

.artigo__autor a {
	color: var(--cor-texto);
	font-weight: var(--peso-semi);
	text-decoration: none;
}

.artigo__autor a:hover {
	color: var(--cor-primaria);
	text-decoration: underline;
}

.artigo__datas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espaco-1) var(--espaco-4);
}

.artigo__datas > span {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.artigo__datas .icone {
	color: var(--cor-dourado-escuro);
}

@media (min-width: 768px) {
	.artigo__meta {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
}

/* --------------------------------------------------------------------------
   IMAGEM DESTACADA
   No celular a imagem vai de borda a borda; no computador, com cantos suaves.
   -------------------------------------------------------------------------- */
.artigo__imagem {
	margin-bottom: var(--espaco-7);
}

.artigo__imagem img {
	width: 100%;
	max-height: 720px;
	object-fit: cover;
	border-radius: var(--raio-medio);
	background: var(--cor-superficie);
}

@media (max-width: 599px) {
	.artigo__imagem {
		padding-inline: 0;
	}

	.artigo__imagem img {
		border-radius: 0;
	}

	.artigo__legenda {
		padding-inline: var(--margem-lateral);
	}
}

.artigo__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--espaco-3);
	margin-top: var(--espaco-2);
	font-size: var(--texto-meta);
	line-height: 1.5;
	color: var(--cor-texto-suave);
}

.artigo__credito {
	font-style: italic;
}

/* Sem imagem destacada: um pouco de respiro antes do texto. */
.artigo__topo + .artigo__layout {
	padding-top: var(--espaco-2);
}

/* --------------------------------------------------------------------------
   RODAPÉ DO ARTIGO (assuntos)
   -------------------------------------------------------------------------- */
.artigo__rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--espaco-3);
	margin-top: var(--espaco-7);
}

.artigo__rodape-titulo {
	font-family: var(--fonte-corpo);
	font-size: var(--texto-pequeno);
	font-weight: var(--peso-semi);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cor-texto-suave);
}

.lista-assuntos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espaco-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lista-assuntos a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 0.875rem;
	border-radius: var(--raio-pilula);
	background: var(--cor-superficie);
	font-size: var(--texto-meta);
	font-weight: var(--peso-medio);
	color: var(--cor-texto);
	text-decoration: none;
}

.lista-assuntos a:hover {
	background: var(--cor-marfim-escuro);
	color: var(--cor-primaria);
}

/* --------------------------------------------------------------------------
   COMPARTILHAR
   Botão "Compartilhar" (menu do celular) + botões redondos das redes.
   HTML: template-parts/conteudo/compartilhar.php
   -------------------------------------------------------------------------- */
.compartilhar {
	margin-top: var(--espaco-7);
	padding-block: var(--espaco-5);
	border-block: 1px solid var(--cor-linha);
}

.compartilhar__titulo {
	margin-bottom: var(--espaco-4);
	font-size: var(--texto-base);
	font-weight: var(--peso-negrito);
}

.compartilhar__botoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--espaco-3);
}

.compartilhar__nativo {
	display: inline-flex;
	align-items: center;
	gap: var(--espaco-2);
	min-height: 48px;
	padding: 0 var(--espaco-5);
	border: 0;
	border-radius: var(--raio-pilula);
	background: var(--cor-primaria);
	font-family: inherit;
	font-size: var(--texto-base);
	font-weight: var(--peso-semi);
	color: var(--cor-sobre-primaria);
	cursor: pointer;
	transition: background-color var(--transicao);
}

.compartilhar__nativo[hidden] {
	display: none;
}

.compartilhar__nativo:hover {
	background: var(--cor-primaria-hover);
}

.compartilhar__rede {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cor-superficie);
	color: var(--cor-texto);
	cursor: pointer;
	transition: background-color var(--transicao), color var(--transicao);
}

.compartilhar__rede:hover {
	background: var(--cor-primaria);
	color: var(--cor-sobre-primaria);
}

/* "Copiar link" troca o ícone por um sinal de confirmado por alguns segundos. */
.compartilhar__icone-copiado,
.compartilhar__copiar.esta-copiado .compartilhar__icone-copiar {
	display: none;
}

.compartilhar__copiar.esta-copiado .compartilhar__icone-copiado {
	display: inline-flex;
}

.compartilhar__copiar.esta-copiado {
	background: var(--cor-primaria);
	color: var(--cor-sobre-primaria);
}

/* Sem JavaScript não dá para copiar: o botão fica escondido. */
.no-js .compartilhar__copiar {
	display: none;
}

.compartilhar__aviso {
	min-height: 1.5em;
	margin: var(--espaco-2) 0 0;
	font-size: var(--texto-meta);
	color: var(--cor-primaria);
}

.compartilhar__aviso:empty {
	margin: 0;
	min-height: 0;
}

/* --------------------------------------------------------------------------
   SOBRE O AUTOR
   Só aparece quando o autor tem biografia no perfil.
   HTML: template-parts/conteudo/autor.php
   -------------------------------------------------------------------------- */
.sobre-autor {
	margin-top: var(--espaco-6);
	padding: var(--espaco-5) var(--espaco-5);
	border-radius: var(--raio-grande);
	background: var(--cor-superficie);
}

.sobre-autor__rotulo {
	margin: 0 0 var(--espaco-1);
	font-size: var(--texto-pequeno);
	font-weight: var(--peso-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cor-cinza-sobre-marfim);
}

.sobre-autor__nome {
	margin: 0 0 var(--espaco-2);
	font-family: var(--fonte-titulos);
	font-size: var(--texto-grande);
	font-weight: var(--peso-negrito);
}

.sobre-autor__nome a {
	color: var(--cor-texto);
	text-decoration: none;
}

.sobre-autor__nome a:hover {
	color: var(--cor-primaria);
}

.sobre-autor__bio {
	color: var(--cor-texto-secundario);
	line-height: 1.6;
}

.sobre-autor__bio > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   ANTERIOR E PRÓXIMO
   HTML: template-parts/navegacao/posts-vizinhos.php
   -------------------------------------------------------------------------- */
.posts-vizinhos {
	display: grid;
	gap: var(--espaco-3);
	margin-top: var(--espaco-6);
}

@media (min-width: 600px) {
	.posts-vizinhos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.posts-vizinhos__item--proximo {
		grid-column: 2;
		text-align: right;
	}
}

.posts-vizinhos__item {
	display: flex;
	flex-direction: column;
	gap: var(--espaco-1);
	padding: var(--espaco-4) var(--espaco-5);
	border: 1px solid var(--cor-linha);
	border-radius: var(--raio-grande);
	color: var(--cor-texto);
	text-decoration: none;
	transition: border-color var(--transicao);
}

.posts-vizinhos__item:hover {
	border-color: var(--cor-primaria);
}

.posts-vizinhos__rotulo {
	font-size: var(--texto-pequeno);
	font-weight: var(--peso-semi);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cor-texto-suave);
}

.posts-vizinhos__item--anterior .posts-vizinhos__rotulo::before {
	content: "\2190\00a0"; /* Seta para a esquerda. */
}

.posts-vizinhos__item--proximo .posts-vizinhos__rotulo::after {
	content: "\00a0\2192"; /* Seta para a direita. */
}

.posts-vizinhos__titulo {
	font-family: var(--fonte-titulos);
	font-weight: var(--peso-negrito);
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   RELACIONADOS ("Leia também")
   -------------------------------------------------------------------------- */
.relacionados {
	margin-top: var(--espaco-secao);
	padding-block: var(--espaco-secao);
	background: var(--cor-superficie);
}

.relacionados__titulo {
	margin-bottom: var(--espaco-6);
	font-size: var(--titulo-secao);
	font-weight: var(--peso-extra);
}

.relacionados__titulo::before {
	content: "";
	display: block;
	width: var(--fio-dourado-largura);
	height: var(--fio-dourado-altura);
	margin-bottom: var(--espaco-3);
	border-radius: 2px;
	background: var(--cor-destaque);
}

.relacionados + .rodape,
.relacionados ~ .rodape {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   PÁGINAS INSTITUCIONAIS E LARGURA TOTAL
   -------------------------------------------------------------------------- */
.artigo--pagina .artigo__cabecalho {
	padding-bottom: var(--espaco-5);
	border-bottom: 1px solid var(--cor-linha);
	margin-bottom: var(--espaco-6);
}

.artigo--largura-total .artigo__topo {
	max-width: calc(var(--largura-container) + 2 * var(--margem-lateral));
}