/* componentes.css — ADAMA
   As peças de tela descritas em docs/design-system-site.md.
   Sem sombra em nenhum estado, sem degradê, raio zero. */

/* ------------------------------------------------------------ Abertura */

.abertura { padding-block: var(--espaco-lg) var(--espaco-xl); }

.abertura__grade {
  display: grid;
  gap: var(--espaco-lg);
  align-items: center;
}

/* Sem teto próprio: a coluna da abertura já é a medida do texto. Um teto a
   mais só encurtava a linha antes da borda do bloco. */

/* A proporção vem declarada, e não calculada dos atributos, para o espaço
   estar reservado antes de a imagem chegar. Sem isso o texto acima empurra
   a foto quando a fonte troca, e o layout pula no celular. */
.abertura__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
}

/* Abertura das páginas internas: só título e linha de apoio.
   O texto corrido respeita os 720 px do design system. */
.chamada { padding-block: var(--espaco-lg) var(--espaco-xl); }

.chamada p {
  max-width: var(--largura-texto);
  font-size: var(--corpo-h3);
  color: var(--cor-grafite);
}

/* -------------------------------------------------------- Faixa de números */

.numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-md);
}

.numeros__item {
  padding-left: var(--espaco-sm);
  border-left: var(--fio) solid var(--cor-risco);
}

.numeros__valor {
  display: block;
  font-family: var(--fonte-display);
  font-size: 34px;
  font-weight: 800;
  font-stretch: 84%;
  line-height: 1.05;
  color: var(--cor-terracota);
}

.numeros__rotulo {
  display: block;
  margin-top: var(--espaco-xs);
  font-size: var(--corpo-apoio);
  color: var(--cor-grafite);
}

/* --------------------------------------------------------- Cartão de turma */

.cartoes {
  display: grid;
  gap: var(--espaco-md);
}

.cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  padding: var(--espaco-md);
  border: var(--fio) solid var(--cor-risco);
  border-top: 6px solid var(--cor-terracota);
  background: var(--cor-gi-puro);
}

/* O cartão de Atibaia usa Dourado no topo, para marcar que ainda não começou. */
.cartao--breve { border-top-color: var(--cor-dourado); }

.cartao h3 { margin-bottom: 0; }

.cartao p { margin-bottom: 0; }

.cartao .ligacao { margin-top: auto; }

/* O cartão inteiro é clicável, e o link existe como pista visual. */
.cartao__alvo::after {
  content: '';
  position: absolute;
  inset: 0;
}

.cartao:hover { border-color: var(--cor-preto-dojo); }

.cartao:has(.cartao__alvo:focus-visible) {
  outline: var(--foco-espessura) solid var(--cor-tatame);
  outline-offset: var(--foco-deslocamento);
}

/* ------------------------------------------------------- Etapas da aula */

.etapas {
  display: grid;
  gap: var(--espaco-md);
}

.etapa { border-top: 4px solid var(--cor-preto-dojo); padding-top: var(--espaco-sm); }

.etapa h3 { margin-bottom: 0; font-size: var(--corpo-corpo); }

.etapa__tempo {
  display: block;
  margin-bottom: var(--espaco-xs);
  font-family: var(--fonte-dado);
  font-size: var(--corpo-apoio);
  font-variant-numeric: tabular-nums;
  color: var(--cor-terracota);
}

.etapa p {
  margin-bottom: 0;
  font-size: var(--corpo-apoio);
  color: var(--cor-grafite);
}

/* ------------------------------------------------- Tabela de horários
   No desktop, tabela de verdade. No celular, cartão empilhado.
   Rolagem lateral em tabela de horário é falha de projeto, não solução. */

.local + .local { margin-top: var(--espaco-xl); }

.local__cabecalho { margin-bottom: var(--espaco-md); }

.local__cabecalho h3 { margin-bottom: var(--espaco-xs); }

.tabela {
  width: 100%;
  border-collapse: collapse;
}

.tabela caption {
  margin-bottom: var(--espaco-sm);
  font-size: var(--corpo-apoio);
  color: var(--cor-grafite);
  text-align: left;
}

