/*
Theme Name: Blocksy Child
Theme URI: https://seusite.com
Description: Child theme do Blocksy com sistema de animações GSAP reutilizável
Author: CTINF / OpenAI
Template: blocksy
Version: 1.0.0
Text Domain: blocksy-child
*/

.gs-animate,
.gs-fade-up,
.gs-split-lines,
.gs-motion-path,
.gs-scramble-text,
.gs-draw-svg,
.gs-morph-svg,
.gs-stagger-item,
.gs-parallax,
.gs-scrub,
.gs-pin,
.gs-draggable {
  will-change: transform, opacity;
}

.gs-stagger-wrap,
.gs-motion-path-wrap,
.gs-flip-group,
.gs-observe-panels {
  position: relative;
}

.gs-parallax img {
  display: block;
  width: 100%;
  height: auto;
}

.gs-debug {
  outline: 1px dashed rgba(255, 0, 0, 0.4);
}

/* Animação do scroll-icon do home*/
.gs-scroll-icon {
  will-change: transform, opacity;
}

.gs-scroll-icon .scroll-indicator-svg {
  display: block;
  width: 100%;
  height: auto;
}

.gs-scroll-icon .scroll-arrow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
/*----------------------------------*/

@media (prefers-reduced-motion: reduce) {
  .gs-animate,
  .gs-fade-up,
  .gs-split-lines,
  .gs-motion-path,
  .gs-scramble-text,
  .gs-draw-svg,
  .gs-morph-svg,
  .gs-stagger-item,
  .gs-parallax,
  .gs-scrub,
  .gs-pin,
  .gs-draggable {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .gs-scroll-icon {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .gs-fade-up {
    opacity: 0;
    transform: translateY(60px);
    visibility: hidden;
  }
  .gs-prehide.gs-fade-up {
  opacity: 0;
  visibility: hidden;
}
/* Força o container a ser uma âncora */
.gs-draw-circle {
    position: relative !important;
    display: inline-block !important; /* Essencial para o círculo não ficar gigante */
    vertical-align: middle;
}

/* Força o SVG a flutuar sobre o texto */
.gs-draw-svg-circle {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 120% !important;
    height: 160% !important;
    z-index: 10 !important;
    pointer-events: none;
    overflow: visible !important;
    /* Começa invisível */
    opacity: 0;
    visibility: hidden;
}

.gs-draw-svg {
    stroke: white !important; /* Garante que a linha seja branca */
    stroke-width: 2px;
}
}

/* =========================================================
   Cátedra — Padronização visual de Editais e Projetos
   =========================================================
   Objetivo:
   Fazer com que a lista de Projetos tenha a mesma aparência
   visual da lista de Editais.

   Estratégia:
   1. O estilo dos Editais permanece como padrão principal.
   2. As classes de Projetos recebem as mesmas regras dos Editais.
   3. O PHP dos shortcodes não precisa ser alterado para esta parte visual.
   4. A listagem passa a ter no máximo 3 colunas no desktop.
   5. O botão é protegido contra distorções quando o item não possui
      imagem destacada.

   Observação:
   A diferença visual vista entre Editais e Projetos ocorria
   principalmente porque algumas imagens de Projetos eram horizontais
   e porque a grade permitia muitas colunas dependendo da largura
   disponível da página.
   ========================================================= */

/* Container das listas.
   Define uma grade de cards com no máximo 3 colunas no desktop.

   Cada coluna tem largura mínima de 280px e máxima de 360px.
   O uso de repeat(3, ...) impede que a tela exiba 4 ou mais cards
   na mesma linha, mantendo a leitura mais consistente. */
.catedra-editais-lista,
.catedra-projetos-lista,
.catedra-publicacoes-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding: 0;
}

/* Cards dos itens.
   .catedra-edital-card é o estilo-base.
   .catedra-projeto-card herda o mesmo padrão para manter
   consistência visual entre as seções do site.

   align-content: start evita que o conteúdo fique distribuído
   verticalmente de maneira estranha quando o card tem menos elementos,
   por exemplo quando não há imagem destacada. */
.catedra-edital-card,
.catedra-projeto-card,
.catedra-publicacao-card {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  width: 100%;
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 35, 72, 0.06);
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Estado hover compartilhado.
   Mantém a mesma resposta visual em cards de Editais e Projetos. */
.catedra-edital-card:hover,
.catedra-projeto-card:hover,
.catedra-publicacao-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 147, 221, 0.35);
  box-shadow: 0 16px 32px rgba(0, 35, 72, 0.12);
}

