/* KEMHOW: masonry gallery + lightbox (shared by the public gallery pages and the admin) */
/* -------------------- masonry gallery -------------------- */
.gal{ column-width: 250px; column-gap: 12px; }
.gal__item{
  position: relative; display: block; width: 100%;
  margin: 0 0 12px; padding: 0; border: 0;
  break-inside: avoid; overflow: hidden;
  background: linear-gradient(110deg, #E7DFC9 30%, #F1EBDB 50%, #E7DFC9 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 2px; cursor: zoom-in; min-height: 90px;
}
.gal__item.is-loaded{ animation: none; background: #E7DFC9; min-height: 0; }
.gal__item img{
  display: block; width: 100%; height: auto; opacity: 0;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.16,.8,.3,1);
}
.gal__item.is-loaded img{ opacity: 1; }
.gal__item:hover img{ transform: scale(1.045); }
.gal__zoom{
  position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 2px;
  background: rgba(19,26,68,0.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 3h5v5M8 17H3v-5M17 3l-5 5M3 17l5-5'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.gal__item:hover .gal__zoom, .gal__item:focus-visible .gal__zoom{ opacity: 1; transform: none; }
.gal__item.is-broken{ animation: none; min-height: 140px; }
.gal__item.is-broken::after{ content: "Photo unavailable"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.82rem; color: var(--muted); }
@keyframes shimmer{ to{ background-position: -200% 0; } }

/* -------------------- lightbox -------------------- */
body.lb-lock{ overflow: hidden; }
.lb{
  position: fixed; inset: 0; z-index: 3000;
  height: 100vh; height: 100dvh;                 /* real visible height on phones (address bar) */
  display: grid; grid-template-columns: 72px minmax(0,1fr) 72px; grid-template-rows: auto minmax(0,1fr) auto;
  overflow: hidden;
  background: rgba(8,11,34,0.985);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
  color: #fff;
}
.lb.is-open{ opacity: 1; visibility: visible; }
.lb__bar{ grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1rem 0.4rem 1.4rem; }
.lb__count{ font-size: 0.9rem; color: var(--muted-on-navy, #B9C0E8); }
.lb__tools{ display: flex; gap: 0.4rem; }
.lb__btn, .lb__nav{
  display: inline-grid; place-items: center; background: rgba(255,255,255,0.08); color: #fff;
  border: 1px solid rgba(255,255,255,0.22); cursor: pointer; border-radius: 50%;
  width: 44px; height: 44px; padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lb__btn:hover, .lb__nav:hover{ background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); }
.lb__nav{ align-self: center; justify-self: center; }
.lb__nav[hidden]{ display: none; }
/* The stage is a fixed box (whatever room is left between the bar and the caption).
   The photo is pinned inside it with object-fit: contain, so ANY size or aspect ratio
   is scaled to fit and shown whole, never cropped, never pushing the layout. */
.lb__stage{
  grid-column: 2; grid-row: 2; margin: 0;
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
}
.lb__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;             /* beats the site-wide img { max-width: 100% } */
  object-fit: contain; object-position: center;
  border-radius: 2px;
  user-select: none; -webkit-user-drag: none;
  transform: scale(0.97); transition: transform 0.3s cubic-bezier(.16,.8,.3,1), opacity 0.2s ease;
}
.lb.is-open .lb__img{ transform: none; }
.lb.is-loading .lb__img{ opacity: 0.55; }
.lb__spin{
  position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -17px; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25); border-top-color: #fff;
  animation: spin 0.8s linear infinite; opacity: 0; transition: opacity 0.2s ease;
}
.lb.is-loading .lb__spin{ opacity: 1; }
.lb__cap{ grid-column: 1 / -1; margin: 0; padding: 0.7rem 1rem 1.1rem; text-align: center; font-size: 0.85rem; color: var(--muted-on-navy, #B9C0E8); max-width: none; }
.lb__prev{ grid-column: 1; grid-row: 2; }
.lb__next{ grid-column: 3; grid-row: 2; }
@keyframes spin{ to{ transform: rotate(360deg); } }
@media (max-width: 640px){
  .lb{ grid-template-columns: 0 minmax(0,1fr) 0; }
  .lb__nav{ position: absolute; bottom: 3.4rem; z-index: 2; }
  .lb__prev{ left: 1rem; } .lb__next{ right: 1rem; }
  .lb__cap{ padding-bottom: 4.6rem; }
}