/* =====================================================================
   Mining Hub theme for the vendored SimpleLightbox build (/css/lightbox.css).

   Loaded AFTER lightbox.css on the article surfaces. The vendored bundle
   ships desktop-only defaults — a white scrim, black glyphs, and navigation
   buttons that are 22px wide and 5px from the screen edge below 35.5em, i.e.
   half the 44px minimum tap target and hard against the bezel. On a phone the
   controls read as clipped and are close to untappable.

   POSITIONING IS STILL THE LIBRARY'S. adjustImage() writes top/left/width/
   height inline on `.sl-image` from window.innerWidth/innerHeight and re-runs
   on every resize, so nothing here touches those four properties — overriding
   them would also collide with the slide animation, which transforms the same
   element. What this file changes is the chrome: scrim colour, tap targets,
   safe-area insets and legibility.

   The off-centre viewer in the bug report was a SYMPTOM of page-level
   horizontal overflow, not of this stylesheet: iOS Safari widens the layout
   viewport to fit overflowing content, so window.innerWidth reported the
   document width and the library centred the image against that instead of
   against the screen. The fix for that is upstream, in the article body
   (see .cpn-body__content overflow containment in company-profile/article.css
   and components/article-tables.css).
   ===================================================================== */

/* --- scrim ---------------------------------------------------------- */
/* Opacity is animated inline by the library from its `overlayOpacity` option;
   only the colour is ours. Dark reads better behind figures and drill-section
   diagrams than the vendored white, which washed out on a white article. */
.sl-overlay {
  background: #0b1220;
}

/* --- shared button treatment ---------------------------------------- */
/* Circular translucent hit areas so the controls stay legible over both a
   light figure and a dark one, and land on the 44px minimum everywhere —
   the vendored build only reaches 44px above 35.5em. */
.sl-wrapper .sl-close,
.sl-wrapper .sl-navigation button {
  width: 44px;
  height: 44px;
  line-height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(17, 24, 39, 0.62);
  /* A hairline keeps the disc's edge readable when it lands on a dark
     photograph rather than the usual white figure. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  text-align: center;
  transition: background-color 0.15s ease;
}
.sl-wrapper .sl-close:hover,
.sl-wrapper .sl-navigation button:hover {
  background: rgba(17, 24, 39, 0.78);
  opacity: 1; /* the vendored :hover drops to .7, which dims the glyph */
}
.sl-wrapper .sl-close:focus-visible,
.sl-wrapper .sl-navigation button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* --- close ---------------------------------------------------------- */
/* Plain-px declarations first: a browser without max()/env() keeps those and
   still gets a control clear of the edge. */
.sl-wrapper .sl-close {
  top: 12px;
  right: 12px;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  font-size: 30px;
  /* The vendored rule pulls the glyph up with a 44px line-height + 3rem font;
     at 30px it sits centred without the nudge. */
  font-family: Arial, Helvetica, sans-serif;
}

/* --- previous / next ------------------------------------------------ */
/* The image is sized to 90% of the viewport, so on a phone the arrows overlay
   its edges. That is the intended mobile pattern — the translucent backdrop
   above is what keeps them readable against whatever is underneath. */
.sl-wrapper .sl-navigation button.sl-prev,
.sl-wrapper .sl-navigation button.sl-next {
  top: 50%;
  margin-top: -22px;
  font-size: 26px;
}
.sl-wrapper .sl-navigation button.sl-prev {
  left: 10px;
  left: max(10px, env(safe-area-inset-left));
}
.sl-wrapper .sl-navigation button.sl-next {
  right: 10px;
  right: max(10px, env(safe-area-inset-right));
}
/* Undo the vendored width/font-size ramps, which reintroduce 22px buttons
   below 35.5em and oversize glyphs above 50em. */
@media (min-width: 35.5em) {
  .sl-wrapper .sl-navigation button.sl-prev,
  .sl-wrapper .sl-navigation button.sl-next { width: 44px; font-size: 30px; }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-navigation button.sl-prev { left: 24px; font-size: 32px; }
  .sl-wrapper .sl-navigation button.sl-next { right: 24px; font-size: 32px; }
}

/* --- counter -------------------------------------------------------- */
.sl-wrapper .sl-counter {
  top: 12px;
  left: 12px;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  color: #e5e7eb;
  font-size: 13px;
  line-height: 44px;
  padding: 0 12px;
  border-radius: 22px;
  background: rgba(17, 24, 39, 0.55);
}

/* --- the image ------------------------------------------------------ */
.sl-wrapper .sl-image img {
  border-radius: 4px;
  /* Shows only through genuinely transparent pixels — a logo or a diagram
     exported as a transparent PNG is unreadable on the dark scrim otherwise. */
  background: #fff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
/* Guard, not layout: if the library ever computes a box larger than the
   screen again, clamp it rather than let it run off the edge. `img` is
   width:100%/height:auto, so it scales with the clamp instead of distorting. */
.sl-wrapper .sl-image {
  max-width: 100vw;
  max-height: 100vh;
}

/* --- caption -------------------------------------------------------- */
.sl-wrapper .sl-image .sl-caption {
  box-sizing: border-box;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: break-word;
  background: rgba(11, 18, 32, 0.85);
}

/* --- spinner -------------------------------------------------------- */
.sl-spinner {
  border-color: #e5e7eb;
}

@media (prefers-reduced-motion: reduce) {
  .sl-wrapper .sl-close,
  .sl-wrapper .sl-navigation button { transition: none; }
}