/* =========================================================================
   PÁGINAS DE CONTEÚDO

   Uma folha para tudo que é "texto para ler": a listagem de notícias, a
   notícia e as páginas institucionais. São telas parecidas, e separá-las em
   três arquivos só faria o navegador baixar três vezes as mesmas regras.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Faixa de título das páginas internas

   Do segundo PDF dela: a arte de nebulosa atravessando a tela, com o nome da
   página por cima. Entra em Notícias, Quem Somos, Contate-nos, Termos,
   Política e Códigos — todas as páginas internas. A home não tem, porque lá
   quem abre a página é o carrossel.
   ---------------------------------------------------------------------- */

.faixa-titulo {
	/*
	 * Sobe por baixo do cabeçalho fixo, e devolve o espaço como recheio.
	 *
	 * É o que faz a arte encostar no topo da tela, como no desenho dela, sem
	 * o título ficar escondido atrás do menu.
	 */
	margin-top: calc(var(--header-h) * -1);
	padding: calc(var(--header-h) + 1.5rem) var(--gutter) 1.5rem;
	min-height: calc(var(--header-h) + clamp(120px, 14vw, 200px));

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* A arte é maior que a faixa de propósito, para ter para onde deslizar.
	   O que passa das bordas fica escondido aqui. */
	overflow: hidden;
	background-color: var(--bg-deep);
}

/*
 * A arte, numa camada própria atrás do título.
 *
 * Ela pediu o fundo se mexendo com a rolagem, como no site da HoYoverse.
 * Antes era 'background-attachment: fixed', que prende a arte à tela: o
 * efeito existe, mas a faixa tem 280px e some antes de a pessoa perceber
 * qualquer movimento. Numa camada separada dá para deslizar a arte de
 * verdade, no ritmo que se quiser, enquanto a faixa passa.
 *
 * 160% de altura com -30% de topo: sobra 30% da altura da faixa para cada
 * lado, que é o quanto o JS desloca. Assim a arte nunca descola e deixa
 * aparecer o fundo por trás.
 *
 * A arte veio em PNG de 2 MB. Em JPEG são 209 KB, sem diferença visível numa
 * textura de estrelas: PNG só compensa em desenho de traço e em
 * transparência, e aqui não há nem um nem outro.
 */
.faixa-titulo::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -30%;
	height: 160%;
	z-index: 0;
	background-image: url('../img/faixa-titulo-sm.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* translate3d, e não 'top': só a composição da camada é refeita a cada
	   quadro, sem o navegador recalcular o layout da página inteira. */
	transform: translate3d(0, var(--desliza, 0px), 0);
}

@media (min-width: 901px) {
	.faixa-titulo::before {
		background-image: url('../img/faixa-titulo.jpg');
	}
}

/*
 * Escurecida em degradê na parte de baixo, aprovada por ela.
 *
 * A faixa é de longe a coisa mais clara do site e fica no topo de toda
 * página; sem isto ela termina num corte seco contra o preto do conteúdo e
 * promete uma página luminosa que o resto não entrega. O degradê faz a
 * passagem, e de quebra segura a leitura de quem tem o título caindo sobre
 * a parte mais clara da nebulosa.
 *
 * Camada própria, e não dentro da arte: a arte desliza com a rolagem, e um
 * degradê que deslizasse junto deixaria de encostar na borda de baixo.
 */
.faixa-titulo::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 62%;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgba(11, 11, 14, 0) 0%,
		rgba(11, 11, 14, 0.45) 45%,
		rgba(11, 11, 14, 0.85) 78%,
		var(--bg) 100%
	);
	pointer-events: none;
}

/*
 * Quem pediu menos movimento no sistema não quer justamente este efeito.
 * A arte fica; só para de deslizar. O JS também não mexe nela — ver ui.js.
 */
@media (prefers-reduced-motion: reduce) {
	.faixa-titulo::before { transform: none; }
}

.faixa-titulo__texto {
	margin: 0;
	/* Acima da arte e da escurecida, que são irmãs dele. */
	position: relative;
	z-index: 2;
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 4.2vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-align: center;
	text-wrap: balance;

	/*
	 * Branco, e não dourado: a faixa já é dourada inteira, e dourado sobre
	 * dourado sumiria. A sombra é o que segura a leitura quando o título cai
	 * sobre a parte mais clara da nebulosa.
	 */
	color: #FFF;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* -------------------------------------------------------------------------
   Respiro das páginas internas

   O título antes vinha aqui, em dourado sobre o preto, com um filete embaixo.
   Saiu: quem abre a página agora é a faixa de nebulosa acima. Sobrou o
   espaçamento.
   ---------------------------------------------------------------------- */

.arquivo,
.pagina,
.post {
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

/* -------------------------------------------------------------------------
   Abas de filtro da listagem
   ---------------------------------------------------------------------- */

.abas {
	margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}

.abas__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0.6rem;
}

.abas__aba {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text-muted);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            background-color var(--speed) var(--ease);
}

