/* ============================================================
   KAFOU COLECTIVO — reusable photo gallery + lightbox.
   Used by every Flashback event detail view (see gallery.js /
   KafouGallery.renderInto). Self-contained: only reads the site's
   existing --kafou-pink / --foreground / --background custom
   properties from styles.css, adds no new colors.

   Simple, uniform grid — every tile the same size (square). An
   earlier mosaic version (mixed large/wide/medium/small tiles) was
   tried and dropped in favor of this calmer, even layout.
   ============================================================ */

.kgallery{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-block: 40px;
}
.kgallery[hidden]{ display:none; }

@media (max-width: 1024px){
  .kgallery{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 640px){
  .kgallery{ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:8px; }
}

.kgallery-tile{
  display:block; width:100%;
  padding:0; margin:0; border:none; background:#150B11;
  border-radius:14px; overflow:hidden; cursor:pointer;
}
.kgallery-tile img{
  display:block; width:100%; height:100%; aspect-ratio:1;
  object-fit:cover; object-position:center;
  opacity:0; transition: opacity .25s ease, transform .35s ease;
}
.kgallery-tile img.is-loaded{ opacity:1; }
.kgallery-tile:hover img,
.kgallery-tile:focus-visible img{ transform: scale(1.06); }
.kgallery-tile:focus-visible{ outline:2px solid var(--kafou-pink, #E4157D); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .kgallery-tile img{ transition:none; opacity:1; }
  .kgallery-tile:hover img,
  .kgallery-tile:focus-visible img{ transform:none; }
}

/* ---- lightbox ---- */
.kgallery-lightbox{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  background: rgba(11,5,8,0.94);
  padding: 24px;
}
.kgallery-lightbox.is-open{ display:flex; }
.kgallery-lightbox-img{
  display:block; max-width:90vw; max-height:85vh; width:auto; height:auto;
  object-fit:contain; border-radius:8px;
}
.kgallery-lightbox-btn{
  position:fixed; z-index:201;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px;
  cursor:pointer;
  transition: background-color .2s ease, color .2s ease;
}
.kgallery-lightbox-btn svg{ width:18px; height:18px; }
.kgallery-lightbox-close{
  top:20px; right:20px;
  border:none; background: var(--kafou-pink, #E4157D); color:#0B0508;
}
.kgallery-lightbox-close:hover,
.kgallery-lightbox-close:focus-visible{ background:#FFFFFF; }
.kgallery-lightbox-prev,
.kgallery-lightbox-next{
  top:50%; transform:translateY(-50%);
  border:1.5px solid var(--kafou-pink, #E4157D);
  background:transparent; color: var(--kafou-pink, #E4157D);
}
.kgallery-lightbox-prev{ left:20px; }
.kgallery-lightbox-next{ right:20px; }
.kgallery-lightbox-prev:hover, .kgallery-lightbox-prev:focus-visible,
.kgallery-lightbox-next:hover, .kgallery-lightbox-next:focus-visible{
  background: var(--kafou-pink, #E4157D); color:#0B0508;
}
.kgallery-lightbox-btn:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; }
@media (max-width: 640px){
  .kgallery-lightbox-close{ top:12px; right:12px; width:40px; height:40px; }
  .kgallery-lightbox-prev{ left:12px; width:40px; height:40px; }
  .kgallery-lightbox-next{ right:12px; width:40px; height:40px; }
}
@media (prefers-reduced-motion: reduce){
  .kgallery-lightbox-btn{ transition:none; }
}

/* ---- no-JS fallback: plain grid, original order, no interaction ---- */
.kgallery-noscript{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:10px; margin-block:40px;
}
.kgallery-noscript img{
  display:block; width:100%; height:100%; aspect-ratio:1;
  object-fit:cover; border-radius:14px;
}