/* Shared lightbox (includes/lightbox.php, assets/js/lightbox.js) — the Screenshot Gallery lightbox
   (design/Screenshot Gallery template): ink rgba(3,1,42,.92) + blur 6 over the viewport, padding 64/104/36, the image
   at most its own size (photos: up to 1200px), the free width and 100vh − 160px high (radius 4, white, deep shadow), the caption
   "n / N · alt" 18px below (600 13.5/1.5 .82, max 760), round 48px buttons (1.5px .4 border, ink .6; hover .85): close
   top right (20/24), prev/next at the sides (28). Fades in 180 ms, out 160 ms. Below 1024 the side padding shrinks to 16
   and prev/next move to the bottom corners; below 768 the image takes the full width; phones in landscape give videos
   the whole screen (responsive spec §4.12, §4.13).
   Triggers: .bd-zoom (zoom-in cursor), .bd-zoom--plain (button reset that fills its box, inset focus ring because the
   media boxes clip), .has-chip (the gallery's "enlarge" chip, 30px top right; .has-chip--hover: only on hover/focus,
   always on touch-only devices), .bd-zoom__frame (inset hairline .14). No-save (.is-protected, data-bd-zoom-protect):
   the image can't be selected, dragged or long-pressed (iOS callout); lightbox.js blocks the context menu. Videos
   (.is-video): the Vimeo player in the frame on black. */

