/* ============================================================
   captions.css  —  hover-overlay captions for gallery images
   Self-contained: loaded after style.css, so style.css is untouched.
   ============================================================ */

/* Gallery: responsive grid, images keep their aspect ratio (no cropping,
   so schematics and scope traces stay readable). */
.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  align-items: start;
}

/* Each shot wraps one image plus its caption. */
.gallery .shot{
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4 / 3;          /* uniform cell shape */
  background: #111;
}

.gallery .shot img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* fills the cell, crops instead of stretching */
  object-position: center;
  cursor: zoom-in;               /* matches the lightbox behaviour */
}

/* Caption sits over the bottom of the image, hidden until hover. */
.gallery .shot figcaption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 14px 12px 10px;
  font-size: 13px;
  line-height: 1.35;
  color: #fff;
  background: linear-gradient(to top,
              rgba(0,0,0,.85), rgba(0,0,0,.5) 65%, rgba(0,0,0,0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;        /* clicks fall through to the image -> lightbox */
}

.gallery .shot:hover figcaption,
.gallery .shot:focus-within figcaption{
  opacity: 1;
  transform: translateY(0);
}

/* Touch / no-hover devices can't hover, so show the caption as a static bar. */
@media (hover: none){
  .gallery .shot figcaption{
    opacity: 1;
    transform: none;
  }
}

/* Small descriptor line under a project heading. */
.project-sub{
  margin: 6px 0 0;
  font-weight: 400;
  opacity: .8;
}

/* Year, on its own line below the descriptor — quieter still. */
.project-year{
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 400;
  opacity: .55;
}

/* Lightbox: static caption sitting below the enlarged image, always visible. */
.lightbox-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 95vw;
}

.lightbox-caption{
  margin: 10px 0 0;
  padding: 0 8px;
  max-width: 95vw;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
}