/* ==========================================================================
   Casa Conexão — galeria acordeão
   Porte em CSS puro do <AccordionGallery /> do React Bits (MIT).
   O original é React + GSAP; aqui não há nem um nem outro. Tudo que o GSAP
   fazia por quadro é transição de CSS, e o estado (qual painel está ativo)
   é uma classe que o js/galeria.js troca.

   Duas camadas, de propósito:
   1. SEM o script, .galeria-acordeao é uma grade comum. As fotos aparecem,
      os rótulos aparecem, nada fica invisível esperando JavaScript.
   2. COM o script, a grade vira o acordeão (a classe --pronta entra).
   ========================================================================== */

/* --- estado base: grade simples, sem script ------------------------------ */

.galeria-acordeao {
  /* Quem decide a cor do acento é a superfície (regra 9.8 do protocolo).
     A galeria é superfície escura: o cobre padrão daria 2,8:1 sobre o véu
     verde. Aqui vale o mesmo tom claro que a hero e o contato usam. */
  --acento-texto: #D99A72;

  --vao: 10px;
  --altura: 520px;
  --altura-coluna: 520px;

  /* Fração da largura que o painel ativo ocupa (o expandRatio do original).
     O flex-grow correspondente é r*(n-1)/(1-r); quem calcula é o script,
     que sabe quantos painéis existem. O valor abaixo é o de 5 painéis e
     serve de rede se o script não rodar. */
  --razao: 0.52;
  --crescimento: 4.3333;
  --total: 5;

  --parallax: 26px;
  --parallax-coluna: 18px;
  --rotacao: 8deg;
  --escurecer: 0.58;

  /* 600ms é longo para interface, e é de propósito: isto não é um controle,
     é superfície de marketing (o protocolo libera 600–900ms aí). O painel
     percorre meia tela de largura; a 200ms o movimento vira estalo e o
     parallax não chega a ser lido. */
  --tempo-galeria: 600ms;
  /* A curva de entrada/saída do estúdio: sai rápido e assenta devagar.
     A de "movimento na tela" (0.77, 0, 0.175, 1) começa lenta, e como quem
     dispara isto é o ponteiro, o primeiro quadro tem que responder na hora. */
  --curva-galeria: var(--curva, cubic-bezier(0.23, 1, 0.32, 1));

  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--vao);
}

/* Descrição da galeria: só para leitor de tela. O script é quem a cria. */
.galeria-acordeao__dica {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.painel {
  --distancia: 0;
  --sinal: clamp(-1, var(--distancia), 1);
  --desl-x: 0px;
  --desl-y: 0px;
  --eixo-x: 0;
  --eixo-y: 1;

  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--raio);
  /* Fundo próprio: se a foto não carregar, o painel continua sendo um bloco
     da paleta e não um buraco. */
  background: var(--linho);
}

.painel__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  z-index: 0;
}

/* Véu de escurecimento dos painéis inativos.
   O original deixa os inativos em escala de cinza. Aqui não: `filter` está
   fora da lista de propriedades animáveis do protocolo (só transform e
   opacity), e um cinza travado ao lado do cobre da marca ficaria estranho.
   Um véu verde-fundo com opacidade animada dessatura na prática, custa um
   quadro composto e usa a cor da casa. */
.painel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--verde-fundo);
  opacity: 0;
  transition: opacity var(--tempo-galeria) var(--curva-galeria);
}

/* Escurecimento de leitura: é ele que garante os 4,5:1 do rótulo creme
   sobre uma foto de conteúdo desconhecido. */
.painel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(31, 42, 30, 0.94) 0%,
    rgba(31, 42, 30, 0.78) 16%,
    rgba(31, 42, 30, 0.28) 42%,
    rgba(31, 42, 30, 0) 62%
  );
  opacity: 1;
  transition: opacity var(--tempo-galeria) var(--curva-galeria);
}

.painel__rotulo {
  position: absolute;
  z-index: 3;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
}

.painel__barra {
  flex: 0 0 auto;
  width: 3px;
  height: 21px;
  border-radius: 2px;
  background: var(--acento-texto);
}

.painel__texto {
  font-family: 'Marcellus', Georgia, serif;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--creme);
}

/* Foto que não carregou: o script troca a <img> por este parágrafo, com o
   texto do alt. Sem ícone de imagem quebrada e sem painel vazio. */
.painel--sem-foto { background: var(--linho); }
.painel--sem-foto::before,
.painel--sem-foto::after { opacity: 0 !important; }
.painel--sem-foto .painel__texto { color: var(--texto); }
.painel--sem-foto .painel__barra { background: var(--cobre-texto); }

