/* ============================================================
   30 — UNIVERSAL LIGHTBOX
   ============================================================
   Purpose:  Styles for the byr-lightbox component (images,
             charts, PDFs, videos). Matches the numbered-module
             pattern used site-wide.

   Depends:  01-core-tokens-base.css (tokens: --color-text-primary,
             --glass-bg, --space-*, --radius-*, --font-serif).

   Enqueue:  functions.php → handle 'byr-lightbox', deps ['byr-tokens'].

   Notes:
     · --z-lightbox is defined in 01 at 400, but --z-toggle sits at
       500 and must be covered by the modal. We use a literal
       9999 here rather than redefining the root token.
     · Backdrop uses backdrop-filter with a solid-black fallback
       for browsers that don't support it.
     · Only --color-text-primary is used for text (auto-remaps
       for light mode via .mode-light remap in tokens file).
   ============================================================ */


/* ==========================================================
   TRIGGER HINTS
   Regular images get the default pointer cursor (no extra hint).
   Charts, SVG diagrams, and tables opt in to a zoom-in cursor
   for discoverability — the affordance matters more for content
   that doesn't look obviously interactive.
========================================================== */
img[data-byr-lightbox-wrapped],
svg[data-byr-lightbox-wrapped],
table[data-byr-lightbox-wrapped] {
  cursor: pointer;
}

.byr-lightbox-chart,
img.byr-lightbox-chart[data-byr-lightbox-wrapped],
svg[data-byr-lightbox-wrapped],
table[data-byr-lightbox-wrapped] {
  cursor: zoom-in;
}


/* ==========================================================
   OVERLAY ROOT
========================================================== */
.byr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.byr-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.byr-lightbox[hidden] {
  display: none;
}


/* ==========================================================
   BACKDROP — blur + dark tint
========================================================== */
.byr-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92); /* fallback for no-backdrop-filter */
}

@supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
  .byr-lightbox__backdrop {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}


/* ==========================================================
   CONTAINER — centered stack of media + title + counter
========================================================== */
.byr-lightbox__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  max-width: 96vw;
  max-height: 96vh;
}


/* ==========================================================
   MEDIA SLOT
========================================================== */
.byr-lightbox__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 96vw;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  /* overflow: visible so the zoomed image is not clipped at the
     slot boundary — the fixed overlay clips at the viewport edge */
  overflow: visible;
}

.byr-lightbox__image {
  display: block;
  max-width: 96vw;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform 80ms ease-out;
  will-change: transform;
}

.byr-lightbox__image.is-dragging {
  transition: none;
  cursor: grabbing;
}

.byr-lightbox--pdf .byr-lightbox__media,
.byr-lightbox--video .byr-lightbox__media {
  width: 92vw;
  height: 82vh;
  max-width: 1200px;
}

.byr-lightbox__pdf {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.byr-lightbox__video {
  width: 100%;
  height: 100%;
  max-height: 82vh;
  background: #000;
}


/* ==========================================================
   CLONED ELEMENT (SVG chart / data table)
   The wrapper is the transform target (same as an image).
   Overflow is auto so large tables scroll inside the box;
   SVGs with defined viewBox shrink to fit via max-width.
========================================================== */
.byr-lightbox__element {
  display: block;
  max-width: 92vw;
  max-height: 82vh;
  overflow: auto;
  padding: var(--space-md);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow-lg);
  transform-origin: center center;
  transition: transform 80ms ease-out;
  will-change: transform;
}

.byr-lightbox__element.is-dragging {
  transition: none;
  cursor: grabbing;
}

/* The clone should announce nothing and never try to trigger
   the lightbox from inside the overlay. */
.byr-lightbox__element > svg,
.byr-lightbox__element > table {
  cursor: default;
}

/* SVG — fit to wrapper while preserving aspect via viewBox. */
.byr-lightbox__element > svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: calc(92vw - (var(--space-md) * 2));
  max-height: calc(82vh - (var(--space-md) * 2));
}

/* Table — natural width; horizontal scroll appears when content
   exceeds the wrapper. Text color comes from the token so
   light/dark mode work without further rules. */
.byr-lightbox__element > table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  color: var(--color-text-primary);
  font-family: var(--font-serif);
}

.byr-lightbox__element > table th,
.byr-lightbox__element > table td {
  /* Respect any inline/class styling the author set — this rule
     only provides a minimum floor for tables without their own
     styling. */
  padding: var(--space-2xs) var(--space-sm);
}


/* ==========================================================
   iOS PDF FALLBACK
========================================================== */
.byr-lightbox__ios-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  max-width: 88vw;
  color: var(--color-text-primary);
}

.byr-lightbox__ios-pdf-msg {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  text-align: center;
  line-height: var(--leading-snug);
  margin: 0;
}

