/* =============================================================
   PROJETO — página de detalhe · Manoella Melim
   Template de detalhe do portfólio. Hero full-bleed, abertura
   com nome em Cormorant, introdução + ficha técnica, galeria
   em ritmo calmo (tela cheia · pares · foto com legenda) e
   rodapé de projeto (próximo / voltar). Consome tokens +
   site.css. Cantos vivos, hairlines, zero sombra/gradiente.
   ============================================================= */

body.projeto { padding-top: 86px; overflow-x: hidden; }

/* ---------------- HERO ---------------- */
.phero {
  position: relative; width: 100%;
  height: clamp(440px, 86svh, 920px);
  background: var(--surface-alt); overflow: hidden; line-height: 0;
}
.phero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------- ABERTURA (nome logo abaixo do hero) ---------------- */
.pabertura {
  max-width: var(--container-max); margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 64px) 0;
}
.pabertura .eyebrow { display: block; margin-bottom: var(--space-md); }
.pabertura h1 {
  margin: 0; font-family: var(--font-display); font-weight: var(--fw-display-light);
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--text-primary);
}

/* ---------------- INTRODUÇÃO + FICHA TÉCNICA ---------------- */
.pintro {
  max-width: var(--container-max); margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 64px) clamp(56px, 9vw, 120px);
  display: grid; grid-template-columns: 1fr; gap: var(--space-2xl);
  border-bottom: 1px solid var(--border-hairline);
}
@media (min-width: 860px) {
  .pintro { grid-template-columns: 7fr 5fr; gap: clamp(48px, 8vw, 140px); align-items: start; }
}
.pintro__lead {
  margin: 0; max-width: 32ch;
  font-family: var(--font-display); font-weight: var(--fw-display-light);
  font-size: clamp(1.5rem, .9rem + 1.7vw, 2.1rem); line-height: 1.32; letter-spacing: .01em;
  color: var(--text-primary); text-wrap: pretty;
}
.pintro__lead + .pintro__lead { margin-top: var(--space-lg); }
.pintro__body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); }

.ficha { display: flex; flex-direction: column; }
.ficha__row {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: var(--space-md) 0; border-top: 1px solid var(--border-hairline);
}
.ficha__row:last-child { border-bottom: 1px solid var(--border-hairline); }
.ficha__k {
  font-family: var(--font-body); font-weight: var(--fw-body-medium);
  font-size: var(--fs-caption); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-caption);
}
.ficha__v {
  font-family: var(--font-body); font-weight: var(--fw-body);
  font-size: var(--fs-small); letter-spacing: var(--ls-body); color: var(--text-primary);
}
.ficha__v.prov { color: var(--text-secondary); font-style: italic; }

/* ---------------- GALERIA ---------------- */
.pgallery { padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 80px); }
.pblock { margin: 0 auto clamp(56px, 9vw, 128px); }
.pblock:last-child { margin-bottom: 0; }

.pblock figure { margin: 0; line-height: 0; }
.pblock img { width: 100%; display: block; object-fit: cover; background: var(--surface-alt); }

/* tela cheia (full-bleed) */
.pblock.full { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.pblock.full img { height: clamp(420px, 82svh, 880px); }

/* par lado a lado */
.pblock.pair {
  max-width: var(--container-max); padding: 0 clamp(20px, 4vw, 64px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px);
}
.pblock.pair img { aspect-ratio: 4 / 5; }
@media (max-width: 640px) {
  .pblock.pair { grid-template-columns: 1fr; gap: clamp(40px, 10vw, 64px); }
}

/* foto única com legenda curta */
.pblock.caption {
  max-width: var(--container-max); padding: 0 clamp(20px, 4vw, 64px);
  display: grid; grid-template-columns: 1fr; gap: var(--space-md);
}
@media (min-width: 860px) {
  .pblock.caption { grid-template-columns: 8fr 4fr; gap: clamp(32px, 5vw, 72px); align-items: end; }
}
.pblock.caption img { aspect-ratio: 3 / 2; }
.pblock.caption figcaption {
  font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.6;
  color: var(--text-secondary); letter-spacing: var(--ls-body); line-height: 1.6;
}
.pblock.caption figcaption .lbl {
  display: block; margin-bottom: var(--space-2xs);
  font-weight: var(--fw-body-medium); font-size: var(--fs-caption);
  letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-caption);
}
.pblock.caption figcaption.prov { font-style: italic; color: var(--text-caption); }

/* retrato isolado, centralizado (para quando sobra 1) */
.pblock.single {
  max-width: var(--container-max); padding: 0 clamp(20px, 4vw, 64px);
  display: grid; grid-template-columns: 1fr; justify-items: center;
}
.pblock.single figure { width: min(100%, 720px); }
.pblock.single img { aspect-ratio: 4 / 5; }

/* marcador de espaço reservado (quando faltam fotos) */
.pblock.reserved {
  max-width: var(--container-max); padding: 0 clamp(20px, 4vw, 64px);
}
.pholder {
  border: 1px solid var(--border-hairline); aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--surface-base);
}
.pholder span {
  font-family: var(--font-body); font-weight: var(--fw-body-medium);
  font-size: var(--fs-caption); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-caption); padding: 0 var(--space-lg);
}

/* ---------------- RODAPÉ DO PROJETO (próximo / voltar) ---------------- */
.pnav {
  border-top: 1px solid var(--border-hairline);
  margin-top: clamp(48px, 8vw, 112px);
}
.pnav__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 64px);
  display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: center;
}
@media (min-width: 720px) {
  .pnav__inner { grid-template-columns: 1fr auto; }
}
.pnav__next { display: block; text-decoration: none; color: inherit; }
.pnav__next .lbl {
  display: block; margin-bottom: var(--space-sm);
  font-family: var(--font-body); font-weight: var(--fw-body-medium);
  font-size: var(--fs-caption); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-caption);
}
.pnav__next .nm {
  font-family: var(--font-display); font-weight: var(--fw-display-light);
  font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-heading);
  text-transform: uppercase; color: var(--text-primary);
  transition: color var(--dur) var(--ease);
}
.pnav__next:hover .nm { color: var(--accent-text); }
.pnav__all { justify-self: start; }
@media (min-width: 720px) { .pnav__all { justify-self: end; } }

/* reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}