/* ==========================================================================
   CONFECAP · GALERIA DE FOTOS
   Complementa site.css. Só tokens do sistema.
   Usada por: institucional/galeria-de-fotos.php
   Grade com destaques (spans) + lightbox CSS puro via :target.
   ========================================================================== */

.gallery-intro{max-width:60ch}

/* --- Grade --- */
.gallery{
  display:grid; gap:.9rem; margin-top:clamp(2rem,4vw,2.75rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:dense;
}

.gitem{
  position:relative; display:block; border-radius:4px; overflow:hidden;
  aspect-ratio:4/3; text-decoration:none;
  box-shadow:0 24px 48px -34px rgba(0,0,0,.9);
}
.gitem img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.72) contrast(1.06);
  transition:transform var(--dur-3) cubic-bezier(.22,.7,.3,1), filter var(--dur-2) ease;
}
.gitem::after{ /* duotone navy, como .photo do site */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,57,106,.30) 0%, rgba(5,15,38,.60) 100%);
  mix-blend-mode:multiply;
  transition:opacity var(--dur-2) ease;
}
.gitem:hover img{transform:scale(1.05); filter:saturate(.9) contrast(1.05)}
.gitem:hover::after{opacity:.6}

/* Legenda + lupa */
.gitem__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:.55rem;
  padding:1.5rem 1rem .85rem;
  font-family:var(--font-display); font-weight:600; font-size:.82rem;
  letter-spacing:.02em; color:#fff;
  background:linear-gradient(0deg, rgba(5,15,38,.82), rgba(5,15,38,0));
  opacity:0; transform:translateY(6px);
  transition:opacity var(--dur-2) ease, transform var(--dur-2) ease;
}
.gitem:hover .gitem__cap,.gitem:focus-visible .gitem__cap{opacity:1; transform:none}
.gitem__cap svg{flex:0 0 auto; color:var(--gold-300)}

/* Fio dourado no topo ao focar */
.gitem::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; z-index:2;
  background:linear-gradient(90deg,var(--navy-600),var(--blue-500) 55%,var(--gold-500));
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur-2) ease;
}
.gitem:hover::before,.gitem:focus-visible::before{transform:scaleX(1)}

/* Destaques (ocupam 2 colunas / 2 linhas) */
.gitem--wide{grid-column:span 2; aspect-ratio:16/9}
.gitem--tall{grid-row:span 2; aspect-ratio:3/4}

/* --- Lightbox CSS puro (:target) --- */
.lightbox{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(3,9,22,.86); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-2) ease, visibility var(--dur-2);
}
.lightbox:target{opacity:1; visibility:visible}
.lightbox__backdrop{position:absolute; inset:0; cursor:zoom-out}
.lightbox__panel{
  position:relative; z-index:1; max-width:min(1100px,94vw); max-height:88vh;
  border:1px solid var(--hair-strong); border-radius:6px; overflow:hidden;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9);
  transform:scale(.96); transition:transform var(--dur-2) cubic-bezier(.22,.7,.3,1);
}
.lightbox:target .lightbox__panel{transform:scale(1)}
.lightbox__panel img{
  display:block; width:100%; height:auto; max-height:80vh; object-fit:contain;
  background:var(--navy-800);
}
.lightbox__cap{
  margin:0; padding:.85rem 1.1rem; background:var(--navy-900);
  font-family:var(--font-display); font-weight:500; font-size:.85rem; color:var(--on-dark-soft);
  border-top:1px solid var(--hair);
}
.lightbox__close{
  position:absolute; top:.6rem; right:.6rem; z-index:2;
  display:inline-grid; place-items:center; width:42px; height:42px; border-radius:4px;
  color:#fff; text-decoration:none; background:rgba(5,15,38,.6);
  border:1px solid var(--hair-strong);
  transition:color var(--dur-1) ease, border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.lightbox__close:hover{color:var(--gold-300); border-color:var(--gold-500); background:rgba(5,15,38,.85)}

@media (min-width:760px){
  .gallery{grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  .gitem img{transition:none}
  .gitem:hover img{transform:none}
  .lightbox__panel{transition:none; transform:none}
  .lightbox:target .lightbox__panel{transform:none}
}