/* ─────────────────────────────────────────────────────────────
   Galeria da composição — só a página /curadorias/{cat}/{slug}/.

   Saiu de site.css em 01/10/2026 por motivo de transporte, não de estética:
   a folha passou de 20 KB, que é o teto acima do qual o FTP desta hospedagem
   trunca arquivo (CONTEXTO §12.5). Como a galeria só existe numa página, ela
   também deixa de pesar nas outras — o lucro que a divisão por página sempre
   procura (§12.11).

   Entra por `cssExtra`, ao lado de lightbox.css, que é o par natural dela.
   ───────────────────────────────────────────────────────────── */

/* ── Galeria da composição ────────────────────────────────── */
.galeria{margin-bottom:var(--s-12)}
/* Grade com encaixe (grid-auto-flow:dense). O masonry por colunas CSS que
   havia aqui deixava colunas inteiras vazias quando a galeria tinha várias
   fotos em pé: ele equilibra por altura e não parte uma foto ao meio.
   Aqui toda linha tem a altura de uma foto deitada (4:3 da coluna); foto em
   pé ocupa duas linhas, e o "dense" puxa as seguintes para os vãos. O
   recorte usa o ponto focal da foto (object-position vindo do Srcset). */
.galeria{container-type:inline-size}
.galeria__grade{
  --cols:3;--vao:var(--s-3);
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  grid-auto-rows:calc((100cqi - (var(--cols) - 1) * var(--vao)) / var(--cols) * .75);
  grid-auto-flow:dense;
  gap:var(--vao);
}
@media (max-width:900px){ .galeria__grade{--cols:2} }
@media (max-width:480px){ .galeria__grade{--vao:var(--s-2)} }

.galeria__foto{
  padding:0;border:0;background:none;cursor:zoom-in;
  display:block;width:100%;height:100%;
  border-radius:var(--radius);overflow:hidden;
}
.galeria__foto--alta{grid-row:span 2}
/* A primeira foto atravessa a grade: imagem cheia logo na entrada, como
   quem chega do Instagram espera. */
.galeria__foto:first-child{grid-column:1 / -1;grid-row:span 2}
.galeria__foto img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  background-size:cover;background-position:center;
  transition:transform 600ms var(--ease);
}
@media (hover:hover){
  .galeria__foto:hover img{transform:scale(1.03)}
}
.galeria__foto:focus-visible{outline:2px solid var(--c-deep-berry);outline-offset:3px}


@media (max-width:640px){
  /* Menos altura antes da primeira foto: no celular, cada 100px de cabeçalho
     é uma foto a menos visível na primeira tela. */
  .cabecalho{padding:var(--s-6) var(--s-4) var(--s-4);gap:var(--s-4)}
  .cabecalho__marca img{width:min(9.5rem,48vw)}
  .curadoria__abertura{margin-bottom:var(--s-6)}
  .migalhas{margin-bottom:var(--s-2)}

}

/* ── O convite, nas composições de Natal que podem ser montadas ──
   Mora aqui porque só existe na página da composição, e esta folha só é
   carregada nela.

   É o ÚNICO bloco de ação dessas páginas — substitui a caixa branca de
   reserva, que continua nas mesas postas. Havia os dois empilhados, e a
   caixa branca destoava: era o elemento mais claro da página, numa cor que
   nenhum outro bloco usa, dizendo uma frase de mesa posta sobre uma árvore.

   Sem fundo branco e sem sombra: uma moldura fina sobre o próprio fundo da
   página, com um filete do verde da casa em cima. Os dois caminhos ficam
   lado a lado — receber montado, ou levar a decoração. */
.chamada-montagem{
  max-width:38rem;margin:0 auto var(--s-12);
  padding:var(--s-8) var(--s-6);
  text-align:center;
  border:1px solid var(--border);border-top:2px solid var(--c-deep-green);
  border-radius:var(--radius);
}
.chamada-montagem h2{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,4vw,1.875rem);line-height:1.2;color:var(--c-deep-green);
  text-wrap:balance;
}
.chamada-montagem p{
  max-width:28rem;margin:var(--s-3) auto 0;
  line-height:1.6;opacity:.88;text-wrap:pretty;
}
.chamada-montagem__acoes{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3);
  margin-top:var(--s-6);
}
/* O botão discreto traz uma margem de cima, pensada para quando fica
   EMBAIXO do principal, na caixa de reserva. Lado a lado, ela o empurrava
   para baixo e os dois ficavam desalinhados. */
.chamada-montagem__acoes .botao-marca{margin-top:0}
@media (max-width:560px){
  .chamada-montagem{margin-left:var(--s-4);margin-right:var(--s-4)}
  .chamada-montagem__acoes .botao-marca{width:100%}
}

/* ── Enviar esta composição ───────────────────────────────────
   Junto do título, na voz mais baixa da página: versalete pequeno do
   descritor da marca, sem caixa e sem cor de botão. É um gesto de quem quer
   mandar adiante, não uma oferta — não pode disputar com reservar.
   Alvo de toque de 44px mesmo com o texto pequeno. */
/* O caminho virou o sobretítulo: colado ao nome. */
.curadoria__abertura .migalhas{margin-bottom:var(--s-3)}

/* Abaixo da capa, alinhado à esquerda com ela: legenda de ação, não título. */
/* Proximidade: a ação pertence à foto, então cola nela (a capa perde a
   margem de baixo) e o respiro grande vai para depois da linha. */
.curadoria__capa:has(+ .compartilhar){margin-bottom:0}
.compartilhar{
  display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0 var(--s-6);
  margin:var(--s-1) 0 var(--s-10);
}
.compartilhar__acao{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:0;border:0;background:none;cursor:pointer;
  /* Letra de texto, não versalete: a página já tem o caminho em caixa alta
     no topo, e duas linhas no mesmo registro competiam. */
  font-size:.875rem;font-weight:400;
  color:var(--c-deep-green);text-decoration:none;opacity:.8;
  transition:opacity 180ms var(--ease);
}
.compartilhar__acao span{border-bottom:1px solid transparent;transition:border-color 180ms var(--ease)}
@media (hover:hover){
  .compartilhar__acao:hover{opacity:1}
  .compartilhar__acao:hover span{border-bottom-color:currentColor}
}
.compartilhar__acao:focus-visible{opacity:1;outline:1px solid var(--c-deep-green);outline-offset:4px}
.compartilhar__acao[hidden]{display:none}