/* ==========================================================================
   Página de projeto (template)
   Linha de topo a --project-top do topo: título à esquerda, cliente à
   direita e a descrição ao centro entre os dois, com a 1.ª linha alinhada
   ao nome do projeto. O conteúdo começa --content-gap abaixo.
   No fim, o footer é a navegação da home (css/home.css, .home--footer).
   Vinda da home, a linha de topo já chega a esta posição (a subida é feita
   na home, ver home.js), e a página continua a partir daí.
   ========================================================================== */

.project-page {
  --content-gap: 160px;       /* descrição → conteúdo */
}

.project {
  padding: var(--project-top) var(--site-margin) var(--site-margin);
}

/* título + descrição; o conteúdo começa --content-gap abaixo */
.project__intro { padding-bottom: var(--content-gap); }

/* ---------- Título | descrição | cliente ---------- */

.project__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* colunas laterais iguais: descrição ao centro */
  grid-template-areas: "title description client";
  align-items: baseline;                  /* 1.ª linha da descrição = linha do título */
  gap: var(--gutter);
  line-height: var(--lh-list);
}
.project__title       { grid-area: title; }
.project__description { grid-area: description; }
.project__client      { grid-area: client; }
.project__title,
.project__client {
  margin: 0;
  font: inherit;
}
.project__client { justify-self: end; text-align: right; }

/* ---------- Descrição ---------- */

.project__description {
  width: 34em;
  max-width: 100%;
  line-height: var(--lh);
}
.project__description p { margin: 0 0 1em; }
.project__description p:last-child { margin-bottom: 0; }

/* ---------- Galeria ---------- */

.project__gallery {
  display: grid;
  gap: var(--gutter);
}
.project__row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), 1fr);
  gap: var(--gutter);
}
.project__row img { width: 100%; height: auto; }

.project__video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
/* respiro abaixo dos vídeos: 100px no total (o gap da galeria já conta) */
.project__row--video { margin-bottom: calc(var(--video-space, 100px) - var(--gutter)); }

.project__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* revelação no scroll: cada imagem/vídeo sobe e aparece em fade quando entra
   no ecrã (.is-revealed, em project.js); na mesma linha, um a seguir ao outro */
.project__media {
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 1.2s var(--ease),
    transform 1.4s var(--ease);
  transition-delay: calc(var(--j, 0) * 120ms);
}
.project__media.is-revealed { opacity: 1; transform: none; }

@media (max-width: 767px) {
  /* no mobile a descrição desce para baixo do título e do cliente */
  .project__head {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title client"
      "description description";
    row-gap: 40px;
  }
  .project__description { width: auto; }

  /* no mobile, linhas com várias imagens ficam no máximo com 2 colunas */
  .project__row--multi { grid-template-columns: repeat(2, 1fr); }

}

.project__missing a { text-decoration: underline; }

/* ---------- Entrada ----------
   Direta: tudo aparece em fade, por ordem (a descrição linha a linha).
   Vinda da home (.from-home): a home já trouxe a linha de topo até aqui, por
   isso está visível desde o início e a descrição começa logo a ser escrita.
   As imagens revelam-se no scroll (ver Galeria). */

@keyframes project-opacity {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.project__head        { animation: project-opacity 1.2s var(--ease) 0.2s both; }
.project__description { --text-delay: 0.7s; }   /* linha a linha: ver base.css */

.from-home .project__head { animation: none; }
.from-home .project__description { --text-delay: 0.15s; }

@media (prefers-reduced-motion: reduce) {
  .project__head { animation: none; }
  .project__media { opacity: 1; transform: none; transition: none; }
}