/* ============================================================================
   INSIDE MASONRY — sistema global de galerias (reportagem visual)
   ----------------------------------------------------------------------------
   Um único componente para TODAS as galerias de imagem/vídeo do site.
   Colunas independentes (multicolunas CSS), alturas naturais, sem linha
   rígida, sem buraco artificial, sem corte. Responsivo por LARGURA e por
   ZOOM automaticamente (column-width), sem depender de JS de layout.

   Uso:
     <div class="inside-masonry" style="--im-col:300px">
       <figure class="im-item"> ...<img/video>... <figcaption class="im-cap">…</figcaption></figure>
       ...
     </div>

   Ordem editorial preservada (fluxo em coluna, DOM order). O algoritmo
   organiza o encaixe; não reordena aleatoriamente.

   Aprovado por: Sara Rollemberg · 2026-07-12 (CORREÇÃO GLOBAL DE GALERIAS)
   ============================================================================ */

.inside-masonry {
  --im-col: 250px;         /* largura-alvo da coluna; ajuste por galeria */
  --im-gap: 22px;
  column-width: var(--im-col);
  column-gap: var(--im-gap);
  column-fill: balance;
  /* nada de object-fit:cover, altura fixa ou aspect-ratio fixo aqui */
}

/* GAP editorial por faixa (desktop / tablet / mobile) */
@media (min-width: 1024px) { .inside-masonry { --im-gap: 24px; } }
@media (max-width: 1023px) and (min-width: 768px) { .inside-masonry { --im-gap: 18px; } }
@media (max-width: 767px)  { .inside-masonry { --im-gap: 14px; } }
@media (max-width: 479px)  { .inside-masonry { --im-col: 100% !important; --im-gap: 12px !important; } } /* 1 coluna, vence overrides por galeria */

/* ITEM — nunca quebra entre colunas, ocupa a largura da coluna.
   Cobre tanto .im-item explícito quanto filhos diretos "crus"
   (picture/figure/a/.galtext), para migrar galerias sem reescrever itens. */
.inside-masonry > .im-item,
.inside-masonry > picture,
.inside-masonry > figure,
.inside-masonry > a,
.inside-masonry > .galtext {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;   /* estabiliza o avoid-break em todos os navegadores */
  width: 100%;
  margin: 0 0 var(--im-gap);
  vertical-align: top;
  text-decoration: none;
  overflow: visible;
}

/* MÍDIA — proporção original SEMPRE. Proibido cortar/esticar/achatar. */
.inside-masonry img,
.inside-masonry video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  background: rgba(0,0,0,.04);   /* placeholder proporcional até carregar */
}
.inside-masonry .im-item picture { display: block; line-height: 0; }

/* Foto clicável (lightbox) */
.inside-masonry .im-item[data-lb],
.inside-masonry .im-item [data-lb] { cursor: zoom-in; }

/* LEGENDA — sempre ABAIXO da mídia, área exclusiva (nunca sobre a foto) */
.inside-masonry .im-cap {
  display: block;
  margin: 10px 2px 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--muted, #8f867a);
  letter-spacing: .01em;
}
.inside-masonry .im-cap b {
  display: block;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--terra, #2E4034);
  margin-bottom: 3px;
}
.inside-masonry .im-cap em {
  font-style: italic;
  font-family: "Fraunces", Georgia, serif;
  color: var(--grafite, #221D18);
}

/* VÍDEO — mesmo fluxo; sem caixa preta maior que o conteúdo */
.inside-masonry .im-item.im-video { position: relative; }
.inside-masonry .im-item.im-video video { background: #000; }
.inside-masonry .im-item.im-video .im-play {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(34,29,24,.55); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.inside-masonry .im-item.im-video .im-play svg { width: 15px; height: 15px; fill: #F4F3EE; }

/* Acessibilidade — foco visível */
.inside-masonry .im-item:focus-visible,
.inside-masonry .im-item [data-lb]:focus-visible {
  outline: 2px solid var(--terra, #2E4034);
  outline-offset: 3px;
}

/* Movimento reduzido — não autoplaya vídeo (o JS respeita; aqui garante o cartaz) */
@media (prefers-reduced-motion: reduce) {
  .inside-masonry .im-item.im-video video { /* pausado via JS */ }
}

/* ============================================================================
   LAYOUT JS — masonry de "coluna mais curta" (sem buraco) + blocos de
   preenchimento. Ativado por inside-masonry.js (classe .im-js). Enquanto o JS
   não roda, o multicolunas acima é o fallback (progressive enhancement).
   ============================================================================ */
.inside-masonry.im-js {
  column-width: auto !important;
  column-count: initial !important;
  column-fill: auto;
  position: relative;
}
.inside-masonry.im-js > .im-item,
.inside-masonry.im-js > picture,
.inside-masonry.im-js > figure,
.inside-masonry.im-js > a,
.inside-masonry.im-js > .galtext,
.inside-masonry.im-js > .im-filler {
  position: absolute;
  top: 0; left: 0;
  margin: 0;              /* o gap vira top/left calculado no JS */
  display: block;
}

/* Bloco de preenchimento — cor da marca + frase do projeto, fecha o rodapé.
   Só aparece quando há vão a preencher (o JS decide). Nunca clicável. */
.im-filler {
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  padding: clamp(16px,1.6vw,22px);
  overflow: hidden;
  user-select: none;
}
.im-filler .im-filler-k {
  display: block;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: .56rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; opacity: .62; margin-bottom: 7px;
}
.im-filler .im-filler-q {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic; font-weight: 400;
  line-height: 1.16; letter-spacing: -.005em;
  font-size: clamp(1.02rem, 1.5vw, 1.35rem);
  text-wrap: balance;
}