/* ============ 03 · Projetos — "A colheita" ============
   Parede de exposição: fotografias de tamanhos variados, colunas desencontradas,
   etiqueta de museu (número + nome) sob cada imagem. As fotos "germinam" a partir de
   uma semente dourada (máscara circular) quando a seção entra na tela. */
@view-transition { navigation: auto; }

.projetos {
  position: relative;
  background: var(--bege);
  color: var(--tinta);
  padding: clamp(80px, 14vh, 160px) calc(var(--margem) + 60px) calc(18vh + clamp(90px, 14vh, 160px)) var(--margem);
  overflow-x: clip;
  z-index: 1;
}
.projetos::before {
  /* luz quente difusa, como na colagem de Quem Somos */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(216, 167, 99, .14), transparent 100%),
    radial-gradient(ellipse 40% 35% at 10% 75%, rgba(36, 74, 50, .07), transparent 100%);
}

.pj-cabeca { position: relative; max-width: min(46vw, 720px); margin-bottom: clamp(48px, 9vh, 110px); z-index: 2; }
.pj-cabeca .rotulo { color: var(--tinta); }
.pj-titulo { font-size: clamp(34px, 4.1vw, 74px); color: var(--floresta); --soft: 50; }
.pj-titulo em { color: var(--terracota); }
.pj-titulo .letra { display: inline-block; }

.pj-ramo { position: absolute; right: -2vw; top: 4vh; width: 22vw; height: 58vh; color: var(--amazonia); opacity: .32; transform: scaleX(-1); z-index: 0; pointer-events: none; }

/* ---------- Parede (desktop) ---------- */
.pj-mosaico {
  position: relative; z-index: 2;
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2.4vw, 40px);
  row-gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.pj-item { --proporcao: 4 / 3; position: relative; }
.pj-item[data-pos="1"] { grid-column: 1 / span 4;  grid-row: 1; --proporcao: 3 / 4; }
.pj-item[data-pos="2"] { grid-column: 5 / span 5;  grid-row: 1; --proporcao: 4 / 3; margin-top: 12vh; }
.pj-item[data-pos="3"] { grid-column: 10 / span 3; grid-row: 1; --proporcao: 4 / 5; margin-top: 30vh; }
.pj-item[data-pos="4"] { grid-column: 2 / span 3;  grid-row: 2; --proporcao: 3 / 4; }
.pj-item[data-pos="5"] { grid-column: 5 / span 4;  grid-row: 2; --proporcao: 1 / 1; margin-top: 16vh; }
.pj-item[data-pos="6"] { grid-column: 9 / span 4;  grid-row: 2; --proporcao: 4 / 3; margin-top: 4vh; }
.pj-item[data-pos="7"] { grid-column: 1 / span 6;  grid-row: 3; --proporcao: 16 / 9; }
.pj-item[data-pos="8"] { grid-column: 7 / span 6;  grid-row: 3; --proporcao: 2 / 1; margin-top: 18vh; }

/* ---------- Item ---------- */
.pj-link {
  display: block;
  color: inherit; text-decoration: none;
  outline: none;
}
.pj-foto {
  position: relative; display: block;
  aspect-ratio: var(--proporcao);
  overflow: hidden;
  background: var(--bege-2);
  box-shadow: 0 1px 2px rgba(18, 38, 26, .10), 0 18px 34px -24px rgba(18, 38, 26, .55);
  transition: transform .6s var(--ease-org), box-shadow .6s var(--ease-org);
  will-change: transform;
}
.pj-foto picture, .pj-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.pj-foto img {
  object-fit: cover;
  transform: scale(1.001);
  filter: saturate(.92) contrast(1.02);
  transition: transform 1.1s var(--ease-org), filter .6s;
}
/* fio dourado (moldura de exposição) */
.pj-foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(216, 167, 99, .28);
  transition: box-shadow .6s var(--ease-org);
}
.pj-semente {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--ouro);
  box-shadow: 0 0 18px 6px rgba(216, 167, 99, .55);
  opacity: 0; pointer-events: none;
}

