/* =========================================================
   Página de projetos
   ========================================================= */

/* nas páginas internas o conteúdo começa abaixo do header fixo */
.pagina-interna{ padding-top:var(--header-h); }

.pabertura{
  padding:clamp(56px,7vw,110px) 40px clamp(40px,5vw,72px);
  max-width:1100px;
}

.pabertura__eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:clamp(20px,2.4vw,32px);
  font-size:11px;
  font-weight:300;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--farol);
}
.pabertura__eyebrow::before{ content:''; width:28px; height:1px; background:currentColor; }

.pabertura__titulo{
  font-family:'Aboreto','Aleo',Georgia,serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(30px,4.4vw,72px);
  line-height:1.1;
  letter-spacing:.012em;
  color:var(--travessia);
}

.pabertura__texto{
  margin-top:clamp(24px,2.8vw,40px);
  max-width:56ch;
  font-size:clamp(13px,1.06vw,17px);
  font-weight:300;
  line-height:1.78;
  color:var(--tinta-suave);
}

/* --- a pilha ---
   Cada item é sticky no mesmo topo: o de baixo sobe e cobre o anterior.
   O item precisa ser mais alto que o card para sobrar percurso de rolagem
   entre uma troca e outra. */
.pilha{ padding:0 var(--edge) 0; }

.pilha__item{
  position:sticky;
  top:calc(var(--header-h-compact) + 16px);
  height:calc(100vh - var(--header-h-compact) - 32px);
  margin-bottom:34vh;   /* o percurso entre um card e o próximo */
}
.pilha__item:last-child{ margin-bottom:0; }

.pcard{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:20px;
  background:var(--travessia);
  transform-origin:top center;   /* encolhe pelo topo, como uma carta indo pro fundo */
  will-change:transform,filter;
}
.pcard img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.88) contrast(1.03) sepia(.08);
  transition:transform 1.2s var(--ease-out);
}
.pcard:hover img{ transform:scale(1.03); }

.pcard__veu{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    rgba(20,24,32,.66) 0%,
    rgba(20,24,32,.28) 30%,
    rgba(20,24,32,.04) 62%,
    rgba(20,24,32,.10) 100%);
  pointer-events:none;
}

.pcard__nome{
  position:absolute;
  left:clamp(24px,3.4vw,56px);
  right:clamp(24px,3.4vw,56px);
  bottom:clamp(66px,7vw,104px);
  font-family:'Aboreto','Aleo',Georgia,serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(26px,4.6vw,76px);
  line-height:1.06;
  letter-spacing:.012em;
  color:var(--oficio);
}

.pcard__meta{
  position:absolute;
  left:clamp(24px,3.4vw,56px);
  right:clamp(24px,3.4vw,56px);
  bottom:clamp(28px,3vw,44px);
  display:flex;
  gap:clamp(16px,2vw,34px);
  flex-wrap:wrap;
  font-size:11px;
  font-weight:300;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(239,232,216,.82);
}

/* "ver projeto" com os cantos, como na referência */
.pcard__ver{
  position:absolute;
  top:clamp(24px,3.4vw,54px);
  right:clamp(24px,3.4vw,54px);
  padding:14px 26px;
  font-size:11px;
  font-weight:300;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--oficio);
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .45s var(--ease-soft), transform .55s var(--ease-out);
}
.pcard:hover .pcard__ver{ opacity:1; transform:none; }

/* os quatro colchetes */
.pcard__cantos{ position:absolute; inset:0; pointer-events:none; }
.pcard__cantos::before,
.pcard__cantos::after{
  content:'';
  position:absolute;
  width:11px; height:11px;
  border:1px solid currentColor;
}
.pcard__cantos::before{ top:0; left:0; border-right:0; border-bottom:0; }
.pcard__cantos::after{ bottom:0; right:0; border-left:0; border-top:0; }
.pcard__ver::before,
.pcard__ver::after{
  content:'';
  position:absolute;
  width:11px; height:11px;
  border:1px solid currentColor;
}
.pcard__ver::before{ top:0; right:0; border-left:0; border-bottom:0; }
.pcard__ver::after{ bottom:0; left:0; border-right:0; border-top:0; }

/* --- chamada final --- */
.pfim{
  padding:clamp(90px,11vw,170px) 40px clamp(90px,11vw,150px);
  text-align:center;
}
.pfim__titulo{
  font-family:'Aboreto','Aleo',Georgia,serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(24px,3vw,48px);
  line-height:1.2;
  letter-spacing:.012em;
  color:var(--travessia);
}
.pfim__link{ margin-top:clamp(28px,3vw,44px); font-size:13px; }

@media (max-width:900px){
  .pabertura{ padding:44px 22px 34px; }
  .pilha__item{
    top:calc(var(--header-h-compact) + 10px);
    height:calc(100vh - var(--header-h-compact) - 20px);
    margin-bottom:26vh;
  }
  .pfim{ padding:70px 22px 80px; }
}

/* --- troca de página ---
   Sem isso, sair da lista e chegar no projeto parece a mesma tela: a foto de
   capa é a mesma imagem, e nada indica que houve navegação. */
body{ opacity:1; }
body.saindo{ opacity:0; transition:opacity .26s ease-out; }

@media (prefers-reduced-motion:reduce){
  body.saindo{ transition:none; }
}