/* COLETIVA_ — faixa de professores (js/professores-faixa.js)
 *
 * Cartão: FOTO → NOME → CARGO, clicável inteiro. Fileira horizontal que rola no
 * celular e se distribui no PC. Compartilhado entre a home e /sobre, então o
 * CSS vive num arquivo próprio em vez de duplicado nos dois <style> inline —
 * era assim que as duas páginas iam divergir no primeiro ajuste.
 *
 * ⚠ ESTADO PADRÃO É VISÍVEL. `.prof-card` nasce com opacidade 1. A entrada em
 * cascata só existe quando o JS acrescenta `.prof-faixa--anima` ao contêiner —
 * e some se o observer não responder. Esconder por CSS o que depende de JS para
 * aparecer é como a casa perdeu conteúdo antes.
 */

.prof-faixa {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.prof-faixa::-webkit-scrollbar { display: none; }

.prof-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 4px 14px 4px 0;
  text-decoration: none;
  color: inherit;
  opacity: 1;               /* o padrão é aparecer */
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 640px) { .prof-card { width: 150px; padding-right: 20px; } }

.prof-moldura {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  display: block;
  border: 2px solid rgba(15, 14, 10, .85);
  background: #f5f2e8;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  transition: border-color .2s, box-shadow .2s;
}
@media (min-width: 640px) { .prof-moldura { width: 96px; height: 96px; } }

.prof-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Preto e branco com um toque de contraste: o mesmo tratamento para todos.
     Foto colorida ao lado de foto em P&B hierarquiza quem ensina por acidente
     de câmera. */
  filter: grayscale(1) contrast(1.12);
  transition: filter .3s ease;
}
.prof-foto--vazia {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f0e0a;
  color: #e8d84a;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 30px;
}

.prof-nome {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.25;
  color: #0f0e0a;
  letter-spacing: 0;
}
.prof-cargo {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.4;
  color: #5c574b;
  /* DUAS LINHAS RESERVADAS, sempre. "Promotora de Justiça · MPDFT" ocupa duas e
     "Advogado da União · AGU" ocupa uma — os cartões ficariam de alturas
     diferentes, o que parece descuido. Perseguir a linha única por largura é
     briga perdida: cada professor novo traz um cargo de tamanho diferente, e a
     próxima quebra apareceria depois do deploy. Reservar o espaço resolve a
     classe inteira do problema de uma vez. */
  min-height: calc(1.4em * 2);
}

/* O accent entra no HOVER — sinaliza que é clicável sem pintar área parada. */
@media (hover: hover) {
  .prof-card:hover { transform: translateY(-3px); }
  .prof-card:hover .prof-moldura { border-color: #e8d84a; box-shadow: 0 4px 0 0 rgba(15, 14, 10, .85); }
  .prof-card:hover .prof-foto { filter: grayscale(0) contrast(1.02); }
  .prof-card:hover .prof-nome { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #e8d84a; text-decoration-thickness: 2px; }
}
.prof-card:focus-visible { outline: 2px solid #e8d84a; outline-offset: 2px; }

/* ENTRADA EM CASCATA — só com a classe do contêiner, que o JS acrescenta.
   O atraso vem do índice do cartão (--i), então acrescentar professores não
   pede CSS novo: o quinto entra depois do quarto sozinho. */
.prof-faixa--anima .prof-card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.prof-faixa--anima .prof-card--dentro { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .prof-faixa--anima .prof-card { opacity: 1; transform: none; transition: none; }
  .prof-card { transition: none; }
}

/* Dentro de bloco escuro (se um dia a faixa for parar num) o texto acompanha. */
.prof-faixa--escura .prof-nome { color: #f5f2e8; }
.prof-faixa--escura .prof-cargo { color: #a39c8b; }
.prof-faixa--escura .prof-moldura { border-color: rgba(245, 242, 232, .3); }