/* ══════════════════════════════════════════════════════════
   PÁGINA DE PROJETO (estilo Behance) — usa os tokens e a base do style.css
   Cabeçalho · tela do projeto · fechamento (WhatsApp + próximo projeto) · barra lateral · lightbox
   ══════════════════════════════════════════════════════════ */

.pj-page{background:var(--ink);color:var(--cream)}

/* cabeçalho enxuto: logo, voltar e idioma */
.pj-nav .nav__actions{gap:10px}
.pj-back{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;border-radius:99px;
  background:rgba(255,234,224,.06);font-size:13px;font-weight:500;transition:background .3s;
}
.pj-back svg{width:18px;height:18px;transition:transform .5s var(--spring)}
.pj-back:hover{background:rgba(255,234,224,.14)}
.pj-back:hover svg{transform:translateX(-3px)}

.pj{outline:none}

/* ── cabeçalho do projeto ── */
.pjh{padding-top:clamp(120px,13vw,170px);padding-bottom:clamp(40px,5vw,72px)}
.pjh__crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:var(--muted-dark);margin-bottom:clamp(14px,1.6vw,20px)}
.pjh__crumb a{color:var(--brown-on-dark);transition:color .3s}
.pjh__crumb a:hover{color:var(--cream)}
.pjh__crumb a::after{content:"/";margin-left:14px;color:var(--line-dark)}
.pjh__title{font-size:clamp(40px,6.6vw,104px);font-weight:700;letter-spacing:-.05em;line-height:.94;max-width:16ch}
.pjh__grid{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,96px);
  margin-top:clamp(28px,3.4vw,48px);padding-top:clamp(24px,2.6vw,36px);border-top:1px solid var(--line-dark);
}
.pjh__desc{display:grid;gap:1em}
.pjh__desc p{font-size:clamp(16px,1.3vw,19px);line-height:1.65;color:rgba(255,234,224,.8);max-width:60ch}
.pjh__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px;align-content:start}
.pjh__meta dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:6px}
.pjh__meta dd{font-size:15px;font-weight:500;line-height:1.5}

