/* Inscrição pública: formulário, blocos, foto com recorte, galeria e conclusão. */

.inscricao {
	padding-block: 2rem;
}

.inscricao__cabeca {
	text-align: center;
}

.inscricao__titulo {
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 2.25rem;
	color: var(--ardosia-900);
}

.inscricao__texto {
	max-width: 48rem;
	margin: 1rem auto 0;
	line-height: 1.75;
	color: var(--ardosia-600);
}

.aviso {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding: 1rem;
	border: 1px solid var(--vermelho-200);
	border-radius: 1rem;
	background: var(--vermelho-50);
	color: var(--vermelho-700);
	font-size: 0.875rem;
}

.aviso .icone {
	margin-top: 0.125rem;
}

.aviso__titulo {
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.aviso ul {
	margin: 0;
	padding-left: 1.25rem;
	list-style: disc;
}

.formulario {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 2rem;
}

/* Isca para robôs: fora da tela, sem display:none (alguns robôs ignoram). */
.isca {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bloco {
	padding: 1.25rem;
	border: 1px solid var(--cor-borda);
	border-radius: 1rem;
	background: var(--branco);
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.bloco__cabeca {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--cor-borda);
}

.bloco__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.5rem;
	background: var(--vermelho-50);
	color: var(--vermelho-600);
}

.bloco__titulo {
	font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	color: var(--ardosia-900);
}

.bloco__campos,
.bloco__grade {
	display: grid;
	gap: 1rem;
}

.duas-colunas {
	display: grid;
	gap: 1rem;
}

.obrigatorio {
	color: var(--cor-erro);
}

.campo__ajuda {
	font-size: 0.75rem;
	color: var(--ardosia-500);
}

.campo__erro {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--cor-erro);
}

.campo__controle--area {
	height: auto;
	min-height: 10rem;
	padding-block: 0.5rem;
	line-height: 1.5;
	resize: vertical;
}

.campo__controle--arquivo {
	height: auto;
	padding: 0.5rem 0.75rem;
}

.grupo {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.grupo__opcoes {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.opcao {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--cor-borda);
	border-radius: calc(var(--raio) * 0.8);
	font-size: 0.875rem;
	cursor: pointer;
}

.opcao:has(input:checked) {
	border-color: var(--vermelho-200);
	background: var(--vermelho-50);
}

.opcao input {
	margin-top: 0.2rem;
	accent-color: var(--vermelho-600);
}

/* Foto com recorte 1:1 */

.foto__caixa {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	border: 1px solid var(--cor-borda);
	border-radius: calc(var(--raio) * 0.8);
	text-align: center;
}

.foto__previa {
	width: 8rem;
	height: 8rem;
	overflow: hidden;
	border-radius: 0.75rem;
	background: var(--vermelho-100);
}

.foto__previa[hidden] {
	display: none;
}

.foto__previa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.foto__arquivo {
	max-width: 100%;
	font-size: 0.8125rem;
}

/* Editor de texto com formatação (acrescentado pelo JS) */

.rico {
	border: 1px solid var(--cor-borda);
	border-radius: calc(var(--raio) * 0.8);
	background: var(--cor-fundo);
}

.rico:focus-within {
	outline: 2px solid var(--cor-anel);
	outline-offset: 1px;
}

.rico__barra {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding: 0.375rem;
	border-bottom: 1px solid var(--cor-borda);
	background: var(--cor-suave);
}

.rico__botao {
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border: 1px solid transparent;
	border-radius: 0.375rem;
	background: transparent;
	color: var(--cor-texto);
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}

.rico__botao:hover,
.rico__botao.is-ativo {
	border-color: var(--cor-borda);
	background: var(--branco);
}

.rico__area {
	min-height: 10rem;
	padding: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.6;
	outline: 0;
}

.rico__area ul,
.rico__area ol {
	padding-left: 1.5rem;
}

.rico__area ul {
	list-style: disc;
}

.rico__area ol {
	list-style: decimal;
}

/* Galeria de envio */

.galeria-envio {
	display: grid;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.galeria-envio__item {
	display: grid;
	gap: 0.5rem;
	padding: 0.75rem;
	border: 1px solid var(--cor-borda);
	border-radius: calc(var(--raio) * 0.8);
}

.galeria-envio__previa {
	width: 6rem;
	height: 4.5rem;
	overflow: hidden;
	border-radius: 0.5rem;
}

.galeria-envio__previa[hidden] {
	display: none;
}

.galeria-envio__previa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.consentimento {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ardosia-700);
	cursor: pointer;
}

.consentimento input {
	margin-top: 0.25rem;
	accent-color: var(--vermelho-600);
}

.consentimento a {
	color: var(--vermelho-700);
	text-decoration: underline;
}

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

.envio .botao--g {
	padding-inline: 2rem;
}

.envio .botao[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.envio__nota {
	font-size: 0.75rem;
	color: var(--ardosia-500);
}

/* Recorte da foto (diálogo) */

.recorte {
	width: min(24rem, calc(100vw - 2rem));
	padding: 1.25rem;
	border: 1px solid var(--cor-borda);
	border-radius: 1rem;
	box-shadow: 0 20px 40px -10px rgb(0 0 0 / 0.35);
}

.recorte::backdrop {
	background: rgb(0 0 0 / 0.55);
}

.recorte__titulo {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--ardosia-900);
}

.recorte__ajuda {
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--ardosia-500);
}

