/* ==========================================================================
   lightbox.css — accessible image lightbox with zoom & pan
   Paired with js/lightbox.js. Hidden until opened. Respects reduced motion.
   ========================================================================== */

/* Thumbnails that open the lightbox */
.gallery { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); margin: 1rem 0 1.6rem; }
.gallery-item { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: .7rem; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.gallery-item:hover { border-color: var(--gold); box-shadow: var(--glow); transform: translateY(-2px); }
.gallery-item button.zoom-trigger {
  display: block; width: 100%; padding: 0; border: 0; background: radial-gradient(circle at 50% 40%, #2c2517, #100d09);
  cursor: zoom-in; border-radius: 8px; overflow: hidden;
}
.gallery-item img { display: block; width: 100%; height: auto; border-radius: 8px; }
.gallery-item figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: .55rem; line-height: 1.45; }
.gallery-item .side-label { display: inline-block; font-weight: 700; font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand); margin-right: .35rem; }
.gallery-item .zoom-hint { font-size: .75rem; color: var(--ink-soft); }

/* Overlay */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none; overflow: hidden;
  background: rgba(15, 12, 8, .94); padding: 1rem;
}
.lightbox[aria-hidden="false"] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .5rem; height: 100%; }
.lightbox__bar { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.lightbox__bar .spacer { margin-right: auto; color: #f3eee3; font-weight: 600; font-family: -apple-system, sans-serif; }
.lightbox button {
  min-width: 44px; min-height: 44px; font-size: 1.1rem; font-weight: 700;
  background: #2a261d; color: #f3eee3; border: 2px solid #6b4f2a; border-radius: 8px; cursor: pointer;
}
.lightbox button:hover { background: #3a3526; }
.lightbox button:focus-visible { outline: 3px solid #7ab0ff; outline-offset: 2px; }

.lightbox__stage {
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  position: relative; touch-action: none;
  /* min-height/width:0 lets the stage shrink so the image fits instead of overflowing */
  min-height: 0; min-width: 0;
}
.lightbox__img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  transform-origin: center center;
  transition: transform .15s ease; will-change: transform; cursor: grab; user-select: none;
  background: #faf8f3; border-radius: 4px;
}
.lightbox__img.grabbing { cursor: grabbing; transition: none; }
@media (prefers-reduced-motion: reduce) { .lightbox__img { transition: none; } }

.lightbox__caption {
  color: #f3eee3; font-size: .92rem; text-align: center; max-width: 70ch; margin: 0 auto;
  font-family: -apple-system, sans-serif;
}
.lightbox__caption .credit { color: #cabfa6; display: block; font-size: .82rem; margin-top: .2rem; }
.lightbox__caption .example { color: #f0c674; font-weight: 700; }

/* High-contrast adjustments */
html[data-contrast="high"] .lightbox { background: rgba(0,0,0,.97); }
html[data-contrast="high"] .lightbox button { background: #000; color: #fff; border-color: #fff; }