/* Screenshot Gallery (includes/lightbox.php → gallery_html, assets/js/gallery.js) — design/Screenshot Gallery template.
   The gallery fills its box (the block gives the box its size): radius 4, .06 fill; card mode framed by an inset
   hairline .14, image from the top centre (cover) on white; laptop mode: nav strip at full width + content zoomed and
   centred (inline styles from PHP). "Enlarge" chip 30px top right (always visible, never catches the click). Slider:
   round 36px prev/next at the middle of the sides, dots pill at the bottom centre (active 18×6 Sunshade), slides move
   520 ms (none with reduced motion); tablet and mobile: no arrows, dots with 44px tap areas (responsive spec §4.12).
   Placeholder: inset hairline .12, text bottom left 12.5px .68 + format hint 11px uppercase .58. Video slides: muted
   loop (contain on ink), "Watch the full video" and "Demo video" labels. */

.bd-gallery { position: relative; box-sizing: border-box; width: 100%; height: 100%; min-height: 60px; border-radius: 4px; overflow: hidden; background: rgba(247,248,249,.06); }
.bd-gallery__track { display: flex; width: 100%; height: 100%; transform: translateX(calc(var(--i, 0) * -100%)); transition: transform 520ms cubic-bezier(.22,.61,.36,1); touch-action: pan-y pinch-zoom; }
.bd-gallery__item { position: relative; flex: none; width: 100%; height: 100%; }
.bd-gallery__slide { position: relative; display: block; box-sizing: border-box; flex: none; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff; color: inherit; font: inherit; text-align: inherit; cursor: zoom-in; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.bd-gallery__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; }
.bd-gallery.is-contain .bd-gallery__img { object-fit: contain; object-position: center; }
/* Focus ring as an overlay above the image (the box clips); the transparent outline shows in forced-colors mode. */
.bd-gallery__slide:focus-visible { outline: 2px solid transparent; outline-offset: -2px; }
.bd-gallery__slide:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 4px; box-shadow: inset 0 0 0 3px var(--bd-sun), inset 0 0 0 6px rgba(5,1,52,.6); pointer-events: none; }

/* Video slides (handoff "Video-Logik", 2026-10-20): the muted loop 16:9 contained on ink, bottom left "Watch the full
   video" (only with a full video), bottom right the small "Demo video" label; both above the letterbox, never catch the
   click. */
