/* Masonry using CSS columns (simple and responsive) */
                  .masonry{
                  column-gap: var(--gap);
                  column-fill: balance;
                  -webkit-column-fill: balance;
                  }
                  /* change columns with breakpoints */
                  @media (max-width:519px){ .masonry{ column-count:2 } }   /* mobile pe 2 column */
                  @media (min-width:520px) and (max-width:879px){ .masonry{ column-count:3 } }
                  @media (min-width:880px){ .masonry{ column-count:4 } }
                  .item{
                  break-inside: avoid;
                  margin-bottom: 20px;
                  position: relative;
                  cursor: pointer;
                  border-radius:12px;
                  overflow:hidden;
                  box-shadow: 0 6px 18px rgba(2,6,23,0.3);
                  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
                  transition: transform .18s ease, box-shadow .18s ease;
                  }
                  .item:hover{ transform: translateY(-6px) }
                  .thumb{
                  display:block; width:100%; height:auto;
                  vertical-align:middle;
                  }
                  /* overlay play icon for videos */
                  .meta{
                  position:absolute; inset:8px; display:flex; align-items:flex-end; justify-content:flex-end; pointer-events:none;
                  }
                  .play-badge{
                  pointer-events:auto; background:rgba(0,0,0,0.5); padding:8px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
                  backdrop-filter: blur(4px);
                  }
                  .play-badge svg{ width:20px; height:20px; }
                  /* Lightbox styles */
                  /* add / replace this */
                  .lightbox{
                  position: fixed !important;
                  inset: 0 !important;           /* top:0; right:0; bottom:0; left:0; */
                  width: 100vw !important;
                  height: 100vh !important;
                  display: none;
                  align-items: center;
                  justify-content: center;
                  background: rgba(0,0,0,0.85);
                  z-index: 2147483647 !important; /* very high */
                  pointer-events: auto;
                  }
                  .lightbox.show {
                  display: flex !important;
                  }
                  .lb-content{ max-width:1200px; width:100%; max-height:95vh; position:relative; }
                  .lb-inner{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
                  .lb-media {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  }
                  .lb-media img {
                  max-width: 100%;
                  max-height: 95vh;
                  width: auto;
                  height: auto;
                  object-fit: contain;
                  display: block;
                  }
                  .lb-media video{ width:100%; height:auto; display:block }
                  .lb-media iframe{ width:100%; height:65vh; border:0 }
                  /* controls */
                  .lb-close{ position:absolute; top:-10px; right:-10px; background:#0b1220; border:0; color:#fff; border-radius:999px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.6); cursor:pointer }
                  .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:999px; background:rgba(2,6,23,0.6); border:0; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer }
                  .lb-prev{ left:-60px }
                  .lb-next{ right:-60px }
                  @media (max-width:640px){
                  .lb-media iframe{ height:50vh }
                  .lb-prev, .lb-next{ display:none }
                  .lb-close{ top:6px; right:6px }
                  }
                  /* caption */
                  .caption{ margin-top:8px; color: #cfe; font-size:14px; opacity:.9 }
                  /* helper small styles */
                  .controls-row{ display:flex; gap:8px; align-items:center; margin-bottom:12px }
                  .btn{ background:var(--card); color:#fff; border:1px solid rgba(255,255,255,0.03); padding:8px 12px; border-radius:8px; cursor:pointer }
                  #gallery {
                  padding: 10px 0 0 10px;
                  background-color: white;
                  text-align: center;
                  margin: 0 auto;
                  border: 0;
                  }