/* Imagem destacada.
   Padroniza as imagens dos cards em proporção 16:9,
   adequada para banners, posts institucionais e cards web.

   Importante:
   Para boa qualidade visual, o PHP deve usar imagem 'large',
   não 'medium'. */
.catedra-edital-card img,
.catedra-projeto-card img,
.catedra-publicacao-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
}

/* Título dos cards.
   Mantém o mesmo peso, tamanho e espaçamento nos dois tipos
   de conteúdo. */
.catedra-edital-card h3,
.catedra-projeto-card h3,
.catedra-publicacao-card h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.2vw, 1.45rem);
  line-height: 1.3;
  font-weight: 700;
  color: #000000;
}

/* Link do título.
   Remove sublinhado padrão e herda a cor definida no título. */
.catedra-edital-card h3 a,
.catedra-projeto-card h3 a,
.catedra-publicacao-card h3 a {
  color: inherit;
  text-decoration: none;
}

/* Hover do título.
   Usa o azul institucional aplicado no restante do site. */
.catedra-edital-card h3 a:hover,
.catedra-projeto-card h3 a:hover,
.catedra-publicacao-card h3 a:hover {
  color: #0093DD;
}

/* Metadados.
   Usado para data ou informações auxiliares abaixo do título. */
.catedra-edital-meta,
.catedra-projeto-meta,
.catedra-publicacao-meta {
  font-size: 0.92rem;
  line-height: 1.4;
  font-weight: 600;
  color: #0093DD;
}

/* Resumo dos cards.
   Padroniza o texto de apoio exibido abaixo dos metadados. */
.catedra-edital-card p,
.catedra-projeto-card p,
.catedra-publicacao-card p {
  margin: 0;
  color: #000000;
  font-size: 1rem;
  line-height: 1.6;
}

/* Botão de acesso.
   O estilo de .catedra-edital-link prevalece.
   .catedra-projeto-link replica o mesmo comportamento visual.

   As regras abaixo também corrigem o problema do botão ficar
   arredondado/distorcido quando o projeto não possui imagem destacada.
   Para isso, o botão recebe largura automática, altura mínima controlada,
   align-self e justify-self no início do card, e aspect-ratio desativado. */
.catedra-edital-link,
.catedra-projeto-link,
.catedra-publicacao-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  align-self: start;
  width: auto;
  max-width: max-content;
  min-height: 42px;
  height: auto;
  aspect-ratio: auto;
  margin-top: 0.25rem;
  padding: 0.72rem 1.05rem;
  border: 1px solid #0093DD;
  border-radius: 999px;
  background: #0093DD;
  color: #ffffff;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Hover do botão de acesso.
   Mantém o comportamento visual igual para Editais e Projetos. */