.abas__aba:hover,
.abas__aba:focus-visible {
	color: var(--text);
	border-color: var(--aba-cor, var(--gold-deep));
}

/*
 * A aba ativa fica na cor do jogo, e não no dourado.
 *
 * É a mesma lógica das etiquetas e dos pontinhos do carrossel: a cor diz qual
 * jogo está à frente sem precisar ler. E mantém o dourado nas três aplicações
 * combinadas na seção 7 — logo, títulos e botão.
 */
.abas__aba.is-active {
	color: #0B0B0E;
	background: var(--aba-cor, var(--gold));
	border-color: var(--aba-cor, var(--gold));
}

/* -------------------------------------------------------------------------
   Grade da listagem
   ---------------------------------------------------------------------- */

.arquivo__grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(0.85rem, 1.8vw, 1.25rem);
}

@media (min-width: 620px) {
	.arquivo__grade { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
	.arquivo__grade { grid-template-columns: repeat(3, 1fr); }
}

.arquivo__mais {
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
	text-align: center;
}

/* Enquanto busca a próxima leva, o botão avisa que está trabalhando. */
.botao.is-carregando {
	opacity: 0.6;
	pointer-events: none;
}

/*
 * "Fim": ocupa o lugar do "Carregar mais" quando não há mais o que carregar.
 *
 * Bem maior que o botão, a pedido dela — é o ponto final da lista, e ponto
 * final do tamanho de um botão passa despercebido depois de trinta cards.
 * Largo, alto e com as letras bem afastadas, para ler como um aviso e não
 * como mais uma coisa para clicar. Em cinza, e sem reação nenhuma ao mouse,
 * pelo mesmo motivo: o dourado fica para o que de fato leva a algum lugar.
 *
 * O respiro em volta é generoso dos dois lados: colado nos cards pareceria
 * mais um card, e sozinho no meio do vazio pareceria erro de carregamento.
 */
.botao--fim {
	display: flex;
	width: min(100%, 480px);
	margin: clamp(1.25rem, 3.5vw, 2.25rem) auto clamp(1rem, 3vw, 2rem);
	padding: clamp(1.25rem, 3.5vw, 1.9rem) 1.5rem;
	justify-content: center;

	border-color: var(--border-soft);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text-muted);

	font-size: clamp(1.05rem, 2.6vw, 1.4rem);
	letter-spacing: 0.3em;
	/* Compensa o espaçamento largo, que sobra à direita da última letra e
	   desloca a palavra para a esquerda do centro. */
	text-indent: 0.3em;
	cursor: default;
}

.botao--fim:hover,
.botao--fim:focus-visible {
	background: var(--surface);
	border-color: var(--border-soft);
	color: var(--text-muted);
}

.arquivo__vazio {
	margin: clamp(2rem, 5vw, 3rem) 0;
	text-align: center;
	color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   Coluna de leitura

   Estreita de propósito: linha comprida é o que mais cansa em texto longo, e
   Termos e Política são justamente textos longos.
   ---------------------------------------------------------------------- */

.pagina__wrap {
	max-width: 760px;
}

/*
 * A notícia é mais larga que as páginas institucionais.
 *
 * Ela pediu mais largura, e o motivo é a foto: título, capa e corpo agora
 * ocupam a mesma coluna, então alargar a coluna é alargar a arte. 860px dá
 * uma capa bem maior e ainda segura a linha em torno de 95 caracteres, que
 * é o limite de onde ler começa a cansar.
 *
 * Termos e Política continuam em 760: lá é texto longo e sem imagem, e
 * linha comprida cansa mais do que a largura ajuda.
 */
.post__wrap {
	max-width: 860px;
}

.pagina__conteudo,
.post__conteudo {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--text-muted);
}

.pagina__conteudo p,
.post__conteudo p {
	margin: 0 0 1.15rem;
}

.pagina__conteudo h2,
.post__conteudo h2,
.pagina__conteudo h3,
.post__conteudo h3 {
	margin: 2.25rem 0 0.85rem;
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.3;
	color: var(--text);
}

.pagina__conteudo h2,
.post__conteudo h2 { font-size: 1.35rem; }
.pagina__conteudo h3,
.post__conteudo h3 { font-size: 1.1rem; }

.pagina__conteudo a,
.post__conteudo a {
	color: var(--gold-bright);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pagina__conteudo ul,
.post__conteudo ul,
.pagina__conteudo ol,
.post__conteudo ol {
	margin: 0 0 1.15rem;
	padding-left: 1.3rem;
}

.pagina__conteudo li,
.post__conteudo li { margin-bottom: 0.5rem; }

.pagina__conteudo img,
.post__conteudo img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.post__conteudo blockquote {
	margin: 1.5rem 0;
	padding: 0.25rem 0 0.25rem 1.1rem;
	border-left: 2px solid var(--gold-deep);
	color: var(--text);
	font-style: italic;
}

/* -------------------------------------------------------------------------
   Notícia
   ---------------------------------------------------------------------- */

/*
 * A capa dentro da coluna, e não sangrando até as bordas.
 *
 * Era sangrada, e ficava muito mais larga que o título e o texto — foi o
 * desalinhamento que ela apontou. No desenho dela os três têm a mesma
 * largura, e é isso que faz a página parecer uma coisa só.
 */
.post__capa {
	margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--bg-deep);
}

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

