/* Bd'A — página de projeto. Cena horizontal (desktop) / coluna (mobile).
   Consome tokens.css + style.css (loader, nav, grid, overlay G já vêm de lá).
   --proj-accent é definido por js/projeto.js a partir do dado do projeto. */

.proj-page{background:var(--bg)}
.scene{position:relative;overflow:hidden;--proj-accent:var(--accent)}
.scene .track{display:flex;height:100svh}

/* cada painel de largura fixa é uma "parada" da cena */
.scene .track > *{height:100svh;flex:0 0 auto}

/* ---------- 1 · hero: painel de cor do projeto | foto full-bleed ---------- */
.p-hero{width:100vw;display:grid;grid-template-columns:1fr 1fr}
.p-hero-panel{
  /* acento amostrado do render, aprofundado 20% em direção à tinta: o texto branco pequeno
     (meta/legenda) precisa de 4,5:1 e o tom puro dava só ~3,1:1. Mesma matiz, mais luxo. */
  position:relative;background:color-mix(in srgb,var(--proj-accent) 80%,var(--bda-preto));
  color:var(--proj-ink,var(--over-media));
  padding:clamp(84px,12vh,120px) var(--margin) var(--space-m);
  display:grid;grid-template-rows:auto 1fr auto;
}
.ph-meta{color:currentColor}   /* branco sólido (era 82%): 82% sobre o acento reprovava AA */
.ph-thumb{
  margin:0;align-self:center;justify-self:center;
  width:clamp(130px,13vw,168px);aspect-ratio:150/188;
  border:1px solid color-mix(in srgb,currentColor 55%,transparent);padding:var(--space-4xs);
}
.ph-thumb img{width:100%;height:100%;object-fit:cover}
.ph-legenda{
  font-family:var(--font-display);font-weight:400;font-style:italic;
  font-size:clamp(15px,1.5vw,19px);line-height:1.35;margin:0 0 var(--space-3xs);
  color:currentColor;max-width:24ch;   /* branco sólido (era 90%) pra cruzar 4,5:1 */
}
.ph-name{font-size:clamp(48px,6.4vw,92px);line-height:.96;font-weight:500}
.p-hero-media{position:relative;overflow:hidden;background:var(--bg-dim)}
.p-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* scrim no topo da foto: o céu é claro e o nav é branco sobre o hero — sem isso o menu lava */
.p-hero-media::after{
  content:"";position:absolute;left:0;right:0;top:0;height:130px;z-index:var(--z-scrim);pointer-events:none;
  background:linear-gradient(to bottom,var(--scrim-leve),transparent);
}

/* o apóstrofo do wordmark é malva, mas a cor do hero MUDA a cada projeto (pode colidir).
   Sobre o hero ele acompanha o wordmark (branco, legível em qualquer cor);
   com o header sólido volta a ser o glifo malva sobre o claro. */
body.proj-page .nav .brand-wm .ap{color:var(--over-media)}             /* mesmo branco do nav sobre o hero */
body.proj-page.nav-solid .nav .brand-wm .ap{color:var(--accent-ink)}  /* fundo claro: volta o glifo malva */

