/* ---------------------------------------------------------------------------
   Galeria de imagens dentro do corpo da publicação.

   Montada pelo editor como <figure class="article-gallery gallery-N">. As
   imagens são recortadas em proporção fixa: fotos de alturas diferentes numa
   grade deixam buracos, e é isso que faz a matéria "parecer quebrada". A
   proporção 4/3 preserva o enquadramento da maioria das fotos de prova.
   --------------------------------------------------------------------------- */
.article-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:28px 0;
  padding:0;
}
.article-gallery.gallery-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.article-gallery.gallery-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Uma imagem só não é grade: ocupa a largura como qualquer foto do texto. */
.article-gallery:has(img:only-of-type){grid-template-columns:1fr}

.article-gallery img{
  width:100%;
  aspect-ratio:4/3;
  display:block;
  margin:0;
  object-fit:cover;
  border-radius:12px;
  background:#eef3f1;
  cursor:zoom-in;
  transition:transform .2s ease, box-shadow .2s ease;
}
.article-gallery img:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(7,24,45,.18)}
.article-gallery figcaption{
  grid-column:1/-1;
  margin:2px 0 0;
  color:#657285;
  font-size:13px;
  line-height:1.5;
  text-align:center;
}
@media (max-width:720px){
  .article-gallery,
  .article-gallery.gallery-3,
  .article-gallery.gallery-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media (max-width:420px){
  .article-gallery,
  .article-gallery.gallery-3,
  .article-gallery.gallery-4{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .article-gallery img:hover{transform:none}
}

/* Ampliação ao clicar. O <dialog> nativo entrega Esc e fundo escurecido. */
.gallery-lightbox{
  width:min(1100px,calc(100vw - 28px));
  max-height:92dvh;
  padding:0;border:0;border-radius:16px;background:#0b1a12;
  box-shadow:0 40px 110px rgba(0,0,0,.45);
}
.gallery-lightbox::backdrop{background:rgba(7,24,45,.82)}
.gallery-lightbox img{width:100%;max-height:84dvh;display:block;object-fit:contain;background:#0b1a12}
.gallery-lightbox figcaption{padding:12px 16px;color:rgba(255,255,255,.72);font-size:13px;text-align:center}
.gallery-lightbox-close{
  position:absolute;right:12px;top:12px;
  width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:21px;line-height:1;cursor:pointer;
}
.gallery-lightbox-close:hover{background:rgba(255,255,255,.28)}
.gallery-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:20px;cursor:pointer;
}
.gallery-lightbox-nav:hover{background:rgba(255,255,255,.3)}
.gallery-lightbox-nav.is-prev{left:12px}
.gallery-lightbox-nav.is-next{right:12px}