/* Galeria — complementa /styles.css */

nav a[aria-current="page"]{color:var(--gold)}

.gal-head{padding:56px var(--gutter) 28px calc(var(--gutter) + 6px);display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.gal-head h1{font-size:clamp(2rem,4vw,3rem);font-weight:600;text-transform:uppercase;color:var(--plum);line-height:1}
.gal-head p{font-size:14px;color:var(--muted)}

/* Grade em linhas justificadas: mantém a ordem das fotos e não corta nenhuma.
   Cada item recebe --r (largura/altura) pelo JS; a altura-base da linha é --row. */
.gal-grid{--row:240px;--gap:8px;display:flex;flex-wrap:wrap;gap:var(--gap);padding:0 var(--gutter) 20px}
.gal-grid::after{content:"";flex-grow:999999}   /* última linha não estica */
.gal-item{flex:var(--r) 1 calc(var(--r) * var(--row));aspect-ratio:var(--r);position:relative;content-visibility:auto;contain-intrinsic-size:auto calc(var(--r) * var(--row)) auto var(--row);padding:0;border:0;background:#ece7e9;cursor:zoom-in;overflow:hidden;border-radius:2px}
.gal-item img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s,transform .4s}
.gal-item img.is-loaded{opacity:1}
.gal-item:hover img{transform:scale(1.02)}
.gal-item:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#gal-fim{height:1px}
.gal-msg{width:100%;padding:40px 0;color:var(--muted);font-size:14px}

/* Visualizador */
.viewer{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(20,10,15,.96);color:#fff;overflow:hidden}
.viewer[open]{display:grid;place-items:center}
.viewer::backdrop{background:rgba(20,10,15,.96)}
.viewer img{max-width:calc(100vw - 140px);max-height:calc(100dvh - 80px);object-fit:contain;user-select:none;-webkit-user-drag:none;transition:opacity .2s}
.viewer img.is-loading{opacity:.35}
.v-btn{position:absolute;background:none;border:0;color:#fff;cursor:pointer;opacity:.75;font:300 48px/1 "Open Sans",sans-serif;padding:12px 18px}
.v-btn:hover,.v-btn:focus-visible{opacity:1}
.v-btn:focus-visible{outline:2px solid var(--gold)}
.v-close{top:8px;right:12px;font-size:40px}
.v-prev{left:8px;top:50%;transform:translateY(-50%)}
.v-next{right:8px;top:50%;transform:translateY(-50%)}
.v-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:13px;opacity:.7;letter-spacing:.05em}

@media (max-width:700px){
  .gal-head{padding:36px var(--px) 20px}
  .gal-grid{--row:130px;--gap:5px;padding:0 var(--px) 12px}
  .viewer img{max-width:100vw;max-height:calc(100dvh - 120px)}
  .v-prev,.v-next{top:auto;bottom:4px;transform:none}
}