/* Lightbox and grid settings */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;              /* always flex; don't toggle this */
  align-items: center;
  justify-content: center;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  visibility: hidden;

  transition: opacity 240ms ease-out, visibility 0s linear 240ms;
}

/* When open: visible + interactive */
.lightbox.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 240ms ease-out;
}

/*---------experimental micro hover--------*/
@media (hover: hover) and (pointer: fine) {
  .grid-item img {
    transition: transform 160ms ease-out, filter 160ms ease-out;
  }

  .grid-item:hover img {
    transform: scale(1.02);          /* very small */
    filter: brightness(1.05);
  }
}
/* ----------------------------------------*/

.lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}


.lightbox-image {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Fullscreen tweaks */
.lightbox-inner:fullscreen {
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-inner:fullscreen .lightbox-image {
  max-width: 100vw;
  max-height: 100vh;
}

/* Make the fullscreen toggle an obvious EXIT button pinned above the image */
.lightbox-inner:fullscreen .lightbox-fullscreen {
  position: fixed;   /* pin to viewport instead of relative to image box */
  top: 1.5rem;
  left: 1.5rem;
  z-index: 10002;    /* above the image */
}

/* While we're here, keep the X visible on fullscreen too */
.lightbox-inner:fullscreen .lightbox-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10002;
}

.lightbox-close {
  position: absolute;
  top: -2rem;
  right: 0;
  font-size: 1.8rem;
  border: none;
  background: transparent;
  color: #f5f5f5;
  cursor: pointer;
  line-height: 1;
  z-index: 10001;             /*must stay larger than lightbox-arrow for debugging */
}
/*full screen */
.lightbox-fullscreen {
  position: absolute;
  top: -2rem;
  left: 0;  /* top left */
  font-size: 1.2rem;
  border: none;
  background: transparent;
  color: #f5f5f5;
  cursor: pointer;
  line-height: 1;
  z-index: 10001; /* same layer as close button */
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.lightbox-fullscreen:hover {
  opacity: 1;
}


/* Invisible hitbox with tiny arrows */
.lightbox-arrow {
  position: absolute;
  top: 10%;                   /* avoid the close button area */
  bottom: 0;
  width: 18%;                 /* big click area, but visually subtle */
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 9999;              /* must stay smaller than lightbox-close button z for debugging */

  font-size: 1.6rem;          /* small, minimal arrow glyph */
  color: rgba(255, 255, 255, 0.4);
  opacity: 0;                 /* hidden until hover */
  transition: opacity 0.2s ease, color 0.2s ease;
}

/* Fade arrows in only when hovering the lightbox */
.lightbox:hover .lightbox-arrow {
  opacity: 1;
}

/* Slightly brighter on direct hover */
.lightbox-arrow:hover {
  color: rgba(255, 255, 255, 0.9);
}

.lightbox-arrow.left {
  left: 0;
}

.lightbox-arrow.right {
  right: 0;
}

.lightbox-arrow:hover {
  color: #ffffff;
}

/* when lightbox is open, blur + dim the page behind it */
body.lightbox-open #page{
  filter: blur(5px) brightness(.75);
 /* transform: scale(0.995); */ /* optional: subtle depth feel */
}

/* prevents blur “bleeding” past edges on some browsers */
#page{
  transition: filter 180ms ease, transform 180ms ease;
  will-change: filter, transform;
}

@media (max-width: 700px){
  .lightbox-arrow{
    display: none !important;
  }
}