/* ===== Projeto — estilos específicos ===== */

/* Título gigante em azul, meta e intro */
.project-hero{
  padding: 52px 0 24px;
}
.project-title{
  font-family: 'Resolve', sans-serif;
  font-weight: 700;              /* Resolve Bold */
  text-transform: uppercase;
  color: var(--brand);
  line-height: .95;
  letter-spacing: .5px;
  font-size: clamp(44px, 8vw, 96px);
  margin-bottom: 6px;
}
.project-meta{
  font-size: 12px;
  color: #9aa0a6;
  margin-bottom: 22px;
}

/* Descrição do projeto — full width + Resolve Light */
.project-intro{
  width: 100%;
  max-width: none;                 /* ocupa toda a largura do .container */
  font-family: 'Resolve', sans-serif;
  font-weight: 300;                /* Light */
  font-size: 18px;
  line-height: 1.8;
  color: #4b5563;                  /* cinza elegante sobre branco */
  margin-top: 8px;
}

/* Palco escuro full-bleed */
.project-stage{
  background: #0b0b0b;            /* preto suave */
  color: #fff;
  padding: 48px 0 36px;
}

/* container mais estreito para as imagens, como no mockup */
.container--narrow{
  max-width: 980px;               /* ajusta 900–1040 conforme fotos */
}

/* ===== Espaçamento consistente entre TODOS os blocos do palco ===== */
.project-stage .container--narrow{
  --g: 24px;                      /* GAP GLOBAL — altera aqui para mudar tudo */
}
.project-stage .container--narrow > *{ margin: 0; }
.project-stage .container--narrow > * + *{ margin-top: var(--g); }

/* Imagens grandes com cantos suaves */
.shot{ margin: 0; }               /* figure tem margem por defeito */
.shot img{
  width: 100%;
  display: block;
  border-radius: 8px;
}

/* divisor grosso entre blocos (sem margens próprias; usa o gap global) */
.project-divider{
  height: 12px;
  background: #111;               /* tom ligeiramente diferente do fundo */
  border: 0;
  border-radius: 6px;
  margin: 0;
}

/* Bloco final em 2 colunas */
.grid-two{
  display: grid;
  grid-template-columns: 1fr 1.6fr; /* esquerda menor, direita maior */
  gap: 28px;
  align-items: start;
}
.project-claim{
  font-family: 'Resolve', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.05;
}
.project-copy{
  font-family: 'Resolve', sans-serif;
  font-weight: 300;               /* Resolve Light */
  font-size: 18px;
  line-height: 1.7;
  color: #e5e7eb;
  text-align: right;              /* como no mockup */
}

/* Vídeo */
.video-full{
  width: 100%;
  aspect-ratio: 16 / 9;           /* mostra sempre a caixa do vídeo */
  display: block;
  border-radius: 8px;
  background: #000;               /* caso o poster falhe, ainda vês o frame */
}

/* ===== Galeria 3 colunas — usa o mesmo gap global ===== */
.gallery-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--g);                  /* igual entre colunas e linhas */
  margin: 0;                      /* sem margens extra — usa o gap global */
}

/* remover margem default do figure e manter altura maior */
.tile{
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 3 / 4;            /* mais alto; ajusta se precisares */
}
.tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.tile:hover img{ transform: scale(1.02); }

/* ===== Responsivo ===== */
@media (max-width: 900px){
  .project-title{ font-size: clamp(40px, 9vw, 72px); }
  .project-intro{ font-size: 16px; }

  .container--narrow{ max-width: 100%; }
  .project-stage .container--narrow{ --g: 20px; }  /* gap ligeiramente menor */

  .grid-two{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .project-copy{ text-align: left; }

  .gallery-3{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px){
  .project-stage .container--narrow{ --g: 16px; }  /* gap mais compacto */
  .gallery-3{ grid-template-columns: 1fr; }
}