/* =====================================================================
   O CONVITE DE CADASTRO , "Gosta de jogos indie?"
   (partials/convite-cadastro.php + assets/js/convite.js)

   Arquivo próprio (regra da casa) e só com tokens de :root do style.css
   (CONTRATO §7): nenhuma cor literal mora aqui.

   O desenho é o do rascunho do dono: à esquerda o título, o complemento e
   as artes dos jogos; à direita os campos. No celular vira uma coluna só.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. A cortina

   O <dialog> ocupa a janela inteira e É a cortina escura. Não se usa o
   ::backdrop nativo de propósito: até 2024 ele não herdava variáveis de
   :root em parte dos navegadores, e a cortina sairia transparente sem
   erro nenhum.

   `display` só é declarado em [open]. Declarado na classe, ele ganharia
   do `dialog:not([open]) { display: none }` do navegador, e o convite
   fechado ficaria por cima da página inteira, invisível e comendo clique.
   ------------------------------------------------------------------ */

.ng-convite {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: clamp(12px, 4vw, 40px);
	border: 0;
	background: var(--ng-veu);
	color: var(--ng-tinta);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--ng-transicao);
}

.ng-convite[open] { display: flex; }

/* E fechado ele some POR CONTA PRÓPRIA, sem contar com o navegador. Onde
   <dialog> é um elemento desconhecido (iPhone e iPad até o iOS 15.3, Firefox
   até o 97) a regra `dialog:not([open])` do navegador não existe: sobrava só
   o bloco fixo de cima, do tamanho da janela e transparente, e NENHUM link do
   site abaixo do cabeçalho respondia a clique. Medido na revisão, com o
   elemento trocado por um desconhecido: 60 links conferidos, zero alcançáveis.
   O script não ajudava: nesses navegadores ele sai antes de fazer qualquer
   coisa. */
.ng-convite:not([open]) { display: none; }
.ng-convite.is-aberta { opacity: 1; }
.ng-convite::backdrop { background: transparent; }

/* O anel de foco global ficaria em volta da janela inteira. Quem recebe o
   foco aqui é o próprio diálogo só no celular, onde não há anel de teclado
   a mostrar; os campos e botões de dentro continuam com o anel deles. */
.ng-convite:focus,
.ng-convite:focus-visible { outline: 0; }

/* ---------------------------------------------------------------------
   2. O cartão

   `margin: auto` num filho de flex centraliza quando sobra espaço e encosta
   no topo quando falta. Com `place-items: center` um cartão mais alto que
   a tela teria o topo cortado e inalcançável pela rolagem.
   ------------------------------------------------------------------ */

.ng-convite__caixa {
	position: relative;
	display: grid;
	gap: clamp(20px, 3vw, 40px);
	width: 100%;
	/* Em rem, e não em px: acima de 2560px de largura o style.css aumenta a
	   base do texto, e um cartão preso em 1000px virava duas colunas
	   espremidas. Abaixo disso o rem vale 16px e são os mesmos 1000px. */
	max-width: 62.5rem;
	margin: auto;
	padding: clamp(22px, 4vw, 48px);
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda-forte);
	border-radius: var(--ng-raio-lg);
	box-shadow: var(--ng-sombra-forte);
	transform: translateY(14px);
	transition: transform var(--ng-transicao-lenta);
}

.ng-convite.is-aberta .ng-convite__caixa { transform: none; }

@media (min-width: 820px) {
	.ng-convite__caixa {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: center;
	}

	/* Sem arte nenhuma (catálogo vazio) a coluna da esquerda fica só com o
	   texto; alinhar pelo topo evita o título boiando no meio do cartão. */
	.ng-convite__caixa--sem-arte { align-items: start; }
}

.ng-convite__fechar {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ng-borda-forte);
	border-radius: var(--ng-raio-pill);
	background: var(--ng-fundo);
	color: var(--ng-tinta);
	transition: border-color var(--ng-transicao), color var(--ng-transicao);
}

.ng-convite__fechar:hover {
	border-color: var(--ng-destaque);
	color: var(--ng-branco);
}

/* ---------------------------------------------------------------------
   3. A chamada , título, complemento e as artes
   ------------------------------------------------------------------ */

