/* ==========================================================================
   OCI — standalone photo gallery
   Replaces the Duda photoGallery widget runtime on exported/static pages.
   Works with the existing markup as-is: no image paths or IDs are changed.

   Layout: 2 photos per row, each photo capped at 600px, container centered.
   ========================================================================== */

.dmPhotoGallery {
  --oci-cols: 2;
  --oci-max-photo: 600px;
  --oci-gap: 14px;
  --oci-radius: 4px;
  --oci-overlay: rgba(12, 16, 22, 0.62);

  position: relative;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 700px) {
  .dmPhotoGallery { --oci-cols: 1; }
}

/* --------------------------------------------------------------------------
   Force-visible
   The export ships Duda's animation and widget CSS but not the runtime that
   clears it, so anything waiting on that runtime stays at opacity/visibility 0.
   -------------------------------------------------------------------------- */

.dmPhotoGallery .layout-container,
.dmPhotoGallery .photogallery-row,
.dmPhotoGallery .photogallery-column,
.dmPhotoGallery .photoGalleryThumbs,
.dmPhotoGallery .thumbnailInnerWrapper,
.dmPhotoGallery .image-container,
.dmPhotoGallery .image-container > a {
  visibility: visible !important;
}

.dmPhotoGallery .photoGalleryThumbs,
.dmPhotoGallery .photoGalleryThumbs.animated,
.dmPhotoGallery .thumbnailInnerWrapper,
.dmPhotoGallery .image-container {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* Rows and columns that hold a gallery are marked for Duda's scroll
   animations, which never run here — unhide them. */
.dmRespRow[data-anim-desktop],
.dmRespCol[data-anim-desktop],
.dmRespRow[data-anim-extended],
.dmRespCol[data-anim-extended] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Duda injects into this holder at runtime; it is always empty in the export. */
.dmPhotoGallery .dmPhotoGalleryHolder { display: none !important; }

/* ------------------------------------------------------------------ grid -- */

.dmPhotoGallery .layout-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center;
  align-items: stretch;
  gap: var(--oci-gap);
  width: 100%;
  max-width: calc(
    var(--oci-max-photo) * var(--oci-cols) + var(--oci-gap) * (var(--oci-cols) - 1)
  );
  margin-left: auto;
  margin-right: auto;
}

/* The widget hard-codes its own row grouping — several galleries put a single
   thumbnail in each row, which forces one photo per line no matter what the
   column is told to do. Dissolving the rows lets the columns flow two-up. */