.byr-lightbox__ios-pdf-open,
.byr-lightbox__ios-pdf-download {
  display: inline-block;
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-primary);
  text-decoration: none;
  min-height: 44px;
  min-width: 44px;
  line-height: 2;
  text-align: center;
}


/* ==========================================================
   TITLE + COUNTER
   The title sits in a frosted-glass panel so it stays legible
   against any image in both light and dark modes. Text is
   forced white regardless of mode — do not inherit.
========================================================== */
.byr-lightbox__title {
  font-family: var(--font-serif);
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
  max-width: min(72ch, 92vw);
  padding: 0.75rem 1.25rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.byr-lightbox__title:empty {
  display: none;
}

.byr-lightbox__counter {
  font-family: var(--font-serif);
  color: #ffffff;
  opacity: 0.85;
  font-size: var(--text-sm);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.byr-lightbox__counter:empty,
.byr-lightbox__counter[hidden] {
  display: none;
}


/* ==========================================================
   SHARE ROW — pill buttons below the caption
   Matches BYR's glass aesthetic: translucent dark pills with
   white icons + labels. Always visible against any backdrop.
========================================================== */
.byr-lightbox__share {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0 var(--space-sm);
  max-width: min(72ch, 92vw);
}

.byr-lightbox__share[hidden] {
  display: none;
}

.byr-lightbox__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  min-height: 36px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #ffffff;
  font-family: var(--font-serif);
  font-size: 0.82rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background   200ms ease,
    border-color 200ms ease,
    color        200ms ease,
    box-shadow   200ms ease,
    transform    200ms ease;
}

.byr-lightbox__share-btn:hover,
.byr-lightbox__share-btn:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.byr-lightbox__share-btn svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  pointer-events: none;
  fill: currentColor;
}

/* Per-network hover glows — each pill tints to its brand colour
   on hover. Mirrors the pattern in 06-footer.css so the viewer
   chrome and the footer read as the same visual system. */
.byr-lightbox__share-btn--facebook:hover,
.byr-lightbox__share-btn--facebook:focus-visible {
  background: rgba(24, 119, 242, 0.22);
  border-color: rgba(24, 119, 242, 0.7);
  color: #ffffff;
  box-shadow: 0 0 22px rgba(24, 119, 242, 0.55);
}

/* X is monochrome — invert to white pill with black content on hover */
.byr-lightbox__share-btn--twitter:hover,
.byr-lightbox__share-btn--twitter:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Instagram has no single brand colour — layer three glow stops
   from its gradient (purple → magenta → orange) around a
   magenta core tint. */
.byr-lightbox__share-btn--instagram:hover,
.byr-lightbox__share-btn--instagram:focus-visible {
  background: rgba(225, 48, 108, 0.22);
  border-color: rgba(225, 48, 108, 0.7);
  color: #ffffff;
  box-shadow:
    0 0 22px rgba(225,  48, 108, 0.55),
    0 0 36px rgba(253,  29,  29, 0.28),
    0 0 48px rgba(131,  58, 180, 0.28);
}

.byr-lightbox__share-btn.is-copied {
  background: rgba(46, 160, 67, 0.45);
  border-color: rgba(46, 160, 67, 0.7);
}


/* ==========================================================
   CONTROLS — close, download, prev, next, zoom
   All 44×44 minimum hit target.
========================================================== */
.byr-lightbox__close,
.byr-lightbox__download,
.byr-lightbox__prev,
.byr-lightbox__next,
.byr-lightbox__zoom-in,
.byr-lightbox__zoom-out,
.byr-lightbox__zoom-reset {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  /* Always white — lightbox always sits over a dark backdrop regardless of page mode */
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease;
}

.byr-lightbox__close:hover,
.byr-lightbox__download:hover,
.byr-lightbox__prev:hover,
.byr-lightbox__next:hover,
.byr-lightbox__zoom-in:hover,
.byr-lightbox__zoom-out:hover,
.byr-lightbox__zoom-reset:hover {
  background: rgba(0, 0, 0, 0.65);
  border-color: var(--glass-border-hover);
}

.byr-lightbox__close  svg,
.byr-lightbox__download svg,
.byr-lightbox__prev svg,
.byr-lightbox__next svg,
.byr-lightbox__zoom-in svg,
.byr-lightbox__zoom-out svg,
.byr-lightbox__zoom-reset svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
}

/* Position: close top-right, download to its left */
.byr-lightbox__close    { top: var(--space-md); right: var(--space-md); }
.byr-lightbox__download { top: var(--space-md); right: calc(var(--space-md) + 56px); }

/* Close button — always visible regardless of backdrop or mode.
   White × on a dark circular puck with a white ring, and a small
   hover lift for discoverability. Takes precedence over the
   shared control rule above. */