.catedra-edital-link:hover,
.catedra-projeto-link:hover,
.catedra-publicacao-link:hover {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Tablet.
   Reduz a grade para no máximo 2 colunas. */
@media (max-width: 1024px) {
  .catedra-editais-lista,
  .catedra-projetos-lista,
  .catedra-publicacoes-lista {
    grid-template-columns: repeat(2, minmax(280px, 360px));
  }
}

/* Mobile.
   Em telas pequenas, os cards ocupam uma coluna e o botão
   ocupa toda a largura para melhorar toque e leitura. */
@media (max-width: 640px) {
  .catedra-editais-lista,
  .catedra-projetos-lista,
  .catedra-publicacoes-lista {
    grid-template-columns: 1fr;
  }

  .catedra-edital-card,
  .catedra-projeto-card,
  .catedra-publicacao-card {
    padding: 1rem;
    border-radius: 14px;
  }

  .catedra-edital-card img,
  .catedra-projeto-card img,
  .catedra-publicacao-card img {
    height: 240px;
  }

  .catedra-edital-link,
  .catedra-projeto-link,
  .catedra-publicacao-link {
    width: 100%;
    max-width: none;
  }
}

/* =========================================================
   Cátedra — Filtros compartilhados de Editais e Publicações
   =========================================================
   Este bloco padroniza os filtros gerados pelos shortcodes:

   - [editais]
   - [publicacoes]

   A lógica agora é a mesma nos dois casos:
   - o PHP gera um container com a classe .catedra-filtros;
   - cada botão recebe a classe .catedra-filtro;
   - o filtro selecionado recebe a classe .is-active.

   Classes específicas continuam disponíveis para ajustes futuros:
   - .catedra-editais-filtros
   - .catedra-edital-filtro
   - .catedra-publicacoes-filtros
   - .catedra-publicacao-filtro
   ========================================================= */

/* Container comum dos filtros.
   Mantém Editais e Publicações sempre alinhados à esquerda,
   sem depender de alinhamento de blocos Gutenberg. */
.catedra-filtros,
.catedra-editais-filtros,
.catedra-publicacoes-filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 1.5rem 0 2rem;
  padding: 0;
  text-align: left;
}

/* Botão comum dos filtros.
   Replica o visual usado nos filtros que estavam funcionando em Publicações,
   agora também aplicado aos filtros automáticos de Editais. */
.catedra-filtro,
.catedra-edital-filtro,
.catedra-publicacao-filtro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.72rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #000000;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  box-sizing: border-box;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

/* Hover dos filtros.
   Dá feedback visual sem preencher todos os botões. */
.catedra-filtro:hover,
.catedra-edital-filtro:hover,
.catedra-publicacao-filtro:hover {
  color: #0093DD;
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* Filtro ativo.
   O item ativo recebe o mesmo botão azul usado no padrão visual do site. */
.catedra-filtro.is-active,
.catedra-edital-filtro.is-active,
.catedra-publicacao-filtro.is-active {
  background: #0093DD;
  border-color: #0093DD;
  color: #ffffff;
}

/* Hover do filtro ativo.
   Mantém o botão ativo azul, sem mudança brusca. */
.catedra-filtro.is-active:hover,
.catedra-edital-filtro.is-active:hover,
.catedra-publicacao-filtro.is-active:hover {
  background: #0093DD;
  border-color: #0093DD;
  color: #ffffff;
}

/* Mobile.
   Mantém os filtros alinhados à esquerda.
   Se preferir filtros em largura total no celular, troque width:auto por width:100%. */
@media (max-width: 640px) {
  .catedra-filtros,
  .catedra-editais-filtros,
  .catedra-publicacoes-filtros {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .catedra-filtro,
  .catedra-edital-filtro,
  .catedra-publicacao-filtro {
    width: auto;
  }
}

/* =========================================================
   Cátedra — Shortcode [ensino]
   =========================================================
   Objetivo:
   Criar uma listagem própria para o CPT Ensino, mantendo:
   - filtros no mesmo padrão de Editais e Publicações;
   - cards horizontais inspirados na referência visual aprovada;
   - azul institucional no lugar dos elementos verdes da imagem-base.
   ========================================================= */

/* Container da lista de Ensino.
   Diferente de Editais/Publicações, aqui a listagem é vertical,
   com cards horizontais largos. */
.catedra-ensino-lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
  margin: 1.5rem 0;
  padding: 0;
  box-sizing: border-box;
}

/* Card principal do Ensino.
   Usa layout horizontal semelhante ao mockup selecionado. */
.catedra-ensino-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  width: 100%;
  padding: 1.35rem 1.35rem 1rem;
  background: #ffffff;
  border: 1px solid rgba(0, 147, 221, 0.18);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 35, 72, 0.08);
  box-sizing: border-box;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

/* Efeito hover do card.
   Mantém o padrão institucional azul. */
.catedra-ensino-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 147, 221, 0.42);
  box-shadow: 0 18px 38px rgba(0, 35, 72, 0.13);
}

/* Número circular do card.
   Substitui o verde do mockup pelo azul usado no site. */
