/* Frontend gallery lightbox for article.php */

.galleryGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
  margin-top:10px;
}
.galleryThumb{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(120,200,255,.22);
  border-radius:14px;
  overflow:hidden;
  background: rgba(255,255,255,.05);
  cursor:pointer;
  text-decoration:none;
}
.galleryThumb img{
  display:block;
  max-width:200;
  height:150px;
}

/* Lightbox overlay */
.lbx{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:99999;
}
.lbx.on{ display:flex; }

.lbxBox{
  width:min(900px, 96vw);color:#eeeeee;
  max-height: 92vh;
  border:1px solid rgba(120,200,255,.25);
  border-radius:18px;
  overflow:hidden;
  background:#0b1024;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}

.lbxHead{
	
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.12));
  border-bottom:1px solid rgba(120,200,255,.18);
}
.lbxHead strong{
  font-size:13px;
  letter-spacing:.3px;
}
.lbxHead .btn{
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:6px 10px;
  background:rgba(255,255,255,.08);
  color:#e7f0ff;
  cursor:pointer;
  font-size:12px;
}
.lbxHead .btn:hover{ background:rgba(255,255,255,.12); }

.lbxBody{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:0;
  max-height: calc(92vh - 46px);
}
@media (max-width: 960px){
  .lbxBody{ grid-template-columns: 1fr; }
}

.lbxImg{
  background:rgba(0,0,0,.32);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px;
}
.lbxImg img{
  max-width:100%;
  max-height: calc(92vh - 90px);
  display:block;
}

.lbxMeta{
  padding:12px;
  border-left:1px solid rgba(120,200,255,.18);
  overflow:auto;
}
.lbxMeta p{
  margin:0 0 10px;
  font-size:12px;
  line-height:1.35;
}
.lbxMeta .lab{ opacity:.82; }
.lbxMeta a{ color:#9ee7ff; }

.lbxNav{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}
.lbxNav .btn{ text-decoration:none; display:inline }

/* Theme tweaks */
.theme-day .lbxBox{
  background:#f3f7ff;
  color:#102030;
  border-color: rgba(0,90,160,.25);
}
.theme-day .lbxHead{
  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  border-bottom-color: rgba(0,90,160,.18);
}
.theme-day .lbxHead .btn{
  color:#f02030;
  background:rgba(10,0,0,.05);
  border-color: rgba(0,90,160,.22);
}
.theme-day .lbxImg{ background:rgba(0,0,0,.06); }
.theme-day .lbxMeta{ border-left-color: rgba(0,90,160,.18); }
.theme-day .lbxMeta a{ color:#005aa0; }

.theme-flash .lbxBox{
  border-color: rgba(160,255,255,.38);
  box-shadow:0 26px 80px rgba(0,0,0,.6), 0 0 26px rgba(60,255,255,.10);
}
.theme-flash .lbxHead{
  background:linear-gradient(180deg, rgba(160,255,255,.14), rgba(0,0,0,.14));
}
.theme-flash .lbxHead strong{
  text-shadow: 0 0 10px rgba(160,255,255,.35);
}