/* for overlay/slideshow */

/* Grid (example; adjust your own layout) */
/*.photo-grid { display: grid; }*/
/*grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 12px; }*/
/*.car-photo-thumbnail img { width: 100%; height: auto; display: block; }*/

/* Lightbox overlay */
#lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.9);
  display: none; align-items: center; justify-content: center;
  z-index: 9999; padding: 4vmin;
}
#lightbox.open { display: flex; }


/* Keep the stage the same size at all times */
#lightbox .lb-stage {
  width: 90vw;              /* or whatever width you like */
  height: 80vh;             /* fixed height prevents jumping */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;         /* so the image never pushes the box around */
}

/* Image scales inside a fixed box */
#lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}



/* Controls */
/* Make the X button visible, sized, and above the image/arrows */
#lightbox .lb-close {
  position: absolute;
  top: 87px;
  right: 21px;
  width: 44px;
  height: 44px;
  display: flex;              /* center the icon */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10001;             /* above stage and nav */
  padding: 0;
}

#lightbox .lb-close:hover { background: rgba(255,0,0,0.7);  }


/* Arrows below the close button */
#lightbox .lb-nav { z-index: 10000; font-size:45px; font-weight:bold; padding-bottom:7px;}
#lightbox .lb-stage { z-index: 9999; }

/*
#lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.15); color:#fff; border:0; cursor:pointer;
  font-size: 42px; width: 56px; height: 56px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
}
#lightbox .lb-prev { left: 12px; }
#lightbox .lb-next { right: 12px; }
#lightbox .lb-nav:focus, #lightbox .lb-close:focus { outline: 2px solid #fff; }
*/

/* Click-to-close background (but not image) */
#lightbox .lb-stage { cursor: zoom-out; }