.bd-gallery__slide.is-video { background: #050134; cursor: pointer; }
.bd-gallery__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.bd-gallery__watch, .bd-gallery__demo { position: absolute; bottom: 10px; z-index: 2; display: flex; align-items: center; border-radius: 100px; background: rgba(5,1,52,.78); color: #f7f8f9; pointer-events: none; white-space: nowrap; }
.bd-gallery__watch { left: 10px; gap: 7px; padding: 6px 12px 6px 10px; font: 700 12px/1.2 var(--wp--preset--font-family--montserrat); transition: background-color 180ms ease-out; }
.bd-gallery__slide.is-video:hover .bd-gallery__watch { background: #050134; }
.bd-gallery__demo { right: 10px; padding: 4px 9px; font: 600 10.5px/1.2 var(--wp--preset--font-family--montserrat); letter-spacing: .04em; color: rgba(247,248,249,.82); }
/* Tablet and mobile: the labels move above the dots (wider there: 44px tap areas, see the slider controls) so the
   three don't collide. */
@media (max-width: 1279px) {
	.bd-gallery.is-slider .bd-gallery__watch, .bd-gallery.is-slider .bd-gallery__demo { bottom: 40px; }
}

/* Laptop crop. */
.bd-gallery__crop { position: absolute; inset: 0; display: flex; flex-direction: column; }
.bd-gallery__strip { flex: none; display: block; width: 100%; background-color: #fff; background-position: top left; background-size: 100% auto; background-repeat: no-repeat; }
.bd-gallery__body { flex: 1; min-height: 0; display: block; overflow: hidden; }
.bd-gallery__body-img { display: block; max-width: none; height: auto; }

.bd-gallery__frame { position: absolute; inset: 0; z-index: 1; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(247,248,249,.14); pointer-events: none; }
.bd-gallery__chip { position: absolute; top: 10px; right: 10px; z-index: 2; 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; }

/* Slider controls. */
.bd-gallery__controls { display: contents; }
.bd-gallery__controls[hidden] { display: none; }
.bd-gallery__arrow { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 36px; height: 36px; margin-top: -18px; padding: 0; border-radius: 100px; border: 1px solid rgba(247,248,249,.3); background: rgba(5,1,52,.78); color: #f7f8f9; cursor: pointer; transition: background-color 180ms ease-out, border-color 180ms ease-out; }
.bd-gallery__arrow.is-prev { left: 10px; }
.bd-gallery__arrow.is-next { right: 10px; }
.bd-gallery__arrow::before { content: ""; position: absolute; inset: -4px; } /* 44px hit area */
.bd-gallery__arrow:hover { background: #050134; border-color: rgba(247,248,249,.7); }
.bd-gallery__dots { position: absolute; left: 50%; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 100px; background: rgba(5,1,52,.78); transform: translateX(-50%); }
.bd-gallery__dot { position: relative; display: block; flex: none; width: 6px; height: 6px; margin: 0; padding: 0; border: 0; border-radius: 100px; background: rgba(247,248,249,.55); cursor: pointer; transition: width 220ms ease-out, background-color 220ms ease-out; }
.bd-gallery__dot::before { content: ""; position: absolute; inset: -9px -3px; } /* taller hit area without overlapping the neighbours */
.bd-gallery__dot.is-active { width: 18px; background: #fa9a42; }
.bd-gallery__dot:not(.is-active):hover { background: #f7f8f9; }
.bd-gallery__arrow:focus-visible, .bd-gallery__dot:focus-visible { outline: 2px solid var(--bd-sun); outline-offset: 2px; }
/* Tablet and mobile (responsive spec §4.12): swipe instead of arrows (← → keys still step while focus is inside); the
   dots stay, each with a 44 × 44 tap area — 38px apart so the areas meet without overlapping (19px on each side of a
   dot); the pill sits 14px up so the areas stay inside the clipped box. */
@media (max-width: 1279px) {
	.bd-gallery__arrow { display: none; }
	.bd-gallery__dots { bottom: 14px; gap: 38px; }
	.bd-gallery__dot::before { inset: -19px; }
}

/* Placeholder (no image yet). */
.bd-gallery.is-empty { background: rgba(247,248,249,.06); }
.bd-gallery__ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; box-sizing: border-box; padding: 14px 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(247,248,249,.12); }
.bd-gallery__ph-text { font: 600 12.5px/1.4 var(--wp--preset--font-family--montserrat); color: rgba(247,248,249,.68); }
.bd-gallery__ph-hint { font: 600 11px/1.3 var(--wp--preset--font-family--montserrat); letter-spacing: .06em; text-transform: uppercase; color: rgba(247,248,249,.58); }

/* Mini slider (design update 2026-10-21c; galleries without controls, e.g. the laptop screens): one pill 10px from the
   bottom right corner, ink .62 with blur, .78 opaque (1 on hover/focus): 22px ‹ and ›, dots 4px (active 12px
   Sunshade), gap 4. Its clicks step the slider and never open the lightbox. */
.bd-gallery__controls.bd-gallery__mini { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 100px; background: rgba(5,1,52,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: .78; transition: opacity 180ms ease-out; }
.bd-gallery__controls.bd-gallery__mini[hidden] { display: none; }
.bd-gallery__mini:hover, .bd-gallery__mini:focus-within { opacity: 1; }
.bd-gallery__mini-arrow { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 100px; background: transparent; color: #f7f8f9; cursor: pointer; transition: background-color 180ms ease-out; }
.bd-gallery__mini-arrow::before { content: ""; position: absolute; inset: -6px -2px; } /* a little more to hit */
.bd-gallery__mini-arrow:hover { background: rgba(247,248,249,.14); }
.bd-gallery__mini-dots { display: flex; align-items: center; gap: 4px; padding: 0 3px; }
.bd-gallery__mini .bd-gallery__dot { width: 4px; height: 4px; background: rgba(247,248,249,.6); }
.bd-gallery__mini .bd-gallery__dot.is-active { width: 12px; background: #fa9a42; }
.bd-gallery__mini .bd-gallery__dot::before { inset: -9px -2px; }
.bd-gallery__mini-arrow:focus-visible { outline: 2px solid var(--bd-sun); outline-offset: 1px; }
/* Video labels on the right move left of the pill. */
.bd-gallery.is-mini .bd-gallery__demo { right: auto; left: 10px; }
.bd-gallery.is-mini .bd-gallery__watch + .bd-gallery__demo { display: none; }

@media (prefers-reduced-motion: reduce) {
	.bd-gallery__track, .bd-gallery__dot, .bd-gallery__arrow, .bd-gallery__mini, .bd-gallery__mini-arrow { transition: none; }
}