/*
 * CHANGE LOG
 * File: /var/www/html/prohrhq.com/static/css/prohrhq_lightbox.css
 * Purpose: Styling for the shared image lightbox modal. The lightbox JS
 *          (switchboard.js initExamplesLightbox) was always complete --
 *          open, close via X / backdrop / Escape, next/prev, arrow keys,
 *          focus restore, scroll lock -- but the CSS for the overlay it
 *          builds never existed, so it rendered as unstyled inline
 *          elements and appeared broken. This is that missing piece,
 *          split into its own file (prohrhq_public.css was at its 900-line
 *          hard limit). Loaded globally in base_public.html; the JS runs
 *          on every page, so any page with a [data-lightbox] trigger works.
 *          Class names mirror the DOM the JS creates exactly.
 * Version History:
 *   2026-08-14 v1.0 - Initial. Reported live: image opened but "if I click
 *                     away or click a second time it should shrink but it
 *                     doesn't" -- the JS exit paths existed, the visual
 *                     modal didn't.
 */
/*
 * 2026-08-14 - Lightbox modal styling. The lightbox JS
 * (switchboard.js initExamplesLightbox) has always been complete --
 * open, close via X / backdrop / Escape, next/prev, arrow keys, focus
 * restore, scroll lock -- but no CSS for the overlay it builds ever
 * existed, so it rendered as unstyled inline elements and appeared not
 * to work. Reported live: image opened but "if I click away or click a
 * second time it should shrink but it doesn't." This is that missing
 * piece. Class names mirror the DOM the JS creates exactly:
 * .ph-ex-lightbox (overlay), .is-open (shown), .ph-ex-lightbox-img,
 * .ph-ex-lightbox-close, .ph-ex-lightbox-nav--prev/--next,
 * .ph-ex-lightbox-caption. Lives in the global stylesheet (next to the
 * scroll-lock rule that was already here) because the JS runs on every
 * page, so any page with a [data-lightbox] trigger now works.
 */
.ph-ex-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  background: rgba(6, 14, 28, 0.88);
}
.ph-ex-lightbox.is-open { display: flex; }
.ph-ex-lightbox-img {
  max-width: 94vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  background: #fff;
}
.ph-ex-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ph-ex-lightbox-close:hover,
.ph-ex-lightbox-close:focus-visible { background: rgba(255, 255, 255, 0.28); }
.ph-ex-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ph-ex-lightbox-nav:hover,
.ph-ex-lightbox-nav:focus-visible { background: rgba(255, 255, 255, 0.28); }
.ph-ex-lightbox-nav--prev { left: 1rem; }
.ph-ex-lightbox-nav--next { right: 1rem; }
.ph-ex-lightbox-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  margin: 0 auto;
  max-width: 80vw;
  padding: 0 1rem;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  text-align: center;
}
@media (max-width: 600px) {
  .ph-ex-lightbox { padding: 0.75rem; }
  .ph-ex-lightbox-nav { width: 2.4rem; height: 2.4rem; font-size: 1.6rem; }
  .ph-ex-lightbox-nav--prev { left: 0.35rem; }
  .ph-ex-lightbox-nav--next { right: 0.35rem; }
}

/*
 * 2026-08-14 - Zoom affordance for auto-promoted content images.
 * switchboard.js initAutoLightbox() adds .ph-img-zoomable to every
 * content image it wires into the lightbox. Cursor signals it's
 * clickable; the "Click to enlarge" badge is on the enclosing figure
 * where one exists (img is a replaced element, can't render ::after).
 */
.ph-img-zoomable { cursor: zoom-in; }
figure:has(> .ph-img-zoomable),
.ph-plate_v1:has(.ph-img-zoomable) { position: relative; }
figure:has(> .ph-img-zoomable)::after,
.ph-plate_v1:has(.ph-img-zoomable)::after {
  content: "Click to enlarge";
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  background: rgba(10, 22, 40, 0.82);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
figure:has(> .ph-img-zoomable:hover)::after,
.ph-plate_v1:has(.ph-img-zoomable:hover)::after { opacity: 1; }