/* ==========================================================================
   sobre.css — galeria "bento" com zoom controlado pela rolagem + texto
   ========================================================================== */

/* --- abertura --- */
.sobre-capa {
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sobre-capa__inner {
  max-width: 720px;
  padding-inline: var(--sp-4);
}

.sobre-capa__rotulo {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: var(--sp-3);
}

.sobre-capa__titulo {
  font-size: clamp(2.2rem, 7vw, 4rem);
  margin-bottom: var(--sp-3);
}

.sobre-capa__legenda {
  color: var(--texto-suave);
  font-size: 1.05rem;
}

.sobre-capa__seta {
  display: block;
  margin-top: var(--sp-5);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

/* --- galeria: zoom preso na tela --- */
/* Antes isto usava o "pin" do ScrollTrigger junto com o plugin Flip.
   O pin transforma a seção em position:fixed por JavaScript e é sensível a
   overflow, transform e filtros em qualquer elemento acima na árvore — se
   qualquer um deles interferir, a seção deixa de ficar presa, continua
   rolando e a foto some da tela enquanto a animação segue rodando.
   Aqui a fixação passou a ser position:sticky, que é do próprio CSS e não
   depende de medição em JavaScript. O JS só interpola a escala. */

/* o trilho: sua altura é o quanto de rolagem o zoom vai durar */
.galeria-wrap {
  position: relative;
  height: 220vh;
}

/* o palco: é ele que gruda na tela enquanto o trilho passa */
.galeria-palco {
  position: sticky;
  top: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* svh = "small viewport height": a altura da tela COM a barra de endereço
     visível. Ao contrário de vh, ela não muda quando a barra some e volta
     durante a rolagem — que é o que fazia a área fixa saltar no celular.
     A linha com vh fica antes como reserva para navegadores antigos. */
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
}

/* A galeria já nasce no tamanho FINAL. O que a rolagem anima é só a escala,
   de --escala-inicial até 1. Como a escala parte do centro, a foto não tem
   como sair do enquadramento em nenhum momento da animação. */
.galeria {
  --colunas: 3;
  --largura: 92vw;
  --linha: 34vh;
  --vao: 2vh;

  display: grid;
  gap: var(--vao);
  justify-content: center;
  align-content: center;
  grid-template-columns:
    repeat(var(--colunas),
      minmax(0, calc((var(--largura) - (var(--colunas) - 1) * var(--vao)) / var(--colunas))));
  grid-auto-rows: var(--linha);
  transform-origin: center center;
}

/* ritmo do mosaico: alguns blocos ocupam mais espaço */
.galeria__item:nth-child(4n + 1) { grid-row: span 2; }
.galeria__item:nth-child(6n + 3) { grid-column: span 2; }
.galeria__item:nth-child(8n + 6) { grid-row: span 2; }

/* Com uma ou duas fotos não existe mosaico: o ritmo de blocos maiores só
   atrapalha, deixando a única imagem num retângulo esticado. */
.galeria--poucas .galeria__item {
  grid-row: auto;
  grid-column: auto;
}

/* Uma foto só vira um destaque grande e alto.
   A altura é definida como uma fração da ALTURA DO PALCO, não da tela: assim
   a sobra em cima e embaixo é a mesma por construção, independente do
   tamanho do monitor. 0.88 deixa 6% de respiro de cada lado. */
.galeria--poucas {
  --largura: 88vw;
  --linha: calc((100vh - var(--header-h)) * 0.88);
}

/* Com UMA foto só, a moldura assume a proporção da própria imagem.
   Antes a moldura tinha medidas fixas e o object-fit: cover cortava o que
   não coubesse — era isso que decepava a cabeça e os ombros do desenho.
   Agora a caixa é a menor entre "toda a largura disponível" e "toda a altura
   disponível convertida em largura pela proporção da imagem". O que fica
   dentro é a foto inteira, sem corte, e continua centralizada.
   --proporcao é escrito pelo JS a partir do tamanho real do arquivo. */
.galeria--uma {
  grid-template-columns: auto;
  grid-auto-rows: auto;
}

.galeria--uma .galeria__item {
  --altura-max: calc((100vh - var(--header-h)) * 0.88);
  --altura-max: calc((100svh - var(--header-h)) * 0.88);
  width: min(88vw, calc(var(--altura-max) * var(--proporcao, 1.6)));
  aspect-ratio: var(--proporcao, 1.6);
  height: auto;
}

/* a foto preenche a moldura exatamente, porque a moldura tem a proporção
   dela — "contain" evita qualquer sobra de 1px por arredondamento */
.galeria--uma .galeria__item img { object-fit: contain; }

.galeria__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-alt);
  border: 1px solid var(--borda);
  /* Não declarar will-change aqui.
     Ele promove CADA item a uma camada própria de composição, o tempo todo.
     Com muitas fotos (+ o canvas de fundo, o cabeçalho fixo e os filtros de
     desfoque), o Chrome estoura o orçamento de camadas e descarta algumas —
     é isso que faz a imagem sumir e voltar durante a rolagem.
     O GSAP já liga e desliga will-change sozinho durante a animação. */
}

.galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galeria__item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-3);
  font-size: 0.85rem;
  color: var(--texto);
  background: linear-gradient(transparent, rgba(34, 29, 33, 0.85));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.galeria__item:hover figcaption { opacity: 1; }

.galeria__vazia {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 40vh;
  color: var(--texto-fraco);
  text-align: center;
  padding: var(--sp-4);
  border: 1px dashed var(--borda);
  border-radius: var(--radius);
}

/* --- parte escrita --- */
.sobre-texto {
  position: relative;
  z-index: 2;
  padding-block: var(--sp-7);
  border-top: 1px solid var(--borda);
}

.sobre-texto__corpo {
  max-width: 68ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.sobre-texto__corpo p {
  color: var(--texto-suave);
  font-size: 1.05rem;
}

.sobre-texto__corpo p strong { color: var(--texto); font-weight: 600; }

.sobre-skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  justify-content: center;
}

.skill-tag {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: rgba(43, 37, 41, 0.7);
  font-size: 0.85rem;
  color: var(--texto-suave);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.skill-tag:hover { border-color: var(--acento); color: var(--acento); }

@media (max-width: 760px) {
  /* No celular a galeria deixa de ser fixada e deixa de dar zoom.
     Motivo: a barra de endereço do navegador aparece e some durante a
     rolagem, mudando a altura da tela a cada gesto. Isso remede a área
     fixa o tempo todo e é a origem do sumiço da foto. Num aparelho
     pequeno o zoom quase não se percebe, então a troca é barata: aqui a
     seção vira um bloco normal, com a foto inteira e centralizada.
     O JS complementa isto não criando o ScrollTrigger abaixo de 760px. */
  .galeria-wrap { height: auto; }

  .galeria-palco {
    position: static;
    height: auto;
    overflow: visible;
    padding-block: var(--sp-6);
  }

  .galeria { transform: none !important; }

  /* no celular no máximo 2 colunas; mexemos só nas variáveis, para não
     reintroduzir colunas de largura fixa que estouram a tela */

  .galeria {
    --colunas: 2;
    --largura: 92vw;
    --linha: 26vh;
  }
  .galeria--poucas {
    --colunas: 1;
    --largura: 92vw;
    --linha: calc((100vh - var(--header-h)) * 0.5);
  }

  .galeria__item:nth-child(6n + 3) { grid-column: span 2; }
  .galeria--poucas .galeria__item:nth-child(6n + 3) { grid-column: auto; }
}