/* ACR SCHOOL · pages/admissoes.css
   Exclusivo de /admissoes, em :where(), especificidade zero.
   O que é formulário genérico mora em base.css; aqui fica só o que existe
   por causa desta página: o topo em duas colunas e o grupo de turmas. */

/* O grafismo do topo tem altura própria, não a da seção.
   Motivo: o formulário cresce quando os seletores de turma aparecem, e com
   a imagem colada na altura da seção o recorte mudava junto. Agora
   o grafismo ocupa uma faixa fixa no alto e o azul sólido segue abaixo,
   então o fundo não se mexe enquanto o formulário cresce. */
:where(.adm-hero) .acr-band__media{
  height:clamp(560px,78vh,860px);bottom:auto;
  /* dissolve no azul em vez de terminar em linha reta */
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}

/* topo: argumento à esquerda, formulário à direita. O formulário aparece
   na primeira tela de propósito: esta página é o ponto de conversão do
   site, e rolar até o fim para agendar é perda. */
:where(.adm-topo){display:grid;grid-template-columns:1fr 1fr;
  gap:var(--acr-gap-lg);align-items:start}
:where(.adm-topo) .adm-topo__texto{padding-top:var(--acr-s2)}

/* os campos dos filhos ficam colados como um grupo, separados do bloco do
   responsável por uma régua dourada: é outra pergunta, sobre outra pessoa */
:where(.adm-filhos){display:grid;gap:var(--acr-s4)}
:where(.adm-filhos):not(:empty){padding-top:var(--acr-s3);
  border-top:var(--acr-rule-accent) solid var(--acr-accent)}

/* um fieldset por filho. Nome e turma lado a lado porque são a mesma
   pessoa; empilhados, a família perde de vista qual nome vai com qual
   turma quando há três ou quatro. O fieldset entra sem borda nem padding
   do navegador, que não combinam com o resto do formulário. */
:where(.adm-filho){display:grid;grid-template-columns:1fr 1fr;
  gap:var(--acr-s3);border:0;padding:0;margin:0;min-width:0}
:where(.adm-filho) legend{grid-column:1/-1;padding:0;
  font-family:var(--acr-font-nav);font-weight:var(--acr-weight-nav);
  font-size:var(--acr-nav-size);text-transform:uppercase;
  letter-spacing:var(--acr-tracking-ui);color:var(--acr-accent)}

@media (max-width:900px){
  :where(.adm-topo){grid-template-columns:minmax(0,1fr);gap:var(--acr-s5)}
  }

/* no celular, e também na coluna estreita do topo, nome e turma empilham */
@media (max-width:560px){
  :where(.adm-filho){grid-template-columns:minmax(0,1fr)}
  }

/* lista de documentos da matrícula. Existe só aqui, por isso não vai para
   o base.css. É checklist de verdade: a família abre esta página com os
   papéis na mão, então cada item ganha marcador próprio e linha inteira,
   em vez de virar um parágrafo corrido que obriga a reler para conferir. */
:where(.adm-docs){display:grid;gap:var(--acr-s3)}
/* o afastamento do parágrafo acima vai inline no HTML: ul{margin:0} do
   base.css tem especificidade maior que :where() e venceria aqui. */
:where(.adm-docs) li{display:grid;grid-template-columns:20px minmax(0,1fr);
  gap:var(--acr-s2);align-items:start}
:where(.adm-docs) svg{width:20px;height:20px;margin-top:3px;
  stroke:var(--acr-accent);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
:where(.adm-docs) span{color:var(--acr-ink-2);font-size:16px;text-wrap:pretty}
/* a condição fica em tom mais baixo: ela vale para parte das famílias */
:where(.adm-docs) small{display:block;margin-top:4px;
  font-family:var(--acr-font-nav);font-weight:var(--acr-weight-nav);
  font-size:13px;letter-spacing:var(--acr-tracking-nav);
  text-transform:uppercase;color:var(--acr-ink-3)}