/* etiqueta de exposição */
.pj-rotulo {
  display: flex; align-items: baseline; gap: 14px;
  padding-top: 16px;
}
.pj-num {
  font: 700 11px/1 var(--sans); letter-spacing: .22em; font-variant-numeric: tabular-nums;
  color: var(--ouro);
  transition: color .4s;
}
.pj-nome {
  position: relative;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 1.65vw, 30px); line-height: 1.05;
  font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 0;
  color: var(--floresta);
  transition: color .4s;
}
.pj-nome::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--terracota);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-org);
}
.pj-rotulo .seta {
  width: 18px; height: 18px; margin-left: auto; flex-shrink: 0; align-self: center;
  fill: none; stroke: var(--terracota); stroke-width: 1.6;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .4s, transform .6s var(--ease-org);
}

/* ---------- Hover / foco: elevação suave ---------- */
.pj-link:hover .pj-foto, .pj-link:focus-visible .pj-foto {
  transform: translateY(-8px);
  box-shadow: 0 2px 4px rgba(18, 38, 26, .10), 0 34px 54px -26px rgba(64, 38, 18, .55);
}
.pj-link:hover .pj-foto img, .pj-link:focus-visible .pj-foto img { transform: scale(1.045); filter: saturate(1.05) contrast(1.04); }
.pj-link:hover .pj-foto::after, .pj-link:focus-visible .pj-foto::after { box-shadow: inset 0 0 0 1px rgba(216, 167, 99, .9); }
.pj-link:hover .pj-num, .pj-link:focus-visible .pj-num { color: var(--terracota); }
.pj-link:hover .pj-nome::after, .pj-link:focus-visible .pj-nome::after { transform: scaleX(1); }
.pj-link:hover .seta, .pj-link:focus-visible .seta { opacity: 1; transform: none; }
.pj-link:focus-visible .pj-foto { outline: 2px solid var(--ouro); outline-offset: 5px; }
.pj-link:active .pj-foto { transform: translateY(-3px); transition-duration: .15s; }

/* Estado antes da germinação (somente com JS + movimento) */
html.anim .projetos.pj-preparado .pj-foto { clip-path: circle(0% at 50% 50%); }
html.anim .projetos.pj-preparado .pj-rotulo > * { opacity: 0; }

/* ---------- Celular e tablet: duas colunas com ritmo próprio ---------- */
@media (max-width: 860px) {
  .projetos { padding: 80px 20px calc(18vh + 70px); }
  .pj-cabeca { max-width: none; margin-bottom: 36px; }
  .pj-titulo { font-size: clamp(32px, 9.4vw, 54px); }
  .pj-ramo { width: 54vw; height: 34vh; right: -18vw; top: 10px; opacity: .22; }
  .pj-mosaico { grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 28px; }
  .pj-item[data-pos] { grid-column: auto; grid-row: auto; margin-top: 0; }
  .pj-item[data-forma="horizontal"], .pj-item[data-forma="panorama"] { grid-column: 1 / -1; --proporcao: 16 / 10; }
  .pj-item[data-forma="vertical"], .pj-item[data-forma="retrato"], .pj-item[data-forma="quadrada"] { --proporcao: 4 / 5; }
  /* pares de verticais lado a lado, horizontais em largura total */
  .pj-item[data-pos="1"] { order: 1; }
  .pj-item[data-pos="3"] { order: 2; }
  .pj-item[data-pos="2"] { order: 3; }
  .pj-item[data-pos="4"] { order: 4; }
  .pj-item[data-pos="5"] { order: 5; }
  .pj-item[data-pos="6"] { order: 6; }
  .pj-item[data-pos="7"] { order: 7; }
  .pj-item[data-pos="8"] { order: 8; }
  .pj-rotulo { gap: 10px; padding-top: 12px; }
  .pj-nome { font-size: 20px; }
  /* sem hover no toque: a seta fica sempre visível como indicação de clique */
  .pj-rotulo .seta { opacity: 1; transform: none; width: 16px; height: 16px; }
}

/* ---------- Movimento reduzido ---------- */
html.reduzido .pj-link:hover .pj-foto, html.reduzido .pj-link:focus-visible .pj-foto { transform: none; }
html.reduzido .pj-link:hover .pj-foto img, html.reduzido .pj-link:focus-visible .pj-foto img { transform: none; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }