/* ══════════════════════════════════════════════════════════════════════
   05 · OBRAS — portfólio, filtro e ampliação (20/10/2026)
   Entra antes do 04-acabamento, que continua sendo a última camada.
   Mesmo vocabulário do resto: vidro só em controle, âmbar só como luz,
   nenhuma bandeja atrás de foto.
   ══════════════════════════════════════════════════════════════════════ */

#obras{
  padding-top: var(--lf-vazio);
  padding-bottom: var(--lf-respiro-secao);
  overflow: hidden;
  background:
    radial-gradient(70% 50% at 82% 8%, rgba(0,61,165,.20) 0%, transparent 70%),
    radial-gradient(50% 40% at 10% 60%, rgba(255,201,138,.05) 0%, transparent 72%),
    var(--lf-noite);
}
#obras .etiqueta{ margin-bottom: var(--lf-esp-5); }
#obras .lead{ margin-top: var(--lf-esp-5); }

/* ── Filtro — pílulas de vidro; a ativa acende ───────────────────── */
.filtro{
  display: flex; flex-wrap: wrap;
  gap: var(--lf-esp-2);
  margin-top: var(--lf-respiro-bloco);
}
.filtro__botao{
  display: inline-flex; align-items: center; gap: var(--lf-esp-2);
  min-height: 44px;                         /* alvo de toque */
  padding: 0 var(--lf-esp-5);
  border-radius: var(--lf-raio-pilula);
  background: var(--lf-vidro);
  border: 1px solid var(--lf-vidro-borda);
  -webkit-backdrop-filter: var(--lf-vidro-desfoque);
          backdrop-filter: var(--lf-vidro-desfoque);
  box-shadow: var(--lf-vidro-brilho);
  font-size: var(--lf-tipo-legenda);
  color: var(--lf-texto-2);
  cursor: pointer;
  transition: background-color var(--lf-dur-rapida) var(--lf-ease),
              color var(--lf-dur-rapida) var(--lf-ease),
              border-color var(--lf-dur-rapida) var(--lf-ease);
}
.filtro__botao:hover{ background: var(--lf-vidro-alto); color: var(--lf-texto); }
/* selecionada: vidro mais claro e o ponto aceso. A borda não fica âmbar —
   âmbar na borda é o anel de foco do site, e as duas leituras se confundiam. */
.filtro__botao[aria-pressed="true"]{
  color: var(--lf-texto);
  border-color: rgba(255,255,255,.30);
  background: var(--lf-vidro-alto);
}
/* o ponto de luz: só a pílula ativa acende */
.filtro__botao::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lf-linha-forte);
  transition: background-color var(--lf-dur-rapida) var(--lf-ease),
              box-shadow var(--lf-dur-rapida) var(--lf-ease);
}
.filtro__botao[aria-pressed="true"]::before{
  background: var(--lf-luz);
  box-shadow: 0 0 10px 2px rgba(255,201,138,.55);
}
.filtro__conta{
  font-size: var(--lf-tipo-etiqueta);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--lf-ui);
}

/* ── Capítulos ───────────────────────────────────────────────────── */
/* mesma coluna do texto: o capítulo alinha com o título da seção, e a 1240px
   a grade ainda mostra 4 a 5 fotos por linha — mais larga, vira papel de parede */
.obras{
  width: var(--lf-largura);
  margin-inline: auto;
  margin-top: calc(var(--lf-respiro-bloco) * 1.6);
}
.obra + .obra{ margin-top: clamp(72px, 11vh, 160px); }
.obra[hidden]{ display: none; }

/* troca de filtro: o capítulo assenta, sem salto */
.obra.entrando{ animation: obra-entra var(--lf-dur-lenta) var(--lf-ease-entra) both; }
@keyframes obra-entra{ from{ opacity: 0; transform: translateY(18px); } }

