/* Shared gallery lightbox.
 * The stage is a FIXED region and the prev/next controls are anchored to its left/right edges, so they
 * never move as the image aspect changes. A thumbnail strip shows every photo with a clear active state,
 * and an all-photos grid backs the "All" tab. Selectors are .hp-lb-scoped to win over the older per-page
 * rules regardless of stylesheet order. */

.hp-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(7,19,27,.96); display: flex; flex-direction: column; animation: hp-fade .25s ease both; }
.hp-lb[hidden] { display: none; }
.hp-lb .hp-lb__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; color: #fff; flex: 0 0 auto; }

/* Fixed stage: image is centred and clamped; nav is absolute at the container edges (never shifts). */
.hp-lb .hp-lb__stage { position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 0 72px; min-height: 0; }
.hp-lb .hp-lb__img { max-width: min(1100px, calc(100vw - 160px)); max-height: 72vh; width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.hp-lb .hp-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.hp-lb .hp-lb__nav:hover { background: rgba(255,255,255,.3); }
.hp-lb .hp-lb__nav[data-hp-lb-prev] { left: 16px; }
.hp-lb .hp-lb__nav[data-hp-lb-next] { right: 16px; }
.hp-lb .hp-lb__close { background: none; border: 0; color: #fff; font-weight: 600; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; }

/* Photo / All tabs */
.hp-lb .hp-lb__tabs { display: inline-flex; gap: 4px; background: rgba(255,255,255,.14); border-radius: 999px; padding: 3px; }
.hp-lb .hp-lb__tabs button { border: 0; background: none; color: rgba(255,255,255,.72); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; min-height: 40px; }
.hp-lb .hp-lb__tabs button.is-on { background: #fff; color: var(--hp-ink); }

/* Caption */
.hp-lb .hp-lb__cap { text-align: center; color: rgba(255,255,255,.92); font-size: 14px; padding: 10px 16px 2px; min-height: 18px; flex: 0 0 auto; }

/* Thumbnail strip — always visible, active photo highlighted and centred. */
.hp-lb .hp-lb__thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); justify-content: flex-start; flex: 0 0 auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
@media (min-width: 760px) { .hp-lb .hp-lb__thumbs { justify-content: center; } }
.hp-lb .hp-lb__thumb { flex: 0 0 auto; width: 78px; height: 54px; border-radius: 8px; border: 2px solid transparent; background-size: cover; background-position: center; cursor: pointer; opacity: .5; transition: opacity .2s, border-color .2s, transform .2s; padding: 0; }
.hp-lb .hp-lb__thumb:hover { opacity: .85; }
.hp-lb .hp-lb__thumb.is-on { opacity: 1; border-color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px -8px rgba(0,0,0,.7); }

/* All-photos grid */
.hp-lb .hp-lb__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; width: min(1100px, 100%); margin: 6px auto 20px; padding: 0 16px; overflow-y: auto; flex: 1 1 auto; align-content: start; }
.hp-lb .hp-lb__grid[hidden] { display: none; }
.hp-lb .hp-lb__gcell { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.hp-lb .hp-lb__gimg { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; background-size: cover; background-position: center; }
.hp-lb .hp-lb__gcell:hover .hp-lb__gimg { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
.hp-lb .hp-lb__gcap { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,.85); }

/* Phone: smaller nav inset so it doesn't crowd the image. */
@media (max-width: 560px) {
  .hp-lb .hp-lb__stage { padding: 0 56px; }
  .hp-lb .hp-lb__img { max-width: calc(100vw - 112px); max-height: 64vh; }
  .hp-lb .hp-lb__nav { width: 42px; height: 42px; font-size: 20px; }
  .hp-lb .hp-lb__nav[data-hp-lb-prev] { left: 8px; }
  .hp-lb .hp-lb__nav[data-hp-lb-next] { right: 8px; }
}