/* ============================================================
   LIGHTBOX — the real screens of a landing open in a window.
   assets/js/lightbox.js builds one native <dialog class="fdry-lb">
   the first time a picture is opened; nothing here is on the page
   until then. Loaded only on a page that has such a block (see
   forge_enqueue_lightbox() in inc/enqueue.php). Colours, radii and
   easing are the Foundry tokens of body.foundry; a picture's own
   frame is the one the thumbnails wear (.fgp-shot a).
   ============================================================ */

/* A gallery the script has taken over says so with the cursor; without JS the link is only a link. */
[data-fdry-lightbox][data-lb-ready] a { cursor: zoom-in; }

/* The page under the window does not scroll; the gutter stays reserved, so the page does not
   jump sideways when a classic scrollbar goes away. */
html.fdry-lb-open { overflow: hidden; scrollbar-gutter: stable; }

.fdry-lb {
  box-sizing: border-box;
  width: 100%; max-width: none;
  height: 100vh; height: 100dvh; max-height: none;
  margin: 0; padding: clamp(12px, 2.2vw, 28px);
  border: 0; border-radius: 0;
  background: rgba(6, 8, 15, .96); /* no color-mix (Safari < 16.2) */
  background: color-mix(in srgb, var(--fdry-bg, #06080F) 96%, transparent);
  color: var(--fdry-ink, #ECEEF7);
  overflow: hidden;
  overscroll-behavior: contain;
  /* a horizontal swipe is ours (it turns the page), a vertical one is left to the browser */
  touch-action: pan-y pinch-zoom;
}
.fdry-lb::backdrop { background: rgba(6, 8, 15, .7); background: color-mix(in srgb, var(--fdry-bg, #06080F) 70%, transparent); }

/* display: grid only while open: a closed dialog must stay display: none */
.fdry-lb[open] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: clamp(10px, 1.6vw, 22px);
  row-gap: clamp(10px, 1.4vw, 16px);
  align-items: center;
}

.fdry-lb__count {
  grid-column: 1 / 3; grid-row: 1;
  margin: 0;
  font: 500 .875rem/1 'JetBrains Mono', ui-monospace, Menlo, monospace;
  letter-spacing: .06em;
  color: var(--fdry-ink-soft, #A7AEC8);
  font-variant-numeric: tabular-nums;
}

.fdry-lb__btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--fdry-glass-border, rgba(255,255,255,.10));
  border-radius: calc(var(--fdry-r, 20px) * .6);
  background: var(--fdry-glass-strong, linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.03)));
  color: var(--fdry-ink, #ECEEF7);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fdry-lb__btn:hover { border-color: var(--fdry-glass-edge, rgba(255,255,255,.22)); }
.fdry-lb__btn:focus-visible { outline: 3px solid var(--accent-light, #A98BFF); outline-offset: 3px; }
.fdry-lb__btn svg { display: block; width: 22px; height: 22px; pointer-events: none; }
.fdry-lb__close { grid-column: 3; grid-row: 1; justify-self: end; }
.fdry-lb__prev  { grid-column: 1; grid-row: 2; }
.fdry-lb__next  { grid-column: 3; grid-row: 2; }
.fdry-lb__btn[hidden] { display: none; }
/* The picture is placed by its corners (positioned), so its shadow would paint over the text and buttons that are
   not; they sit above it. */
.fdry-lb__count, .fdry-lb__btn, .fdry-lb__cap { position: relative; z-index: 1; }

/* The picture is contained: the whole screenshot, never cropped, at its own proportions and never
   bigger than it is. It is placed by the corners of the stage, so the stage's size decides, not the file's. */
.fdry-lb__stage { grid-column: 2; grid-row: 2; position: relative; align-self: stretch; min-width: 0; min-height: 0; }
.fdry-lb__img {
  position: absolute; inset: 0; margin: auto;
  display: block;
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: calc(var(--fdry-r, 20px) * .7);
  border: 1px solid rgba(255,255,255,.12);
  background: #f0f0f1;
  box-shadow: var(--fdry-shadow-lg, 0 40px 120px rgba(0,0,0,.55));
  -webkit-user-select: none; user-select: none;
}
.fdry-lb.is-loading .fdry-lb__img { opacity: 0; }

.fdry-lb__cap {
  grid-column: 1 / -1; grid-row: 3;
  margin: 0 auto; max-width: 72ch;
  text-align: center;
  font-size: .95rem; line-height: 1.5;
  color: var(--fdry-ink-soft, #A7AEC8);
}

/* Phone: the picture takes the whole width; the arrows drop beside the caption. */
@media (max-width: 760px) {
  .fdry-lb[open] { grid-template-rows: auto minmax(0, 1fr) auto; }
  .fdry-lb__stage { grid-column: 1 / -1; }
  .fdry-lb__prev, .fdry-lb__next { grid-row: 3; }
  .fdry-lb__cap { grid-column: 2; grid-row: 3; margin: 0; font-size: .875rem; }
}

/* Motion only for a reader who has not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .fdry-lb[open] { animation: fdry-lb-in .22s var(--fdry-ease-out, cubic-bezier(.22,.61,.36,1)) both; }
  .fdry-lb[open]::backdrop { animation: fdry-lb-fade .22s linear both; }
  .fdry-lb__img { transition: opacity .18s linear; }
  .fdry-lb__btn { transition: border-color .15s linear; }
}
@keyframes fdry-lb-in   { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fdry-lb-fade { from { opacity: 0; } to { opacity: 1; } }