/* Gallery page (design/NUK Gallery.dc.html). Loaded after catalog.css (hero, buttons, filter bar, pills). */

.inner-hero--gallery .inner-hero__lead { max-width: 840px; }

/* filter bar: pills and the count share one row */
.filterbar__wrap--inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; }
.filterbar__count--end { margin-inline-start: auto; }

/* image grid on navy */
.gallery__results { background: linear-gradient(135deg, #0b1746 0%, #16296b 55%, #0f1f57 100%); }
.gallery__wrap { max-width: var(--wrap); margin: 0 auto; padding: clamp(30px, 5vw, 52px) 20px clamp(36px, 6vw, 64px); }
.gshots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(216px, 100%), 1fr)); gap: 16px; }
.gshot {
  position: relative; display: flex; flex-direction: column; margin: 0; overflow: hidden; cursor: zoom-in;
  background: #fff; border-radius: 5px;
  transition: translate 0.16s ease, box-shadow 0.16s ease;
}
.gshot:hover { translate: 0 -4px; box-shadow: 0 18px 34px rgba(3, 8, 24, 0.4); }
.gshot:has(.gshot__open:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 3px; }
.gshot__media {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; padding: 12px; background: #fff;
}
.gshot__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.gshot__group {
  position: absolute; top: 9px; left: 9px; padding: 3px 8px; border-radius: 3px;
  background: rgba(15, 31, 87, 0.86); color: #fff; font-size: 14.4px; font-weight: 600;
}
.gshot__cap {
  margin-top: auto; padding: 11px 14px; background: var(--yellow); color: var(--navy-950);
  font-size: 18.6px; font-weight: 700; line-height: 1.5;
}
/* the caption is the button; it covers the whole picture card */
.gshot__open {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; line-height: inherit; text-align: start; cursor: zoom-in;
}
.gshot__open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gshot__open:focus-visible { outline: none; }
.gallery__note { margin: 26px 0 0; font-size: 19.8px; color: var(--border-5); }

/* ---------------- lightbox (<dialog>) ---------------- */

.lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: clamp(12px, 3vw, 28px); border: 0;
  background: rgba(6, 14, 38, 0.86); color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: transparent; }
.lightbox__box {
  width: 100%; max-width: 900px; margin: auto; overflow: hidden; border-radius: 8px;
  background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); animation: nukFade 0.18s ease-out;
}
.lightbox__bar { display: flex; align-items: center; gap: 14px; padding: 15px 20px; background: var(--navy); }
.lightbox__heads { flex: 1; }
.lightbox__headline { display: flex; align-items: center; gap: 14px; }
.lightbox__group {
  flex: none; padding: 4px 9px; border-radius: 3px;
  background: linear-gradient(180deg, #ffce23, #ffc400); color: var(--navy-950); font-size: 15.6px; font-weight: 700;
}
.lightbox__title { flex: 1; margin: 0; font-size: 25.2px; font-weight: 700; line-height: 1.4; color: #fff; }
.lightbox__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; background: transparent; color: #fff; cursor: pointer;
}
.lightbox__close:hover { border-color: var(--yellow); color: var(--yellow); }
.lightbox__stage {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px;
  padding: clamp(16px, 3vw, 30px); background: var(--bg); touch-action: pan-y;
}
.lightbox__img { max-width: 100%; max-height: min(62vh, 560px); width: auto; height: auto; object-fit: contain; }
.lightbox__nav {
  position: absolute; top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; border: 1px solid var(--border-4); border-radius: 100px;
  background: #fff; color: var(--navy); cursor: pointer;
}
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
.lightbox__nav:hover { background: var(--yellow); border-color: var(--yellow); }
.lightbox__nav:focus-visible, .lightbox__close:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.lightbox__nav:focus-visible { outline-color: var(--navy); }
.lightbox__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border); }
.lightbox__pos { margin: 0; font-size: 19.2px; color: var(--muted); }
.lightbox__actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.nbtn--xs { gap: 8px; padding: 12px 18px; font-size: 19.8px; }

/* phones: a caption that does not fit beside the group label moves under it instead of breaking mid-word */
@media (max-width: 560px) {
  .lightbox__headline { flex-wrap: wrap; row-gap: 6px; }
  .lightbox__title { flex: 1 1 auto; }
}