.post__cabecalho {
	margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
	text-align: center;
}

.post__cabecalho .etiqueta {
	text-decoration: none;
}

/*
 * Sem 'text-wrap: balance'.
 *
 * O balance reparte as linhas em tamanhos parecidos, o que encurtava a
 * primeira e deixava o título visivelmente mais estreito que a foto logo
 * abaixo. Ela pediu o mesmo alcance de largura, sem mexer no tamanho da
 * fonte — é exatamente o que sai tirando o balance.
 */
.post__titulo {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3.6vw, 2.35rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--text);
}

.post__meta {
	margin: 0.9rem 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--text-muted);
}

.post__meta-sep { color: var(--gold-deep); }

/* -------------------------------------------------------------------------
   Compartilhar
   ---------------------------------------------------------------------- */

.compartilhar {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding-top: clamp(1.5rem, 3.5vw, 2rem);
	border-top: 1px solid var(--border-soft);
	text-align: center;
}

.compartilhar__rotulo {
	margin: 0 0 0.9rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.compartilhar__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 0.6rem;
}

.compartilhar__botao {
	display: grid;
	place-items: center;
	/* 38px, e não 44: ela achou os círculos grandes demais logo abaixo do
	   título. 38 continua acima do mínimo confortável para o dedo. */
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--surface);
	color: var(--text-muted);
	cursor: pointer;
	transition: color var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            background-color var(--speed) var(--ease);
}

/*
 * Medida fixa, e não porcentagem.
 *
 * Com 45% cada ícone saía de um tamanho diferente, porque a proporção do
 * desenho dentro do quadro de 24×24 muda de marca para marca — foi o que ela
 * viu como "tamanhos diferentes dentro dos círculos". Em pixel fixo os cinco
 * ocupam o mesmo espaço.
 */
.compartilhar__botao svg {
	width: 17px;
	height: 17px;
	display: block;
}


.compartilhar__botao:hover,
.compartilhar__botao:focus-visible {
	color: #0B0B0E;
	background: var(--gold);
	border-color: var(--gold-bright);
}

.compartilhar__aviso {
	margin: 0.75rem 0 0;
	min-height: 1.2em; /* reserva a linha: a mensagem não empurra a página */
	font-size: 0.8125rem;
	color: var(--gold-bright);
}

/* -------------------------------------------------------------------------
   Comentários
   ---------------------------------------------------------------------- */

.comentarios {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding-top: clamp(1.5rem, 3.5vw, 2rem);
	border-top: 1px solid var(--border-soft);
}

.comentarios__titulo {
	margin: 0 0 1.25rem;
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--gold);
	text-align: center;
}

.comentarios__aviso {
	color: var(--text-muted);
	text-align: center;
}

/* -------------------------------------------------------------------------
   Selos do Quem Somos
   ---------------------------------------------------------------------- */

.selos {
	margin-top: clamp(2.5rem, 6vw, 3.5rem);
	padding-top: clamp(1.5rem, 3.5vw, 2rem);
	border-top: 1px solid var(--border-soft);
}

.selos__titulo {
	margin: 0 0 1.5rem;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--text);
	text-align: center;
	text-wrap: pretty;
}

.selos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(1rem, 3vw, 1.75rem);
}

.selos__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.7rem;
}

.selos__img {
	width: clamp(110px, 16vw, 160px);
	height: auto;
}

.selos__nome {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   Formulário de contato
   ---------------------------------------------------------------------- */

.formulario {
	margin-top: clamp(2.5rem, 6vw, 3.5rem);
	padding-top: clamp(1.5rem, 3.5vw, 2rem);
	border-top: 1px solid var(--border-soft);
}

.formulario__titulo {
	margin: 0 0 1.5rem;
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--gold);
}

.formulario__campo {
	margin: 0 0 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.formulario__campo label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--text);
}

.formulario__campo input,
.formulario__campo select,
.formulario__campo textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	transition: border-color var(--speed) var(--ease);
}

.formulario__campo textarea {
	resize: vertical;
	min-height: 8rem;
}