.obra__cabeca{
  display: grid;
  gap: var(--lf-esp-3) var(--lf-esp-8);
  margin-bottom: var(--lf-esp-6);
}
@media (min-width: 1024px){
  .obra__cabeca{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: end;
  }
}
.obra__nome{
  margin: 0;
  font-family: var(--lf-fonte-display);
  font-size: clamp(26px, 18px + 1.6vw, 44px);
  font-weight: 200;
  line-height: 1.08;
  letter-spacing: -.018em;
  color: var(--lf-texto);
}
.obra__ficha{
  margin-top: var(--lf-esp-3);
  font-size: var(--lf-tipo-etiqueta);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lf-ui);
}
.obra__ficha b{ color: var(--lf-luz); font-weight: 600; }
.obra__resumo{
  max-width: 52ch;
  font-size: var(--lf-tipo-corpo);
  color: var(--lf-texto-2);
}

/* ── Mosaico justificado ────────────────────────────────────────────
   Cada item cresce na proporção da própria foto (--r = largura/altura):
   todos da mesma linha ficam com a mesma altura e a foto entra inteira.
   O ::after segura a última linha para ela não esticar até a borda. */
.mosaico{
  --alt: clamp(190px, 24vw, 380px);
  --vao: clamp(8px, 1vw, 16px);
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--vao);
}
.mosaico::after{ content: ""; flex: 999 1 0; }
@media (max-width: 599px){
  .mosaico{ --alt: 46vw; }
}

.mosaico__item{
  flex: var(--r) 1 calc(var(--r) * var(--alt));
  aspect-ratio: var(--r);
  min-width: 0;
}

/* Capítulo em que todas as fotos têm a mesma proporção: o mosaico vira grade.
   No justificado, a última linha ficava menor que as outras e com um vão à
   direita. Aqui toda foto tem o mesmo tamanho, e o site.js escolhe o número
   de colunas que fecha as linhas sem sobra. O auto-fill abaixo é a medida
   que ele lê, e também o que vale sem JS.
   O 1.4 deixa a foto em pé com a mesma altura de linha nos três capítulos
   (~535px a 1440): Gênesis em 4 colunas, Villagio e Bela Vista em 3. Com a
   base pura, a Gênesis caía em 6 colunas de 346px ao lado de linhas de 538. */
.mosaico--grade{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--r) * var(--alt) * 1.4), 1fr));
}
.mosaico--grade::after{ content: none; }

.mosaico__botao,
.carrossel__ampliar{
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  cursor: zoom-in;
}
.mosaico__botao{
  position: relative;
  overflow: hidden;
  border-radius: var(--lf-raio-m);
  background:
    radial-gradient(80% 60% at 50% 20%, rgba(0,61,165,.22), transparent 70%),
    var(--lf-noite-2);                       /* enquanto a foto não chega */
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
  transition: box-shadow var(--lf-dur-media) var(--lf-ease);
  isolation: isolate;
}
.mosaico__foto{
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.001);
  transition: opacity 640ms var(--lf-ease-entra),
              transform 900ms var(--lf-ease-entra),
              filter var(--lf-dur-media) var(--lf-ease);
}
.mosaico__foto.carregada{ opacity: 1; }

/* a legenda do item: nasce na base, sobre um véu que só existe no hover */
.mosaico__rotulo{
  position: absolute; inset: auto 0 0 0;
  padding: var(--lf-esp-6) var(--lf-esp-4) var(--lf-esp-4);
  background: linear-gradient(180deg, transparent, rgba(4,9,31,.82));
  font-size: var(--lf-tipo-legenda);
  line-height: 1.3;
  text-align: left;
  color: var(--lf-texto);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--lf-dur-media) var(--lf-ease),
              transform var(--lf-dur-media) var(--lf-ease-entra);
  pointer-events: none;
}

@media (hover: hover){
  .mosaico__botao:hover{
    box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 24px 60px rgba(0,0,0,.45);   /* âmbar é do foco */
  }
  .mosaico__botao:hover .mosaico__foto{ transform: scale(1.045); }
  .mosaico__botao:hover .mosaico__rotulo,
  .mosaico__botao:focus-visible .mosaico__rotulo{ opacity: 1; transform: none; }
}
.mosaico__botao:focus-visible{ border-radius: var(--lf-raio-m); }

/* entrada em cascata, item a item, quando o capítulo chega na tela */
.js-mov .mosaico__item{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--lf-dur-lenta) var(--lf-ease-entra),
              transform var(--lf-dur-lenta) var(--lf-ease-entra);
  transition-delay: calc(var(--j, 0) * 60ms);
}
.js-mov .mosaico__item.dentro{ opacity: 1; transform: none; }

