/* Styles propres à galeria.html. Réutilise .category-intro et
   .filter-pill de category.css pour le bandeau d'intro et les pills
   (assets/js/category-filter.js réutilisé tel quel, non dupliqué — voir
   docs/spec-galeria-page.md). Header, footer et tokens partagés dans
   base.css. */

.gallery-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
  padding:60px 0 100px;
}
.gallery-item{
  position:relative; aspect-ratio:1/1; overflow:hidden; cursor:pointer;
  border:none; padding:0; display:block; width:100%; background:var(--ink);
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item-tag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--glacier-deep); color:#DCEEF7;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.08em;
  text-transform:uppercase; padding:5px 9px;
}
.gallery-item-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(20,33,28,0.78) 0%, rgba(20,33,28,0) 45%);
  opacity:0; transition:opacity .25s ease;
  display:flex; align-items:flex-end; padding:16px;
}
.gallery-item:hover .gallery-item-overlay{ opacity:1; }
.gallery-item-caption{
  color:#F7F4EC; font-size:13px; line-height:1.35;
}
/* ===== LIGHTBOX ===== */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(11,14,13,0.94);
  display:none; align-items:center; justify-content:center; padding:60px 90px;
}
.lightbox.is-open{ display:flex; }
.lightbox-stage{ position:relative; max-width:1100px; width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; }
.lightbox-media{ max-width:100%; max-height:76vh; display:flex; align-items:center; justify-content:center; }
.lightbox-media img{ max-width:100%; max-height:76vh; object-fit:contain; }
.lightbox-media iframe{ width:min(100%, 960px); aspect-ratio:16/9; border:0; }
.lightbox-caption{ color:#DCE4DE; font-size:14px; margin-top:18px; text-align:center; max-width:640px; }
.lightbox-counter{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:#8FA096; margin-top:6px; letter-spacing:0.08em; }

.lightbox-close, .lightbox-prev, .lightbox-next{
  position:fixed; z-index:210;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:rgba(255,255,255,0.18); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg{ width:16px; height:16px; stroke:#F7F4EC; fill:none; stroke-width:2; }
.lightbox-close{ top:26px; right:26px; }
.lightbox-prev{ left:26px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:26px; top:50%; transform:translateY(-50%); }

@media (max-width: 1100px){
  .gallery-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 900px){
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .lightbox{ padding:70px 20px; }
  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }
  .lightbox-close{ top:16px; right:16px; }
}
@media (max-width: 480px){
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:8px; }
}