/* ---------------------------------------------------------------------------
   Página de detalhe de projeto. Herda todos os tokens e o cabeçalho de
   style.css; aqui ficam só as peças que existem no detalhe e não na home.
   --------------------------------------------------------------------------- */

/* ------------------------------------------------------- topo do projeto -- */
.proj-hero {
  padding: 9rem var(--pad) 3rem;
  border-bottom: 1px solid var(--line);
}

.proj-back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-dim);
  text-decoration: none;
  margin-bottom: 2rem;
  transition: color 0.2s;
}
.proj-back:hover { color: var(--accent); }

.proj-kicker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin-bottom: 0.9rem;
}
.proj-kicker .project-status { border: 1px solid var(--line); border-radius: 99px; padding: 0.2em 0.8em; }
.proj-kicker .project-status.live { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.proj-title {
  font-size: clamp(2.1rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 20ch;
}

.proj-lead {
  margin-top: 1.4rem;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--ink-dim);
  max-width: 46rem;
  line-height: 1.5;
}

/* ficha técnica: papel, período, cliente, link */
.proj-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 2.75rem;
}
.proj-facts > div {
  background: var(--bg);
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 5.1rem;
}
.proj-facts dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.proj-facts dd { font-size: 0.95rem; font-weight: 500; }
.proj-facts dd img { display: block; height: 17px; width: auto; }
.proj-facts dd .logo-yogha { height: 19px; }
.proj-facts dd .logo-chip { background: #fff; border-radius: 3px; padding: 4px 6px; display: inline-flex; }
.proj-facts dd .logo-chip img { height: 15px; }
.proj-facts dd a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.proj-facts dd a:hover { border-bottom-color: var(--accent); }

/* ---------------------------------------------------------- corpo ------- */
.proj-body { padding: 0 var(--pad); }

.proj-section {
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.proj-section:last-of-type { border-bottom: none; }

.proj-section > h2 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  position: sticky;
  top: 5.5rem;
}
.proj-section-body { max-width: 46rem; }
.proj-section-body > * + * { margin-top: 1.1rem; }
.proj-section-body p { color: var(--ink-dim); }
.proj-section-body strong { color: var(--ink); font-weight: 600; }

@media (max-width: 54rem) {
  .proj-section { grid-template-columns: 1fr; gap: 1.2rem; }
  .proj-section > h2 { position: static; }
}

/* lista do "o que faz" */
.proj-list { list-style: none; display: grid; gap: 0.85rem; }
.proj-list li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.6rem;
  color: var(--ink-dim);
}
.proj-list li::before {
  content: "→";
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* destaque da decisão técnica */
.proj-note {
  border-left: 2px solid var(--accent);
  padding: 0.15rem 0 0.15rem 1.2rem;
}
.proj-note h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

/* stack */
.proj-stack { display: grid; gap: 1.3rem; }
.proj-stack-group h3 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.55rem;
}
.proj-stack .tags li { font-size: 0.74rem; }

/* números medidos */
.proj-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.proj-numbers > div {
  background: var(--bg);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.proj-numbers .num {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1.1;
}
.proj-numbers .num-label { font-size: 0.85rem; color: var(--ink-dim); }
.proj-source {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-dim);
  margin-top: 1rem;
}

/* telas */
.proj-shots { display: grid; gap: 1.6rem; }
.proj-shots figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-soft);
}
.proj-shots img { display: block; width: 100%; height: auto; }
.proj-shots figcaption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-dim);
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}
/* espaço reservado para telas que ainda não existem */
.proj-shot-pending {
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-dim);
}

/* --------------------------------------------------------- rodapé ------- */
.proj-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 1rem;
}
.proj-nav a {
  background: var(--bg);
  flex: 1 1 14rem;
  padding: 1.6rem var(--pad);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: background 0.25s;
}
.proj-nav a:hover { background: var(--bg-soft); }
.proj-nav .dir {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.proj-nav .name { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.proj-nav a:hover .name { color: var(--accent); }
.proj-nav .next { text-align: right; align-items: flex-end; }

/* Tela de celular não deve ser esticada até a largura do texto: a captura tem
   442 px de origem e acima disso só perde nitidez. */
.proj-shots figure.retrato { max-width: 22rem; }

/* A seção de telas não cabe na medida do texto: captura de painel só se lê
   grande. Solta a largura, mantendo a mesma coluna de rótulo à esquerda. */
.proj-section-body.larga { max-width: none; }

/* Número composto ("25 s → 1,5 s") não cabe em 1,85rem num celular estreito. */
@media (max-width: 30rem) {
  .proj-numbers .num { font-size: 1.5rem; }
}