/* ==========================================================================
   Página interna do projeto (WordPress: single-projeto.php)
   Estrutura ref. works.studio/work/the-frost-house, com a identidade MOTT
   (PP Neue Montreal nos títulos, Inter nos rótulos e textos, cinza do site, cantos de 8px).
   ========================================================================== */

.pj-page { --pj-gap: clamp(8px, .95vw, 14px); }

/* topo da página do projeto: MOTT pequeno à esquerda, seta no centro, menu à direita (sem linha) */
.pj-page .pj-hero { position: relative; min-height: 0; padding-bottom: 0; }
.pj-page .pj-hero .wordmark { font-size: clamp(36px, 3.6vw, 56px); line-height: .86; }
.pj-page .pj-hero .wordmark__reg { font-size: .16em; }
.pj-hero__cue { position: absolute; left: 50%; top: clamp(28px, 4vw, 61px); translate: -50% -14%; }

.pj { padding: clamp(140px, 19vw, 300px) var(--pad) 0; }
.pj figure { margin: 0; overflow: hidden; border-radius: 8px; background: #f0f0f0; }
.pj figure img, .pj figure video { display: block; width: 100%; height: auto; }

/* abertura: à esquerda serviços (em cima) e nome + cliente (embaixo); à direita a frase grande */
.pj-intro {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-items: stretch;
  padding-bottom: clamp(40px, 5vw, 80px);
}
.pj-intro__left { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.pj-intro__svc { margin: 0; padding-top: .35em; color: var(--muted); }
.pj-intro__title, .pj-intro__lead { margin: 0; font: 400 clamp(30px, 3.6vw, 56px)/1.04 var(--display); letter-spacing: -.025em; }
.pj-intro__title span { display: block; color: var(--muted); }
.pj-intro__lead { max-width: 15em; }

/* imagem de abertura em largura total */
.pj__open { margin-bottom: 0 !important; }

/* sobre o projeto: só na metade direita, com as listas pequenas embaixo */
.pj-overview { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; padding: clamp(72px, 9vw, 116px) 0; }
.pj-overview__body { grid-column: 2; max-width: 520px; }
.pj-overview__label { margin: 0 0 12px; font: 400 14px/1 var(--ui); color: var(--muted); }
.pj-overview__text { font: 400 18px/1.25 var(--ui); }
.pj-overview__text p { margin: 0 0 1.25em; }
.pj-overview__text p:last-child { margin-bottom: 0; }
.pj-overview__link { margin: 24px 0 0; font: 500 14px/1 var(--ui); }
.pj-overview__meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 8px; margin: 80px 0 0; }
.pj-overview__meta dt { margin-bottom: 11px; font: 400 14px/1.25 var(--ui); color: var(--muted); }
.pj-overview__meta dd { margin: 0; font: 400 16px/1.4 var(--ui); }

/* galeria em grade de duas colunas, 12px entre tudo: largura total, meia coluna, par ou imagem + carrossel */
.pj__gallery { display: grid; gap: 12px; }
.pj__row--pair, .pj__row--half, .pj__row--carousel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

/* carrossel quadrado na meia coluna, com barrinhas brancas sobre a imagem */
.pj-car { position: relative; overflow: hidden; border-radius: 8px; background: #f0f0f0; aspect-ratio: 1; cursor: grab; touch-action: pan-y; user-select: none; }
.pj-car.is-drag { cursor: grabbing; }
.pj-car__track { display: flex; height: 100%; transition: transform .8s var(--ease); }
.pj-car.is-drag .pj-car__track { transition: none; }
.pj .pj-car__slide { flex: none; width: 100%; height: 100%; border-radius: 0; background: none; }
.pj .pj-car__slide img, .pj .pj-car__slide video { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.pj-car__dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 6px; }
.pj-car__dots button { width: 40px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.4); cursor: pointer; transition: background-color .3s; }
.pj-car__dots button.is-active, .pj-car__dots button:hover { background: #fff; }

/* projetos relacionados: carrossel infinito que desliza sozinho (ref. "Selected Work" de malikkotb.com)
   acelera com a rolagem da página, dá para arrastar; no hover aparece o vídeo do projeto dentro do card */
.pj-more { padding: clamp(80px, 10vw, 160px) 0 0; }
/* cabeçalho igual ao "Contato" do fim da página: linha em cima, rótulo em caixa alta à esquerda */
.pj-more__head {
  display: flex; align-items: center; gap: 24px;
  padding-top: clamp(16px, 1.6vw, 24px); margin-bottom: clamp(20px, 2vw, 32px); border-top: 1px solid var(--line);
}
.pj-more__head .label { margin: 0; }
.pj-more__all { margin-left: auto; font: 500 14px/1 var(--ui); }

.pj-loop { --card-w: clamp(220px, 25vw, 320px); margin: 0 calc(-1 * var(--pad)); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }
.pj-loop.is-drag { cursor: grabbing; }
.pj-loop.is-drag a { pointer-events: none; }
.pj-loop__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; width: max-content; will-change: transform; }
.pj-loop__item { flex: none; width: var(--card-w); }
.pj-loop__item a { display: block; color: inherit; text-decoration: none; }
.pj-loop__poster { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: #f0f0f0; }
.pj-loop__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); -webkit-user-drag: none; }
.pj-loop__item:not(.has-video) a:hover .pj-loop__poster img { transform: scale(1.05); }
/* vídeo menor, centralizado no card, que aparece no hover */
.pj-loop__frame {
  position: absolute; left: 6.25%; right: 6.25%; top: 50%; aspect-ratio: 16 / 10; translate: 0 -50%;
  overflow: hidden; border-radius: 6px; background: #000;
  opacity: 0; scale: .92; transition: opacity .45s var(--ease), scale .7s var(--ease);
}
.pj-loop__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-loop__item.has-video a:hover .pj-loop__frame { opacity: 1; scale: 1; }
.pj-loop__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font: 400 14px/1.3 var(--ui); }
.pj-loop__cat { color: var(--muted); text-align: right; }

/* contato e rodapé vêm da home (parts/rodape.php) */
.pj-page .contact { margin-top: clamp(40px, 6vw, 100px); }

@media (max-width: 860px) {
  .pj-intro { grid-template-columns: 1fr; row-gap: 28px; }
  .pj-hero__cue { display: none; }
  .pj-overview { grid-template-columns: 1fr; }
  .pj-overview__body { grid-column: 1; }
  .pj-overview__meta { margin-top: 48px; }
  .pj__row--half { grid-template-columns: 1fr; }
  .pj-loop { --card-w: 62vw; }
}

/* modo de visualização (?estrutura=1): blocos pretos no lugar das imagens */
.pj-ph { display: block; width: 100%; background: #0d0d0d; }
.pj-car .pj-ph { height: 100%; aspect-ratio: auto !important; }
.pj-car__slide:nth-child(2) .pj-ph { background: #1c1c1c; }
.pj-car__slide:nth-child(3) .pj-ph { background: #2b2b2b; }

/* o MOTT do topo leva para a home */
a.wordmark { color: inherit; text-decoration: none; }