.tabela th,
.tabela td {
  padding: var(--espaco-sm);
  border: var(--fio) solid var(--cor-risco);
  text-align: left;
  vertical-align: top;
}

.tabela thead th {
  background: var(--cor-preto-dojo);
  border-color: var(--cor-preto-dojo);
  color: var(--cor-gi);
  font-family: var(--fonte-display);
  font-size: var(--corpo-rotulo);
  font-weight: 700;
  letter-spacing: var(--entreletra-rotulo);
  text-transform: uppercase;
}

.tabela tbody tr:nth-child(even) { background: var(--cor-gi); }

.tabela td { font-family: var(--fonte-dado); font-size: var(--corpo-apoio); font-variant-numeric: tabular-nums; }

.tabela td:first-child,
.tabela th[scope='row'] { font-family: var(--fonte-texto); font-weight: 600; }

/* Até 767 px a tabela vira lista de cartões. O rótulo vem de data-rotulo. */
@media (max-width: 767px) {
  .tabela--empilha thead { position: absolute; left: -9999px; }

  .tabela--empilha tbody tr {
    display: block;
    margin-bottom: var(--espaco-md);
    border: var(--fio) solid var(--cor-risco);
    border-top: 6px solid var(--cor-terracota);
    background: var(--cor-gi-puro);
  }

  .tabela--empilha tbody tr:nth-child(even) { background: var(--cor-gi-puro); }

  .tabela--empilha td,
  .tabela--empilha th[scope='row'] {
    display: flex;
    justify-content: space-between;
    gap: var(--espaco-sm);
    border: none;
    border-bottom: var(--fio) solid var(--cor-risco);
    padding: 12px var(--espaco-sm);
    text-align: right;
  }

  .tabela--empilha tr > *:last-child { border-bottom: none; }

  .tabela--empilha td::before,
  .tabela--empilha th[scope='row']::before {
    content: attr(data-rotulo);
    flex-shrink: 0;
    font-family: var(--fonte-display);
    font-size: var(--corpo-rotulo);
    font-weight: 700;
    letter-spacing: var(--entreletra-rotulo);
    text-transform: uppercase;
    color: var(--cor-grafite);
    text-align: left;
  }
}

/* ---------------------------------------------------------- Bloco em breve */

.em-breve {
  padding: var(--espaco-md);
  border: var(--fio) solid var(--cor-risco);
  border-left: 6px solid var(--cor-dourado);
  background: var(--cor-gi-puro);
}

/* ------------------------------------------------------ Bloco de documento */

.documentos {
  display: grid;
  gap: var(--espaco-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.documento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-md);
  min-height: 56px;
  padding: 12px var(--espaco-sm);
  border: var(--fio) solid var(--cor-risco);
  border-left: 4px solid var(--cor-terracota);
  background: var(--cor-gi-puro);
  color: var(--cor-preto-dojo);
  text-decoration: none;
}

.documento:hover {
  background: var(--cor-gi);
  color: var(--cor-preto-dojo);
}

.documento__nome { font-weight: 600; }

.documento__ficha {
  display: block;
  font-family: var(--fonte-dado);
  font-size: var(--corpo-apoio);
  font-variant-numeric: tabular-nums;
  color: var(--cor-grafite);
}

.documento__acao {
  flex-shrink: 0;
  color: var(--cor-terracota);
  font-weight: 600;
}

/* Item sem arquivo não vira link: fica como linha em elaboração. */
.documento--pendente {
  border-left-color: var(--cor-risco);
  color: var(--cor-grafite);
}

.documento--pendente .documento__acao { color: var(--cor-grafite); font-weight: 400; }

/* --------------------------------------------------------- Bloco de contas
   Existe para o número ser lido sem baixar nada. */

.contas {
  padding: var(--espaco-md);
  border-left: 6px solid var(--cor-terracota);
  background: var(--cor-gi);
}

.secao--clara .contas { background: var(--cor-gi-puro); }