.recorte__area {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	margin-top: 1rem;
	overflow: hidden;
	border-radius: 0.75rem;
	background: var(--ardosia-900);
	touch-action: none;
	cursor: grab;
}

.recorte__area:active {
	cursor: grabbing;
}

.recorte__area img {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
	user-select: none;
	-webkit-user-drag: none;
	transform-origin: 0 0;
}

.recorte__zoom {
	width: 100%;
	margin-top: 1rem;
	accent-color: var(--vermelho-600);
}

.recorte__acoes {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1rem;
}

/* Conclusão */

.inscricao-sucesso {
	padding-block: 4rem;
}

.sucesso {
	padding: 2.5rem;
	border: 1px solid var(--cor-borda);
	border-radius: 1.5rem;
	background: var(--branco);
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	text-align: center;
}

.sucesso__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin-inline: auto;
	border-radius: 50%;
	background: oklch(0.962 0.044 156.743);
	color: oklch(0.527 0.154 150.069);
}

.sucesso__titulo {
	margin-top: 1.5rem;
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--ardosia-900);
}

.sucesso__texto {
	margin-top: 1rem;
	line-height: 1.75;
	color: var(--ardosia-600);
}

.sucesso__nota {
	margin: 0.75rem 0 2rem;
	font-size: 0.875rem;
	color: var(--ardosia-500);
}

@media (min-width: 40rem) {
	.bloco {
		padding: 1.5rem;
	}

	.grupo__opcoes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.inscricao__titulo {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}

	.duas-colunas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.campo--metade {
		max-width: calc(50% - 0.5rem);
	}

	.galeria-envio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.bloco__grade--com-foto {
		grid-template-columns: minmax(0, 1fr) minmax(16rem, 30%);
	}

	.grupo__opcoes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Galeria de envio: uma imagem por vez, com título ao lado */

.campo__opcional {
	font-weight: 400;
	color: var(--ardosia-500);
}

.campo__ajuda--ok {
	color: oklch(0.527 0.154 150.069);
}

.galeria__contador {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--ardosia-700);
}

.galeria-envio {
	grid-template-columns: 1fr;
}

.galeria-envio__item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.galeria-envio__item.is-preenchido {
	border-color: var(--vermelho-200);
	background: var(--vermelho-50);
}

.galeria-envio__item.tem-erro {
	border-color: var(--cor-erro);
	background: var(--vermelho-50);
}

.galeria-envio__previa {
	flex-shrink: 0;
	width: 7.5rem;
	height: 5.625rem;
}

.galeria-envio__corpo {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	gap: 0.5rem;
}

.galeria-envio__numero {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ardosia-900);
}

.galeria-envio__titulo {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.galeria-envio__remover {
	align-self: flex-start;
}

/* Sem JavaScript todos os espaços aparecem; com JavaScript, título e remover
   só aparecem depois que a imagem é escolhida. */
.js-ativo .galeria-envio__item:not(.is-preenchido) .galeria-envio__titulo,
.js-ativo .galeria-envio__item:not(.is-preenchido) .galeria-envio__remover {
	display: none;
}

.js-ativo .galeria-envio__item:not(.is-preenchido) {
	border-style: dashed;
}

.consentimento--simples {
	margin-top: 0.5rem;
}

@media (max-width: 30rem) {
	.galeria-envio__item {
		flex-direction: column;
	}
}

/* Botões do editor com ícone SVG */
.rico__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	padding: 0;
}

.rico__botao svg {
	display: block;
	width: 0.875rem;
	height: 0.875rem;
}