/*
 * A setinha do "Assunto", desenhada por nós.
 *
 * Ela reparou que a seta ficava encostada na borda direita, desalinhada de
 * todo o resto do formulário. Não era descuido de CSS: quem desenhava era o
 * próprio navegador, e o desenho dele fica colado na borda, ignorando o
 * recheio do campo. Não dá para reposicionar — só para desligar e pôr o
 * nosso no lugar.
 *
 * É o que 'appearance: none' faz. A seta passa a ser uma imagem de fundo,
 * e aí ela obedece: encostada na mesma linha de 0.9rem onde termina o texto
 * de todos os outros campos.
 *
 * O recheio à direita abre espaço para ela, senão uma opção comprida passa
 * por baixo da seta.
 */
.formulario__campo select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.5rem;
	cursor: pointer;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.75 6 6.25l5-4.5' stroke='%239C9CA8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 12px 8px;
}

/* Some no Internet Explorer e no Edge antigo, que desenham a sua própria
   seta por cima da nossa. */
.formulario__campo select::-ms-expand {
	display: none;
}

.formulario__campo input:focus,
.formulario__campo select:focus,
.formulario__campo textarea:focus {
	outline: none;
	border-color: var(--gold-deep);
}

/* O campo-armadilha some para gente e continua existindo para robô. Fora da
   tela em vez de display:none — robô esperto ignora o que está escondido. */
.formulario__armadilha {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.formulario__acao {
	margin: 1.5rem 0 0;
}

.formulario__nota {
	margin: 1.1rem 0 0;
	font-size: 0.8125rem;
	color: var(--text-muted);
}

.formulario__nota a {
	color: var(--gold-bright);
	text-underline-offset: 3px;
}

.formulario__aviso {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	font-size: 0.9375rem;
}

.formulario__aviso--ok {
	border-color: var(--gold-deep);
	color: var(--gold-bright);
	background: rgba(212, 175, 55, 0.07);
}

.formulario__aviso--erro {
	border-color: #E8617D;
	color: #F0919F;
	background: rgba(232, 97, 125, 0.08);
}

/*
 * Contador de caracteres da mensagem, visível desde a primeira letra.
 *
 * Discreto de propósito: fica embaixo do canto direito do campo, pequeno e
 * em cinza. É informação de apoio para quem procurar, não algo que dispute
 * atenção com o que a pessoa está escrevendo. Só ganha cor perto do fim.
 *
 * Tabular-nums trava a largura dos algarismos: sem isso o contador balança
 * para os lados a cada tecla, porque o "1" é mais estreito que o "8".
 */
.formulario__contador {
	align-self: flex-end;
	margin-top: 0.35rem;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
	transition: color var(--speed) var(--ease);
}

.formulario__contador.is-perto {
	color: var(--gold-bright);
}

.formulario__contador.is-no-limite {
	color: var(--gold);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Voltar para a listagem
   ---------------------------------------------------------------------- */

.post__voltar {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text-muted);
	transition: color var(--speed) var(--ease);
}

.post__voltar svg {
	width: 8px;
	height: 12px;
	flex: none;
	transition: transform var(--speed) var(--ease);
}

.post__voltar:hover {
	color: var(--gold-bright);
}

.post__voltar:hover svg {
	transform: translateX(-3px);
}

/* -------------------------------------------------------------------------
   Anterior e próxima

   Duas colunas em tela larga, empilhadas no celular. O título da postagem
   vizinha aparece junto da seta — sugestão aprovada por ela: só "anterior" e
   "próxima" obriga a pessoa a adivinhar para que lado cada uma leva.
   ---------------------------------------------------------------------- */

.navega-post {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin-top: clamp(2rem, 5vw, 3rem);
	padding-top: clamp(1.5rem, 3.5vw, 2rem);
	border-top: 1px solid var(--border-soft);
}

@media (min-width: 620px) {
	.navega-post { grid-template-columns: 1fr 1fr; }
}

.navega-post__item {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: clamp(0.9rem, 2.2vw, 1.15rem);
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: border-color var(--speed) var(--ease);
}

a.navega-post__item:hover {
	border-color: var(--border);
}

.navega-post__rotulo {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-bright);
}

.navega-post__rotulo svg {
	width: 8px;
	height: 12px;
	flex: none;
}

.navega-post__titulo {
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--text);
	/* Duas linhas no máximo: título comprido não pode fazer um lado ficar do
	   dobro da altura do outro. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* A "próxima" espelha: seta à direita e texto alinhado ao fim. */
.navega-post__item--proxima { text-align: right; }
.navega-post__item--proxima .navega-post__rotulo { flex-direction: row-reverse; }
.navega-post__item--proxima .navega-post__rotulo svg { transform: rotate(180deg); }

/* Sem vizinho deste lado. Continua ocupando o lugar, para a que sobrou não
   mudar de posição — ela pediu "levemente apagada", não sumida. */
.navega-post__item.is-apagado {
	opacity: 0.4;
}

.navega-post__item.is-apagado .navega-post__titulo {
	color: var(--text-muted);
	font-style: italic;
}

