/* Mosaic Gallery — front-end styles (scoped, won't leak into the theme) */
.mosaic-gallery-block{
  --mosaic-gap: 10px;
  --mosaic-row-height: 220px;
  --mosaic-radius: 3px;
  --mosaic-accent: #E8A33D;
  box-sizing: border-box;
}
.mosaic-gallery-block *{ box-sizing: border-box; }

.mosaic-gallery-rows{ width:100%; }
.mosaic-row{
  display:flex;
  gap: var(--mosaic-gap);
  margin-bottom: var(--mosaic-gap);
  justify-content:flex-start;
}
.mosaic-tile{
  position:relative;
  overflow:hidden;
  border-radius: var(--mosaic-radius);
  cursor:pointer;
  background:#1d1f24;
  flex:0 0 auto;
}
.mosaic-tile img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition: transform .35s ease;
}
.mosaic-tile:hover img{ transform:scale(1.04); }
.mosaic-tile:focus{ outline:2px solid var(--mosaic-accent); outline-offset:2px; }

/* Lightbox */
.mosaic-lightbox{
  position:fixed; inset:0;
  background:rgba(10,10,11,.94);
  display:none;
  align-items:center; justify-content:center;
  z-index:99999;
  flex-direction:column;
}
.mosaic-lightbox.is-open{ display:flex; }
.mosaic-lightbox-top{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 24px;
}
.mosaic-lightbox-counter{
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size:12px; color:#8A8D93; letter-spacing:.05em;
}
.mosaic-lightbox-counter b{ color: var(--mosaic-accent); font-weight:600; }
.mosaic-lightbox-close{
  background:transparent; border:1px solid #34363D; color:#EDEBE6;
  width:36px; height:36px; border-radius:50%;
  font-size:18px; line-height:1; cursor:pointer;
}
.mosaic-lightbox-close:hover{ border-color: var(--mosaic-accent); color: var(--mosaic-accent); }
.mosaic-lightbox-stage{
  max-width:90vw; max-height:80vh;
  display:flex; align-items:center; justify-content:center;
}
.mosaic-lightbox-stage img{
  max-width:90vw; max-height:80vh;
  object-fit:contain;
  border-radius:2px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.mosaic-lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.05); border:1px solid #34363D; color:#EDEBE6;
  width:46px; height:46px; border-radius:50%;
  font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.mosaic-lightbox-arrow:hover{ border-color: var(--mosaic-accent); color: var(--mosaic-accent); }
.mosaic-lightbox-arrow.prev{ left:20px; }
.mosaic-lightbox-arrow.next{ right:20px; }

@media (max-width:600px){
  .mosaic-lightbox-arrow{ width:38px; height:38px; font-size:16px; }
  .mosaic-lightbox-arrow.prev{ left:8px; }
  .mosaic-lightbox-arrow.next{ right:8px; }
}