/* entrada do cabeçalho a cada projeto aberto */
.pjh > *{opacity:0;transform:translateY(22px)}
.pjh.is-in > *{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.pjh.is-in > :nth-child(2){transition-delay:.08s}
.pjh.is-in > :nth-child(3){transition-delay:.16s}

/* ── tela do projeto (módulos do Behance) ── */
.pjc{max-width:1400px;margin:0 auto;padding-inline:clamp(0px,2vw,24px);display:grid;gap:4px}
/* com a barra lateral visível, a tela do projeto deixa espaço para ela (como no Behance) */
@media (min-width:1101px){ .pjc{max-width:min(1400px,calc(100vw - 168px))} }
.pjc__mod{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.pjc__mod.is-in{opacity:1;transform:none}
.pjc__img{display:block;width:100%;padding:0;border:0;background:var(--ink-2);cursor:zoom-in;overflow:hidden}
.pjc__img img{width:100%;height:auto;transition:scale .8s var(--ease)}
.pjc__img:focus-visible{outline-offset:-3px}
.pjc__grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:4px;align-items:start}
.pjc__grid .pjc__img:hover img{scale:1.03}
.pjc__text{padding:clamp(48px,7vw,104px) var(--pad);display:grid;gap:1.1em;justify-items:center;text-align:center}
.pjc__text p{max-width:58ch;font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:rgba(255,234,224,.82)}
.pjc__video{position:relative;aspect-ratio:16/9;background:#000}
.pjc__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pjc__vfile{position:relative;background:#000}
.pjc__vfile video{display:block;width:100%;height:100%;object-fit:contain}
/* vídeos seguidos: lado a lado (até 5 por linha no computador, 2 no celular) */
.pjc__vgrid{display:grid;grid-template-columns:repeat(min(var(--n,2),5),minmax(0,1fr));gap:4px;align-items:start}
/* em pé: cada vídeo com no máximo ~360 px de largura, centralizados (2 vídeos não ocupam a tela inteira de altura) */
.pjc__vgrid--tall{grid-template-columns:repeat(min(var(--n,2),5),minmax(0,360px));justify-content:center}
/* deitados: no máximo 2 por linha */
.pjc__vgrid--wide{grid-template-columns:repeat(min(var(--n,2),2),minmax(0,1fr))}
/* botão de som dos vídeos automáticos */
.pjc__snd{
  position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(23,14,13,.62);color:var(--cream);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .3s,transform .4s var(--spring);
}
.pjc__snd:hover{background:rgba(23,14,13,.85);transform:scale(1.06)}
.pjc__snd svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pjc__snd svg path:first-child{fill:currentColor;stroke:none}
.pjc__snd .pjc__snd-w{display:none}
/* play no centro: só aparece se o celular bloquear a reprodução automática */
.pjc__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:64px;height:64px;border:0;border-radius:50%;
  background:rgba(23,14,13,.62);color:var(--cream);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.pjc__play[hidden]{display:none}
.pjc__play svg{width:26px;height:26px;fill:currentColor;margin-left:3px}
.pjc__snd[aria-pressed="true"] .pjc__snd-w{display:block}
.pjc__snd[aria-pressed="true"] .pjc__snd-x{display:none}

/* projetos ainda sem imagens */
.pjc__ph{
  display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:4/5;padding:clamp(18px,2.4vw,28px);
  background:linear-gradient(150deg,#6e4632 0%,var(--brown-dark) 55%,#2b1b19 100%);
}
.pjc__ph span{font-size:clamp(48px,6vw,88px);font-weight:700;letter-spacing:-.05em;line-height:.9;color:rgba(255,234,224,.9)}
.pjc__ph small{align-self:flex-end;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,234,224,.7)}

/* ── fechamento ── */
.pj-end{position:relative;padding-block:clamp(88px,11vw,160px) clamp(56px,7vw,96px)}
.pj-end__cta{padding-bottom:clamp(56px,7vw,96px);border-bottom:1px solid var(--line-dark)}
.pj-end__title{font-size:clamp(36px,5.6vw,88px);font-weight:700;letter-spacing:-.045em;line-height:.98;max-width:14ch}

/* próximo projeto */
.pj-next{position:relative;display:block;padding-top:clamp(36px,4.4vw,56px)}
.pj-next[hidden]{display:none}
.pj-next__label{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:14px}
.pj-next__row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.pj-next__text{display:grid;gap:10px;min-width:0}
.pj-next__meta{font-size:14px;color:var(--brown-on-dark)}
.pj-next__title{
  font-size:clamp(40px,7vw,120px);font-weight:700;letter-spacing:-.05em;line-height:.92;
  background:linear-gradient(90deg,var(--cream) 50%,rgba(255,234,224,.38) 50%) 100% 0/200% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background-position .9s var(--ease);
}
.pj-next:hover .pj-next__title,.pj-next:focus-visible .pj-next__title{background-position:0 0}
.pj-next__go{
  display:grid;place-items:center;flex:none;width:clamp(64px,7vw,96px);height:clamp(64px,7vw,96px);border-radius:50%;
  border:1px solid rgba(255,234,224,.28);transition:background .4s,color .4s,border-color .4s,transform .6s var(--spring);
}
.pj-next__go svg{width:40%;height:40%}
.pj-next:hover .pj-next__go{background:var(--cream);color:var(--brown-dark);border-color:var(--cream);transform:translateX(6px)}
/* miniatura fixa (telas de toque); no desktop a prévia segue o mouse */
.pj-next__thumb{display:none}

.pj-preview{
  position:fixed;left:0;top:0;z-index:40;width:clamp(240px,22vw,340px);aspect-ratio:808/632;translate:-50% -112%;
  border-radius:16px;overflow:hidden;pointer-events:none;box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
  opacity:0;scale:.6;transition:opacity .35s var(--ease),scale .6s var(--spring);
}
.pj-preview.is-on{opacity:1;scale:1}
.pj-preview img{width:100%;height:100%;object-fit:cover}

/* ── barra lateral ── */
.pj-rail{
  position:fixed;right:clamp(12px,1.6vw,24px);top:50%;z-index:30;translate:0 -50%;
  display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:99px;
  background:rgba(23,14,13,.72);border:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.pj-rail__btn{
  position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,234,224,.07);color:var(--cream);transition:background .3s,color .3s,transform .5s var(--spring);
}
.pj-rail__btn svg{width:20px;height:20px}
.pj-rail__btn:hover{background:var(--cream);color:var(--brown-dark);transform:scale(1.06)}
.pj-rail__btn--whats{background:#25d366;color:#04220f}
.pj-rail__btn--whats:hover{background:#2ee673;color:#04220f}
.pj-rail__btn.is-done{background:var(--brown);color:var(--cream)}
.pj-rail__tip{
  position:absolute;right:calc(100% + 14px);top:50%;translate:0 -50%;white-space:nowrap;pointer-events:none;
  padding:7px 12px;border-radius:99px;background:var(--cream);color:var(--brown-dark);font-size:13px;font-weight:600;
  opacity:0;transform:translateX(6px);transition:opacity .25s,transform .4s var(--ease);
}
.pj-rail__btn:hover .pj-rail__tip,.pj-rail__btn:focus-visible .pj-rail__tip,.pj-rail__btn.is-done .pj-rail__tip{opacity:1;transform:none}

.pj-foot{border-top:1px solid var(--line-dark);padding:24px 0 calc(24px + env(safe-area-inset-bottom,0px))}
.pj-foot__in{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;color:var(--muted-dark)}

/* ── imagem ampliada ── */
.lightbox{
  width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(16px,4vw,48px);border:0;
  background:rgba(12,7,6,.95);color:var(--cream);
}
.lightbox[open]{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;animation:lbIn .35s var(--ease)}
.lightbox::backdrop{background:rgba(0,0,0,.6)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lightbox__fig{grid-column:2;display:grid;gap:12px;justify-items:center;min-width:0;max-height:100%}
.lightbox__fig img{max-width:100%;max-height:calc(100dvh - 140px);object-fit:contain;border-radius:8px}
.lightbox__fig figcaption{font-size:13px;color:var(--muted-dark);font-variant-numeric:tabular-nums}
.lightbox__close{position:absolute;top:16px;right:16px}
.lightbox__close,.lightbox__nav{
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,234,224,.24);
  background:rgba(23,14,13,.6);color:var(--cream);cursor:pointer;transition:background .3s;
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,234,224,.12)}
.lightbox__close svg,.lightbox__nav svg{width:20px;height:20px}

/* títulos grandes na Bricolage Grotesque (mesma fonte dos títulos da home) */
.pjh__title,.pj-end__title,.pj-next__title{font-family:var(--display);font-weight:600;letter-spacing:-.04em}
.pjh__title{font-size:clamp(40px,6.2vw,96px);line-height:1.02;max-width:18ch}
.pj-end__title{font-size:clamp(36px,5.2vw,80px);line-height:1.04;max-width:14ch}
.pj-next__title{font-size:clamp(40px,7vw,112px);line-height:1}

/* ── responsivo ── */
@media (max-width:1100px){
  .pj-rail{display:none}
}
@media (max-width:960px){
  .pjh__grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .pj-back span{display:none}
  .pj-back{padding:0 10px}
  .pjc{gap:3px}
  .pjc__grid{gap:3px}
  .pjc__vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
  .pjc__vgrid--wide{grid-template-columns:1fr}
  .pjc__grid[data-cols="3"],.pjc__grid[data-cols="4"],.pjc__grid[data-cols="5"],.pjc__grid[data-cols="6"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pjc__soon{grid-template-columns:1fr}
  .pj-next__go{display:none}
  .lightbox[open]{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .lightbox__fig{grid-column:1}
  .lightbox__nav{position:absolute;bottom:20px}
  .lightbox__nav--prev{left:20px}
  .lightbox__nav--next{right:20px}
}
@media (hover:none){
  .pj-preview{display:none}
  .pj-next.has-img .pj-next__thumb{display:block;margin-top:20px;max-width:420px;aspect-ratio:808/632;border-radius:16px;overflow:hidden}
  .pj-next__thumb img{width:100%;height:100%;object-fit:cover}
  .pj-next__title{color:var(--cream);background:none}
}