/* -------------------------------------------------------------------------
   Mais Acessados

   Quatro notícias da semana, no fim da notícia aberta. Duas colunas em vez
   das três da listagem: aqui a coluna de leitura é estreita, e três cards
   nela sairiam pequenos demais para a capa valer alguma coisa.
   ---------------------------------------------------------------------- */

.mais-acessados {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding-top: clamp(1.5rem, 3.5vw, 2rem);
	border-top: 1px solid var(--border-soft);
}

/* Mesmo tamanho e mesma posição do título de "Comentários", logo abaixo —
   pedido dela, e dois títulos irmãos na mesma tela pedem o mesmo peso. */
.mais-acessados__titulo {
	margin: 0 0 1.25rem;
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--gold);
	text-align: center;
}

/*
 * Os quatro cabem numa linha só, a pedido dela.
 *
 * São cards menores que os da listagem — numa coluna de 860px, quatro dão
 * cerca de 200px cada. Não é para ler, é para reconhecer a capa e o título,
 * então o tamanho serve.
 *
 * Duas colunas no tablet e uma no celular: 200px já é o mínimo do card, e
 * espremer quatro numa tela de 390px daria 85px cada.
 */
.mais-acessados__grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(0.6rem, 1.4vw, 0.9rem);
}

@media (min-width: 480px) {
	.mais-acessados__grade { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 780px) {
	.mais-acessados__grade { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================================
   ESTILOS DO CORPO DA POSTAGEM

   O que ela listou no PDF da página de postagem padrão: títulos de todos os
   tamanhos, listas numeradas, listas com o losango, tabelas, divisórias,
   citação com a barra dourada, código e foto com legenda.

   Valem para a notícia e para o guia, que usam a mesma classe.
   ========================================================================= */

.post__conteudo h4 {
	margin: 1.75rem 0 0.65rem;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--gold-bright);
}

/*
 * O losango no lugar da bolinha, que foi o marcador que ela escolheu.
 *
 * Desenhado em CSS e não com o caractere ◆ solto no texto: assim ele não é
 * copiado junto quando alguém seleciona a lista, e o leitor de tela não
 * anuncia "losango preto" antes de cada item.
 */
.post__conteudo ul {
	list-style: none;
	padding-left: 0;
}

.post__conteudo ul > li {
	position: relative;
	padding-left: 1.4rem;
}

.post__conteudo ul > li::before {
	content: '';
	position: absolute;
	left: 0.2rem;
	top: 0.68em;
	width: 6px;
	height: 6px;
	background: var(--gold);
	transform: rotate(45deg);
}

/* Números em dourado, para a lista numerada ter o mesmo peso da de losangos. */
.post__conteudo ol {
	list-style: none;
	counter-reset: teyvat-lista;
	padding-left: 0;
}

.post__conteudo ol > li {
	position: relative;
	padding-left: 1.9rem;
	counter-increment: teyvat-lista;
}

.post__conteudo ol > li::before {
	content: counter(teyvat-lista) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--gold);
}

/* -------------------------------------------------------------------------
   Tabelas

   Rolam sozinhas em tela estreita: uma tabela de quatro colunas num celular
   ou estoura a página ou fica ilegível, e rolar de lado é o mal menor.
   ---------------------------------------------------------------------- */

.post__conteudo table {
	display: block;
	overflow-x: auto;
	width: 100%;
	margin: 1.5rem 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

/*
 * O editor de blocos embrulha a tabela num <figure>.
 *
 * Sem isto o respiro do figure e o da tabela se somam, e uma tabela fica com
 * o dobro de ar em volta de todo o resto do texto. Quem manda é o figure, que
 * é quem tambem carrega a legenda quando ela usa uma.
 */
.post__conteudo .wp-block-table > table {
	margin: 0;
}

.post__conteudo th,
.post__conteudo td {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--border-soft);
	text-align: left;
	vertical-align: top;
}

.post__conteudo th {
	background: var(--surface);
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--gold-bright);
	white-space: nowrap;
}

/* Linhas alternadas: numa tabela larga é o que impede o olho de pular de
   linha no meio do caminho. */
.post__conteudo tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.02);
}

/* -------------------------------------------------------------------------
   Divisória
   ---------------------------------------------------------------------- */

/*
 * Uma fileira de losangos, cheios e vazados alternados, atravessando a
 * largura do texto. Pedido dela, com referência: substituiu o filete curto
 * que estava aqui antes.
 *
 * Desenhada como máscara, e não como imagem de fundo, por um motivo prático:
 * dentro de um data URI não dá para usar as variáveis de cor do tema. Com
 * máscara, o SVG só recorta a forma e quem pinta é o background-color — então
 * a divisória continua obedecendo o dourado da seção 7 como todo o resto.
 *
 * O ladrilho tem dois losangos, um cheio e um vazado, e se repete de lado.
 * Assim a quantidade se ajusta sozinha à largura: mais losangos no computador,
 * menos no celular, sem nenhum corte pela metade porque o ladrilho é centrado.
 */