.bd-zoom { cursor: zoom-in; }
.bd-zoom--plain { display: block; position: relative; box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: inherit; overflow: hidden; -webkit-tap-highlight-color: transparent; }
/* Focus ring as an overlay above the (positioned) image layers; the transparent outline shows in forced-colors mode. */
.bd-zoom--plain:focus-visible { outline: 2px solid transparent; outline-offset: -2px; }
.bd-zoom--plain:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--bd-sun), inset 0 0 0 6px rgba(5,1,52,.6); pointer-events: none; }
.bd-zoom.has-chip { position: relative; }
.bd-zoom__chip { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 100px; background: rgba(5,1,52,.78); color: #f7f8f9; pointer-events: none; }
.bd-zoom.has-chip--hover .bd-zoom__chip { opacity: 0; transform: scale(.88); transition: opacity 180ms ease-out, transform 180ms ease-out; }
.bd-zoom.has-chip--hover:hover .bd-zoom__chip, .bd-zoom.has-chip--hover:focus-visible .bd-zoom__chip { opacity: 1; transform: none; }
@media (hover: none) {
	.bd-zoom.has-chip--hover .bd-zoom__chip { opacity: 1; transform: none; }
}
.bd-zoom__frame { position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(247,248,249,.14); pointer-events: none; }

/* Scroll lock on body (it propagates to the viewport); hiding html's overflow makes the page jump in mobile Chrome. */
html.bd-zoombox-open { scrollbar-gutter: stable; }
html.bd-zoombox-open body { overflow: hidden; }
.bd-zoombox {
	--zb-max-w: calc(100vw - 208px);
	--zb-max-h: min(100dvh - 160px, 100dvh - 118px - var(--zb-cap, 0px));
	/* 100vw: also over the scrollbar gutter kept while open, so the image centres in the whole window as in the design. */
	position: fixed; inset: 0 auto 0 0; width: 100vw; height: 100%; max-width: none; max-height: none; margin: 0; padding: 64px 104px 36px;
	box-sizing: border-box; border: 0; overflow: hidden; background: rgba(3,1,42,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	color: #f7f8f9; font-family: var(--wp--preset--font-family--montserrat); touch-action: pan-y pinch-zoom; transition: opacity 160ms ease-out;
}
.bd-zoombox[open] { animation: bd-zb-in 180ms ease-out; }
.bd-zoombox.is-closing { opacity: 0; }
.bd-zoombox::backdrop { background: transparent; }
.bd-zoombox__stage { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.bd-zoombox__frame { position: relative; flex: none; max-width: 100%; border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
/* Sized before the image loads: its own size at most (no upscaling), within the free width and height. */
.bd-zoombox__frame.has-size { aspect-ratio: var(--zb-w) / var(--zb-h); width: min(var(--zb-max-w), calc(var(--zb-w) * 1px), calc(var(--zb-max-h) * var(--zb-w) / var(--zb-h))); }
/* Photos and other images (story / news galleries) may grow to 1200px, as their templates' lightboxes. */
.bd-zoombox.is-image .bd-zoombox__frame.has-size { width: min(var(--zb-max-w), max(calc(var(--zb-w) * 1px), 1200px), calc(var(--zb-max-h) * var(--zb-w) / var(--zb-h))); }
.bd-zoombox__img { display: block; transition: opacity 220ms ease-out; }
.bd-zoombox__frame.has-size .bd-zoombox__img { width: 100%; height: 100%; object-fit: contain; }
.bd-zoombox__frame:not(.has-size) .bd-zoombox__img { width: auto; height: auto; max-width: var(--zb-max-w); max-height: var(--zb-max-h); }
.bd-zoombox.is-loading .bd-zoombox__frame { background: rgba(247,248,249,.06); box-shadow: none; }
.bd-zoombox.is-loading .bd-zoombox__frame:not(.has-size) { width: min(480px, var(--zb-max-w)); aspect-ratio: 16 / 10; }
.bd-zoombox.is-loading .bd-zoombox__img { opacity: 0; }
/* Package previews (kind asset): straight on the overlay like the reference's item lightbox (cut-outs made for dark). */
.bd-zoombox.is-asset .bd-zoombox__frame { background: transparent; box-shadow: none; }
/* Videos: the Vimeo player or the loop fills the frame (sized from the loop) on black; the image stays empty meanwhile. */
.bd-zoombox.is-video .bd-zoombox__frame { background: #000; }
.bd-zoombox.is-video .bd-zoombox__img { display: none; }
.bd-zoombox__embed { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.bd-zoombox.is-protected .bd-zoombox__img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
[data-bd-zoom-protect] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.bd-zoombox__spinner { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; border: 3px solid rgba(247,248,249,.2); border-top-color: var(--bd-sun); opacity: 0; pointer-events: none; animation: bd-zb-spin 900ms linear infinite; transition: opacity 160ms ease-out; }
.bd-zoombox.is-loading .bd-zoombox__spinner { opacity: 1; transition-delay: 120ms; }
.bd-zoombox__caption { flex: none; margin: 0; max-width: 760px; text-align: center; font: 600 13.5px/1.5 var(--wp--preset--font-family--montserrat); color: rgba(247,248,249,.82); font-variant-numeric: tabular-nums; }
.bd-zoombox__caption[hidden] { display: none; }
.bd-zoombox__btn { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; box-sizing: border-box; border-radius: 100px; border: 1.5px solid rgba(255,255,255,.4); background: rgba(5,1,52,.6); color: #f7f8f9; cursor: pointer; transition: border-color 180ms ease-out; }
.bd-zoombox__btn:hover { border-color: rgba(255,255,255,.85); }
.bd-zoombox__btn:focus-visible { outline: 2px solid var(--bd-sun); outline-offset: 3px; }
.bd-zoombox__btn.is-close { top: 20px; right: 24px; }
.bd-zoombox__btn.is-prev { left: 28px; top: 50%; margin-top: -24px; }
.bd-zoombox__btn.is-next { right: 28px; top: 50%; margin-top: -24px; }
.bd-zoombox.is-single :is(.is-prev, .is-next) { display: none; }

@keyframes bd-zb-in { from { opacity: 0; } }
@keyframes bd-zb-spin { to { transform: rotate(360deg); } }

@media (max-width: 1023px) {
	.bd-zoombox { --zb-max-w: calc(100vw - 32px); --zb-max-h: calc(100dvh - 186px - var(--zb-cap, 0px)); padding: 72px 16px 96px; }
	.bd-zoombox__btn.is-close { top: 16px; right: 16px; }
	.bd-zoombox__btn.is-prev, .bd-zoombox__btn.is-next { top: auto; bottom: 24px; margin-top: 0; }
	.bd-zoombox__btn.is-prev { left: 16px; }
	.bd-zoombox__btn.is-next { right: 16px; }
}
/* Mobile (responsive spec §4.12): full screen — the image at the full width (contain, never cropped, square edges),
   the caption keeps a 20px gutter; swipe, Esc and the 48px close button top right as above. Design package items
   (kind asset): their own-size limit (640px high) is desktop only — here they take the full width, height from their
   ratio, still within the screen. Videos (§4.13): 16:9 at the full width. */
@media (max-width: 767px) {
	.bd-zoombox { --zb-max-w: 100vw; padding-inline: 0; }
	.bd-zoombox__frame { border-radius: 0; }
	.bd-zoombox__caption { padding-inline: 20px; }
	.bd-zoombox.is-asset .bd-zoombox__frame.has-size { width: min(var(--zb-max-w), calc(var(--zb-max-h) * var(--zb-w) / var(--zb-h))); }
}
/* Phones in landscape (§4.13): a video fills the screen (full height, no caption, the close button over the corner);
   images get the height as well, prev/next back at the sides. */
@media (orientation: landscape) and (max-height: 540px) {
	.bd-zoombox { --zb-max-w: calc(100vw - 144px); --zb-max-h: calc(100dvh - 32px - var(--zb-cap, 0px)); padding: 12px 72px; }
	.bd-zoombox__stage { gap: 8px; }
	.bd-zoombox__frame { border-radius: 4px; }
	.bd-zoombox__btn.is-close { top: 12px; right: 12px; }
	.bd-zoombox__btn.is-prev, .bd-zoombox__btn.is-next { top: 50%; bottom: auto; margin-top: -24px; }
	.bd-zoombox__btn.is-prev { left: 12px; }
	.bd-zoombox__btn.is-next { right: 12px; }
	.bd-zoombox.is-video { --zb-max-w: 100vw; --zb-max-h: 100dvh; padding: 0; }
	.bd-zoombox.is-video .bd-zoombox__caption { display: none; }
	.bd-zoombox.is-video .bd-zoombox__frame { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.bd-zoombox, .bd-zoombox__img, .bd-zoom__chip { transition: none !important; }
	.bd-zoombox[open] { animation: none; }
	.bd-zoombox__spinner { animation: none; border-color: rgba(247,248,249,.45); }
}