/* ═════════════════════════════════════════════════════════════════════
   lightbox.css  ·  Full-screen photo carousel (a router layer too)
   Opens from any .photo-tile; carousel state in js/lightbox.js. Ported
   from the reference unchanged except for living in the layer stack.
   ═════════════════════════════════════════════════════════════════════ */
.photo-lightbox{
  position:fixed; inset:0; background: rgba(0,0,0,.95); z-index:600;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition: opacity .2s;
}
.photo-lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-img{
  max-width: calc(100vw - 32px); max-height: calc(100vh - 88px);
  object-fit:contain; border-radius:6px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none; touch-action: pan-y;
}
.lightbox-close{
  position:absolute; top: max(14px, env(safe-area-inset-top)); right:14px;
  width:42px; height:42px; border-radius:50%;
  background: rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.18); color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; line-height:1; transition: all .14s; -webkit-tap-highlight-color: transparent; z-index:2;
}
.lightbox-close:hover{ background: rgba(255,255,255,.16); border-color:#fff; }
.lightbox-counter{
  position:absolute; top: max(20px, calc(env(safe-area-inset-top) + 6px)); left:50%; transform: translateX(-50%);
  font-size:.74rem; font-weight:700; letter-spacing:.08em; color:#fff;
  background: rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.14); border-radius:100px; padding:6px 13px; z-index:2;
}
.lightbox-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.18); color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:300; line-height:1; transition: all .14s; -webkit-tap-highlight-color: transparent; z-index:2;
}
.lightbox-nav:hover{ background: rgba(255,255,255,.16); border-color:#fff; }
.lightbox-nav.prev{ left:14px; } .lightbox-nav.next{ right:14px; }
.lightbox-nav[hidden]{ display:none; }

/* ─── Photo grid (tiles in the detail body) ────────────── */
.photo-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; }
.photo-tile{ aspect-ratio:1; background: var(--card2); border:1px solid var(--border); border-radius:8px; overflow:hidden; position:relative; cursor:pointer; -webkit-tap-highlight-color: transparent; }
.photo-tile img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition: opacity .3s; }
.photo-tile img.loaded{ opacity:1; }
.photo-tile:hover{ border-color: var(--accent); }

@media (max-width:520px){
  .lightbox-nav{ width:38px; height:38px; font-size:1.5rem; }
  .lightbox-nav.prev{ left:8px; } .lightbox-nav.next{ right:8px; }
}