.post__conteudo hr {
	width: 100%;
	height: 12px;
	margin: 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;
}

/*
 * O ladrilho: losango cheio em 20, vazado em 60, dos 80 do compasso.
 *
 * Fica numa variável porque a mesma fileira serve a divisória do texto e a
 * que fecha o corpo das páginas — e um dia que ela peça losango maior, é um
 * lugar só para mexer.
 */
.post__conteudo,
.fim-do-corpo {
	--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>');
}

/* -------------------------------------------------------------------------
   Código
   ---------------------------------------------------------------------- */

.post__conteudo code {
	padding: 0.15em 0.4em;
	background: var(--bg-deep);
	border: 1px solid var(--border-soft);
	border-radius: 4px;
	font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
	font-size: 0.875em;
	color: var(--gold-bright);
}

.post__conteudo pre {
	margin: 1.5rem 0;
	padding: 1rem 1.1rem;
	overflow-x: auto;
	background: var(--bg-deep);
	border: 1px solid var(--border-soft);
	border-left: 3px solid var(--gold-deep);
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	line-height: 1.65;
}

/* Dentro do bloco o código não repete a moldura do código solto. */
.post__conteudo pre code {
	padding: 0;
	background: none;
	border: 0;
	color: var(--text);
}

/* -------------------------------------------------------------------------
   Foto com legenda
   ---------------------------------------------------------------------- */

.post__conteudo figure {
	margin: 1.75rem 0;
}

/* "Deixar a legenda da foto pequena, nao muito", pediu ela — pequena o
   bastante para não competir com o texto, grande o bastante para ler. */
.post__conteudo figcaption,
.post__conteudo .wp-caption-text {
	margin-top: 0.6rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: center;
	color: var(--text-muted);
	font-style: italic;
}


/* -------------------------------------------------------------------------
   GALERIA DE FOTOS DENTRO DA POSTAGEM

   "Quando tiver muitas fotos específicas pra pôr tudo junto", pediu ela, para
   as postagens de notícia — nas guias ela vai continuar pondo uma embaixo da
   outra.

   Não é bloco novo nem plugin: é o bloco Galeria do próprio WordPress, que ela
   já tem no editor. O tema só troca a grade que quebra linha por uma fileira
   que corre para o lado.

   Altura igual e largura natural, de propósito. Arte oficial vem deitada e em
   pé no mesmo lote; recortar tudo num quadrado igual estragaria justamente as
   verticais, que são as splash arts. Assim nenhuma foto é cortada — o que
   varia é a largura de cada uma.
   ---------------------------------------------------------------------- */

.post__conteudo .wp-block-gallery.has-nested-images {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.6rem;
	margin: 1.75rem 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	/* 'proximity' e não 'mandatory': com fotos de larguras diferentes o
	   mandatory briga com o dedo de quem arrasta devagar. */
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--gold-deep) transparent;
}

/*
 * Os !important daqui não são desleixo.
 *
 * A folha do bloco Galeria do WordPress escreve os seletores dela como
 * "figure.wp-block-image:not(#individual-image)" — um :not() com id dentro,
 * só para inflar a especificidade — e ainda marca o max-width das imagens com
 * !important. Nenhum seletor normal de tema passa por cima disso. Ou se copia
 * o truque do id, que ninguém entende seis meses depois, ou se assume o
 * !important e se explica o porquê, que é o que está sendo feito aqui.
 *
 * São três coisas a desfazer: a largura em porcentagem (que faz duas colunas),
 * o recorte quadrado do "is-cropped" e o esticar da imagem dentro do quadro.
 */
.post__conteudo .wp-block-gallery.has-nested-images > figure.wp-block-image {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none;
	margin: 0;
	/* A altura é igual para todas; a largura sai da proporção de cada foto. */
	height: clamp(150px, 20vw, 230px);
	scroll-snap-align: start;
}

.post__conteudo .wp-block-gallery.has-nested-images > figure.wp-block-image img {
	width: auto !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain !important;
	flex: none !important;
	border-radius: var(--radius-sm);
}

/*
 * A legenda da galeria inteira sai da fileira e vai para debaixo dela.
 *
 * O WordPress a deixa como último item do mesmo <figure> que rola, ou seja,
 * só apareceria para quem chegasse ao fim das fotos. Quem a tira de lá é o
 * galeria.js; aqui ela ganha o mesmo tratamento da legenda de foto solta.
 */
.galeria > figcaption {
	margin-top: 0.6rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: center;
	color: var(--text-muted);
	font-style: italic;
}

/* Sem JavaScript ela fica onde o WordPress a deixou, no fim da fileira; para
   não esticar a rolagem, pelo menos não encolhe nem cresce. */
.post__conteudo .wp-block-gallery > figcaption {
	flex: none;
	align-self: center;
}

/* Barra de rolagem discreta no Chrome e no Edge, que ignoram scrollbar-color. */
.post__conteudo .wp-block-gallery::-webkit-scrollbar {
	height: 6px;
}

