.grid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--thumb-width), 1fr));
      gap: 1rem;
      justify-content:center;
    }

    figure{
      margin:0; position:relative; overflow:hidden; border-radius: var(--thumb-radius);
      background: var(--card);
      box-shadow: var(--thumb-shadow);
      width: var(--thumb-width);
      height: var(--thumb-height);
    }
    figure img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease, filter .4s ease; }
    figure a{ position:absolute; inset:0; outline: none; }

    figure:hover img{ transform:scale(1.05); filter:saturate(1.1) contrast(1.05); }
    figure:focus-within{ box-shadow: 0 0 0 3px var(--accent); }

    figcaption{
      position:absolute; inset:auto 0 0 0; padding:6px 10px; font-size:.85rem; color:#fff;
      background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
      text-shadow: 0 1px 4px rgba(0,0,0,.4);
    }

    /* --- Lightbox --- */
	
	
	.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  place-items: start center; /* align top instead of full center */
  background: rgba(0,0,0,.85);
  padding: clamp(14px, 2vw, 28px);
  z-index: 10;
  overflow: auto; /* scroll if content is taller */
}

.dialog {
  max-width: 90vw;
  margin: auto;
  position: relative;
}

.dialog img {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
}


     
    .lightbox:target{ display:grid; animation: fade .35s ease; }

    @keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

     

    /* Overlay elements */
    .lightbox-title{
      position:absolute; bottom:0; left:0; right:0;
      padding: .75rem 1rem; font-size:1rem; font-weight:500; color:#fff;
      background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
      text-shadow: 0 1px 4px rgba(0,0,0,.6);
    }
    .close-btn{
      position:absolute; top:10px; right:10px;
      text-decoration:none; font-weight:bold; font-size:1.2rem; color:#fff;
      background:rgba(0,0,0,0.5); padding:0.25rem 0.6rem; border-radius:50%;
    }
    .close-btn:hover{ background:rgba(0,0,0,0.8); }

    /* Prev/Next Arrows */
    .nav-arrow{
      position:absolute; top:50%; transform:translateY(-50%);
      font-size:2rem; color:#fff; text-decoration:none;
      background:rgba(0,0,0,0.5); padding:0.5rem 0.75rem; border-radius:50%;
    }
    .nav-arrow:hover{ background:rgba(0,0,0,0.8); }
    .prev{ left:10px; }
    .next{ right:10px; }

    @media (prefers-reduced-motion: reduce){
      figure img{ transition:none; }
      .lightbox:target{ animation:none; }
    }
	
	.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  place-items: start center; /* align top instead of full center */
  background: rgba(0,0,0,.85);
  padding: clamp(14px, 2vw, 28px);
  z-index: 10;
  overflow: auto; /* scroll if content is taller */
}

.dialog {
  max-width: 90vw;
  margin: auto;
  position: relative;
}

.dialog img {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
}