/* ---------- 2 · info: descrição | serviços 01–05 | dado + ficha ---------- */
.p-info{
  width:min(48vw,620px);
  padding:clamp(84px,12vh,120px) clamp(36px,4vw,72px) var(--space-m);
  display:grid;grid-template-rows:auto auto 1fr;row-gap:clamp(28px,5vh,56px);
  border-right:1px solid var(--line);
}
.pi-text{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(19px,1.9vw,26px);line-height:1.34;margin:0;max-width:30ch;color:var(--ink);
}
.pi-serv{list-style:none;margin:0;padding:0;max-width:34ch}
.pi-serv li{
  display:flex;gap:var(--space-2xs);align-items:baseline;
  padding:var(--space-3xs) 0;border-top:1px solid var(--line);
}
.pi-serv li:last-child{border-bottom:1px solid var(--line)}
.pi-serv .s-n{color:var(--accent-ink);min-width:2.4ch}
.pi-serv .s-l{font-size:var(--text-meta-s);letter-spacing:.01em;color:var(--ink)}
.pi-side{align-self:end;display:flex;flex-direction:column;gap:clamp(20px,3vh,34px)}
.pi-area{display:flex;align-items:baseline;gap:var(--space-3xs)}
.pi-area-v{font-size:clamp(44px,5vw,72px);line-height:.9;font-weight:500;color:var(--ink)}
.pi-area-u{color:var(--muted)}
.pi-ficha{margin:0;display:grid;gap:0}
.pi-ficha .f-row{
  display:flex;justify-content:space-between;gap:var(--space-xs);
  padding:9px 0;border-top:1px solid var(--line);
}
.pi-ficha dt{margin:0;font-size:var(--text-label-s);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.pi-ficha dd{margin:0;font-size:var(--text-meta-s);color:var(--ink);text-align:right}

/* viewport baixa: o painel de info comprime na vertical pra ficha (6 linhas + dado grande)
   caber em 100svh — medido: em 800px de altura sobravam 151px pra fora */
@media (min-width:761px) and (max-height:900px){
  .p-info{padding-top:76px;row-gap:18px}
  .pi-text{font-size:clamp(17px,1.6vw,21px)}
  .pi-serv li{padding:5px 0}
  .pi-ficha .f-row{padding:5px 0}
  .pi-area-v{font-size:clamp(34px,3.6vw,52px)}
}

/* ---------- 2b · descritivo completo do cliente (texto verbatim, em colunas) ---------- */
.p-descritivo{
  width:min(66vw,900px);
  padding:clamp(84px,12vh,120px) clamp(36px,4vw,72px) var(--space-m);
  border-right:1px solid var(--line);
  columns:2;column-gap:clamp(32px,4vw,56px);
}
.p-descritivo p{
  margin:0 0 var(--space-2xs);font-size:var(--text-meta-s);line-height:1.62;
  color:var(--ink);break-inside:avoid-column;
}
.p-descritivo p:first-child::first-letter{
  font-family:var(--font-display);font-weight:500;font-size:2.6em;line-height:.8;
  float:left;margin:.04em .12em 0 0;color:var(--accent-ink);
}

/* ---------- 3 · galeria: módulos medidos (gap 32px, tudo centrado) ---------- */
.p-gallery{
  display:flex;align-items:center;gap:32px;
  padding-inline:clamp(48px,7vw,120px);
}
.p-gallery .shot{margin:0;flex:0 0 auto;overflow:hidden;background:var(--bg-dim)}
.p-gallery .shot img{width:100%;height:100%;object-fit:cover}
.m-cheia{height:100svh;aspect-ratio:2/3}
.m-grande{height:80svh;aspect-ratio:2/3}
.m-pequena{height:60svh;aspect-ratio:2/3}
.m-pano{height:80svh;aspect-ratio:3/2}

/* ---------- 4 · manifesto + contato ---------- */
.p-manifesto{
  width:100vw;background:var(--bg);
  padding:var(--space-l) var(--margin) var(--space-m);
  display:flex;flex-direction:column;justify-content:center;position:relative;
}
.pm-big{font-size:clamp(58px,11vw,180px);letter-spacing:-.015em;font-weight:500;line-height:.95}
.pm-big .ap{color:var(--accent)}
.pm-big a:hover{color:var(--accent-ink)}
.pm-contacts{
  display:flex;flex-wrap:wrap;gap:var(--space-4xs) clamp(20px,4vw,48px);
  margin-top:var(--space-m);border-top:1px solid var(--line);padding-top:var(--space-xs);align-items:baseline;
}
.pm-contacts .label{margin-right:auto}
.pm-contacts a{font-size:var(--text-meta)}
.pm-contacts a:hover{color:var(--accent-ink)}

/* ---------- 5 · próximo projeto ---------- */
.next{
  width:100vw;position:relative;overflow:hidden;display:block;
  --next-accent:var(--accent);background:var(--bg-dim);
}
.next-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.82)}
.next-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:color-mix(in srgb,var(--next-accent) 80%,var(--bda-preto));   /* mesmo aprofundamento do hero-panel */
  color:var(--over-media);
  padding:clamp(26px,3vw,44px) clamp(30px,4vw,60px);
  display:flex;flex-direction:column;gap:var(--space-5xs);text-align:center;min-width:min(78vw,420px);
}
.next-card .mono{color:var(--over-media)}   /* sólido (era 85%) pra cruzar 4,5:1 sobre o acento */
.next-name{font-size:clamp(34px,4.5vw,64px);line-height:1;font-weight:500}
.next-meta{color:var(--over-media)}         /* sólido (era 78%) */
.next:hover .next-img{filter:brightness(.72)}

/* projeto não encontrado */
.panel-msg{width:100vw;display:flex;flex-direction:column;gap:var(--space-2xs);align-items:center;justify-content:center;text-align:center}
.panel-msg a{color:var(--accent-ink);border-bottom:1px solid currentColor}

/* ---------- reveals ---------- */
.js .nav [data-reveal]{opacity:0;transform:translateY(20px)}

/* ---------- mobile / reduced-motion: coluna vertical ---------- */
@media (max-width:760px){
  .scene{overflow:visible}
  .scene .track{flex-direction:column;height:auto}
  .scene .track > *{height:auto;flex:0 0 auto}
  .p-hero{grid-template-columns:1fr;min-height:100svh}
  .ph-thumb{display:none}   /* mobile: miniatura sai; sobra meta + legenda + nome */
  .p-hero-media{min-height:56svh}
  .p-hero-media img{position:relative}
  .p-info{width:100%;border-right:none;border-bottom:1px solid var(--line);padding:var(--space-m) var(--margin)}
  .p-descritivo{width:100%;columns:1;border-right:none;border-bottom:1px solid var(--line);padding:var(--space-m) var(--margin)}
  .p-gallery{flex-direction:column;align-items:stretch;gap:var(--space-2xs);padding:var(--space-m) var(--margin)}
  .p-gallery .shot{height:auto!important;width:100%}
  .m-cheia,.m-grande,.m-pequena{aspect-ratio:3/4}
  .m-pano{aspect-ratio:3/2}
  .next{min-height:70svh}
  .nav a,.pm-contacts a{padding-block:6px}   /* alvo de toque ≥24px (WCAG 2.5.8) */
}
@media (prefers-reduced-motion:reduce){
  .scene{overflow:visible}
  .scene .track{flex-direction:column;height:auto}
  .scene .track > *{height:auto}
  .p-gallery{flex-wrap:wrap;justify-content:center}
  .js .nav [data-reveal]{opacity:1;transform:none}
}