.byr-lightbox__close {
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.byr-lightbox__close svg {
  width: 22px;
  height: 22px;
  color: #ffffff;
}

.byr-lightbox__close:hover,
.byr-lightbox__close:focus-visible {
  background: rgba(0, 0, 0, 0.8);
  border-color: #ffffff;
  color: #ffffff;
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .byr-lightbox__close:hover,
  .byr-lightbox__close:focus-visible {
    transform: none;
  }
}

/* Prev / next sit on the left/right center edges */
.byr-lightbox__prev     { left:  var(--space-md); top: 50%; transform: translateY(-50%); }
.byr-lightbox__next     { right: var(--space-md); top: 50%; transform: translateY(-50%); }

/* Zoom cluster bottom-right */
.byr-lightbox__zoom-controls {
  position: absolute;
  bottom: var(--space-md);
  right:  var(--space-md);
  display: flex;
  gap: var(--space-2xs);
}

.byr-lightbox__zoom-controls .byr-lightbox__zoom-in,
.byr-lightbox__zoom-controls .byr-lightbox__zoom-out,
.byr-lightbox__zoom-controls .byr-lightbox__zoom-reset {
  position: static;
}

.byr-lightbox__prev[hidden],
.byr-lightbox__next[hidden],
.byr-lightbox__download[hidden],
.byr-lightbox__zoom-controls[hidden] {
  display: none;
}


/* ==========================================================
   BODY SCROLL LOCK
   Applied to <html> and <body> while the lightbox is open.
   touch-action: none prevents iOS rubber-band behind the modal.
========================================================== */
html.byr-lightbox-open,
body.byr-lightbox-open {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
}


/* ==========================================================
   RESPONSIVE — full-screen on mobile
========================================================== */
@media (max-width: 768px) {
  .byr-lightbox__container {
    max-width: 100vw;
    max-height: 100vh;
    gap: var(--space-2xs);
  }

  .byr-lightbox__media {
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .byr-lightbox__image {
    max-width: 100vw;
    max-height: 100vh;
  }

  .byr-lightbox--pdf .byr-lightbox__media,
  .byr-lightbox--video .byr-lightbox__media {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
  }

  .byr-lightbox__video {
    max-height: 100vh;
  }

  /* Cloned element — full-screen, no radius, less padding */
  .byr-lightbox__element {
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    padding: var(--space-sm);
  }

  .byr-lightbox__element > svg {
    max-width: calc(100vw - (var(--space-sm) * 2));
    max-height: calc(100vh - (var(--space-sm) * 2));
  }

  /* Hide zoom cluster on mobile — gestures only */
  .byr-lightbox__zoom-controls {
    display: none;
  }

  /* Title glass panel stays inline (flex item) so it doesn't
     collide with the share row on narrow screens. */
  .byr-lightbox__title {
    max-width: calc(100vw - var(--space-md) * 2);
    margin: 0 var(--space-md);
    font-size: 0.85rem;
  }

  .byr-lightbox__share {
    max-width: calc(100vw - var(--space-md) * 2);
    padding: 0 var(--space-md);
  }

  .byr-lightbox__share-btn {
    font-size: 0.78rem;
    padding: 0.35rem 0.8rem;
  }
}


/* ==========================================================
   MOTION — disable all transitions when user prefers it
========================================================== */
@media (prefers-reduced-motion: reduce) {
  .byr-lightbox,
  .byr-lightbox__image,
  .byr-lightbox__element,
  .byr-lightbox__close,
  .byr-lightbox__download,
  .byr-lightbox__prev,
  .byr-lightbox__next,
  .byr-lightbox__zoom-in,
  .byr-lightbox__zoom-out,
  .byr-lightbox__zoom-reset,
  .byr-lightbox__share-btn {
    transition: none !important;
    animation: none !important;
  }
}


/* ==========================================================
   HIGH CONTRAST / FORCED COLORS
========================================================== */
@media (prefers-contrast: more), (forced-colors: active) {
  .byr-lightbox__backdrop {
    background: Canvas;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .byr-lightbox__close,
  .byr-lightbox__download,
  .byr-lightbox__prev,
  .byr-lightbox__next,
  .byr-lightbox__zoom-in,
  .byr-lightbox__zoom-out,
  .byr-lightbox__zoom-reset {
    background: ButtonFace;
    border: 2px solid ButtonText;
    color: ButtonText;
  }

  .byr-lightbox__title,
  .byr-lightbox__counter {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    text-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .byr-lightbox__share-btn {
    background: ButtonFace;
    border: 1px solid ButtonText;
    color: ButtonText;
  }
}


/* ==========================================================
   PRINT — never print the overlay
========================================================== */
@media print {
  .byr-lightbox {
    display: none !important;
  }

  html.byr-lightbox-open,
  body.byr-lightbox-open {
    overflow: visible !important;
    touch-action: auto !important;
  }
}