.painel__ausente {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 20px 18px 64px;
  overflow: hidden;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* --- estado com script: o acordeão --------------------------------------- */

.galeria-acordeao--pronta {
  display: flex;
  gap: var(--vao);
  height: var(--altura);
  perspective: 1400px;
  /* Serve às unidades cqi da foto logo abaixo: é o que substitui o
     ResizeObserver do original sem uma linha de JavaScript. */
  container-type: inline-size;
}

.galeria-acordeao--pronta .painel {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  aspect-ratio: auto;
  cursor: pointer;
  /* O interior do painel não depende da largura dele (a foto tem largura
     própria, em cqi), então dá para isolar layout e pintura. */
  contain: layout paint;
  transform: rotate3d(var(--eixo-x), var(--eixo-y), 0, calc(var(--sinal) * var(--rotacao)));
  transition: flex-grow var(--tempo-galeria) var(--curva-galeria),
              transform var(--tempo-galeria) var(--curva-galeria);
}

.galeria-acordeao--pronta .painel--ativo {
  flex-grow: var(--crescimento);
  cursor: default;
}

/* O anel de foco fica FORA do painel, no vão, e não por gosto: com
   outline-offset negativo o Chrome pinta o contorno antes dos filhos
   posicionados, e a foto passa por cima dele. Medido em pixel — com -3px o
   anel simplesmente não existia na tela, com +3px aparece.
   A cor é a do site (--cobre): fora do painel o fundo é o creme, onde ela dá
   3,8:1; o tom claro da superfície escura daria 2,1:1 ali. */
.galeria-acordeao--pronta .painel:focus-visible {
  outline: 3px solid var(--cobre);
  outline-offset: 3px;
  border-radius: var(--raio);
}

/* A foto tem largura fixa, igual à do painel expandido, e é o painel que faz
   as vezes de janela sobre ela. É desse descasamento que nasce o parallax:
   quando as larguras mudam, a foto anda menos que o painel. */
.galeria-acordeao--pronta {
  --largura-foto: calc((100cqi - (var(--total) - 1) * var(--vao)) * var(--razao));
}

@supports not (container-type: inline-size) {
  .galeria-acordeao--pronta { --largura-foto: 560px; }
}

.galeria-acordeao--pronta .painel__foto {
  inset: auto;
  top: 50%;
  left: 50%;
  width: var(--largura-foto);
  /* O estilo.css tem `img, svg { max-width: 100% }`, que aqui grudaria a foto
     na largura do painel e mataria o parallax antes de ele existir. Medido:
     a largura calculada saía certa (536,6px) e a usada vinha 123,8px. */
  max-width: none;
  height: 100%;
  transform: translate(-50%, -50%) translate3d(var(--desl-x), var(--desl-y), 0);
  transition: transform var(--tempo-galeria) var(--curva-galeria);
}

.galeria-acordeao--pronta .painel {
  --desl-x: calc(var(--distancia) * var(--parallax) * -1);
}

.galeria-acordeao--pronta .painel::before { opacity: var(--escurecer); }
.galeria-acordeao--pronta .painel--ativo::before { opacity: 0; }

.galeria-acordeao--pronta .painel::after { opacity: 0; }
.galeria-acordeao--pronta .painel--ativo::after { opacity: 1; }

/* Rótulo: entra de opacity 0 / x -14px, a barrinha 60ms antes do texto.
   É o stagger do original. Na saída não há atraso nenhum — o rótulo some
   assim que o painel começa a fechar, que é a assimetria certa: espera-se
   para entrar, nunca para sair. */
.galeria-acordeao--pronta .painel__barra,
.galeria-acordeao--pronta .painel__texto {
  opacity: 0;
  transform: translate3d(-14px, 0, 0);
  transition: opacity 360ms var(--curva-galeria),
              transform 360ms var(--curva-galeria);
}

.galeria-acordeao--pronta .painel--ativo .painel__barra,
.galeria-acordeao--pronta .painel--ativo .painel__texto {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.galeria-acordeao--pronta .painel--ativo .painel__barra { transition-delay: 170ms; }
.galeria-acordeao--pronta .painel--ativo .painel__texto { transition-delay: 230ms; }

.galeria-acordeao--pronta .painel__texto {
  /* Durante a expansão a largura muda a cada quadro; sem isto o texto
     requebra sozinho no meio do movimento. */
  white-space: nowrap;
}

/* O texto que substitui a foto ausente acompanha o rótulo: num painel
   estreito ele seria só um bloco de palavras cortadas. */
.galeria-acordeao--pronta .painel__ausente {
  opacity: 0;
  transition: opacity 360ms var(--curva-galeria);
}
.galeria-acordeao--pronta .painel--ativo .painel__ausente { opacity: 1; }

/* --- telas estreitas: o acordeão deita ----------------------------------- */

@media (max-width: 620px) {
  .galeria-acordeao--pronta {
    flex-direction: column;
    height: var(--altura-coluna);
    container-type: normal;
    --largura-foto: 100%;
  }

  .galeria-acordeao--pronta .painel {
    /* Mesmo giro, outro eixo: o painel tomba em vez de virar. */
    --eixo-x: 1;
    --eixo-y: 0;
    --rotacao: -6deg;
    --desl-x: 0px;
    --desl-y: calc(var(--distancia) * var(--parallax-coluna) * -1);
  }

  .galeria-acordeao--pronta .painel__foto {
    width: 100%;
    height: calc(var(--altura-coluna) * var(--razao));
  }

  .painel__rotulo { left: 16px; right: 16px; bottom: 13px; }
  .painel__texto { font-size: 16px; }
}

/* --- movimento reduzido --------------------------------------------------
   Reduz, não zera (protocolo). O que some é o deslocamento: o parallax da
   foto e o giro 3D dos painéis inativos, que são movimento grande e sem
   função de compreensão. O que fica é a mudança de tamanho e as opacidades,
   que são o próprio estado — só que quase instantâneas, porque o
   estilo.css já impõe transition-duration: 80ms !important aqui.
   Nenhum conteúdo depende de animação para existir.                       */

@media (prefers-reduced-motion: reduce) {
  .galeria-acordeao--pronta .painel,
  .galeria-acordeao--pronta .painel__foto,
  .galeria-acordeao--pronta .painel__barra,
  .galeria-acordeao--pronta .painel--ativo .painel__barra,
  .galeria-acordeao--pronta .painel__texto,
  .galeria-acordeao--pronta .painel--ativo .painel__texto {
    transition-delay: 0ms;
  }

  .galeria-acordeao--pronta .painel { transform: none; }

  .galeria-acordeao--pronta .painel__foto {
    transform: translate(-50%, -50%);
  }

  .galeria-acordeao--pronta .painel__barra,
  .galeria-acordeao--pronta .painel__texto {
    transform: none;
  }
}