/* =========================================================
   Página de projeto individual
   Depende de styles.css (base) e projetos.css (.pagina-interna, .pfim)
   ========================================================= */

/* --- revelação em cortina: o bloco abre de cima para baixo, rápido ---
   é o contraponto do .reveal padrão, que é o texto subindo devagar.

   O recorte vai na IMAGEM, nunca na figura: o IntersectionObserver mede a área
   depois do clip, então uma figura recortada a zero nunca "entra na tela" e
   ficaria invisível para sempre, esperando um sinal que não vem. */
.reveal--cortina{
  opacity:1;
  transform:none;
  filter:none;
}
.reveal--cortina img{
  clip-path:inset(0 0 100% 0);
  transition:clip-path .72s var(--ease-out);
}
.reveal--cortina.is-in img{ clip-path:inset(0 0 0 0); }

/* --- hero --- */
.phero{ padding:0 var(--edge); }

.phero__quadro{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  height:clamp(520px,84vh,940px);
  background:var(--travessia);
}
.phero__quadro img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 45%;
  filter:saturate(.88) contrast(1.03) sepia(.08);
}
.phero__veu{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(20,24,32,.72) 0%,
    rgba(20,24,32,.34) 28%,
    rgba(20,24,32,.04) 60%,
    rgba(20,24,32,.10) 100%);
  pointer-events:none;
}
.phero__nome{
  position:absolute;
  left:clamp(24px,3.4vw,58px);
  right:clamp(24px,3.4vw,58px);
  bottom:clamp(28px,3.4vw,52px);
  font-family:'Aboreto','Aleo',Georgia,serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(28px,4.8vw,78px);
  line-height:1.06;
  letter-spacing:.012em;
  color:var(--oficio);
}

.phero__barra{
  display:flex;
  gap:clamp(20px,6vw,90px);
  flex-wrap:wrap;
  padding:22px clamp(6px,1.4vw,22px) 0;
  border-top:1px solid var(--linha);
  margin-top:22px;
  font-size:11.5px;
  font-weight:300;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tinta-suave);
}

/* --- introdução --- */
.pintro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,4vw,64px);
  align-items:start;
  padding:clamp(70px,9vw,140px) 40px clamp(60px,7vw,110px);
}

.pintro__texto{ grid-column:2; }

.pintro__titulo{
  font-family:'Aboreto','Aleo',Georgia,serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(20px,2.3vw,38px);
  line-height:1.24;
  letter-spacing:.012em;
  color:var(--travessia);
}
.pintro__desc{
  margin-top:clamp(20px,2.4vw,34px);
  max-width:58ch;
  font-size:clamp(13px,1.02vw,16.5px);
  font-weight:300;
  line-height:1.78;
  color:var(--tinta-suave);
}

.pintro__foto{ overflow:hidden; background:#ddd6c4; }
.pintro__foto img{ width:100%; height:100%; object-fit:cover; filter:saturate(.88) contrast(1.03) sepia(.08); }
.pintro__foto--peq{ grid-column:1; aspect-ratio:1/1; max-width:60%; align-self:end; }
.pintro__foto--grd{ grid-column:2; aspect-ratio:4/3.4; }

/* --- detalhes --- */
/* duas linhas: fotos em cima (duas à esquerda, uma à direita),
   título e ficha embaixo */
.pdet{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(34px,4.4vw,72px) clamp(30px,4vw,64px);
  align-items:start;
  padding:0 40px clamp(80px,9vw,130px);
}

.pdet__fotos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.6vw,24px);
}
.pdet__fotos figure{ overflow:hidden; background:#ddd6c4; aspect-ratio:3/3.6; }
.pdet__fotos img,
.pdet__solta img{ width:100%; height:100%; object-fit:cover; filter:saturate(.88) contrast(1.03) sepia(.08); }

/* a foto solta fica à direita, alinhada pela borda, como na referência */
.pdet__solta{
  overflow:hidden;
  background:#ddd6c4;
  aspect-ratio:3/3.6;
  max-width:56%;
  margin-left:auto;
}

.pdet__titulo{
  font-family:'Aboreto','Aleo',Georgia,serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(22px,2.6vw,42px);
  line-height:1.2;
  letter-spacing:.012em;
  color:var(--travessia);
  margin-bottom:clamp(20px,2.4vw,32px);
}
.pdet__desc{
  max-width:56ch;
  font-size:clamp(13px,1.02vw,16.5px);
  font-weight:300;
  line-height:1.78;
  color:var(--tinta-suave);
}

.pdet__lista{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(26px,3vw,44px) clamp(20px,3vw,50px);
  margin-top:clamp(34px,4vw,58px);
  padding-top:clamp(28px,3vw,44px);
  border-top:1px solid var(--linha);
}
.pdet__lista dt{
  font-size:11px;
  font-weight:300;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  margin-bottom:10px;
}
.pdet__lista dd{
  font-size:clamp(13px,1.06vw,17px);
  font-weight:400;
  line-height:1.5;
  color:var(--travessia);
}

/* --- outros projetos --- */
.poutros{ padding:0 40px clamp(60px,7vw,100px); }

.poutros__titulo{
  font-family:'Aboreto','Aleo',Georgia,serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(22px,2.6vw,42px);
  line-height:1.2;
  letter-spacing:.012em;
  color:var(--travessia);
  margin-bottom:clamp(28px,3.2vw,50px);
}

.poutros__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,28px);
}

.ocard figure{
  overflow:hidden;
  border-radius:10px;
  background:#ddd6c4;
  aspect-ratio:4/3;
}
.ocard img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.88) contrast(1.03) sepia(.08);
  transition:transform 1.1s var(--ease-out);
}
.ocard:hover img{ transform:scale(1.05); }
.ocard h3{
  margin-top:16px;
  font-size:12px;
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--travessia);
}

@media (max-width:900px){
  .pintro{ grid-template-columns:1fr; padding:50px 22px 40px; }
  .pintro__texto,.pintro__foto--peq,.pintro__foto--grd{ grid-column:1; }
  .pintro__foto--peq{ max-width:100%; }

  .pdet{ grid-template-columns:1fr; padding:0 22px 60px; }
  .pdet__lista{ grid-template-columns:1fr; }
  .pdet__solta{ max-width:100%; }

  .poutros{ padding:0 22px 50px; }
  .poutros__grid{ grid-template-columns:1fr 1fr; }
}

/* tags do projeto, vindas do painel */
.ptags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:clamp(20px,2.2vw,30px);
}
.ptags span{
  padding:7px 15px;
  border:1px solid var(--linha);
  border-radius:999px;
  font-size:10.5px;
  font-weight:300;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tinta-suave);
}

/* estado de erro/vazio quando o JSON não carrega */
.pvazio{
  padding:clamp(70px,10vw,140px) 40px;
  text-align:center;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tinta-suave);
}

/* --- entrada do hero do projeto ---
   O contraponto da saída: a imagem chega com um leve recuo de zoom e o nome
   sobe, deixando claro que esta é outra página. */
.phero__quadro img{ animation:pheroImg 1.15s var(--ease-out) both; }
@keyframes pheroImg{
  from{ transform:scale(1.07); opacity:.35; }
  to{ transform:none; opacity:1; }
}

.phero__nome{ animation:pheroNome .95s var(--ease-out) .18s both; }
@keyframes pheroNome{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:none; }
}

.phero__barra{ animation:pheroNome .95s var(--ease-out) .3s both; }

@media (prefers-reduced-motion:reduce){
  .phero__quadro img,.phero__nome,.phero__barra{ animation:none; }
}