/* ============================================================
   Dion's Complete — photo lightbox
   The capture's gallery thumbnails and the project photo grids are
   styled `cursor-pointer` with a hover zoom, but the builder's React
   lightbox never made it into the snapshot, so clicking did nothing.
   This is the replacement overlay.
   ============================================================ */

.dc-lb {
  position: fixed;
  inset: 0;
  z-index: 2147483000;          /* under the HCP booking widget, over everything else */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1rem 4.5rem;
  background: rgba(12, 25, 37, 0.92);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.dc-lb.is-open { opacity: 1; }
.dc-lb[hidden] { display: none; }

.dc-lb__figure {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.dc-lb__img {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--roundedness, 8px);
  background: rgba(255, 255, 255, 0.04);
}

.dc-lb__caption {
  margin: 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

/* ---- controls ---- */
.dc-lb__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.dc-lb__btn:hover { background: rgba(255, 255, 255, 0.24); }
.dc-lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dc-lb__btn[hidden] { display: none; }

.dc-lb__close { top: 0.75rem; right: 0.75rem; }
.dc-lb__prev  { left: 0.75rem;  top: 50%; transform: translateY(-50%); }
.dc-lb__next  { right: 0.75rem; top: 50%; transform: translateY(-50%); }

.dc-lb__count {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 640px) {
  .dc-lb { padding: 3.25rem 0.5rem 3.75rem; }
  .dc-lb__prev { left: 0.25rem; }
  .dc-lb__next { right: 0.25rem; }
}

/* Body scroll lock while the overlay is up. */
body.dc-lb-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .dc-lb { transition: none; }
}