/* page/static/css/photo-lightbox.css
 * Lightbox components styled under design system tokens
 */
body.plb-open { overflow: hidden; }
.plb-root { position: fixed; inset: 0; z-index: 100000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-medium), visibility var(--transition-medium); }
.plb-root.open { opacity: 1; visibility: visible; pointer-events: auto; }
.plb-backdrop { position: absolute; inset: 0; background: rgba(15, 15, 18, 0.92); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: backdrop-filter var(--transition-medium), -webkit-backdrop-filter var(--transition-medium); }
.plb-root.open .plb-backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.plb-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 24px; box-sizing: border-box; }
.plb-frame { position: relative; max-width: min(92vw, 1400px); max-height: 74vh; display: flex;
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-overlay); background: #000;
  transform: scale(0.96); transition: transform var(--transition-medium); }
.plb-root.open .plb-frame { transform: scale(1); }
/* No rainbow accent here — the Three Stripes Rule reserves the gradient for
   nav, h1, and footer. .plb-accent kept as a no-op for the JS that inserts it. */
.plb-accent { display: none; }
.plb-imgwrap { position: relative; line-height: 0; }
.plb-img { display: block; max-width: min(92vw, 1400px); max-height: 74vh; width: auto; height: auto;
  object-fit: contain; opacity: 0; transition: opacity var(--transition-fast); }
.plb-img.loaded { opacity: 1; }
.plb-caption { color: #ffffff; font: 600 1.05rem/1.3 'Source Sans 3', sans-serif; text-align: center; max-width: 90vw;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.plb-close { position: absolute; top: 14px; right: 16px; z-index: 3; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--white); font-size: 26px; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background var(--transition-fast); }
.plb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--white); font-size: 30px; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background var(--transition-fast); }
.plb-prev { left: 14px; } .plb-next { right: 14px; }
.plb-close:hover, .plb-nav:hover { background: rgba(255,255,255,.22); }
.plb-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Slideshow toggle — quiet secondary control beside the download hero */
.plb-slideshow { border: 1px solid var(--rainbow-purple); border-radius: 999px; padding: 10px 22px;
  background: rgba(255,255,255,.10); color: var(--white); font: 600 .95rem/1 'Source Sans 3', sans-serif; cursor: pointer;
  min-height: 44px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(123, 31, 162, 0.2);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease; }
.plb-slideshow:hover { background: rgba(255,255,255,.22);
  border-color: var(--rainbow-purple); box-shadow: 0 0 8px rgba(123, 31, 162, 0.35); }

/* Download CTA — rainbow-accented hero button */
.plb-download { display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border-radius: 999px; min-height: 44px;
  background: rgba(255,255,255,.10); color: var(--white); text-decoration: none;
  font: 600 .95rem/1 'Source Sans 3', sans-serif; border: 1px solid var(--rainbow-green);
  box-shadow: 0 0 0 1px rgba(56, 142, 60, 0.2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.plb-download:hover { background: rgba(255,255,255,.22); color: var(--white);
  border-color: var(--rainbow-green); box-shadow: 0 0 8px rgba(56, 142, 60, 0.35); }
.plb-download:active { transform: scale(0.97); }

@media (max-width: 768px) {
  .plb-frame, .plb-img { max-height: 60vh; }
  .plb-nav { width: 44px; height: 44px; }
}