/* =========================================================================
   GUIA DE PERSONAGEM

   Composição da seção 5.4: arte grande no topo, nome, ficha técnica,
   introdução, o conjunto de imagens e o Disqus.
   ========================================================================= */

.guia {
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.guia__capa {
	aspect-ratio: 16 / 9;
	max-height: 60vh;
	overflow: hidden;
	background: var(--bg-deep);
}

.guia__capa-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* A arte-chave costuma ter o personagem na metade de cima; cortar pelo
	   centro cortaria justamente o rosto em tela larga. */
	object-position: center 35%;
}

.guia__wrap {
	/*
	 * 860px, e não os 760 do texto corrido.
	 *
	 * O quadro largo do fim é 3:2 e precisa de mais espaço para o texto
	 * desenhado dentro dele continuar legível sem ampliar.
	 */
	max-width: 860px;
	/*
	 * Respiro curto, e não os 3rem de antes.
	 *
	 * Os 3rem foram escritos quando o corpo começava logo abaixo de um
	 * cabeçalho de texto. Hoje ele começa abaixo da capa, que já termina com
	 * quase 50px de preto por baixo das pastilhas — somando os dois dava um
	 * vão de 132px que ela marcou de vermelho na tela.
	 */
	padding-top: 0;
}

.guia__cabecalho {
	text-align: center;
}

.guia__titulo {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4.5vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--gold);
	text-wrap: balance;
}

/* -------------------------------------------------------------------------
   Ficha técnica
   ---------------------------------------------------------------------- */

.guia__ficha {
	margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}

.guia__ficha-item {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	padding: 0.5rem 0.95rem;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: 999px;
}

.guia__ficha dt {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.guia__ficha dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text);
}

/*
 * A introdução mora inteira em guia-topo.css, junto da capa e das pastilhas,
 * porque a cor dela vem do elemento marcado na guia.
 *
 * O que existia aqui era o desenho antigo, de quando a introdução era só um
 * parágrafo cinza-claro no meio da página. Como guia.css carrega depois de
 * guia-topo.css, essas linhas venciam as novas e a caixa continuava saindo com
 * o texto apagado e descolada das pastilhas.
 */

/* -------------------------------------------------------------------------
   Conjunto de imagens

   Uma coluna, uma imagem embaixo da outra, como no carrossel do Instagram de
   onde elas vêm. Coluna estreita e centralizada: quadrado de 1080 ocupando um
   monitor inteiro domina a página e cansa antes do terceiro quadro.
   ---------------------------------------------------------------------- */

.guia__galeria {
	margin-top: clamp(2rem, 5vw, 3rem);
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 2vw, 1.25rem);
}

.guia__quadro {
	margin: 0;
}

.guia__zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	background: var(--bg-deep);
	cursor: zoom-in;
	overflow: hidden;
	transition: border-color var(--speed) var(--ease);
}

.guia__zoom:hover { border-color: var(--gold-deep); }

.guia__zoom:focus-visible {
	outline: 2px solid var(--gold-bright);
	outline-offset: 2px;
}

.guia__img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * A caixa de ampliação mudou de arquivo.
 *
 * Era daqui quando só a guia ampliava imagem. Ela pediu o mesmo nas
 * postagens, e guia.css não é carregado lá — o diálogo abria sem estilo
 * nenhum, branco e sem o fundo escuro. Agora mora em conteudo.css, que é
 * carregado nos dois lugares.
 */


/* No celular o botão volta para dentro: fora da caixa ele cairia além da
   borda da tela. */
@media (max-width: 560px) {
	.lupa__fechar {
		top: 8px;
		right: 8px;
	}
}

/* -------------------------------------------------------------------------
   O texto que ela escreve antes das imagens

   Ela pediu "uma aba pra editar um texto que entre em cima, antes das
   imagens". Ele já existia: é o editor comum da guia, e o que ela escrever
   ali sai exatamente neste lugar. Faltava o centralizado que ela pediu.

   Centralizado só o que é texto corrido. Lista e tabela ficam como estão —
   item de lista centralizado desalinha os marcadores e fica pior do que
   antes, e tabela centralizada perde as colunas.
   ---------------------------------------------------------------------- */

