/*
 * A camada de conteúdo: artigo, vídeo e a autoria que os dois carregam.
 *
 * Etapa 8 da §13. Reúne o que estava em três lugares — a fachada de vídeo e o
 * card de artigo em `vtag-perfil.css`, e cópias mais pobres dos dois no
 * `vtag.css` legado, que era o que as subpáginas `/@{slug}/artigos` e
 * `/@{slug}/videos` recebiam. Duas cópias do mesmo desenho é como o `.vt-acao`
 * chegou a três; esta folha existe para que não haja uma quarta.
 *
 * Ela é enfileirada em quatro telas: o vTag (pelos blocos), as duas
 * subpáginas, e a do artigo.
 *
 * O eixo do desenho é a §07: "conteúdo sem autor visível não devolve
 * autoridade a ninguém". Por isso a autoria não é uma assinatura no rodapé —
 * é um bloco com rosto, credencial e link para o vTag, no topo, e outra vez ao
 * fim, aberto em minibio com as ações de contato. O artigo termina devolvendo
 * o leitor ao profissional; essa é a função inteira do artigo.
 */

@layer componente {

	/* ── listas ─────────────────────────────────────────────────────── */

	/*
	 * Declarados por inteiro, e não apoiados no grupo de reset que
	 * `vtag-perfil.css` mantém para endereços e links: aquele grupo está na
	 * MESMA camada, e quem herda de vizinho na mesma camada perde na primeira
	 * vez que o vizinho for editado por outra razão.
	 */
	.vt-artigos,
	.vt-videos {
		display: grid;
		gap: var(--vt-space-3);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vt-videos--grade {
		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
		gap: var(--vt-space-4);
	}

	/*
	 * A GRADE DA SUBPÁGINA tem número FIXO de colunas, e o motivo é aritmético.
	 *
	 * `/@{slug}/videos` serve 12 vídeos por página (`por_pagina_front`), e
	 * `auto-fill` com mínimo de 13rem dava CINCO colunas em 1168 px: 5 + 5 + 2,
	 * três buracos na última fileira de TODA página cheia — não só no fim da
	 * lista, onde sobra seria natural. Coluna que não divide a página deixa a
	 * fileira pela metade sempre.
	 *
	 * 1, 2, 3 e 4 dividem 12, e a escada não passa por 5. **Se
	 * `por_pagina_front` mudar, é esta escada que muda junto** — o acordo entre
	 * o tamanho da página e o número de colunas é o que fecha a fileira.
	 *
	 * Só na subpágina. No vTag o mesmo `--grade` vive numa coluna mais estreita
	 * e com SEIS vídeos: lá o `auto-fill` acerta três colunas e duas fileiras
	 * cheias, e uma escada presa à largura da JANELA pediria quatro colunas
	 * dentro de 700 px.
	 */
	.vt-videos--pagina {
		grid-template-columns: minmax(0, 1fr);
	}

	@media (min-width: 30rem) {
		.vt-videos--pagina {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 48rem) {
		.vt-videos--pagina {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (min-width: 64rem) {
		.vt-videos--pagina {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

	/* ── vídeo: fachada, nunca iframe ───────────────────────────────── */

	/*
	 * O clique abre o YouTube — decisão do briefing, para o profissional não
	 * perder a monetização (§07). O que fica aqui é a fachada: uma imagem e um
	 * play desenhado por nós. Nenhum script de terceiro entra na página, e a
	 * única requisição externa é a da capa.
	 */
	.vt-video__link {
		display: grid;
		gap: var(--vt-space-2);
		color: var(--vt-texto-forte);
		text-decoration: none;
	}

	.vt-video__capa {
		position: relative;
		display: block;
		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: var(--vt-radius-md);
		overflow: hidden;
		background: var(--vt-superficie-2);
	}

	.vt-video__capa img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/*
	 * O play e o selo de custo MUDARAM DE CASA na etapa 12: viraram
	 * `.vt-capa__play` e `.vt-capa__custo` em `listagem.css`. A faixa da Home
	 * precisava do mesmo desenho, e a Home não carrega esta folha — manter uma
	 * cópia aqui produziria dois plays que divergem, que é como o `.vt-acao`
	 * chegou a três. Aqui fica só o que é do vídeo: a capa e o hover.
	 */
	.vt-video__link:hover .vt-capa__play,
	.vt-video__link:focus-visible .vt-capa__play {
		scale: 1.12;
	}

	.vt-video__titulo {
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		line-height: var(--vt-lh-compacta);
	}

	/* ── artigo: o card ─────────────────────────────────────────────── */

	/*
	 * O CARD DO ARTIGO É HORIZONTAL: capa à esquerda, título e data à direita.
	 *
	 * A lista mostrava só título e data, e cada artigo tem uma imagem que já
	 * está no banco. Ela entra como COMPOSIÇÃO, não como conteúdo: quem lê a
	 * lista está escolhendo entre quatro textos, e o que decide é o título —
	 * a capa dá ritmo à coluna e ancora o olho em cada linha.
	 *
	 * O quadrado não é escolha estética: o acervo inteiro é 1:1 (16 de 16
	 * imagens medidas), e o 4/3 que a subpágina usava recortava um quarto de
	 * cada uma. `object-fit: cover` mantém a caixa firme se um dia vier outra
	 * proporção — a caixa é da grade, não da imagem.
	 */
	.vt-artigo__link {
		display: grid;
		grid-template-columns: 4.5rem minmax(0, 1fr);
		gap: var(--vt-space-1) var(--vt-space-4);
		align-items: start;
		padding: var(--vt-space-4);
		background: var(--vt-superficie-1);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
		color: var(--vt-texto-forte);
		text-decoration: none;
		transition: border-color var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-artigo__link:hover,
	.vt-artigo__link:focus-visible {
		border-color: var(--vt-interacao);
	}

	/*
	 * Sem capa, o corpo toma a linha inteira. Nada de moldura vazia no lugar
	 * da imagem que não existe: a caixa cinza pareceria imagem quebrada, e a
	 * lista não deve inventar o que o artigo não tem.
	 */
	.vt-artigo__link:not(:has(.vt-artigo__capa)) {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * `pretty`, e não `balance`.
	 *
	 * `balance` iguala o comprimento das linhas, e num card horizontal
	 * estreito isso vira quatro linhas curtas com largura sobrando à direita
	 * — medido a 414 px. Aqui o título é texto corrido alinhado à esquerda:
	 * o que se quer é só não deixar uma palavra sozinha na última linha.
	 */
	.vt-artigo__titulo {
		font-weight: var(--vt-peso-titulo);
		line-height: var(--vt-lh-compacta);
		text-wrap: pretty;
	}

	.vt-artigo__data {
		font-size: var(--vt-fs-xs);
		color: var(--vt-texto-fraco);
	}

	/*
	 * Na subpágina do profissional o card ganha capa e resumo: ali o visitante
	 * está escolhendo entre artigos, e título com data é pouco para escolher.
	 * No trilho do vTag, onde a lista é um índice, o card enxuto é o certo.
	 */
	.vt-artigos--pagina {
		gap: var(--vt-space-4);
	}

	.vt-artigos--pagina .vt-artigo__link {
		grid-template-columns: 7rem minmax(0, 1fr);
		align-items: start;
	}

	.vt-artigo__capa {
		width: 100%;
		aspect-ratio: 1;
		object-fit: cover;
		border-radius: var(--vt-radius-sm);
		background: var(--vt-superficie-2);
	}

	.vt-artigo__corpo {
		display: grid;
		gap: var(--vt-space-1);
		min-width: 0;
	}

	.vt-artigos--pagina .vt-artigo__titulo {
		font-size: var(--vt-fs-lg);
	}

	/*
	 * O resumo respeita a medida de leitura, e isso conserta duas coisas de
	 * uma vez: a linha de 840 px que ninguém lê confortavelmente, e o vazio
	 * que sobrava sob o texto — com a capa quadrada, o corpo de uma linha só
	 * deixava 34 px de cartão vazio à direita da imagem.
	 */
	.vt-artigo__resumo {
		max-width: var(--vt-medida);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		line-height: var(--vt-lh-compacta);
	}

	/*
	 * No estreito a subpágina empilha — lá a capa é grande e o resumo pede a
	 * largura toda. A lista do vTag NÃO empilha: a miniatura de 72 px cabe em
	 * 414 px com folga, e empilhar transformaria um índice de quatro linhas
	 * em quatro blocos de altura de cartaz.
	 */
	@media (max-width: 30rem) {
		.vt-artigos--pagina .vt-artigo__link {
			grid-template-columns: minmax(0, 1fr);
		}

		.vt-artigos--pagina .vt-artigo__capa {
			aspect-ratio: 16 / 9;
		}
	}

	/* ── a tela do artigo ───────────────────────────────────────────── */

	/*
	 * A ESPINHA da tela: uma medida só, e tudo centrado nela.
	 *
	 * Eram DUAS medidas sem ninguém ter pedido duas. `--vt-medida-artigo` era
	 * `65ch`, e `ch` resolve no ponto de USO: o topo herda 17 px e fechava em
	 * 674 px, o corpo lê 18 px e fechava em 714 — 40 px de desalinho entre o
	 * título e o texto que ele encima, medidos na tela. Em `rem` a medida não
	 * depende de quem a escreve: 44rem são os mesmos ~65 caracteres do corpo
	 * (§07), agora idênticos para a trilha, o título, a capa, o texto, a
	 * minibio e a lista do fim.
	 *
	 * E a espinha é CENTRADA. O `.vt-main` tem 75rem e a espinha 44: as 31rem
	 * de sobra ficavam TODAS à direita, e o título, a ficha do autor e a
	 * minibio nasciam encostados na margem esquerda com meia tela vazia ao
	 * lado — largura reservada e não usada, o defeito que o cliente já apontou
	 * em outras telas. Centrada, a sobra vira margem dos dois lados, e a da
	 * esquerda ganha uso: é onde o sumário passa a morar.
	 */
	.vt-main--artigo {
		--vt-medida-artigo: 44rem;
	}

	.vt-main--artigo > .vt-trilha,
	.vt-leitura__topo,
	.vt-leitura__capa,
	.vt-leitura__corpo,
	.vt-autor-final,
	.vt-mais-do-autor {
		width: 100%;
		max-width: var(--vt-medida-artigo);
		margin-inline: auto;
	}

	.vt-leitura {
		display: grid;
		gap: var(--vt-space-8);
		margin: 0;
	}

	/*
	 * O SUMÁRIO VAI PARA A MARGEM.
	 *
	 * Ele era uma coluna de 15rem à esquerda do texto, e as duas juntas ficavam
	 * à esquerda de um `.vt-main` de 75rem: o índice empurrava o texto para
	 * fora do centro em vez de ocupar a sobra. Agora a linha do texto tem três
	 * colunas — sobra, espinha, sobra —, o corpo fica na do meio e o sumário na
	 * da esquerda. O texto ocupa o mesmo lugar tendo índice ou não; o que muda
	 * é a margem.
	 *
	 * A pergunta é de LARGURA, e não "tem sumário": a 64rem a margem daria
	 * 112 px, que não é índice, é uma coluna de palavras quebradas. Abaixo de
	 * 75rem ele volta a ser uma caixa acima do texto — que é o que ele sempre
	 * foi no estreito.
	 */
	.vt-leitura__texto {
		display: grid;
		gap: var(--vt-space-6);
	}

	/*
	 * Empilhado, o sumário também é da espinha. Sem esta linha ele esticava
	 * para a largura toda — medido a 1100 px: uma caixa de 1068 px indexando
	 * uma coluna de 704, que é o mesmo defeito de largura reservada, agora
	 * dentro do remédio dele.
	 */
	.vt-leitura__texto > .vt-sumario {
		width: 100%;
		max-width: var(--vt-medida-artigo);
		margin-inline: auto;
	}

	@media (min-width: 75rem) {
		.vt-leitura__texto {
			grid-template-columns: minmax(0, 1fr) min(100%, var(--vt-medida-artigo)) minmax(0, 1fr);
			column-gap: var(--vt-space-8);
			align-items: start;
		}

		.vt-leitura__texto > .vt-sumario {
			grid-column: 1;
			justify-self: end;
			width: 100%;
			max-width: none;
			margin-inline: 0;
			position: sticky;
			top: var(--vt-space-6);
			/*
			 * Grudado no topo, um artigo de doze seções teria o fim da lista
			 * fora da janela e sem como chegar lá. A caixa para na altura da
			 * tela e rola por dentro.
			 */
			max-height: calc(100dvh - var(--vt-space-12));
			overflow-y: auto;
		}

		.vt-leitura__texto > .vt-leitura__corpo {
			grid-column: 2;
		}
	}

	.vt-leitura__topo {
		display: grid;
		gap: var(--vt-space-4);
	}

	.vt-leitura__titulo {
		margin: 0;
		font-size: var(--vt-fs-3xl);
		font-weight: var(--vt-peso-display);
		letter-spacing: var(--vt-track-display);
		line-height: var(--vt-lh-tight);
		color: var(--vt-texto-forte);
		text-wrap: balance;
	}

	.vt-leitura__meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-2);
		margin: 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
		text-transform: uppercase;
		letter-spacing: var(--vt-track-micro);
		font-weight: var(--vt-peso-medio);
	}

	/*
	 * O separador vem DEPOIS do item, não antes do seguinte. Com `::before` no
	 * irmão, a quebra de linha no celular jogava o `·` para o início da linha
	 * de baixo, órfão — "17 de abril" numa linha e "· 3 minutos" na outra. Como
	 * `::after` do anterior ele nunca abre linha: ou acompanha o item, ou some
	 * junto com ele.
	 */
	.vt-leitura__meta > *:not(:last-child)::after {
		content: "·";
		margin-inline-start: var(--vt-space-2);
	}

	/*
	 * A CAPA é ilustração, não cartaz.
	 *
	 * Com 56rem e 16/9 ela media 896 × 504 px numa tela de 1920: uma dobra
	 * inteira antes da primeira linha do texto, cobrando atenção que o artigo
	 * ainda não tinha pedido. E era uma ampliação — o acervo é todo 1:1 com
	 * 600 px de lado (16 de 16 imagens medidas), então aquilo era um arquivo de
	 * 600 px esticado para 896.
	 *
	 * Na espinha e em 5/2 ela mede 704 × 282: cabe na primeira tela junto com o
	 * título e a ficha do autor, e o texto começa antes da dobra. No estreito
	 * volta a 16/9 — a faixa cinematográfica viraria uma tarja de 150 px.
	 */
	.vt-leitura__capa {
		display: block;
		aspect-ratio: 16 / 9;
		object-fit: cover;
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-2);
	}

	@media (min-width: 48rem) {
		.vt-leitura__capa {
			aspect-ratio: 5 / 2;
		}
	}

	/* ── o corpo do texto ───────────────────────────────────────────── */

	/*
	 * O corpo é conteúdo de editor: parágrafos, títulos, listas, citações e
	 * imagens que ninguém daqui nomeou. Por isso o alvo é o ELEMENTO, dentro
	 * de `.vt-leitura__corpo`, e não uma classe por bloco — a folha precisa
	 * valer para o que ainda não foi escrito.
	 */
	.vt-leitura__corpo {
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-lg);
		line-height: var(--vt-lh-base);
	}

	/*
	 * A ABERTURA em corpo maior — a linha fina do jornal. O primeiro parágrafo
	 * de um artigo de saúde anuncia o texto ("conheça uma das tecnologias mais
	 * eficazes para tratar dores crônicas sem cirurgia"), e é por ele que o
	 * olho entra depois da capa.
	 *
	 * `:first-child`, e não `:first-of-type`: só vale quando o artigo ABRE com
	 * um parágrafo. Se a primeira coisa for uma imagem ou um subtítulo, o
	 * destaque cairia num trecho do meio do texto, que não é abertura de nada.
	 */
	.vt-leitura__corpo > p:first-child {
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-xl);
		line-height: var(--vt-lh-compacta);
	}

	.vt-leitura__corpo > :first-child {
		margin-top: 0;
	}

	.vt-leitura__corpo > :last-child {
		margin-bottom: 0;
	}

	.vt-leitura__corpo p {
		margin: 0 0 var(--vt-space-6);
	}

	.vt-leitura__corpo h2,
	.vt-leitura__corpo h3 {
		margin: var(--vt-space-12) 0 var(--vt-space-4);
		color: var(--vt-texto-forte);
		scroll-margin-top: var(--vt-space-8);
	}

	.vt-leitura__corpo h2 {
		font-size: var(--vt-fs-2xl);
		font-weight: var(--vt-peso-display);
		letter-spacing: var(--vt-track-titulo);
		line-height: var(--vt-lh-titulo);
	}

	.vt-leitura__corpo h3 {
		font-size: var(--vt-fs-xl);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-sub);
		line-height: var(--vt-lh-titulo);
	}

	.vt-leitura__corpo a {
		color: var(--vt-interacao);
		text-decoration-thickness: 1px;
		text-underline-offset: 2px;
	}

	.vt-leitura__corpo ul,
	.vt-leitura__corpo ol {
		margin: 0 0 var(--vt-space-6);
		padding-inline-start: var(--vt-space-6);
	}

	.vt-leitura__corpo li {
		margin-bottom: var(--vt-space-2);
	}

	.vt-leitura__corpo li::marker {
		color: var(--vt-texto-fraco);
	}

	.vt-leitura__corpo blockquote {
		margin: var(--vt-space-8) 0;
		padding-inline-start: var(--vt-space-5);
		border-inline-start: 3px solid var(--vt-confianca);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-xl);
		line-height: var(--vt-lh-compacta);
	}

	.vt-leitura__corpo img {
		max-width: 100%;
		height: auto;
		border-radius: var(--vt-radius-md);
	}

	.vt-leitura__corpo figure {
		margin: var(--vt-space-8) 0;
	}

	.vt-leitura__corpo figcaption {
		margin-top: var(--vt-space-2);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-sm);
	}

	.vt-leitura__corpo table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--vt-fs-sm);
	}

	.vt-leitura__corpo :is(th, td) {
		padding: var(--vt-space-2) var(--vt-space-3);
		border-bottom: 1px solid var(--vt-linha);
		text-align: start;
	}

	.vt-leitura__corpo hr {
		margin: var(--vt-space-12) 0;
		border: 0;
		border-top: 1px solid var(--vt-linha);
	}

	/* ── sumário ────────────────────────────────────────────────────── */

	.vt-sumario {
		margin: 0;
		padding: var(--vt-space-4);
		background: var(--vt-superficie-1);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-md);
	}

	.vt-sumario__titulo {
		margin: 0 0 var(--vt-space-3);
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-medio);
		text-transform: uppercase;
		letter-spacing: var(--vt-track-micro);
	}

	.vt-sumario__lista {
		display: grid;
		gap: var(--vt-space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vt-sumario__lista a {
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		line-height: var(--vt-lh-compacta);
		text-decoration: none;
	}

	.vt-sumario__lista a:hover,
	.vt-sumario__lista a:focus-visible {
		color: var(--vt-interacao);
		text-decoration: underline;
	}

	/* ── autoria: o vTag em miniatura ───────────────────────────────── */

	/*
	 * O bloco do topo. É um vTag reduzido ao que se lê em três segundos
	 * (§02.3): rosto, nome, credencial, selo, cidade — e inteiro clicável,
	 * porque aqui existe um destino só.
	 */
	.vt-autoria {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--vt-space-1) var(--vt-space-3);
		align-items: center;
		padding: var(--vt-space-3);
		margin-inline-start: calc(var(--vt-space-3) * -1);
		border-radius: var(--vt-radius-md);
		color: var(--vt-texto-forte);
		text-decoration: none;
		transition:
			background-color var(--vt-dur-rapida) var(--vt-ease-entrada),
			border-color var(--vt-dur-rapida) var(--vt-ease-entrada),
			box-shadow var(--vt-dur-rapida) var(--vt-ease-entrada);
	}

	.vt-autoria:hover,
	.vt-autoria:focus-visible {
		background: var(--vt-superficie-2);
	}

	/*
	 * A TERCEIRA COLUNA, e é o que conserta a distribuição: o selo e o caminho
	 * para o vTag vão para a direita. Com tudo numa coluna só, o nome e a
	 * credencial fechavam em 420 px de uma linha de 704 e o resto era vazio.
	 *
	 * No estreito ela desce para baixo do nome (coluna 2, linha de baixo), e
	 * não para debaixo do retrato: alinhada ao texto, continua sendo a mesma
	 * ficha; alinhada à foto, viraria uma segunda coluna de nada.
	 */
	.vt-autoria__lado {
		grid-column: 2;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--vt-space-2) var(--vt-space-3);
	}

	@media (min-width: 40rem) {
		.vt-autoria {
			grid-template-columns: auto minmax(0, 1fr) auto;
		}

		.vt-autoria__lado {
			grid-column: 3;
			justify-content: flex-end;
		}
	}

	/*
	 * A FICHA DO TOPO é um CARTÃO — pedido do cliente, e no fundo o que a §07
	 * já descrevia: "um vTag em miniatura". O destaque é de superfície e borda,
	 * o mesmo par do sumário e do card de artigo, e não de cor: um bloco
	 * tingido ao lado do título competiria com o título.
	 *
	 * Só no topo. Na minibio do fim a ficha já vive dentro de um painel com
	 * superfície e borda, e cartão dentro de cartão é moldura dupla.
	 */
	.vt-autoria--cartao {
		margin-inline-start: 0;
		padding: var(--vt-space-4);
		background: var(--vt-superficie-1);
		border: 1px solid var(--vt-linha);
	}

	.vt-autoria--cartao:hover,
	.vt-autoria--cartao:focus-visible {
		background: var(--vt-superficie-1);
		border-color: var(--vt-interacao);
		box-shadow: var(--vt-sombra-sm);
	}

	/*
	 * Azul, que é a cor de "isto é clicável" (§4). Mint aqui seria o oposto do
	 * que a régua das cores existe para evitar: selo e link não dividem cor, e
	 * os dois estão a três centímetros um do outro nesta linha.
	 */
	.vt-autoria__ir {
		color: var(--vt-interacao);
		font-size: var(--vt-fs-sm);
		font-weight: var(--vt-peso-medio);
		white-space: nowrap;
	}

	/* O retrato do autor viaja para o vTag dele. Ver `listagem.css`. */
	.vt-autoria__retrato {
		view-transition-name: var(--vt-foto);
	}

	.vt-autoria__retrato {
		display: grid;
		place-items: center;
		width: 3.25rem;
		height: 3.25rem;
		border-radius: 50%;
		overflow: hidden;
		background: var(--vt-superficie-3);
		color: var(--vt-texto-sobre-3);
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-sub);
	}

	.vt-autoria__retrato img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.vt-autoria__quem {
		display: grid;
		gap: 2px;
		min-width: 0;
	}

	.vt-autoria__nome {
		font-weight: var(--vt-peso-titulo);
		letter-spacing: var(--vt-track-sub);
		line-height: var(--vt-lh-compacta);
	}

	.vt-autoria__credencial,
	.vt-autoria__local {
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		line-height: var(--vt-lh-compacta);
	}

	.vt-autoria__local {
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-xs);
	}

	/* ── a minibio do fim ───────────────────────────────────────────── */

	/*
	 * "O artigo termina devolvendo o leitor ao profissional. Essa é a função
	 * inteira do artigo" (§07). Daí este bloco não ser um rodapé discreto: é
	 * um painel, com a bio, as ações de contato e o caminho para o vTag.
	 */
	.vt-autor-final {
		display: grid;
		gap: var(--vt-space-4);
		margin-top: var(--vt-space-12);
		padding: var(--vt-space-6);
		background: var(--vt-superficie-1);
		border: 1px solid var(--vt-linha);
		border-radius: var(--vt-radius-lg);
		box-shadow: var(--vt-sombra-sm);
	}

	.vt-autor-final__rotulo {
		margin: 0;
		color: var(--vt-texto-fraco);
		font-size: var(--vt-fs-micro);
		font-weight: var(--vt-peso-medio);
		text-transform: uppercase;
		letter-spacing: var(--vt-track-micro);
	}

	.vt-autor-final__bio {
		margin: 0;
		max-width: var(--vt-medida);
		color: var(--vt-texto-medio);
		font-size: var(--vt-fs-sm);
		line-height: var(--vt-lh-base);
	}

	.vt-autor-final .vt-acoes {
		margin: 0;
	}

	/*
	 * O pé em duas pontas: ações à esquerda, caminho para o vTag à direita.
	 * Empilhados, os botões fechavam em 360 px de uma linha de 656 e o link
	 * ficava sozinho embaixo — o painel inteiro se lia encostado na margem
	 * esquerda. `space-between` com `wrap`: quando as duas pontas não couberem
	 * na mesma linha, o link desce inteiro em vez de espremer os botões.
	 */
	.vt-autor-final__pe {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--vt-space-3) var(--vt-space-4);
	}

	.vt-autor-final__vtag {
		margin: 0;
	}

	/* ── mais deste profissional ────────────────────────────────────── */

	.vt-mais-do-autor {
		margin-top: var(--vt-space-12);
	}

	.vt-mais-do-autor__titulo {
		margin: 0 0 var(--vt-space-4);
		font-size: var(--vt-fs-xl);
		font-weight: var(--vt-peso-display);
		letter-spacing: var(--vt-track-titulo);
		color: var(--vt-texto-forte);
	}

	/*
	 * A lista do fim é a MESMA de `/@{slug}/artigos` (`--pagina`): capa,
	 * título, resumo e data, empilhados na espinha.
	 *
	 * Era uma grade de cartões com `repeat(auto-fill, minmax(16rem, 1fr))`, e
	 * `auto-fill` GUARDA a coluna que sobra: com três artigos numa linha que
	 * comportava quatro, a quarta ficava vazia e a fileira terminava 312 px
	 * antes da margem. Empilhada não há coluna para sobrar — e quem chega ao
	 * fim do texto está escolhendo o próximo, que é o momento para o qual a
	 * variante com resumo existe.
	 */

	/* ── estado vazio das subpáginas ────────────────────────────────── */

	.vt-conteudo-vazio {
		margin: 0;
		padding: var(--vt-space-8);
		background: var(--vt-superficie-1);
		border: 1px dashed var(--vt-linha-forte);
		border-radius: var(--vt-radius-md);
		color: var(--vt-texto-medio);
		text-align: center;
	}

	/* ── movimento ──────────────────────────────────────────────────── */

	/*
	 * ROLAGEM SUAVE, e só nesta tela. `scroll-behavior` no `html` vale para o
	 * documento inteiro e para todo `scrollIntoView()` de script — a área da
	 * conta tem os seus, calculados com `--vt-topo` —, e o `:has()` prende a
	 * regra à existência da tela do artigo. É a mesma receita de
	 * `institucional.css`, que resolveu o mesmo pedido nos documentos legais.
	 *
	 * `prefers-reduced-motion` é condição de entrada, não remendo: quem pediu
	 * menos movimento ao sistema recebe o salto instantâneo, que é o
	 * comportamento nativo da âncora.
	 */
	@media (prefers-reduced-motion: no-preference) {
		html:has(.vt-main--artigo) {
			scroll-behavior: smooth;
		}
	}
}