/* Inscrição: a página que cobra.

   Herda de base.css os tokens, o botão e a etiqueta, e nada mais: esta página
   não tem seção, régua nem card de prontuário. A gramática é a mesma da ficha
   do curso, rótulo em versalete tracked acima do valor e fio de 1px separando
   campo de campo, mas a composição é outra: a linha de status deixa de
   perseguir a leitura no pé da tela e assume o topo da página, onde sustenta a
   inscrição inteira.

   O casco da página (o cabeçalho fino e o rodapé de socorro) vale também para a
   confirmação, e por isso esta folha carrega nos dois estados. O revestimento do
   bloco de checkout do WooCommerce mora em checkout-bloco.css, e a via do aluno
   em confirmacao.css: as duas se excluem, e nenhuma das duas precisa da outra. */

:root {
	--altura-espinha: 88px;
	--altura-marca: 64px;
}

/* O casco

   A inscrição tem três estados, e dois deles são curtos: o aviso de que não há
   turma no carrinho e a via de quem já pagou. Sem a altura da janela, o rodapé
   de socorro para no meio da tela e o branco embaixo dele lê como página que não
   terminou de carregar. */
body:has(.conteudo--inscricao) {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

/* O cinza é do casco, e não de cada estado: os três terminam em alturas
   diferentes, e a folga que sobra até o rodapé precisa continuar sendo página. */
.conteudo--inscricao {
	flex: 1;
	background: var(--papel-alt);
}

/* Cabeçalho fino */

.marca-fina {
	background: var(--papel);
	border-bottom: 1px solid var(--linha);
}

.marca-fina__interior {
	display: flex;
	gap: var(--e4);
	align-items: center;
	justify-content: space-between;
	width: min(100% - 2.5rem, var(--largura-maxima));
	height: var(--altura-marca);
	margin-inline: auto;
}

.marca-fina__logo {
	width: auto;
	height: 38px;
}

/* O selo fica em corpo pequeno: quem procura por ele já sabe o que procura, e
   quem não procura não precisa que a linha dispute com a marca. */
.marca-fina__selo {
	display: flex;
	gap: var(--e2);
	align-items: center;
	color: var(--tinta-media);
	font-size: .8125rem;
	font-weight: 600;
}

.marca-fina__selo .icone {
	width: 1rem;
	height: 1rem;
	color: var(--azul);
}

/* A espinha

   O mesmo vermelho de marca em campo cheio da linha de status da ficha do
   curso, com a mesma regra de contraste: sobre ele o branco puro dá 4.55:1 e
   não sobra margem para rebaixar tom nenhum, então todo texto é branco
   integral. Gruda no topo em vez de flutuar no pé, e a altura é constante para
   o conteúdo nunca saltar quando ela cola. */
.espinha {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 2px solid rgb(8 13 17 / 26%);
	background: var(--vermelho);
	color: #fff;
}

.espinha__interior {
	display: flex;
	gap: var(--e5);
	align-items: center;
	width: min(100% - 2.5rem, var(--largura-maxima));
	min-height: var(--altura-espinha);
	margin-inline: auto;
	padding-block: var(--e3);
}

/* O fio de 1px que costura a ficha do curso, na versão sobre vermelho. O
   primeiro campo não recebe fio: uma régua antes do primeiro dado leria como
   borda solta da barra. */
.espinha__campo {
	display: grid;
	gap: .1rem;
	min-width: 0;
	margin: 0;
}

.espinha__campo + .espinha__campo {
	padding-left: var(--e5);
	border-left: 1px solid rgb(255 255 255 / 26%);
}

.espinha__rotulo {
	color: #fff;
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* O código é a única coisa da página que a equipe e o aluno vão dizer em voz
   alta um para o outro, então ele abre a barra e é o dado em maior escala
   depois do valor. */
.espinha__codigo,
.espinha__periodo,
.espinha__total {
	font-family: var(--display);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
}

.espinha__codigo {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	white-space: nowrap;
}

.espinha__periodo {
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

/* O nome do curso ocupa o lugar do rótulo neste campo, e é a linha mais longa
   da barra: ele encolhe até a reticência em vez de empurrar o valor para fora
   do prumo. */
.espinha__campo--turma {
	min-width: 0;
}

.espinha__campo--turma .espinha__rotulo,
.espinha__local {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.espinha__campo--local {
	min-width: 0;
	flex: 1;
}

.espinha__local {
	display: flex;
	gap: var(--e2);
	align-items: center;
	color: #fff;
	font-size: .8125rem;
	font-weight: 500;
}

.espinha__local .icone {
	width: 1rem;
	height: 1rem;
}

/* O valor é o último campo e não encolhe: ele é o que a pessoa confere antes de
   apertar o botão, e uma reticência no preço seria a pior economia de espaço
   possível. */
.espinha__campo--valor {
	flex: none;
	margin-left: auto;
}

.espinha__valor {
	display: flex;
	gap: var(--e2);
	align-items: baseline;
	white-space: nowrap;
}

.espinha__total {
	font-size: clamp(1.375rem, 2.2vw, 1.625rem);
}

/* A troca de preço entre cartão e pix é o único movimento desta página, e é
   movimento de estado: o número que muda sozinho sem aviso é o que faz alguém
   desconfiar da cobrança. */
.espinha__total,
.espinha__metodo {
	transition: opacity .18s var(--saida);
}

.espinha.esta-recalculando .espinha__total,
.espinha.esta-recalculando .espinha__metodo {
	opacity: .45;
}

.espinha__metodo {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
}

.espinha__metodo[hidden] {
	display: none;
}

/* O tom de alerta do tema é rosa claro sobre texto vermelho, calibrado para
   papel; sobre o campo vermelho da barra ele lê como adesivo colado. A etiqueta
   vira caixa escurecida com texto branco, o mesmo tratamento da linha de status
   da ficha. */
.espinha__vagas {
	flex: none;
	background: rgb(8 13 17 / 30%);
	color: #fff;
}

/* Conferência da turma */

.conferencia {
	background: var(--papel-alt);
	padding-block: var(--e7) var(--e5);
}

.conferencia__interior {
	display: grid;
	gap: var(--e6);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	padding: var(--e6);
	border: 1px solid var(--linha);
	border-radius: var(--raio-g);
	background: var(--papel);
}

.conferencia__campo {
	display: grid;
	gap: var(--e3);
	min-width: 0;
}

.conferencia__rotulo {
	color: var(--tinta-media);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.conferencia__local {
	display: grid;
	gap: var(--e2);
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

.conferencia__local .icone {
	margin-top: .25em;
	color: var(--vermelho);
}

/* Os encontros são a lista que a pessoa confere contra a própria escala, e por
   isso cada linha tem o fio de 1px que separa campo de campo na ficha: são
   registros, e não itens de um texto corrido. */
.conferencia__encontros {
	display: grid;
}

.conferencia__encontro {
	display: flex;
	gap: var(--e4);
	align-items: baseline;
	justify-content: space-between;
	padding-block: var(--e3);
	border-top: 1px solid var(--linha);
}

.conferencia__encontro:first-child {
	border-top: 0;
	padding-top: 0;
}

.conferencia__dia {
	font-weight: 600;
}

.conferencia__horario {
	color: var(--tinta-media);
	font-size: .9375rem;
	font-variant-numeric: tabular-nums;
}

/* Trocar de turma é saída legítima e precisa existir, mas não pode competir com
   o pagamento: fica em texto, no pé da conferência, e não em botão. */
.conferencia__troca {
	display: inline-flex;
	gap: var(--e2);
	align-items: center;
	margin-top: var(--e4);
	color: var(--tinta-media);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .18s var(--saida);
}

.conferencia__troca:hover {
	color: var(--vermelho-forte);
}

.conferencia__troca .icone {
	width: 1rem;
	height: 1rem;
	transform: scaleX(-1);
}

/* Preenchimento */

.preenchimento {
	background: var(--papel-alt);
	padding-block: var(--e5) var(--e9);
}

/* A folha que se assina, como no painel de inscrição da ficha: papel branco
   sobre o cinza da página, para o formulário ler como documento em vez de
   fundo. */
.preenchimento__interior {
	padding: clamp(var(--e5), 4vw, var(--e7));
	border: 1px solid var(--linha);
	border-radius: var(--raio-g);
	background: var(--papel);
	box-shadow: var(--sombra-1);
}

/* Estado sem inscrição */

.aviso-de-inscricao {
	display: grid;
	align-content: center;
	min-height: 60svh;
	padding-block: var(--e9);
	background: var(--papel-alt);
}

.aviso-de-inscricao__interior {
	display: grid;
	justify-items: start;
	gap: var(--e4);
	max-width: 56ch;
}

.aviso-de-inscricao__marca {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--vermelho-tenue);
	color: var(--vermelho-forte);
}

.aviso-de-inscricao__marca .icone {
	width: 1.5rem;
	height: 1.5rem;
}

.aviso-de-inscricao__titulo {
	font-size: clamp(1.85rem, 4vw, 2.75rem);
}

.aviso-de-inscricao__texto {
	color: var(--tinta-media);
	font-size: 1.0625rem;
}

.aviso-de-inscricao .botao {
	margin-top: var(--e2);
}

/* Rodapé fino */

.rodape-fino {
	background: var(--papel);
	border-top: 1px solid var(--linha);
	padding-block: var(--e5);
}

.rodape-fino__interior {
	display: flex;
	gap: var(--e4);
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: min(100% - 2.5rem, var(--largura-maxima));
	margin-inline: auto;
}

.rodape-fino__socorro {
	display: flex;
	gap: var(--e4);
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	font-size: .875rem;
}

.rodape-fino__rotulo {
	color: var(--tinta-media);
	font-weight: 600;
}

.rodape-fino__canal {
	display: inline-flex;
	gap: var(--e2);
	align-items: center;
	font-weight: 600;
	transition: color .18s var(--saida);
}

.rodape-fino__canal .icone {
	width: 1rem;
	height: 1rem;
	color: var(--vermelho);
}

.rodape-fino__canal:hover {
	color: var(--vermelho-forte);
}

.rodape-fino__assinatura {
	margin: 0;
	color: var(--tinta-suave);
	font-size: .8125rem;
}

@media (max-width: 900px) {
	:root {
		--altura-espinha: 72px;
		--altura-marca: 56px;
	}

	.marca-fina__logo {
		height: 30px;
	}

	/* O endereço é o campo que menos decide e o que mais ocupa largura: numa
	   barra estreita ele sai, e a conferência logo abaixo continua com ele por
	   extenso. */
	.espinha__campo--local {
		display: none;
	}

	.espinha__interior {
		gap: var(--e4);
	}

	.espinha__campo + .espinha__campo {
		padding-left: var(--e4);
	}

	.conferencia__interior {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--e5);
	}
}

/* Abaixo da medida do telefone a barra não comporta quatro campos em fileira, e
   encolher a tipografia até caber transformaria o dado que decide em nota de
   rodapé. O nome do curso sai (ele já está na conferência), e o que sobra é o
   que ninguém pode errar: qual turma e quanto custa. */
@media (max-width: 560px) {
	.espinha__campo--turma .espinha__rotulo {
		display: none;
	}

	.espinha__vagas {
		display: none;
	}
}