/* Acréscimos do WordPress ao front de referência.
   Este arquivo existe para que o styles.css do projeto continue sendo
   cópia fiel do fia-digital-main, sem uma linha de diferença. Só entra
   aqui o que o site publicado precisa e a página estática não tem.

   Hoje é um item só: a armadilha de robô do formulário. Ela não usa
   display:none porque parte dos robôs ignora campo escondido assim;
   fica fora da tela, presente no DOM e invisível para gente. */
.fia-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Filtro de modalidade do catálogo.

   O script esconde o cartão fora do filtro pondo o atributo hidden nele.
   Só que o navegador aplica display:none ao [hidden] com a força mais
   fraca que existe, e .course-card declara display:flex — que vence. O
   atributo entra, e o cartão continua na tela ocupando a altura toda.

   O defeito vem do arquivo de referência, que declara o display do cartão
   e nunca escreve a regra do hidden (escreve para o lightbox, e só). Sem
   isto, clicar em MBA marca o botão e não muda nada no que se vê.

   Medido: sem a regra, o cartão fora do filtro fica com 582px de altura. */
.course-card[hidden] { display: none; }

/* Aviso "vídeo ainda não conectado", dentro da caixa de vídeo.

   Mesmo caso do cartão: a nota declara display:flex e o script a esconde
   com o atributo hidden, que perde. Ela é position:absolute com inset:0,
   então ficaria cobrindo o player do YouTube quando houvesse vídeo.

   Medido com a caixa aberta e hidden posto: 80px de altura sobre o
   quadro do vídeo. Só aparece depois que alguém preenche o endereço do
   vídeo no painel, que é quando ninguém estaria olhando para isso. */
.lightbox__note[hidden] { display: none; }

/* Botão "Ver todos os Cursos", abaixo da grade do catálogo.
   A página inicial centraliza o seu pelo próprio invólucro; o catálogo
   não tem esse invólucro, então o respiro e a centralização vêm daqui. */

.catalog__more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.catalog__more .btn[hidden] {
  display: none;
}

.catalog__more:has(.btn[hidden]) {
  display: none;
}

/* Prévia em vídeo dentro da moldura, nas molduras de Quem Somos.

   O JavaScript monta aqui um iframe do YouTube com o mesmo vídeo que o
   botão abre. O YouTube só entrega 16:9, e a moldura não é 16:9 em
   largura nenhuma: 520x300 no desktop (1,73) e 100% de largura por 300px
   de altura abaixo de 1000px, onde a proporção passa de 3. Esticar o
   iframe para inset:0 deformaria o vídeo, muito no celular.

   As unidades de container resolvem: 100cqw e 100cqh são a largura e a
   altura DESTA moldura, então o max() reproduz exatamente o que
   object-fit:cover faz numa imagem — cresce até cobrir o lado mais
   apertado e deixa o excedente sair pelo overflow:hidden.

   A ordem das declarações importa: width/height 100% ficam antes como
   reserva, para um navegador sem unidades de container cair no esticão em
   vez de ficar sem medida nenhuma. */
.video-frame {
  container-type: size;
}

.video-frame__previa {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* O clique é do botão. Sem isto o iframe engole o clique e a moldura
     deixa de abrir o vídeo. */
  pointer-events: none;
}

.video-frame__previa iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  width: max(100cqw, 100cqh * 16 / 9);
  height: max(100cqh, 100cqw * 9 / 16);
  border: 0;
}

/* A capa sai só quando o reprodutor avisa que está tocando. Se o YouTube
   for bloqueado ou demorar, ela fica — que é o ponto. */
.video-frame__capa {
  transition: opacity .6s ease-in-out;
}

.video-frame.is-tocando .video-frame__capa {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .video-frame__capa { transition: none; }
}

/* Setas de navegação no cabeçalho de Missão, visão e valores.

   O arquivo de referência não tem setas nesta seção — só no trilho da
   Diretoria executiva, cujo .people__head já é uma linha flexível com o
   título de um lado e as setas do outro. O .mvv__head do arquivo é um
   bloco simples, então as setas cairiam embaixo do título, encostadas à
   esquerda.

   As três declarações abaixo são as mesmas do .people__head. O padding e
   o margin-bottom do .mvv__head continuam vindo do fia-site.css: aqui só
   entra o que falta, para que a regra de lá siga valendo. */
