/* ---------------------------------------------------------------------------
   De-Squarespace static overrides
   ---------------------------------------------------------------------------
   The Squarespace runtime JavaScript has been removed from this site, so the
   scripts that used to reveal certain elements after load no longer run.
   Squarespace's stylesheet leaves those elements hidden until JS flips them to
   a "loaded" state. These rules restore that finished state statically.

   Load this stylesheet LAST so it wins over site.css.
--------------------------------------------------------------------------- */

/* Full-bleed section background images.
   site.css sets `.background-image-fx { visibility: hidden }` and the removed
   BackgroundImageFXParallax / SectionWrapperController controller (the
   data-current-styles hook) used to set visibility:visible once loaded.
   Restore visibility so hero/section backgrounds render. */
.background-image-fx {
  visibility: visible !important;
}

/* Scroll-in section load animations.
   Sections with a fade/scale `data-animation` start at opacity:0 and are
   revealed by JS adding a `[data-active]` attribute. With no JS they'd stay
   hidden, so force the completed (visible) state. Harmless for
   data-animation="none" sections, which are not hidden to begin with. */
.page-section[data-animation]:not([data-active]) {
  opacity: 1 !important;
  transform: none !important;
}

/* Gallery grid (GalleryGrid controller).
   site.css sets `.gallery-grid--layout-grid .gallery-grid-wrapper { display:grid }`
   but leaves the columns, gutter, and per-item aspect-ratio to the removed JS,
   and hides every item until the JS tags it with [data-show]. Without JS the
   grid has no columns and each item collapses to height:0 -> nothing renders.
   Recreate the layout statically from the block's own data-* config
   (data-columns="3", data-gutter="5", data-aspect-ratio="four-three"). */
.gallery-grid[data-columns="3"] .gallery-grid-wrapper {
  grid-template-columns: repeat(3, 1fr);
}
.gallery-grid[data-gutter="5"] .gallery-grid-wrapper {
  gap: 5px;
}
.gallery-grid[data-aspect-ratio="four-three"] .gallery-grid-item-wrapper {
  padding-bottom: 75%; /* 4:3 -> height is 3/4 of width */
}
/* Reveal items that the JS would have flagged with [data-show]. */
.gallery-grid-item:not([data-show]) .gallery-grid-item-wrapper {
  opacity: 1 !important;
}
/* Fewer columns on small screens (JS handled this responsively). */
@media (max-width: 767px) {
  .gallery-grid[data-columns="3"] .gallery-grid-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Gallery lightbox (paired with assets/js/lightbox.js)
--------------------------------------------------------------------------- */
.gallery-grid-lightbox-link { cursor: zoom-in; }

.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  padding: 3vmin;
  box-sizing: border-box;
}
.lb-overlay.is-open { display: flex; }

.lb-figure {
  margin: 0;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-image {
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.lb-close,
.lb-nav {
  position: absolute;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border: none;
  cursor: pointer;
  line-height: 1;
  border-radius: 999px;
  transition: background 0.15s ease;
  z-index: 1;
}
.lb-close:hover,
.lb-nav:hover { background: rgba(255, 255, 255, 0.2); }

.lb-close {
  top: 2.5vmin;
  right: 2.5vmin;
  width: 44px;
  height: 44px;
  font-size: 20px;
}
.lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  font-size: 34px;
}
.lb-prev { left: 2.5vmin; }
.lb-next { right: 2.5vmin; }

.lb-counter {
  position: absolute;
  bottom: 2.5vmin;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  letter-spacing: 0.05em;
}

@media (max-width: 600px) {
  .lb-nav { width: 44px; height: 44px; font-size: 26px; }
}