/* Páginas de projeto — complementa style.css */

/* ============ Abertura ============ */
.proj-hero { padding: calc(var(--nav-h) + clamp(48px, 8vw, 112px)) 0 clamp(48px, 6vw, 80px); }
.back {
  display: inline-flex;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--texto-suave-escuro);
  margin-bottom: clamp(40px, 6vw, 72px);
  transition: color .25s;
}
.back::before { content: "←"; transition: transform .35s var(--ease); }
.back:hover { color: var(--off); }
.back:hover::before { transform: translateX(-4px); }
.proj-hero .display { max-width: 1100px; }
.proj-hero__lead {
  margin-top: 28px;
  max-width: 680px;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  color: var(--texto-suave-escuro);
}
.meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 28px;
  border-top: 1px solid var(--linha-escura);
}
.meta dt {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--laranja);
  margin-bottom: 6px;
}
.meta dd { margin: 0; font-size: 18px; font-weight: 500; }
@media (max-width: 820px) { .meta { grid-template-columns: repeat(2, 1fr); } }

.proj-cover { padding-bottom: clamp(80px, 10vw, 140px); }
.proj-cover__media { overflow: hidden; border-radius: var(--raio); background: var(--cinza-escuro); }
.proj-cover__media img { width: 100%; }

/* ============ História ============ */
.story { padding: clamp(100px, 12vw, 180px) 0; }
.story__row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(20px, 5vw, 80px);
  padding: clamp(36px, 5vw, 64px) 0;
  border-top: 1px solid var(--bege);
}
.story__row:last-child { border-bottom: 1px solid var(--bege); }
.story__row h2 {
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--preto);
}
.story__row p { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; color: var(--grafite); max-width: 720px; }
.story__row ul { margin-top: 20px; max-width: 720px; }
.story__row li {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bege);
  font-weight: 500;
  font-size: 17px;
}
.story__row li::before { content: "✦"; color: var(--laranja); font-size: 12px; }
@media (max-width: 720px) { .story__row { grid-template-columns: 1fr; } }

/* ============ Página completa (moldura) ============ */
.showcase { padding: clamp(80px, 10vw, 140px) 0; }
.showcase .section-head { margin-bottom: 40px; }
.showcase .display { font-size: clamp(36px, 5vw, 72px); }
.frames { display: flex; gap: clamp(16px, 3vw, 40px); align-items: flex-start; justify-content: center; }
.frame {
  flex: 1;
  max-width: 1080px;
  background: #1b1d20;
  border: 1px solid var(--linha-escura);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .8);
}
.frame__bar { display: flex; gap: 7px; padding: 13px 16px; }
.frame__bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.frame__viewport { height: min(70vh, 720px); overflow-y: auto; }
.frame__viewport img { width: 100%; will-change: transform; }
.frame--mobile { flex: 0 0 auto; width: clamp(200px, 22vw, 300px); border-radius: 34px; padding: 10px; }
.frame--mobile .frame__viewport { border-radius: 26px; }
@media (max-width: 820px) { .frame--mobile { display: none; } }

.anim .showcase { padding: 0; }
.anim .showcase > .wrap {
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--nav-h);
}
.anim .frame__viewport { overflow: hidden; height: calc(100svh - var(--nav-h) - 260px); min-height: 320px; }

/* ============ Detalhes ============ */
.details { padding: clamp(100px, 12vw, 180px) 0; }
.details__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 32px); }
.details__grid figure { margin: 0; overflow: hidden; border-radius: var(--raio); background: var(--bege); }
.details__grid figure:first-child { grid-column: 1 / -1; }
.details__grid img { width: 100%; }
@media (max-width: 720px) { .details__grid { grid-template-columns: 1fr; } }

/* ============ Próximo projeto ============ */
.next { display: block; padding: clamp(100px, 12vw, 160px) 0; border-top: 1px solid var(--linha-escura); }
.next__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.next__media { overflow: hidden; border-radius: var(--raio); }
.next__media img { width: 100%; transition: scale 1.2s var(--ease); }
.next:hover .next__media img { scale: 1.05; }
.next .display { font-size: clamp(40px, 6vw, 88px); }
.next .display::after { content: " →"; color: var(--laranja); }
@media (max-width: 820px) { .next__grid { grid-template-columns: 1fr; } }

.details__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: clamp(40px, 5vw, 72px); }
.details__links p { flex-basis: 100%; margin: 0 0 4px; color: var(--texto-suave-claro); }