.post__conteudo .wp-block-gallery::-webkit-scrollbar-thumb {
	background: var(--gold-deep);
	border-radius: 3px;
}


/* -------------------------------------------------------------------------
   As setas

   Só existem quando o JavaScript embrulha a galeria, e só aparecem quando há
   o que rolar. Ver assets/js/galeria.js.
   ---------------------------------------------------------------------- */

.galeria {
	position: relative;
}

.galeria__seta {
	position: absolute;
	top: calc(50% - 22px); /* meia altura da seta, descontando a legenda */
	z-index: 2;
	display: none;
	place-items: center;
	width: 36px;
	height: 44px;
	padding: 0;
	background: rgba(11, 11, 14, 0.82);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--gold-bright);
	cursor: pointer;
	transition: background-color var(--speed) var(--ease),
	            color var(--speed) var(--ease);
}

/* A classe entra pelo JS quando a fileira transborda. */
.galeria.tem-setas .galeria__seta {
	display: grid;
}

/* [hidden] vence a regra de cima pela folha global: a seta que não leva a
   lugar nenhum some em vez de ficar apagada. */

.galeria__seta svg {
	width: 10px;
	height: 16px;
}

.galeria__seta--anterior {
	left: 0.5rem;
	transform: rotate(180deg);
}

.galeria__seta--proxima {
	right: 0.5rem;
}

.galeria__seta:hover,
.galeria__seta:focus-visible {
	background: var(--gold);
	color: #0B0B0E;
}

/* No celular a seta atrapalha mais do que ajuda: lá se arrasta com o dedo. */
@media (max-width: 700px) {
	.galeria.tem-setas .galeria__seta {
		display: none;
	}
}


/* -------------------------------------------------------------------------
   Vídeo do YouTube dentro da postagem

   Ela cola o endereço do vídeo numa linha sozinha e o WordPress troca por um
   quadro do YouTube. O que faltava era o quadro caber: ele vem com largura e
   altura fixas em pixels, do tamanho que o YouTube achou bom, e num celular
   isso vaza para fora da tela e cria rolagem lateral na página inteira.

   A proporção é fixada em 16:9 e a largura passa a ser a da coluna de texto,
   seja ela qual for. Vale para o Vimeo e para qualquer outro que ela use um
   dia, porque a regra pega o quadro e não o site de onde ele veio.
   ---------------------------------------------------------------------- */

.conteudo .wp-block-embed__wrapper,
.conteudo .wp-video,
.conteudo .video-incorporado {
	position: relative;
	margin: clamp(1.5rem, 3vw, 2rem) 0;
}

.conteudo iframe[src*="youtube"],
.conteudo iframe[src*="youtu.be"],
.conteudo iframe[src*="vimeo"],
.conteudo .wp-block-embed__wrapper > iframe,
.conteudo .video-incorporado > iframe {
	display: block;
	width: 100%;
	height: auto;
	/* aspect-ratio faz o trabalho que antes pedia aquele truque de caixa com
	   padding-bottom de 56,25%. Todo navegador atual entende. */
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius-sm);
	/* O quadro do YouTube é preto e a página também: sem contorno ele parece
	   um buraco na postagem antes de o vídeo carregar. */
	background: var(--bg-deep);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* O título que o WordPress às vezes põe embaixo do vídeo. */
.conteudo .wp-block-embed figcaption {
	margin-top: 0.6rem;
	color: var(--text-muted);
	font-size: 0.875rem;
	text-align: center;
}


/* -------------------------------------------------------------------------
   O card de código solto na postagem

   Vem do atalho [codigo], que ela escreve no meio do texto. O card é o mesmo
   da Central; o que muda aqui é só o espaço em volta dele e a largura, que
   na Central é uma grade de três colunas e aqui é um card só.
   ---------------------------------------------------------------------- */

.codigo-atalho {
	margin: clamp(1.5rem, 3vw, 2rem) auto;
}

.codigos__lista--solta {
	/*
	 * Um card por linha, e não a escada da Central.
	 *
	 * A grade lá se ajusta ao número de códigos; aqui é sempre um. Deixar a
	 * regra da Central valendo faria o card esticar até a largura inteira do
	 * texto e ficar com o código perdido no meio de um campo vazio.
	 */
	grid-template-columns: minmax(0, 420px);
	justify-content: center;
}

.codigo-atalho__aviso {
	margin: 1rem auto;
	padding: 0.75rem 1rem;
	border: 1px dashed var(--gold);
	border-radius: var(--radius-sm);
	color: var(--gold-bright);
	font-size: 0.9375rem;
	text-align: center;
}


/* -------------------------------------------------------------------------
   Caixa de ampliação das imagens

   Serve a guia e a postagem. Estava em guia.css enquanto só a guia ampliava;
   mudou para cá quando ela pediu o mesmo nas postagens, porque guia.css não
   é carregado numa notícia e o diálogo abria branco, sem fundo escuro.
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Caixa de ampliação
   ---------------------------------------------------------------------- */

