.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin: 1.5rem 0;
  width: auto;
}
.gallery .item { width: auto; margin: 0; float: none; }
.gallery .item a {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;          /* portrait posters; change to 1/1 or 4/3 for landscape galleries */
  overflow: hidden;
  border-radius: 4px;
  background: #f0f0f0 center / cover no-repeat;
  /* Kill the Owl-era inline background-image (style="background-image:url(...)") that
     duplicates the <img> inside. Inline styles require !important to override. */
  background-image: none !important;
  cursor: zoom-in;
}
.gallery .item a img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform .25s ease;
}
.gallery .item a:hover img { transform: scale(1.04); }
/* style.css:803 `section.content-sections section .content img` (0,2,3) outranks the
   rule above (0,2,2) on margin + height; this selector is (0,3,2) so it wins cleanly
   (no !important) and lets the img sit flush and fill the aspect-ratio tile. */
.content-sections .gallery .item a img { margin: 0; height: 100%; }

/* ===== 4-up thumbnail band with dot pagination (Photo Gallery page) =====
   The strip is a native scroll-snap scroller; gallery.js adds the arrows and
   dots. Scoped to .gallery--band so every other .gallery keeps the grid. */
.wha-band { position: relative; display: flex; align-items: center; gap: 6px; margin: .4rem 0 0; }
.gallery.gallery--band {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: .4rem 0 1.5rem;       /* standalone (no-JS) fallback margin */
  flex: 1 1 auto;
  min-width: 0;
}
.wha-band .gallery.gallery--band { margin: 0; }   /* wrapper carries the margin once enhanced */
.gallery--band.wha-band__strip--ready { scrollbar-width: none; }
.gallery--band.wha-band__strip--ready::-webkit-scrollbar { display: none; }
.gallery--band .item { flex: 0 0 calc((100% - 3 * 14px) / 4); scroll-snap-align: start; }
@media (max-width: 899px) { .gallery--band .item { flex-basis: calc((100% - 2 * 14px) / 3); } }
@media (max-width: 599px) { .gallery--band .item { flex-basis: calc((100% - 14px) / 2); } }
/* Square band thumbnails (the old carousel look) instead of the grid's 3/4. */
.content-sections .gallery--band .item a { aspect-ratio: 1 / 1; }
.wha-band__nav {
  background: none; border: 0; color: #701b45;
  font-size: 2rem; line-height: 1; cursor: pointer;
  padding: 0 2px; flex: 0 0 auto; user-select: none;
}
.wha-band__nav:hover { color: #252525; }
.wha-band__nav[disabled] { opacity: .25; cursor: default; }
.wha-band__dots { display: flex; justify-content: center; gap: 10px; margin: 12px 0 1.5rem; }
.wha-band__dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 0; padding: 0; background: #c9c9c9; cursor: pointer;
}
.wha-band__dot:hover { background: #8b8b8b; }
.wha-band__dot[aria-current="true"] { background: #701b45; }

.wha-lb {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.9);
}
.wha-lb[hidden] { display: none; }
.wha-lb__stage { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
.wha-lb__img { max-width: 92vw; max-height: 82vh; object-fit: contain; box-shadow: 0 4px 30px rgba(0,0,0,.5); }
.wha-lb__cap { color: #fff; font-size: .9rem; margin-top: .6rem; }
.wha-lb__title { display: block; font-size: 1rem; font-weight: 700; }
.wha-lb__desc { display: block; color: #ddd; margin-top: .3rem; }
.wha-lb__count { display: block; color: #aaa; font-size: .8rem; margin-top: .4rem; }
.wha-lb__close, .wha-lb__nav {
  position: absolute; background: none; border: 0; color: #fff;
  cursor: pointer; line-height: 1; user-select: none;
}
.wha-lb__close { top: 16px; right: 22px; font-size: 2.4rem; }
.wha-lb__nav { top: 50%; transform: translateY(-50%); font-size: 3rem; padding: 0 1rem; }
.wha-lb__prev { left: 8px; }
.wha-lb__next { right: 8px; }
.wha-lb__close:hover, .wha-lb__nav:hover { color: #701b45; }
@media (max-width: 600px) {
  .wha-lb__nav { font-size: 2.2rem; padding: 0 .5rem; }
  .wha-lb__close { font-size: 2rem; }
}