.ng-convite__chamada {
	display: grid;
	gap: clamp(12px, 1.6vw, 18px);
	min-width: 0;
}

/* Os dois filhos da grade podem ENCOLHER. Filho de grade nasce com largura
   mínima igual à da maior palavra, e em japonês (onde a frase é inquebrável,
   seção 7) isso deixava a coluna mais larga que o cartão abaixo de 353px: a
   última letra do título ia parar debaixo do X e o texto saía pela borda. */
.ng-convite__titulo,
.ng-convite__texto { min-width: 0; }

/* Oswald e caixa alta já vêm do h2 global; aqui só o tamanho e a cor da
   marca. O respiro à direita é o do botão de fechar, que fica por cima. */
.ng-convite__titulo {
	padding-right: 48px;
	color: var(--ng-destaque);
	font-size: clamp(2rem, 1.1rem + 3.6vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	/* Linhas de tamanho parecido: sem isto o fim da pergunta sobrava sozinho na
	   segunda linha ("吗？" em chinês, "か？" em japonês). */
	text-wrap: balance;
}

/* No celular é o título que recebe o foco ao abrir (ver convite.js). Ele não é
   um controle, então o anel de foco global em volta dele só confundiria. */
.ng-convite__titulo:focus,
.ng-convite__titulo:focus-visible { outline: 0; }

.ng-convite__texto {
	max-width: 36ch;
	/* Linhas de tamanho parecido: sem isto "e-mail" quebrava no hífen e sobrava
	   "mail." sozinho na última linha do celular. */
	text-wrap: balance;
	color: var(--ng-tinta);
	font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
	line-height: 1.55;
}

/* A moldura tem a proporção da própria arte (a cápsula 616×353 da Steam):
   em qualquer outra, o `cover` corta as bordas e come letra do nome do
   jogo, que vem desenhado na arte. */
.ng-convite__palco {
	position: relative;
	aspect-ratio: 616 / 353;
	overflow: hidden;
	border: 1px solid var(--ng-borda);
	border-radius: var(--ng-raio);
	background: var(--ng-fundo-3);
}

/* Empilhadas, e só a da vez é opaca. Quem troca a vez é o script, por classe
   e não por @keyframes: o style.css zera toda animação sob "reduzir
   movimento", e a troca congelaria na primeira arte. */
.ng-convite__arte {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--ng-transicao-lenta);
}

.ng-convite__arte.is-ativa { opacity: 1; }

/* ---------------------------------------------------------------------
   4. O formulário

   Classes próprias, e não as `.ng-cad__*`: aquelas moram em cadastro.css,
   que só entra na página de cadastro.
   ------------------------------------------------------------------ */

.ng-convite__form {
	display: grid;
	gap: 16px;
	min-width: 0;
}

.ng-convite__campo {
	display: grid;
	gap: 8px;
}

.ng-convite__rotulo {
	color: var(--ng-branco);
	font-family: var(--ng-titulo);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
}

.ng-convite__entrada {
	width: 100%;
	min-width: 0;
	padding: 13px 16px;
	border: 1.5px solid var(--ng-borda-forte);
	border-radius: var(--ng-raio-sm);
	background: var(--ng-fundo);
	color: var(--ng-tinta);
	font-family: var(--ng-corpo);
	font-size: 1rem;
}

.ng-convite__entrada:focus-visible {
	outline: 0;
	border-color: var(--ng-destaque);
	box-shadow: var(--ng-sombra-foco);
}

.ng-convite__aceite {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--ng-tinta);
	font-size: .92rem;
	line-height: 1.5;
	cursor: pointer;
}

.ng-convite__aceite input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--ng-destaque);
	cursor: pointer;
}

.ng-convite__nota {
	color: var(--ng-tinta-fraca);
	font-size: .8rem;
	line-height: 1.5;
}

.ng-convite__nota a { text-decoration: underline; }

/* honeypot: fora da tela, NUNCA display:none (robô sabe pular campo
   escondido assim). */
