/*
 * 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);
	}

	/* ── 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 medida é 65 caracteres (§07). O token `--vt-medida` é 62ch e serve ao
	 * texto que acompanha uma interface; aqui o texto É a interface, e a
	 * medida um pouco mais larga sustenta parágrafo longo sem cansar.
	 */
	.vt-leitura {
		--vt-medida-artigo: 65ch;

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

	/*
	 * Duas colunas quando HÁ SUMÁRIO — a pergunta literal, não um proxy de
	 * estado. Um artigo curto e um longo diferem exatamente nisto, e foi um
	 * proxy assim que espremeu o vTag de clínica em 18rem na etapa 7.
	 */
	@media (min-width: 64rem) {
		.vt-leitura:has(.vt-sumario) {
			grid-template-columns: 15rem minmax(0, 1fr);
			column-gap: var(--vt-space-12);
			align-items: start;
		}

		.vt-leitura:has(.vt-sumario) .vt-leitura__topo,
		.vt-leitura:has(.vt-sumario) .vt-leitura__capa {
			grid-column: 1 / -1;
		}

		.vt-leitura:has(.vt-sumario) .vt-sumario {
			position: sticky;
			top: var(--vt-space-6);
		}
	}

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

	.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);
	}

	.vt-leitura__capa {
		display: block;
		width: 100%;
		max-width: 56rem;
		aspect-ratio: 16 / 9;
		object-fit: cover;
		border-radius: var(--vt-radius-lg);
		background: var(--vt-superficie-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 {
		max-width: var(--vt-medida-artigo);
		color: var(--vt-texto-forte);
		font-size: var(--vt-fs-lg);
		line-height: var(--vt-lh-base);
	}

	.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-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);
	}

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

	/* 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);
	}

	.vt-autoria__sinais {
		display: flex;
		flex-wrap: wrap;
		gap: var(--vt-space-2);
		margin-top: var(--vt-space-1);
	}

	/* ── 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;
	}

	/* ── 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);
	}

	.vt-mais-do-autor .vt-artigos {
		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
		gap: var(--vt-space-4);
	}

	/*
	 * O `<li>` já esticava para a altura da linha da grade, mas o cartão
	 * VISÍVEL é o `<a>` dentro dele, que parava na altura do próprio texto: numa
	 * linha de três, o de título mais longo ficava mais alto que os vizinhos e a
	 * fileira saía desalinhada por baixo. O `li` vira grid para o link preencher.
	 *
	 * E as linhas do link passam a ser `1fr auto`, para a data encostar no pé do
	 * cartão em vez de flutuar logo abaixo do título — com altura igual, é a
	 * data alinhada entre os cartões que faz a fileira parecer uma fileira.
	 */
	.vt-mais-do-autor .vt-artigo {
		display: grid;
	}

	.vt-mais-do-autor .vt-artigo__link {
		grid-template-rows: 1fr auto;
	}

	/* ── 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;
	}
}