/* GAL-01 · Galeria bento — reescrita do original do 21st.dev sem React nem Framer Motion.
   Faixa horizontal de colunas: foto vertical ocupa a coluna inteira, duas horizontais empilham, e
   cada card fica na proporção da própria foto. A faixa anda sozinha pelo transform (galeria.js).

   Diferença do original: ele usa spans de grade que só valem a partir de `md`, o que deixa todos os
   cards iguais no celular. Em colunas, a composição bento vale em qualquer largura. */
.c-galeria {
  --c-gal-altura: 380px;
  --c-gal-gap: 10px;
  --c-gal-gutter: 24px;
  --c-gal-fundo: #141414;
  --c-gal-raio: 16px;
  --c-gal-tinta-2: #a8a8a8;

  position: relative;
  overflow: hidden;
  touch-action: pan-y;        /* o dedo na vertical rola a página; na horizontal, arrasta a faixa */
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.c-galeria[data-arrastando="true"] { cursor: grabbing; }
.c-galeria__trilho {
  display: flex;
  gap: var(--c-gal-gap);
  height: var(--c-gal-altura);
  padding-left: var(--c-gal-gutter);
  will-change: transform;
}
.c-galeria__coluna { flex: none; display: flex; flex-direction: column; gap: var(--c-gal-gap); height: 100%; }
.c-galeria__card {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--c-gal-raio);
  background: var(--c-gal-fundo);
  cursor: zoom-in;
}
/* pointer-events: none na foto para o arraste pegar o card, não a imagem */
.c-galeria__foto { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.c-galeria__legenda { margin-top: 10px; padding: 0 var(--c-gal-gutter); font-size: .85rem; color: var(--c-gal-tinta-2); }