.ng-convite__mel {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------
   5. Tela estreita , uma coluna, e a arte encolhe antes de o formulário
      precisar de rolagem
   ------------------------------------------------------------------ */

/* A moldura fica MENOR, e não mais achatada: a proporção continua a da arte.
   Achatada (5/2) ela cortava 30% da altura, e em 3 das 8 artes medidas o nome
   do jogo perdia letra. Com 70% da largura a altura é a mesma de antes, então
   nada do que cabia sem rolagem passa a rolar. */
@media (max-width: 819px) {
	.ng-convite__palco {
		width: 70%;
		justify-self: center;
	}
}

@media (max-width: 819px) and (max-height: 720px) {
	.ng-convite__palco { display: none; }
}

/* ---------------------------------------------------------------------
   6. A faixa do celular

   No celular o convite chega como uma faixa pequena no pé da tela, e o
   formulário só abre se a pessoa tocar. Sem `[hidden] { display: none }`
   o `display: flex` da classe ganharia do atributo e a faixa nasceria
   visível em toda página.
   ------------------------------------------------------------------ */

.ng-convite-faixa[hidden] { display: none; }

.ng-convite-faixa {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 10px 10px 16px;
	border: 1px solid var(--ng-borda-forte);
	border-radius: var(--ng-raio);
	background: var(--ng-flutuante-2);
	box-shadow: var(--ng-sombra-forte);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--ng-transicao), transform var(--ng-transicao);
}

.ng-convite-faixa.is-visivel {
	opacity: 1;
	transform: none;
}

.ng-convite-faixa__texto {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ng-branco);
	font-family: var(--ng-titulo);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 1.2;
	text-transform: uppercase;
	text-wrap: balance;
}

.ng-convite-faixa .ng-botao {
	flex: 0 0 auto;
	/* O mesmo alvo de toque do X ao lado (o botão pequeno do tema tem 34px). */
	min-height: 44px;
}

/* Tela de 320 a 359px: o botão não encolhe, e sobravam 42px para o título, que
   se partia letra a letra. Medido: em espanhol a faixa chegava a 31% da tela.
   Aqui o título ganha a linha de cima inteira; a faixa fica com 95px em todos
   os idiomas. */
@media (max-width: 359px) {
	.ng-convite-faixa { flex-wrap: wrap; }
	.ng-convite-faixa__texto { flex-basis: 100%; }
	.ng-convite-faixa .ng-botao { flex: 1 1 auto; }
}

.ng-convite-faixa__fechar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ng-raio-pill);
	color: var(--ng-tinta-fraca);
}

.ng-convite-faixa__fechar:hover { color: var(--ng-branco); }

/* A faixa é fixa no pé da tela: no fim da página ela cobria a última fileira
   do rodapé (os ícones de rede), e não havia mais para onde rolar. Enquanto
   ela está na tela o rodapé ganha um respiro do tamanho dela. Onde :has() não
   existe a regra é ignorada e fica como era. (.ng-rodape é de componentes.css;
   a regra mora aqui porque só existe por causa da faixa.) */
body:has(> .ng-convite-faixa.is-visivel) .ng-rodape {
	padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------------
   7. Idiomas que não separam as palavras com espaço

   O tamanho do título foi pensado para a Oswald, que é estreita. Em japonês
   cada letra ocupa um quadrado inteiro: cabiam seis por linha, e a palavra
   "jogo" (ゲーム) era partida no meio. Em coreano a quebra caía dentro da
   palavra, o que lá não se faz. Medido com as frases de verdade.
   ------------------------------------------------------------------ */

:lang(ko) .ng-convite,
:lang(ko) .ng-convite-faixa { word-break: keep-all; }

:lang(ja) .ng-convite,
:lang(ja) .ng-convite-faixa {
	word-break: auto-phrase;
	line-break: strict;
}

:lang(ja) .ng-convite__titulo {
	font-size: clamp(1.6rem, .5rem + 3vw, 2.75rem);
	line-height: 1.15;
}

/* Título em maiúsculas com acento ou sinal acima da linha: com a entrelinha
   justa do tema (1), o acento do "É" de "INDÉS" encostava na letra de cima
   (o "S" de "LES" lia-se "Ş"), e o "¿" do espanhol ficava a meio pixel do "J"
   de baixo. Medido na Oswald: 1.15 deixa 3,9px de folga. Só nos dois idiomas
   em que isso acontece; nos outros o título continua como foi desenhado. */
:lang(fr) .ng-convite__titulo,
:lang(es) .ng-convite__titulo { line-height: 1.15; }