.contas h3 { margin-bottom: var(--espaco-md); }

.contas__linhas {
  width: 100%;
  border-collapse: collapse;
}

.contas__linhas th,
.contas__linhas td {
  padding: 10px 0;
  border-bottom: var(--fio) solid var(--cor-risco);
  text-align: left;
  font-weight: 400;
}

.contas__linhas td {
  font-family: var(--fonte-dado);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.contas__linhas tfoot th,
.contas__linhas tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--cor-preto-dojo);
  font-weight: 600;
}

.contas__linhas tfoot td { color: var(--cor-terracota); }

/* --------------------------------------------------------------- Fichas */

.fichas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ficha {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--espaco-sm);
  border: var(--fio) solid var(--cor-risco);
  background: var(--cor-gi-puro);
}

.ficha h3 { margin-bottom: 0; }

.ficha__papel {
  font-size: var(--corpo-apoio);
  color: var(--cor-grafite);
}

.ficha__registro {
  font-family: var(--fonte-display);
  font-size: var(--corpo-rotulo);
  font-weight: 700;
  letter-spacing: var(--entreletra-rotulo);
  text-transform: uppercase;
  color: var(--cor-preto-dojo);
}

/* --------------------------------------------------------- Comunicados */

.comunicados {
  display: grid;
  gap: var(--espaco-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.comunicado {
  padding-top: var(--espaco-sm);
  border-top: var(--fio) solid var(--cor-risco);
}

.comunicado__data {
  display: block;
  margin-bottom: var(--espaco-xs);
  font-family: var(--fonte-display);
  font-size: var(--corpo-rotulo);
  font-weight: 700;
  letter-spacing: var(--entreletra-rotulo);
  text-transform: uppercase;
  color: var(--cor-terracota);
}

.comunicado h3 { margin-bottom: var(--espaco-xs); }

.comunicado p { margin-bottom: 0; }

/* Sem comunicado, a área inteira sai da página. Nunca vira caixa vazia. */
[hidden] { display: none !important; }

/* ------------------------------------------------- Perguntas frequentes */

.faq {
  border-top: var(--fio) solid var(--cor-risco);
  max-width: var(--largura-texto);
}

.faq details { border-bottom: var(--fio) solid var(--cor-risco); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-md);
  min-height: 56px;
  padding: 12px 0;
  font-family: var(--fonte-display);
  font-size: var(--corpo-h3);
  font-weight: 700;
  line-height: var(--altura-linha-titulo);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary:hover { color: var(--cor-terracota); }

.faq summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--fonte-texto);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--cor-terracota);
}

.faq details[open] summary::after { content: '\2212'; }

.faq__resposta {
  padding-bottom: var(--espaco-md);
  max-width: var(--largura-texto);
}

/* ------------------------------------------------------------ Formulário */

.formulario { max-width: 520px; }

.campo { margin-bottom: var(--espaco-md); }

.campo label {
  display: block;
  margin-bottom: var(--espaco-xs);
  font-weight: 600;
}

.campo input,
.campo textarea {
  width: 100%;
  min-height: var(--botao-altura);
  padding: 10px 12px;
  border: 2px solid var(--cor-risco);
  background: var(--cor-gi-puro);
  font-family: var(--fonte-texto);
  font-size: var(--corpo-corpo);
}

.campo textarea {
  min-height: 120px;
  resize: vertical;
}

.campo input:focus,
.campo textarea:focus {
  border-color: var(--cor-tatame);
  outline: none;
}

.campo input:focus-visible,
.campo textarea:focus-visible {
  outline: var(--foco-espessura) solid var(--cor-tatame);
  outline-offset: var(--foco-deslocamento);
}

/* Erro diz o que fazer, não o que falhou. */
.campo__erro {
  display: block;
  margin-top: var(--espaco-xs);
  font-size: var(--corpo-apoio);
  color: #C81E1E;
}