.lupa {
	width: min(96vw, 1400px);
	max-width: none;
	max-height: 94vh;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	overflow: visible;
}

.lupa::backdrop {
	background: rgba(7, 7, 10, 0.92);
}

.lupa__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 94vh;
	object-fit: contain;
	border-radius: var(--radius);
}

/*
 * A legenda embaixo da foto ampliada.
 *
 * É onde ela vai pôr os créditos das imagens, então precisa ser legível sem
 * competir com a foto. Fundo próprio, e não texto solto sobre o escuro: a
 * ampliação pode terminar numa parte clara da imagem e o crédito sumiria.
 */
.lupa__legenda {
	margin: 0;
	padding: 0.7rem 1rem;
	border-radius: 0 0 var(--radius) var(--radius);
	background: rgba(7, 7, 10, 0.9);
	color: var(--text-muted);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
}

.lupa__legenda[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
   Andar pelo carrossel de dentro da ampliação

   Ela pediu para o carrossel abrir inteiro, e não foto a foto. As setas só
   aparecem quando há para onde ir; na foto solta ficam escondidas.
   ---------------------------------------------------------------------- */

.lupa__seta {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 999px;
	/* Escuro e opaco: a seta fica por cima da foto, que pode ser clara. */
	background: rgba(7, 7, 10, 0.72);
	color: var(--text);
	cursor: pointer;
	transition: background-color var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            color var(--speed) var(--ease);
}

/*
 * Por dentro da foto, e não para fora dela.
 *
 * A primeira tentativa pôs as setas do lado de fora, achando que sobrava
 * espaço no computador. Não sobra: a caixa tem 96vw, então restam 2% de cada
 * lado — uns 20px numa tela de 1000. As setas ficavam cortadas pela borda da
 * janela em qualquer largura, e eu só vi na foto da tela.
 */
.lupa__seta--antes  { left: 10px; }
.lupa__seta--depois { right: 10px; }

.lupa__seta svg {
	width: 22px;
	height: 22px;
}

.lupa__seta:hover,
.lupa__seta:focus-visible {
	background: rgba(7, 7, 10, 0.92);
	border-color: var(--gold);
	color: var(--gold-bright);
}

.lupa__seta[hidden] {
	display: none;
}

/* "2 de 5", discreto, logo abaixo da foto. */
.lupa__conta {
	margin: 0.6rem 0 0;
	color: var(--text-muted);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-align: center;
}

.lupa__conta[hidden] {
	display: none;
}

/*
 * A imagem do texto que abre ampliada avisa que dá para clicar.
 *
 * Só quem tem o atributo: a marcação é feita no PHP e pula as imagens
 * pequenas demais para valer a pena ampliar — ver inc/lupa.php. Sem esta
 * regra o cursor prometeria em toda foto, inclusive nas que não abrem.
 */
.post__conteudo img[data-teyvat-abrir] {
	cursor: zoom-in;
}

.lupa__fechar {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--text);
	cursor: pointer;
	transition: background-color var(--speed) var(--ease),
	            color var(--speed) var(--ease);
}

.lupa__fechar svg {
	width: 16px;
	height: 16px;
}

.lupa__fechar:hover {
	background: var(--gold);
	color: #0B0B0E;
}

/*
 * Alinhamento do editor de blocos.
 *
 * Faltava, e ela topou com isso sozinha: "coloco os Títulos pra centralizar e
 * eles sempre ficam a esquerda". Não era ela. O editor marcava a escolha na
 * classe has-text-align-center, e o tema não tinha regra nenhuma lendo essa
 * classe — então a marcação chegava certa e o CSS ignorava.
 *
 * Vale para título, parágrafo, lista e citação, no guia e na postagem.
 */
.post__conteudo .has-text-align-center {
	text-align: center;
}

.post__conteudo .has-text-align-right {
	text-align: right;
}

.post__conteudo .has-text-align-left {
	text-align: left;
}

/* Imagem centralizada: o bloco vira uma coluna centrada, não texto centrado. */
.post__conteudo .aligncenter {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.post__conteudo figure.aligncenter img,
.post__conteudo .wp-block-image.aligncenter img {
	margin-right: auto;
	margin-left: auto;
}

/*
 * Imagem à esquerda ou à direita com o texto correndo ao lado. Só a partir do
 * tablet: num celular, texto ao lado de imagem vira duas colunas de três
 * palavras.
 */
@media (min-width: 700px) {

	.post__conteudo .alignleft {
		float: left;
		margin: 0.35rem 1.25rem 1rem 0;
		max-width: 50%;
	}

	.post__conteudo .alignright {
		float: right;
		margin: 0.35rem 0 1rem 1.25rem;
		max-width: 50%;
	}
}