.catedra-ensino-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: 0.1rem;
  border-radius: 999px;
  background: #0093DD;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(0, 147, 221, 0.24);
}

/* Área interna do card.
   Divide o conteúdo em duas colunas no desktop. */
.catedra-ensino-conteudo {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(280px, 1.15fr);
  gap: 1.5rem;
  align-items: start;
}

/* Categoria/tipo do item.
   Exemplo: Disciplina de Pós-Graduação. */
.catedra-ensino-tipo {
  margin-bottom: 0.35rem;
  color: #0093DD;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Título do card. */
.catedra-ensino-titulo {
  margin: 0;
  color: #003B71;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 800;
  line-height: 1.18;
}

/* Link do título. */
.catedra-ensino-titulo a {
  color: inherit;
  text-decoration: none;
}

/* Hover do título. */
.catedra-ensino-titulo a:hover {
  color: #0093DD;
}

/* Bloco de docentes. */
.catedra-ensino-docentes {
  margin-top: 1rem;
  color: #1f2933;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Rótulo "Docentes". */
.catedra-ensino-docentes strong {
  display: block;
  margin-bottom: 0.35rem;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 800;
}

/* Lista de docentes. */
.catedra-ensino-docentes ul {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Item da lista de docentes.
   O marcador visual usa azul no lugar do verde. */
.catedra-ensino-docentes li {
  position: relative;
  padding-left: 1.25rem;
}

/* Ícone simples de pessoa via CSS. */
.catedra-ensino-docentes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid #0093DD;
  border-radius: 999px;
  box-sizing: border-box;
}

/* Resumo do item. */
.catedra-ensino-coluna-resumo p {
  margin: 0;
  color: #1f2933;
  font-size: 1rem;
  line-height: 1.6;
}

/* Rodapé do card.
   Reúne tags e botões na mesma linha. */
.catedra-ensino-rodape {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1.15rem;
}

/* Área das tags. */
.catedra-ensino-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

/* Tags/metadados.
   Substitui o verde do mockup por azul institucional suave. */
.catedra-ensino-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.38rem 0.65rem;
  border: 1px solid rgba(0, 147, 221, 0.14);
  border-radius: 8px;
  background: rgba(0, 147, 221, 0.08);
  color: #0069B4;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Área dos botões. */
.catedra-ensino-acoes {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Botões do card. */
.catedra-ensino-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.72rem 1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  box-sizing: border-box;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

/* Botão secundário: Ver detalhes. */
.catedra-ensino-botao-secundario {
  border: 1px solid #0069B4;
  background: #ffffff;
  color: #003B71;
}

/* Botão primário: Baixar programa. */
.catedra-ensino-botao-primario {
  border: 1px solid #0093DD;
  background: #0093DD;
  color: #ffffff;
}

/* Hover dos botões. */
.catedra-ensino-botao:hover {
  transform: translateY(-1px);
}

.catedra-ensino-botao-secundario:hover {
  background: #003B71;
  border-color: #003B71;
  color: #ffffff;
}

.catedra-ensino-botao-primario:hover {
  background: #003B71;
  border-color: #003B71;
  color: #ffffff;
}

/* Tablet.
   Mantém o card horizontal, mas reduz espaçamentos. */
@media (max-width: 1024px) {
  .catedra-ensino-card {
    gap: 1rem;
    padding: 1.15rem;
  }

  .catedra-ensino-conteudo {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .catedra-ensino-rodape {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: column;
  }

  .catedra-ensino-acoes {
    justify-content: flex-start;
  }
}

/* Mobile.
   Em telas pequenas, o número vai para o topo e o conteúdo ocupa uma coluna. */
@media (max-width: 640px) {
  .catedra-ensino-card {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .catedra-ensino-numero {
    width: 42px;
    height: 42px;
  }

  .catedra-ensino-conteudo,
  .catedra-ensino-rodape {
    grid-column: 1;
  }

  .catedra-ensino-rodape {
    margin-top: 1rem;
  }

  .catedra-ensino-tags {
    width: 100%;
  }

  .catedra-ensino-acoes {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .catedra-ensino-botao {
    width: 100%;
  }
}