.guia__corpo {
	margin-top: clamp(1.25rem, 3vw, 2rem);
}

.guia__corpo p,
.guia__corpo h2,
.guia__corpo h3,
.guia__corpo h4 {
	text-align: center;
}

/* Citação continua com a barra dourada à esquerda, então o texto dela
   acompanha a barra em vez de fugir para o meio. */
.guia__corpo blockquote p {
	text-align: left;
}

/* -------------------------------------------------------------------------
   Versão Unificada

   O Bloco 8 apresentado à parte, como ela desenhou: divisória de losangos,
   título, a linha entre parênteses e a arte grande — a que junta todos os
   quadros num só.

   Ela explicou para que serve na própria legenda: "caso você queira salvar
   pra rever depois". É a imagem que a leitora guarda no celular, e é por isso
   que ela não fica no meio dos outros quadros. Ali seria só mais uma; aqui,
   com nome e moldura, é um convite a levar a guia inteira embora.
   ---------------------------------------------------------------------- */

.guia__unificada {
	/* A mesma variável da divisória do texto: um lugar só desenha o losango,
	   e o dia em que ela pedir outro tamanho é lá que se mexe. */
	--teyvat-losangos: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 12"><path d="M20 2.5 23.5 6 20 9.5 16.5 6Z"/><path d="M60 2.5 63.5 6 60 9.5 56.5 6Z" fill="none" stroke="black" stroke-width="1.4"/></svg>');
	margin-top: clamp(2rem, 5vw, 3rem);
	text-align: center;
}

.guia__divisoria {
	width: 100%;
	height: 12px;
	margin: clamp(1.5rem, 4vw, 2.5rem) 0;
	border: 0;
	background-color: var(--gold-deep);
	-webkit-mask: var(--teyvat-losangos) repeat-x center / 80px 12px;
	mask: var(--teyvat-losangos) repeat-x center / 80px 12px;
}

.guia__unificada-titulo {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--text);
}

/*
 * A linha entre parênteses, em tom mais baixo que o título.
 *
 * É recado de serviço, não manchete: quem só quer ver a arte passa por ela
 * sem tropeçar, e quem procura o arquivo para guardar encontra.
 */
.guia__unificada-nota {
	margin: 0.4rem 0 clamp(1.25rem, 3vw, 1.75rem);
	color: var(--text-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* A divisória de baixo fecha a seção; sem isto ela encostaria no anúncio. */
.guia__unificada .guia__divisoria:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   A assinatura que fecha a guia

   Aviso de autoria, a despedida dela e o emote. Ela fazia isso à mão no
   HoYoLAB: "desse jeito fica padronizado o final de cada guia, sem parecer
   algo seco como uma divisória no final de cada um deles."
   ---------------------------------------------------------------------- */

.guia__assinatura {
	--teyvat-losangos: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 12"><path d="M20 2.5 23.5 6 20 9.5 16.5 6Z"/><path d="M60 2.5 63.5 6 60 9.5 56.5 6Z" fill="none" stroke="black" stroke-width="1.4"/></svg>');
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
	text-align: center;
}

/*
 * O aviso de direitos, em tom baixo.
 *
 * Precisa estar lá e precisa ser legível, mas não é o que ela quer que a
 * pessoa leia primeiro: quem chegou até aqui veio pela guia, não pelo aviso.
 */
.guia__autoria {
	max-width: 60ch;
	margin: 0 auto;
	color: var(--text-muted);
	font-size: 0.8125rem;
	line-height: 1.7;
	text-wrap: pretty;
}

/*
 * A despedida dela, em dourado e na fonte de título.
 *
 * É o oposto do aviso de cima: aqui é a voz dela falando com quem leu, e é
 * o que faz o fim não parecer um rodapé jurídico.
 */
.guia__despedida {
	margin: clamp(0.9rem, 2vw, 1.25rem) 0 0;
	font-family: var(--font-display);
	font-size: clamp(1rem, 2.2vw, 1.125rem);
	font-weight: 600;
	color: var(--gold-bright);
}

.guia__emote {
	display: block;
	width: 100px;
	height: auto;
	margin: clamp(0.75rem, 2vw, 1rem) auto 0;
}