/* --- Gallery layout --- */
.lb-gallery .lb-thumb {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;              /* white behind images */
  border: 1px solid rgba(0,0,0,.08);
}

.lb-gallery .lb-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;             /* lets mixed-size images look consistent */
  transform: scale(1);
  transition: transform .18s ease, filter .18s ease;
}

.lb-gallery .lb-thumb:hover img {
  transform: scale(1.02);
  filter: brightness(.98);
}

/* Control thumbnail heights (adjust to taste) */
.lb-thumb--lg { height: 360px; }
.lb-thumb--sm { height: 176px; }

@media (max-width: 767.98px) {
  .lb-thumb--lg { height: 260px; }
  .lb-thumb--sm { height: 140px; }
}

/* --- Modal "lightbox" styling --- */
.lb-modal .modal-content {
  background: #fff;              /* white panel behind image */
  border-radius: 14px;
  border: 0;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}

/* Bigger dim; Bootstrap already dims, this just makes it feel more "lightbox" */
.modal-backdrop.show { opacity: .75; }

.lb-modal .lb-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  background-color: #fff;
  border-radius: 999px;
  padding: 10px;
  opacity: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.lb-modal .lb-stage {
  background: #fff;              /* white behind the image itself */
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-modal .lb-image {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  display: block;
}

.lb-modal .lb-caption {
  padding: 0 22px 18px 22px;
  font-size: .95rem;
  color: rgba(0,0,0,.72);
  min-height: 1.2em;             /* avoids layout jump when caption is empty */
}

/* Space between stacked gallery rows to match g-2 */
.lb-gallery > .row + .row {
  margin-top: 0 !important;
}

/* HARDEN lightbox arrows against global button styles */
.lb-modal .lb-stage { position: relative; }

.lb-modal button.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  background: transparent;
  border: 0;
  box-shadow: none;

  padding: 0;
  margin: 0;
  line-height: 1;

  font-size: 64px;
  color: rgba(0,0,0,.28);

  cursor: pointer;
  appearance: none;
}

.lb-modal button.lb-prev { left: 12px; }
.lb-modal button.lb-next { right: 12px; }

.lb-modal button.lb-nav:hover { color: rgba(0,0,0,.42); }

@media (max-width: 575.98px) {
  .lb-modal button.lb-nav { font-size: 44px; }
}