/* o carrossel também amplia: um botão cobre o quadro inteiro */
.carrossel__ampliar{
  position: absolute; inset: 0;
  z-index: 2;
  border-radius: var(--lf-raio-xg);
}

/* ══════════════════════════════════════════════════════════════════
   AMPLIAÇÃO
   ══════════════════════════════════════════════════════════════════ */
.ampliar{
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  color: var(--lf-texto);
  overflow: hidden;
  overscroll-behavior: contain;
}
.ampliar::backdrop{ background: transparent; }

.ampliar__fundo{
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(7,18,49,.90), rgba(4,9,31,.97));
  -webkit-backdrop-filter: blur(22px) saturate(120%);
          backdrop-filter: blur(22px) saturate(120%);
  opacity: 0;
  transition: opacity var(--lf-dur-media) var(--lf-ease);
}
.ampliar.aberta .ampliar__fundo{ opacity: 1; }

.ampliar__quadro{
  position: absolute; inset: 0;
  margin: 0;
  touch-action: none;                      /* o gesto é nosso: trocar e fechar */
}
.ampliar__foto{
  position: absolute;
  max-width: none;
  border-radius: var(--lf-raio-p);
  box-shadow: 0 40px 120px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-out;
}

/* os controles e a legenda chegam depois da foto, e saem antes dela */
.ampliar__legenda,
.ampliar__contador,
.ampliar__fechar,
.ampliar__seta{
  opacity: 0;
  transition: opacity var(--lf-dur-media) var(--lf-ease),
              background-color var(--lf-dur-rapida) var(--lf-ease);
}
.ampliar.aberta .ampliar__legenda,
.ampliar.aberta .ampliar__contador,
.ampliar.aberta .ampliar__fechar,
.ampliar.aberta .ampliar__seta{ opacity: 1; transition-delay: 160ms; }

.ampliar__legenda{
  position: absolute;
  left: var(--lf-esp-6); right: 160px; bottom: var(--lf-esp-5);
  pointer-events: none;
}
.ampliar__ambiente{
  display: block;
  font-size: var(--lf-tipo-corpo);
  color: var(--lf-texto);
}
.ampliar__ficha{
  display: block;
  font-size: var(--lf-tipo-legenda);
  color: var(--lf-texto-3);
}

.ampliar__contador{
  position: absolute; right: var(--lf-esp-6); bottom: var(--lf-esp-5);
  margin: 0;
  padding: var(--lf-esp-2) var(--lf-esp-4);
  border-radius: var(--lf-raio-pilula);
  font-size: var(--lf-tipo-etiqueta);
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--lf-ui);
}

.ampliar__fechar,
.ampliar__seta{
  position: absolute;
  z-index: 2;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--lf-raio-pilula);
  color: var(--lf-texto);
  cursor: pointer;
}
.ampliar__fechar:hover,
.ampliar__seta:hover{ background-color: var(--lf-vidro-alto); }
.ampliar__fechar{ top: var(--lf-esp-5); right: var(--lf-esp-5); }
.ampliar__seta{ top: 50%; transform: translateY(-50%); }
.ampliar__seta--ant{ left: var(--lf-esp-5); }
.ampliar__seta--prox{ right: var(--lf-esp-5); }
.ampliar__seta[disabled]{ opacity: .28 !important; pointer-events: none; }

/* no celular as setas saem: o gesto é arrastar, e a foto ganha a largura */
@media (max-width: 767px){
  .ampliar__seta{ display: none; }
  .ampliar__legenda{ left: var(--lf-esp-5); right: 110px; bottom: var(--lf-esp-5); }
  .ampliar__contador{ right: var(--lf-esp-5); }
  .ampliar__fechar{ top: var(--lf-esp-4); right: var(--lf-esp-4); }
}

/* página parada por baixo enquanto a ampliação está aberta */
html.ampliando{ overflow: hidden; }

@supports (corner-shape: superellipse(2)){
  .mosaico__botao, .ampliar__foto{ corner-shape: superellipse(var(--lf-superelipse)); }
}
@media (forced-colors: active){
  .ampliar__fundo{ background: Canvas; backdrop-filter: none; }
}