.dmPhotoGallery .photogallery-row {
  display: contents !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.dmPhotoGallery .photogallery-column {
  flex: 1 1 calc((100% - (var(--oci-cols) - 1) * var(--oci-gap)) / var(--oci-cols));
  width: auto !important;
  max-width: var(--oci-max-photo);
  min-width: 0;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dmPhotoGallery .photoGalleryThumbs {
  position: relative;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.dmPhotoGallery .thumbnailInnerWrapper {
  position: relative;
  display: block !important;
  height: 100%;
  overflow: hidden;
  border-radius: var(--oci-radius);
  background: #10151b;
}

/* ---------------------------------------------------------------- images -- */

.dmPhotoGallery .image-container {
  position: relative;
  display: block !important;
  width: 100%;
  padding-top: 100%;          /* square crop, fallback for old browsers */
  overflow: hidden;
}
@supports (aspect-ratio: 1 / 1) {
  .dmPhotoGallery .image-container {
    aspect-ratio: 1 / 1;
    padding-top: 0;
  }
}

.dmPhotoGallery .image-container > a {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
  cursor: zoom-in;
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.35s ease;
}

.dmPhotoGallery .image-container img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border: 0;
  margin: 0;
}

.dmPhotoGallery .photoGalleryThumbs:hover .image-container > a,
.dmPhotoGallery .photoGalleryThumbs:focus-within .image-container > a {
  transform: scale(1.05) !important;
}

.dmPhotoGallery[data-image-hover-effect="blur"] .photoGalleryThumbs:hover .image-container > a,
.dmPhotoGallery[data-image-hover-effect="blur"] .photoGalleryThumbs:focus-within .image-container > a {
  filter: blur(3px) brightness(0.7);
}
.dmPhotoGallery[data-image-hover-effect="grayscale"] .photoGalleryThumbs:hover .image-container > a {
  filter: grayscale(1);
}

/* No overlay on a thumb without a caption, so the image shouldn't dim either. */
.dmPhotoGallery .photoGalleryThumbs.oci-no-caption:hover .image-container > a,
.dmPhotoGallery .photoGalleryThumbs.oci-no-caption:focus-within .image-container > a {
  filter: none;
}

.dmPhotoGallery .image-container > a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}

/* -------------------------------------------------------------- captions -- */

.dmPhotoGallery .caption-container {
  position: absolute !important;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 7% 8%;
  background: var(--oci-overlay);
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.dmPhotoGallery .photoGalleryThumbs:hover .caption-container,
.dmPhotoGallery .photoGalleryThumbs:focus-within .caption-container {
  opacity: 1;
  pointer-events: auto;
}

/* Nothing to say, nothing to show. */
.dmPhotoGallery .photoGalleryThumbs.oci-no-caption .caption-container,
.dmPhotoGallery .caption-title:empty,
.dmPhotoGallery .caption-text:empty,
.dmPhotoGallery .caption-title.oci-empty,
.dmPhotoGallery .caption-text.oci-empty {
  display: none !important;
}

.dmPhotoGallery.captionAlignment-bottom_center .caption-container { align-items: flex-end; }
.dmPhotoGallery.captionAlignment-top_center .caption-container { align-items: flex-start; }
.dmPhotoGallery.captionAlignment-bottom_left .caption-container {
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
}

.dmPhotoGallery .caption-inner {
  display: block;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dmPhotoGallery .caption-title {
  margin: 0 0 0.6em;
  color: #000000;
  font-size: clamp(15px, 1.5vw, 22px);
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.dmPhotoGallery .caption-text,
.dmPhotoGallery .caption-text p,
.dmPhotoGallery .caption-text span {
  color: #000000;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.55;
}
.dmPhotoGallery .caption-text p { margin: 0 0 0.7em; }
.dmPhotoGallery .caption-text p:last-child { margin-bottom: 0; }

/* Placeholder "Button" links that were never given a destination. */
.dmPhotoGallery .caption-button { display: none !important; }
.dmPhotoGallery .caption-button.oci-has-link {
  display: inline-flex !important;
  margin-top: 12px;
}

/* Touch screens have no hover, so captions read statically. */
@media (hover: none) {
  .dmPhotoGallery .photoGalleryThumbs:not(.oci-no-caption) .caption-container {
    opacity: 1;
    pointer-events: auto;
    align-items: flex-end;
    background: linear-gradient(
      to top,
      rgba(10, 14, 20, 0.88) 0%,
      rgba(10, 14, 20, 0.45) 45%,
      rgba(10, 14, 20, 0) 100%
    );
    padding: 16px 16px 18px;
    text-align: left;
  }
  .dmPhotoGallery .caption-text { max-height: 7.5em; overflow: hidden; }
}

/* -------------------------------------------------------------- lightbox -- */

.oci-lb {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3vmin;
  background: rgba(8, 11, 16, 0.94);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.oci-lb.is-open { display: flex; }
.oci-lb.is-visible { opacity: 1; }

.oci-lb__figure {
  margin: 0;
  max-width: min(1400px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.oci-lb__img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: 3px;
  background: #10151b;
}

.oci-lb__caption {
  color: #e9edf2;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  max-width: 70ch;
}
.oci-lb__caption b { display: block; font-size: 16px; margin-bottom: 4px; }
.oci-lb__caption:empty { display: none; }

.oci-lb__btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.oci-lb__btn:hover { background: rgba(255, 255, 255, 0.2); }
.oci-lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.oci-lb__close { top: 18px; right: 18px; }
.oci-lb__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.oci-lb__next { right: 18px; top: 50%; transform: translateY(-50%); }
.oci-lb.is-single .oci-lb__prev,
.oci-lb.is-single .oci-lb__next,
.oci-lb.is-single .oci-lb__counter { display: none; }

.oci-lb__counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  letter-spacing: 0.06em;
}

@media (max-width: 600px) {
  .oci-lb__btn { width: 40px; height: 40px; font-size: 22px; }
  .oci-lb__prev { left: 8px; }
  .oci-lb__next { right: 8px; }
}

/* --------------------------------------------------------- reduced motion - */

@media (prefers-reduced-motion: reduce) {
  .dmPhotoGallery .image-container > a,
  .dmPhotoGallery .caption-container,
  .oci-lb { transition: none !important; }
  .dmPhotoGallery .photoGalleryThumbs:hover .image-container > a { transform: none !important; }
}

/* ==========================================================================
   Whole thumbnail opens the lightbox — caption or not
   ========================================================================== */

.dmPhotoGallery .thumbnailInnerWrapper,
.dmPhotoGallery .caption-container {
  cursor: zoom-in;
}
.dmPhotoGallery .caption-button.oci-has-link { cursor: pointer; }

/* ==========================================================================
   Interactive project map — keep the pin tooltip reachable
   The widget leaves a transparent gap between the pin and its tooltip, so the
   pointer leaves the marker before it arrives and the tooltip closes. The gap
   becomes padding on the tooltip itself, which keeps the hover unbroken.
   ========================================================================== */

.image-pin-container { position: relative; }

.image-pin-container .pin-marker { z-index: 2; }
.image-pin-container .pin-marker:hover,
.image-pin-container .pin-marker.hovered,
.image-pin-container .pin-marker.oci-pin-open { z-index: 50; }

.image-pin-container .pin-tooltip {
  margin: 0 !important;
  padding: 18px !important;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease 0.05s, visibility 0s linear 0.25s;
}

.image-pin-container .pin-marker:hover .pin-tooltip,
.image-pin-container .pin-marker.hovered .pin-tooltip,
.image-pin-container .pin-marker.oci-pin-open .pin-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition-delay: 0s, 0s;
}

.image-pin-container .pin-tooltip .tooltip-content,
.image-pin-container .pin-tooltip a,
.image-pin-container .pin-tooltip .tooltip-cta-btn {
  pointer-events: auto !important;
  position: relative;
}

.image-pin-container .pin-dot { cursor: pointer; }
.image-pin-container .pin-dot:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 50%;
}

/* A pin opened by tap or keyboard stays open until the next tap. */
.image-pin-container .pin-marker.oci-pin-open .pin-dot { transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
  .image-pin-container .pin-tooltip { transition: none !important; }
}