/* ── NHP Gallery v1 — masonry grid ──────────────────────────────────────── */

#nhp-gallery {
  columns: 3;
  column-gap: 4px;
  padding: 4px 0 0;
  background: #0e0e0f;
}

.nhp-gallery-item {
  break-inside: avoid;
  margin-bottom: 4px;
  overflow: hidden;
  cursor: zoom-in;
  background: #161618;
  display: block; /* <a> elements need block */
}

.nhp-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0.92);
  transition: filter 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.nhp-gallery-item:hover img {
  filter: brightness(0.72);
  transform: scale(1.04);
}

/* ── GLightbox dark skin overrides ──────────────────────────────────────── */

.glightbox-container {
  background: rgba(10, 10, 11, 0.97) !important;
}

.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background: rgba(22, 22, 24, 0.85) !important;
  border: 1px solid rgba(201, 169, 110, 0.35) !important;
}

.glightbox-clean .gclose svg,
.glightbox-clean .gnext svg,
.glightbox-clean .gprev svg {
  stroke: #c9a96e !important;
  fill: none !important;
}

/* Uniform lightbox display size — GLightbox sizes each slide to the image's
   native pixel resolution and never upscales, so images uploaded smaller
   render visibly smaller. Force every slide into one shared bounding box
   instead: portrait shots hit the height cap, landscape shots hit the width
   cap, so both orientations read as one consistent size. !important is
   required to beat the inline width/height GLightbox sets via JS. */
.glightbox-container .gslide-image img {
  width: auto !important;
  height: 82vh !important;
  max-width: 90vw !important;
  max-height: 82vh !important;
  object-fit: contain !important;
}

/* No descriptions anywhere */
.glightbox-clean .gdesc-inner,
.glightbox-clean .gslide-description,
.glightbox-clean .gdesc-header,
.glightbox-clean .gdesc-footer {
  display: none !important;
}

/* ── Responsive breakpoints ─────────────────────────────────────────────── */

/* Scale column count up on wider screens so each image stays a similar,
   sharp-looking width instead of stretching wider as the viewport grows. */
@media (min-width: 1400px) {
  #nhp-gallery { columns: 4; }
}

@media (min-width: 1900px) {
  #nhp-gallery { columns: 5; }
}

@media (max-width: 1023px) and (min-width: 600px) {
  #nhp-gallery { columns: 2; }
}

@media (max-width: 599px) {
  #nhp-gallery {
    columns: 1;
    column-gap: 2px;
  }
  .nhp-gallery-item { margin-bottom: 2px; }
}