.mvv__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

/* Abaixo de 1000px o título ocupa a largura toda e as setas descem para a
   linha de baixo — a mesma quebra que o .people__head faz no arquivo. */
@media (max-width: 1000px) {
  .mvv__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
}

/* Abaixo de 760px o arquivo de referência deixa de tratar o mvv como
   trilho: .mvv__rail vira flex-direction column com overflow-x visible, e
   os cartões empilham. Medido nessa largura, scrollWidth e clientWidth
   ficam iguais — não sobra nada para rolar, e as setas continuariam na
   tela sem fazer efeito nenhum ao serem tocadas.

   A Diretoria executiva não tem esse problema: o .people__rail segue com
   overflow-x auto e transbordando até no celular, e por isso as setas
   dela ficam. */
@media (max-width: 760px) {
  .mvv__head .rail-nav { display: none; }
}

/* Trilhos sem arraste.

   O arraste sai no template, trocando data-drag-scroll por
   data-lenis-prevent (o segundo atributo continua impedindo o Lenis de
   sequestrar a rolagem lateral, que é a parte que deve ficar).

   Mas cursor e user-select são declarados pela CLASSE no fia-site.css e
   continuariam valendo, agora sem causa:

   cursor:grab  — a mãozinha prometeria um gesto que não existe mais;
   user-select  — o none estava lá só para o texto não ser selecionado
                  DURANTE o arraste. Sem arraste, ele apenas impedia
                  alguém de copiar o conteúdo dos cartões.

   A regra olha para a AUSÊNCIA do atributo, e não para o nome do trilho:
   devolver o data-drag-scroll no template devolve a mãozinha junto, sem
   ninguém precisar lembrar de vir aqui.

   A rolagem continua pelas setas do cabeçalho, pela roda lateral do
   trackpad e pelo teclado, já que o tabindex="0" segue nos elementos. */
.mvv__rail:not([data-drag-scroll]),
.people__rail:not([data-drag-scroll]),
.faculty__rail:not([data-drag-scroll]) {
  cursor: auto;
  -webkit-user-select: auto;
  user-select: auto;
}

/* Malha de pontinhos da abertura de Quem Somos, também no mobile.

   O arquivo de referência a esconde abaixo de 1000px
   (.dots--qs-hero { display: none }). A da Home não é escondida em
   largura nenhuma, então mostrar ou não a malha é decisão de cada
   abertura, não uma regra do desenho — e aqui passou a ser mostrar.

   A div é decorativa: absolute dentro do .qs-hero__band, sem
   pointer-events e com aria-hidden, fora da leitura e do toque.

   A altura vira 100% da banda em vez dos 290,1px do desktop porque a
   banda MUDA de altura conforme o título quebra: medidos 266px a
   390px de tela, 189px a 760px e 202px a 900px. Qualquer altura fixa
   sangra sobre a seção seguinte em alguma dessas larguras — a de
   900px vazava 88px. Presa à banda, a malha nunca ultrapassa. */
@media (max-width: 1000px) {
  .dots--qs-hero {
    display: block;
    height: 100%;
  }
}

/* No celular, a mesma malha em escala menor.

   Com o passo de 91,7px do desktop cabiam 3,7 colunas numa banda de
   342px: quadrados grandes e esparsos, que não leem como textura.
   Passo e quadrado foram escalados por 0,7, então a razão entre os
   dois (0,1309) é a mesma do desktop — é o mesmo desenho, menor, e
   não um desenho diferente. Passa a caber 5,3 colunas.

   760px é a quebra que o próprio arquivo de referência usa para
   redimensionar as outras malhas (.dots--band, .dots--transition-*),
   em vez de escondê-las. */
@media (max-width: 760px) {
  .dots--qs-hero {
    --sq: 8.4px;
    --pitch-x: 64.2px;
    --pitch-y: 64.2px;
  }
}

