/* ==========================================================================
   PATH: /css/lightbox.css
   TYPE: stylesheet
   STATUS: shared
   USES: portfolio, plans, trust images, support sections, any shared
         image-enlarge interaction using the site lightbox

   PURPOSE
   Shared image lightbox component for enlarge-on-click image interactions
   across the site. Owns the overlay, inner frame, displayed image, close
   control, previous/next navigation, trigger affordance, and responsive
   adjustments.

   KEEP IN THIS FILE
   - .lightbox-trigger affordance styling
   - lightbox overlay/container/image presentation
   - close and nav button styling
   - shared lightbox responsive behavior

   DO NOT PUT IN THIS FILE
   - gallery card layout
   - portfolio grid styling
   - plan card styling
   - trust section layout
   - page-specific image spacing or crop rules
   - JavaScript state logic

   OWNERSHIP NOTES
   - Triggers may be anchors or buttons.
   - This file styles the shared component only; source sections remain
     responsible for their own gallery/list/card layouts.
   ========================================================================== */

/* ==========================================================================
   SHARED TRIGGER
   ========================================================================== */

.lightbox-trigger {
  cursor: zoom-in;
}

/* ==========================================================================
   LIGHTBOX SHELL
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--lightbox-bg);
}

.lightbox.is-open {
  display: flex;
}

.lightbox[aria-hidden="true"] {
  pointer-events: none;
}

.lightbox[aria-hidden="false"] {
  pointer-events: auto;
}

.lightbox-inner {
  position: relative;
  width: min(100%, 1180px);
  max-height: min(90vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   LIGHTBOX IMAGE
   ========================================================================== */

.lightbox img,
#site-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: var(--lightbox-image-shadow);
  background: var(--image-placeholder);
}

/* ==========================================================================
   CONTROLS
   ========================================================================== */

.lightbox-close {
  position: absolute;
  top: -0.8rem;
  right: -0.8rem;
  z-index: 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-light);
  background: var(--lightbox-close-bg);
  color: var(--text-light);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: var(--lightbox-close-bg-hover);
  border-color: var(--gold-line-strong);
  color: var(--text-light);
  outline: none;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-light);
  background: var(--lightbox-close-bg);
  color: var(--text-light);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: var(--lightbox-close-bg-hover);
  border-color: var(--gold-line-strong);
  color: var(--text-light);
  outline: none;
}

.lightbox-prev {
  left: 1rem;
}

.lightbox-next {
  right: 1rem;
}

.lightbox-nav[hidden] {
  display: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
  .lightbox {
    padding: 1rem;
  }

  .lightbox-inner {
    width: 100%;
    max-height: 88vh;
  }

  .lightbox-close {
    top: 0.5rem;
    right: 0.5rem;
    width: 44px;
    height: 44px;
    font-size: 1.35rem;
  }

  .lightbox-nav {
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
  }

  .lightbox-prev {
    left: 0.4rem;
  }

  .lightbox-next {
    right: 0.4rem;
  }

  .lightbox img,
  #site-lightbox-image {
    max-height: 82vh;
  }
}