/*
 * lightbox.css — Windows 11 Photos-style lightbox layer (theme 2.9.0)
 * Loaded after gallery.css / editorial-layout.css on every wall page.
 * Owns: closed-photo vertical centering, info panel header, and the
 * position of the "i" button while the panel is open (see gallery-wall.js
 * `placeInfoButton`). Legacy info-open button/pill rules were removed
 * from style.css in 2.9.0.
 */

#shWallLightbox.wall-lightbox {
  --sh-lb-pad-y: clamp(12px, 3.2dvh, 28px);
  --sh-lb-btn-dx: 0px;
  --sh-lb-btn-dy: 0px;
}

/* 1. Closed photo: equal space above and below, centred in the frame. */
#shWallLightbox.wall-lightbox:not(.info-open) {
  padding-top: var(--sh-lb-pad-y) !important;
  padding-bottom: var(--sh-lb-pad-y) !important;
}
html body #shWallLightbox.wall-lightbox:not(.info-open) .wall-lb-inner {
  height: auto !important;
  max-height: 100% !important;
  margin-block: auto !important;
}
html body #shWallLightbox.wall-lightbox:not(.info-open) img.wall-lb-img {
  max-height: calc(100dvh - 2 * var(--sh-lb-pad-y)) !important;
}

/* 2. Info panel header: taller bar, smaller title, title centred on the bar. */
#shWallLightbox .wall-lb-info-header {
  flex: 0 0 56px;
  box-sizing: border-box;
  height: 56px;
  min-height: 56px;
  padding: 0 18px;
  align-items: center;
}
html body:not(.wp-admin) #shWallLightbox .wall-lb-info-heading {
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--sh-t-lead) !important;
  font-weight: var(--sh-w-strong) !important;
  line-height: 1 !important;
}
#shWallLightbox .wall-lb-info-close {
  align-self: center;
}

/* 3. "i" button while the panel is open: sits in the panel header, four
      spaces after the title, on the title's line. JS supplies the offset
      (--sh-lb-btn-dx/dy) and animates the move (FLIP, `translate`). */
html body #shWallLightbox.wall-lightbox.info-open .wall-lb-top-meta {
  display: flex !important;
  z-index: 6 !important;
  translate: none !important;
}
html body #shWallLightbox.wall-lightbox.info-open .wall-lb-project-title,
html body #shWallLightbox.wall-lightbox.info-open .wall-lb-count,
html body #shWallLightbox.wall-lightbox.info-open .wall-lb-dots {
  display: none !important;
}
html body #shWallLightbox.wall-lightbox.info-open .wall-lb-indicators {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body #shWallLightbox.wall-lightbox.info-open .wall-lb-info-btn:not([hidden]) {
  display: grid !important;
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: translate(var(--sh-lb-btn-dx), var(--sh-lb-btn-dy)) !important;
  transition: none !important;
}
html body #shWallLightbox.wall-lightbox.info-open .wall-lb-info-btn::after {
  content: none !important;
  display: none !important;
}

/* 4. Info open (>760px): the photo may only use the space beside the panel.
      Earlier landscape/touch rules sized it against a 260px caption column,
      which let it slide under the 336px panel. */
@media (min-width: 761px) {
  html body #shWallLightbox.wall-lightbox.info-open {
    --sh-lb-img-w: calc(100vw - var(--sh-lb-info-panel-w) - var(--sh-lb-info-gap) - 40px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }
}

/* 5. Same photo width with and without the panel (see sizeLightboxImage):
      earlier closed-state rules force the photo to the full viewport width. */
@media (min-width: 761px) {
  html body #shWallLightbox.wall-lightbox.has-info img.wall-lb-img {
    max-width: var(--sh-lb-cap-w, 100vw) !important;
    height: auto !important;
  }
}

/* 6. The open-state "i" is only the white disc with the dark "i" (the icon's
      own circle). No extra ring/fill from the generic control styles — also
      on touch, where :hover/:focus stay "stuck" after a tap. */
html body:not(.wp-admin) #shWallLightbox.wall-lightbox.info-open .wall-lb-info-btn,
html body:not(.wp-admin) #shWallLightbox.wall-lightbox.info-open .wall-lb-info-btn:hover,
html body:not(.wp-admin) #shWallLightbox.wall-lightbox.info-open .wall-lb-info-btn:focus,
html body:not(.wp-admin) #shWallLightbox.wall-lightbox.info-open .wall-lb-info-btn:focus-visible,
html body:not(.wp-admin) #shWallLightbox.wall-lightbox.info-open .wall-lb-info-btn:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 50% !important;
  -webkit-tap-highlight-color: transparent;
}

/* 7. Same photo height with and without the panel (>760px). */
@media (min-width: 761px) {
  html body:not(.wp-admin) #shWallLightbox.wall-lightbox.info-open img.wall-lb-img {
    max-height: calc(100dvh - 2 * var(--sh-lb-pad-y)) !important;
  }
}

/* 8. Prev / next arrows: a CSS-drawn chevron exactly centred in the circle
      (the text glyph sat off-centre) and no transform change on hover/focus,
      so the button never moves when the pointer reaches it. */
html body:not(.wp-admin) #shWallLightbox.wall-lightbox .wall-lb-nav,
html body:not(.wp-admin) #shWallLightbox.wall-lightbox .wall-lb-nav:hover,
html body:not(.wp-admin) #shWallLightbox.wall-lightbox .wall-lb-nav:focus,
html body:not(.wp-admin) #shWallLightbox.wall-lightbox .wall-lb-nav:focus-visible,
html body:not(.wp-admin) #shWallLightbox.wall-lightbox .wall-lb-nav:active {
  transform: translateY(-50%) !important;
  translate: none !important;
  margin-block: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  -webkit-tap-highlight-color: transparent;
}
html body:not(.wp-admin) #shWallLightbox.wall-lightbox .wall-lb-nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border: solid currentColor;
  border-width: 0 0 2.5px 2.5px;
  border-radius: 1px;
  pointer-events: none;
}
/* chevron optical centring: the point of the "<" is its visual weight, so
   the box is nudged 1.5px toward the open side */
html body:not(.wp-admin) #shWallLightbox.wall-lightbox .wall-lb-prev::before {
  transform: translate(-50%, -50%) translateX(2px) rotate(45deg);
}
html body:not(.wp-admin) #shWallLightbox.wall-lightbox .wall-lb-next::before {
  transform: translate(-50%, -50%) translateX(-2px) rotate(-135deg);
}

/* 2.20.0 — navigation arrows are PHYSICAL: left button "<", right button ">" in every language.
   In RTL gallery.css puts "previous" on the right and "next" on the left, so their chevrons are
   swapped here (the buttons keep their meaning; only the drawn shape follows the screen side). */
html body:not(.wp-admin) #shWallLightbox.wall-lightbox.is-rtl .wall-lb-prev::before {
  transform: translate(-50%, -50%) translateX(-2px) rotate(-135deg);
}
html body:not(.wp-admin) #shWallLightbox.wall-lightbox.is-rtl .wall-lb-next::before {
  transform: translate(-50%, -50%) translateX(2px) rotate(45deg);
}