/* Enquadramento da foto da chamada final, no celular.

   O arquivo de referência ancora em 50% 40% em qualquer largura. Numa
   tela estreita o object-fit:cover corta muito das laterais, e o centro
   horizontal deixava de fora o que interessa da foto; 70% empurra o
   recorte para a direita. A vertical fica nos mesmos 40%.

   Vale nas três páginas que usam o bloco — Contato, Cursos e Quem Somos:
   a chamada final é um template-part global com uma classe só.

   760px é a quebra em que o próprio banner muda de layout no arquivo
   (.cta-banner__inner vira coluna). */
@media (max-width: 760px) {
  .cta-banner__img { object-position: 70% 40%; }
}

/* Seta de trilho desligada, na ponta.

   O arquivo de referência não prevê este estado — as setas dele estão
   sempre acesas. Sem isto o botão desligado ficaria idêntico ao ligado,
   inclusive acendendo no hover, e o editor não veria diferença nenhuma. */
.rail-nav button:disabled {
  opacity: .3;
  cursor: default;
}

.rail-nav button:disabled:hover,
.rail-nav button:disabled:focus {
  background: none;
  color: var(--aqua);
}

/* Logo do rodapé dentro de um link para a home.

   O arquivo de referência traz o logo do rodapé como <img> solto, nas
   duas gerações do front — só o do cabeçalho é clicável. Este link é
   acréscimo, então mora aqui.

   display:block com width:max-content é o que preserva a posição exata do
   que vem depois. Um <a> inline criaria uma linha de texto em volta da
   imagem, com o espaço da base da fonte somado abaixo dela, e o risco
   tracejado desceria alguns pixels. Block tira a linha do caminho, e o
   max-content faz a área clicável parar na borda do logo em vez de varrer
   os 420px da coluna. */
.footer-logo-link {
  display: block;
  width: max-content;
  max-width: 100%;
}

/* Assinatura do rodapé: a marca agora vive DENTRO do link.

   O parágrafo .footer-bottom__credit é um flex com gap 6px, e antes os
   dois itens dele eram o <a> do texto e a <img> solta ao lado. Com a
   imagem movida para dentro do link, o parágrafo passou a ter um item só
   e a marca quebrava para uma segunda linha — medido, o bloco ia de
   205x20 para 179x37.

   Repetir aqui o mesmo flex e o mesmo gap, agora no <a>, devolve a linha
   exatamente como era: frase e marca lado a lado, separadas por 6px. */
.footer-bottom__credit a {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Setas do Corpo docente entre o cartão de apresentação e os cartões, no
   celular.

   O arquivo de referência ordena a seção assim abaixo de 1000px: título
   (1), a linha com apresentação e cartões (2), setas (3). As setas caíam
   depois de tudo, a 500px do trilho que comandam.

   Para encaixá-las ENTRE a apresentação e os cartões não basta trocar
   ordens: as setas vivem no .people__head e os dois blocos dentro do
   .faculty__row, que são caixas irmãs. A linha precisa sair do caminho
   com display:contents, para que os quatro elementos virem filhos diretos
   do .faculty e possam ser ordenados juntos.

   O preço é que as contribuições de layout da linha somem com ela, e
   precisam voltar aqui — medido, sem isto a apresentação e o trilho
   saltam de 24px da borda e 342 de largura para 0 e 390, encostando na
   tela. São quatro valores, todos vindos da própria referência:

     padding-left: var(--edge)      -> margin-inline nos dois blocos
     padding-right: var(--gutter)   -> idem (no celular os dois valem 24px)
     margin-top: 48px               -> vai para a apresentação
     gap: 20px                      -> vira margin-top nas setas e no trilho

   width:auto na apresentação porque ela declara width:100% para caber na
   linha; como filha direta do .faculty ela agora estica sozinha, e manter
   os 100% somados às margens estouraria a largura. */
@media (max-width: 1000px) {
  .faculty__row { display: contents; }

  .faculty__intro {
    order: 2;
    width: auto;
    margin: 48px var(--edge) 0;
  }

  .faculty .people__head > .rail-nav {
    order: 3;
    margin-top: 20px;
    margin-left: var(--edge);
  }

  .faculty__rail {
    order: 4;
    margin: 20px var(--edge) 0;
  }
}