/* A página do movimento (sc-inteira/movimento.html): Missão, Pautas e Sobre,
   no estilo do SC Inteira (sci.css). O tela.js divide cada parte em páginas da
   altura da tela — a página não rola —, e os nomes `tela__*` são os que ele
   procura. */

.sci-texto {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding: 1rem calc(env(safe-area-inset-right) + 1rem) 0.25rem calc(env(safe-area-inset-left) + 1rem);
}

.tela__area { flex: 1; min-height: 0; overflow: hidden; }
.tela__secao { height: 100%; display: flex; flex-direction: column; gap: 1.25rem; }

/* Um bloco é um assunto: título, texto e, quando há, a ação. Sem caixa em
   volta — o espaço e o fio fino entre eles já separam. */
.tela__bloco { flex: none; min-width: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.tela__bloco + .tela__bloco { padding-top: 1.25rem; border-top: 1px solid var(--sci-linha); }
.tela__bloco[hidden] + .tela__bloco { padding-top: 0; border-top: 0; }
.tela__bloco--destaque { padding: 1rem 1.125rem; background: var(--sci-azul-suave); border-left: 5px solid var(--sci-azul); }
/* Bloco partido entre duas páginas: o fio tracejado marca a costura. */
.tela__bloco[data-continua] { padding-bottom: 0.5rem; border-bottom: 1px dashed var(--sci-linha-forte); }
.tela__bloco[data-continuacao] { border-top-style: dashed; }
/* A exceção: um parágrafo que sozinho é mais alto que a tela rola dentro dele. */
.tela__bloco--rola { max-height: 100%; overflow-y: auto; }

.tela__bloco h1 { font-size: 1.625rem; line-height: 1.2; color: var(--sci-azul); overflow-wrap: anywhere; }
.tela__bloco h2 { font-size: 1.25rem; line-height: 1.25; color: var(--sci-azul); overflow-wrap: anywhere; }
.tela__bloco p,
.tela__bloco li { overflow-wrap: anywhere; }
.rotulo {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sci-verde-texto);
}
.tela__fraco { color: var(--sci-tinta-3); font-size: 0.9375rem; }
.tela__bloco a:not(.sci-botao) { font-weight: 700; text-underline-offset: 3px; }

/* Passos numerados com o número da própria lista, em azul: o tela.js parte uma
   lista longa entre duas páginas e continua a contagem pelo `start` da lista
   nova — um contador de CSS recomeçaria do 1 na segunda página. */
.tela__passos { list-style: decimal; padding-left: 1.5rem; }
.tela__passos li { padding-left: 0.25rem; }
.tela__passos li + li { margin-top: 0.625rem; }
.tela__passos li::marker { color: var(--sci-azul); font-weight: 700; }
.tela__lista { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.tela__lista li { padding-left: 1.125rem; position: relative; }
.tela__lista li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.5rem; height: 0.25rem; background: var(--sci-ambar); }

/* As pautas: o número grande em cima, o que ele quer dizer e a fonte, miúda.
   Empilhados: lado a lado, cada número de largura diferente desalinhava o texto. */
.movimento__pautas { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.movimento__pautas li { display: flex; flex-direction: column; gap: 0.125rem; }
.movimento__pautas b { font-size: 1.5rem; line-height: 1.15; color: var(--sci-azul); }
.movimento__pautas small { color: var(--sci-tinta-3); font-size: 0.875rem; }

.movimento__acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Tela larga: mais ar, títulos maiores. */
@media (min-width: 64rem) {
  .sci-texto { padding-top: 2rem; }
  .tela__bloco h1 { font-size: 2rem; }
  .tela__bloco h2 { font-size: 1.375rem; }
}
/* Celular deitado ou tela baixa: títulos menores, para sobrar texto. */
@media (max-height: 30rem) {
  .sci-texto { padding-top: 0.5rem; }
  .tela__bloco h1 { font-size: 1.25rem; }
  .tela__bloco h2 { font-size: 1.0625rem; }
  .tela__secao { gap: 0.75rem; }
  .tela__bloco + .tela__bloco { padding-top: 0.75rem; }
}