.campo input[aria-invalid='true'],
.campo textarea[aria-invalid='true'] { border-color: #C81E1E; }

/* Armadilha para robô. Não usa display:none, que alguns robôs ignoram,
   e fica fora do fluxo de teclado e de leitor de tela. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__aviso {
  margin-top: var(--espaco-sm);
  font-size: var(--corpo-apoio);
  color: var(--cor-grafite);
}

.formulario__sucesso {
  padding: var(--espaco-md);
  border-left: 6px solid var(--cor-terracota);
  background: var(--cor-gi);
}

.formulario__sucesso h3 { margin-bottom: var(--espaco-xs); }

/* ---------------------------------------------------- Galeria de fotos */

.galeria {
  display: grid;
  gap: var(--espaco-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.galeria figure { margin: 0; }

.galeria figcaption {
  margin-top: var(--espaco-xs);
  font-size: var(--corpo-apoio);
  color: var(--cor-grafite);
}

/* ------------------------------------------------------- Caminhos de apoio */

.caminhos {
  display: grid;
  gap: var(--espaco-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.caminho {
  padding: var(--espaco-md);
  border-top: 6px solid var(--cor-dourado);
  background: var(--cor-preto-dojo);
  color: var(--cor-gi);
}

.caminho h3 { color: var(--cor-gi); margin-bottom: var(--espaco-xs); }

.caminho p { margin-bottom: 0; }

/* ------------------------------------------------------------- Destaque */

.destaque {
  padding: var(--espaco-md);
  border-left: 6px solid var(--cor-dourado);
  background: var(--cor-gi);
}

.secao--clara .destaque { background: var(--cor-gi-puro); }

.linhagem {
  font-family: var(--fonte-display);
  font-size: var(--corpo-h3);
  font-weight: 700;
  font-stretch: 85%;
}

/* ---------------------------------------------------------- Lista chave */

.lista-chave {
  width: 100%;
  border-collapse: collapse;
  max-width: var(--largura-texto);
}

.lista-chave caption {
  margin-bottom: var(--espaco-sm);
  font-size: var(--corpo-apoio);
  color: var(--cor-grafite);
  text-align: left;
}

.lista-chave th,
.lista-chave td {
  padding: 12px var(--espaco-sm);
  border-bottom: var(--fio) solid var(--cor-risco);
  text-align: left;
  vertical-align: top;
}

.lista-chave th {
  width: 40%;
  font-family: var(--fonte-display);
  font-size: var(--corpo-rotulo);
  font-weight: 700;
  letter-spacing: var(--entreletra-rotulo);
  text-transform: uppercase;
  color: var(--cor-grafite);
}

.lista-chave td { font-weight: 600; }

@media (max-width: 479px) {
  .lista-chave th,
  .lista-chave td { display: block; width: auto; }

  .lista-chave th { border-bottom: none; padding-bottom: 0; }
}

/* ------------------------------------------------------------ Utilitários
   Dois, e só. Tudo que passar disso vira componente. */

.espaco-acima { margin-top: var(--espaco-md); }

.espaco-acima--grande { margin-top: var(--espaco-lg); }

/* ------------------------------------------------------- Pontos de quebra */

@media (min-width: 480px) {
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet: duas colunas, conforme a grade do design system. Três colunas a
   partir de 768 px deixavam 219 px por coluna, e a linha quebrava muito antes
   da borda do bloco. Coluna estreita não é decisão de layout, é texto picado. */
@media (min-width: 768px) {
  .abertura__grade { grid-template-columns: 1fr 1fr; gap: var(--espaco-xl); }

  .abertura__foto { order: -1; }

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

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

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

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

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

  .contas { padding: var(--espaco-lg); }

  .duas-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-xl);
    align-items: start;
  }
}

/* Desktop: três colunas, que é onde a grade do design system abre. */
@media (min-width: 1024px) {
  .abertura__grade { grid-template-columns: 1.05fr 1fr; }

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

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

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

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

/* As cinco etapas só entram lado a lado quando cabem sem picar a linha.
   Abaixo disso a sequência quebra em duas fileiras, que continua legível. */
@media (min-width: 1180px) {
  .etapas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--espaco-sm); }

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