/* Galeria das publicações (assets/js/galeria.js). Só carrega em publicações com galeria ou com duas fotos ou mais no texto. */

/* Sem JavaScript: a grade do WordPress, com a foto em proporção fixa. Com galeria.js ela vira o slide abaixo. */
.conteudo .gallery { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-block: 1.6em; padding: 0; }
.conteudo .gallery-item { min-width: 0; margin: 0; }
.conteudo .gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.conteudo .gallery-caption { padding-top: 6px; color: var(--soft); font-size: var(--s-small); }
.conteudo [data-lupa] { cursor: zoom-in; }

/* Slide dentro do texto. A foto aparece inteira (foto em pé cortada perderia o assunto) sobre o verde escuro do tema. */
.galeria { position: relative; margin-block: 1.6em; background: var(--ink); color: var(--paper); }
.galeria__trilho { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galeria__trilho::-webkit-scrollbar { display: none; }
.galeria__slide { position: relative; flex: 0 0 100%; min-width: 0; max-height: 58vh; aspect-ratio: 3 / 2; scroll-snap-align: center; }
.galeria__slide > a, .galeria__slide > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.galeria__slide img { width: 100%; height: 100%; margin: 0; object-fit: contain; }
.galeria__seta, .lupa__seta { position: absolute; top: calc(50% - 22px); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid rgba(241, 245, 232, .5); border-radius: 0; background: rgba(6, 40, 26, .72); color: var(--paper); cursor: pointer; translate: 0 -50%; }
.galeria__seta--ant, .lupa__seta--ant { left: 10px; }
.galeria__seta--prox, .lupa__seta--prox { right: 10px; }
.galeria__seta:hover, .lupa__seta:hover { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
.galeria__seta:focus-visible, .lupa__seta:focus-visible, .galeria__ampliar:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.galeria__base { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 12px; border-top: 1px solid rgba(241, 245, 232, .22); }
.galeria__contador { font: 500 var(--s-small)/1 var(--text); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.galeria__ampliar { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 14px; border: 0; background: var(--yellow); color: var(--ink); font: 500 .9rem/1 var(--text); cursor: pointer; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.galeria__ampliar:hover { filter: brightness(1.07); }
@media (hover: none) { .galeria__seta, .lupa__seta { display: none; } } /* no toque quem arrasta já sabe arrastar, e a seta só rouba espaço da foto */

/* Tela cheia: <dialog>, então Esc, foco preso e fundo inerte vêm do navegador. Fundo opaco: texto atrás atrapalha ver a foto. */
html:has(.lupa[open]) { overflow: hidden; }
.lupa { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #021508; color: var(--paper); overflow: hidden; }
.lupa[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); } /* preso ao [open]: solto na classe venceria o display:none do navegador */
.lupa__topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; }
.lupa__contador { color: rgba(241, 245, 232, .75); font: 500 var(--s-small)/1 var(--text); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.lupa__acoes { display: flex; align-items: center; gap: 8px; }
.lupa__acao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 14px; border: 2px solid rgba(241, 245, 232, .38); border-radius: 0; background: transparent; color: var(--paper); font: 500 .9rem/1 var(--text); cursor: pointer; }
.lupa__acao:hover { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
.lupa__acao:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.lupa__acao--fechar { width: 44px; padding: 0; }
.lupa__acao--zap { border-color: #25d366; background: #25d366; color: #04241a; }
.lupa__acao--zap:hover { border-color: #43e285; background: #43e285; color: #04241a; }
@media (max-width: 479.98px) { .lupa__acao { width: 44px; padding: 0; } .lupa__acao span { display: none; } } /* no celular a barra não comporta rótulo e ícone juntos */
.lupa__trilho { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lupa__trilho::-webkit-scrollbar { display: none; }
.lupa__trilho:focus-visible { outline: 2px solid rgba(241, 245, 232, .45); outline-offset: -6px; } /* só aparece para quem abriu pelo teclado; o contorno escuro do tema sumiria no fundo */
.lupa__slide { display: grid; flex: 0 0 100%; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; align-items: center; justify-items: center; min-width: 0; margin: 0; padding: 0 16px 24px; scroll-snap-align: center; }
.lupa__slide img { width: auto; max-width: 100%; height: auto; max-height: 100%; }
.lupa__legenda { max-width: 68ch; color: rgba(241, 245, 232, .78); font-size: .95rem; line-height: 1.5; text-align: center; }
.lupa__seta { top: 50%; width: 48px; height: 48px; }
.lupa__seta--ant { left: 16px; }
.lupa__seta--prox { right: 16px; }

@media print { .galeria__seta, .galeria__ampliar { display: none; } }