/* ============================================================
     GALLERY GRID — style the thumbnails however fits your site
     ============================================================ */
  .gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit, 112px);
    justify-content:center;
    gap:1px;
  }
  .gallery-item{
    display:block; position:relative; aspect-ratio:1/1;
    overflow:hidden; border-radius:3px; background:#1c1d20;
    margin:1px;
  }
  .gallery-item img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .25s ease;
  }
  .gallery-item:hover img{ transform:scale(1.05); }
  .gallery-item .play-badge{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    pointer-events:none;
  }
  .gallery-item .play-badge svg{
    width:34px; height:34px; filter:drop-shadow(0 1px 4px rgb(0 0 0 / .6));
  }

  /* ============================================================
     LIGHTBOX — this is the reusable component
     ============================================================ */
  dialog.lightbox{
    /* dialog defaults to display:none until .showModal() */
    border:0; padding:0; max-width:none; max-height:none;
    width:100vw; height:100vh; background:transparent; color:#fff;
  }
  dialog.lightbox::backdrop{
    background:rgba(0,0,0,.92);
  }
  dialog.lightbox[open]{
    display:flex; align-items:center; justify-content:center;
  }

  .lb-content{
    display:flex; flex-direction:column; align-items:center; gap:.75rem;
    max-width:min(92vw, 1200px);
    max-height:92vh;
    /* no z-index here: as a flex item of the dialog, .lb-content creates a
       stacking context even while statically positioned, so z-index:3 painted
       its (transparent) box OVER .lb-btn (z-index:1) and .lb-close (z-index:2),
       hiding the arrows behind the image area on narrow screens */
  }
  .lb-content img,
  .lb-content video{
    max-width:min(92vw, 1200px);
    max-height:78vh;
    width:auto; height:auto;
    border-radius:4px;
    display:none; /* toggled on by JS */
  }
  .lb-caption{
    margin:0; text-align:center; font-size:.9rem; color:#ddd;
    max-width:70ch; line-height:1.4;
  }
  .lb-counter{
    font-size:.75rem; color:#888; letter-spacing:.03em;
  }

  .lb-btn{
    position:fixed; top:0; bottom:0;
    background:transparent;
    border:0; color:#fff;
    width:15%; min-width:56px;
    display:flex; align-items:center;
    cursor:pointer; opacity:.6; 
    transition:opacity .15s ease;
    z-index:1;
  }
  .lb-btn:hover, .lb-btn:focus-visible{ opacity:1; }
  .lb-btn svg{ width:32px; height:32px; }
  .lb-prev{ left:0; justify-content:flex-start; padding-left:1rem; }
  .lb-next{ right:0; justify-content:flex-end; padding-right:1rem; }

  .lb-close{
    position:fixed; top:1rem; right:1rem;
    background:transparent; border:0; color:#fff;
    width:40px; height:40px; border-radius:50%;
    cursor:pointer; opacity:.7; transition:opacity .15s ease, background .15s ease;
    display:flex; align-items:center; justify-content:center;
    z-index:2;
  }
  .lb-close:hover, .lb-close:focus-visible{ opacity:1; background:rgb(255 255 255 / .1); }
  .lb-close svg{ width:32px; height:32px; }

  /* keyboard focus visibility (accessibility, per good-practice baseline) */
  .lb-btn:focus-visible, .lb-close:focus-visible{
    outline:2px solid #fff; outline-offset:2px;
  }

  @media (max-width:640px){
    .lb-btn{ width:20%; }
    .lb-content img, .lb-content video{ max-height:70vh; }
  }

  /* respect reduced-motion preference */
  @media (prefers-reduced-motion: reduce){
    .gallery-item img{ transition:none; }
  }

  /* to prevent the buttons from being highlighted on tap (mobile WebKit specific) */
.lb-btn, .lb-close{
  -webkit-tap-highlight-color: transparent;
}

.lb-btn:active, .lb-close:active{
    /* transparent: no visible tap feedback on touch devices needed*/
    /*background:rgb(255 255 255 / .12);*/
    background:transparent;
  }