/* ==========================================================================
   Página de projeto, redesign 2026.

   A regra da peça: a imagem é a protagonista. Largura inteira da coluna de
   conteúdo, nenhuma moldura (sem cartão, sem borda, sem raio, sem sombra),
   imagens do mesmo conjunto encostadas uma na outra e muito respiro entre os
   blocos. O texto fica pequeno, centralizado e discreto, servindo a imagem.

   Este arquivo é carregado só por projeto.php, depois do style.css, e nunca
   edita o style.css: por isso cada regra que precisa vencer o estilo antigo
   vem prefixada por "body.pagina-projeto".
   ========================================================================== */

body.pagina-projeto {
  /* Fallback dos tokens novos da paleta, para o caso de este arquivo entrar
     no ar antes de o :root do style.css receber as cores novas. */
  --neon: var(--cor-neon, #c2f53c);
  --neon-forte: var(--cor-neon-forte, #a8e619);

  /* Respiro entre um bloco de imagens e o próximo. */
  --respiro-bloco: clamp(56px, 8vw, 128px);
}

/* --------------------------------------------------------------------------
   1. A sequência visual
   -------------------------------------------------------------------------- */

body.pagina-projeto .projeto-visual {
  background: var(--cor-fundo-suave);
  padding-block: clamp(44px, 7vw, 104px);
}

body.pagina-projeto .projeto-sequencia {
  display: flex;
  flex-direction: column;
  gap: var(--respiro-bloco);
}

/* Dentro de um bloco as imagens ficam coladas: gap zero, margem zero,
   display block para não sobrar o espaço de linha entre as tags. */
body.pagina-projeto .projeto-bloco {
  display: flex;
  gap: 0;
  margin: 0;
}

body.pagina-projeto .projeto-bloco--full {
  flex-direction: column;
  align-items: center;
}

body.pagina-projeto .projeto-bloco--metade {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   2. Cada imagem
   Nenhuma moldura. O --teto-figura vem do PHP e é a largura máxima em que
   aquele arquivo ainda fica nítido: print de celular não é esticado até o
   dobro do tamanho em que foi capturado.
   -------------------------------------------------------------------------- */

body.pagina-projeto .projeto-figura {
  display: block;
  margin: 0;
  padding: 0;
  width: min(100%, var(--teto-figura, 100%));
  line-height: 0;
}

body.pagina-projeto .projeto-bloco--metade .projeto-figura {
  flex: 0 1 min(50%, var(--teto-figura, 50%));
}

body.pagina-projeto .projeto-figura img,
body.pagina-projeto .projeto-figura video,
body.pagina-projeto .projeto-capa img,
body.pagina-projeto .projeto-capa video,
body.pagina-projeto .projeto-galeria img,
body.pagina-projeto .projeto-galeria video {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  object-fit: contain;
}

/* O botão de ampliar é criado pelo main.js em volta de cada imagem:
   ele também não pode trazer moldura nenhuma. */
body.pagina-projeto .projeto-figura .print-ampliar {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  line-height: 0;
}

/* --------------------------------------------------------------------------
   3. Legenda da sequência, pequena e centralizada
   -------------------------------------------------------------------------- */

body.pagina-projeto .projeto-legenda {
  max-width: 54ch;
  margin: clamp(28px, 4vw, 52px) auto 0;
  padding-inline: var(--gutter);
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: var(--cor-texto-medio);
}

/* --------------------------------------------------------------------------
   4. Ficha técnica e créditos, no fim da página
   -------------------------------------------------------------------------- */

body.pagina-projeto .projeto-ficha {
  text-align: center;
  padding-block: clamp(48px, 7vw, 96px);
}

/* Único lugar onde o neon aparece nesta página: um traço fino sobre fundo
   claro, do jeito que o contrato pede. */
body.pagina-projeto .projeto-ficha::before {
  content: '';
  display: block;
  width: 46px;
  height: 2px;
  margin: 0 auto clamp(28px, 4vw, 48px);
  background: var(--neon);
}

body.pagina-projeto .projeto-ficha__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px clamp(32px, 6vw, 72px);
  margin: 0;
  max-width: 920px;
  margin-inline: auto;
}

body.pagina-projeto .projeto-ficha__lista > div {
  min-width: 120px;
}

body.pagina-projeto .projeto-ficha__lista dt {
  font: 10px/1 var(--fonte-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}

body.pagina-projeto .projeto-ficha__lista dd {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cor-tinta);
}

body.pagina-projeto .projeto-ficha__lista dd a {
  color: var(--cor-acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.pagina-projeto .projeto-ficha__lista dd a:hover {
  text-decoration-color: var(--neon-forte);
}

body.pagina-projeto .projeto-ficha__credito {
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 48ch;
  font-size: 12px;
  line-height: 1.8;
  color: var(--cor-texto-fraco);
}

/* --------------------------------------------------------------------------
   5. Celular
   Em tela estreita a linha de duas imagens vira uma pilha, ainda colada, e
   cada print ocupa a largura inteira da coluna.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  body.pagina-projeto {
    --respiro-bloco: clamp(48px, 13vw, 72px);
  }

  /* Na tela estreita a ficha vira uma lista de linhas centralizadas, em vez
     de uma fila que quebra torta. */
  body.pagina-projeto .projeto-ficha__lista {
    flex-direction: column;
    gap: 18px;
  }

  body.pagina-projeto .projeto-bloco--metade {
    flex-direction: column;
    align-items: center;
  }

  body.pagina-projeto .projeto-figura,
  body.pagina-projeto .projeto-bloco--metade .projeto-figura {
    width: 100%;
    flex: 0 1 auto;
  }

  body.pagina-projeto .projeto-legenda {
    font-size: 12.5px;
  }
}