/* ==========================================================================
   lightbox.css — Full-bleed image viewer overlay
   --------------------------------------------------------------------------
   Project:   Kali Villas Mentawai
   Layer:     Component (ITCSS)
   Loaded by: Pages that use the lightbox (currently the-villas.html)
   --------------------------------------------------------------------------
   Markup contract (single instance per page, controlled by js/lightbox.js):

     <div class="lightbox" id="lightbox" aria-hidden="true">
       <button class="lightbox-close" aria-label="Close">×</button>
       <button class="lightbox-prev"  aria-label="Previous">‹</button>
       <button class="lightbox-next"  aria-label="Next">›</button>
       <div class="lightbox-stage wm">
         <img class="lightbox-img" alt="">
       </div>
       <div class="lightbox-counter"><span id="lightbox-i">1</span> / <span id="lightbox-n">1</span></div>
     </div>

   Triggered by clicking any element with `data-lightbox` (the attribute
   value is the full-size src). See js/lightbox.js for behaviour.

   Watermark
     The .lightbox-stage carries the .wm utility (defined in base.css)
     which overlays a diagonal "KALI VILLAS · MENTAWAI ©" pattern on the
     enlarged image — the primary anti-piracy deterrent.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Container — full viewport, dark, hidden by default
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 5rem;
  background: rgba(12, 10, 8, 0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}


/* --------------------------------------------------------------------------
   Stage — wraps the enlarged image and carries the watermark overlay
   -------------------------------------------------------------------------- */
.lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
.lightbox-img {
  display: block;
  max-width: 90vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Override the .wm utility's default tone for use over a dark background */
.lightbox-stage.wm::after {
  font-size: 0.85rem;
  letter-spacing: 0.5em;
  color: rgba(245, 239, 227, 0.22);
  word-spacing: 2.5rem;
  line-height: 5rem;
}


/* --------------------------------------------------------------------------
   Controls — close, prev, next, counter
   --------------------------------------------------------------------------
   z-index keeps the controls above the image stage. Without it, the image
   would paint on top (later in DOM order) and the buttons would be unreachable
   on mobile where the image fills nearly the full viewport width.
   -------------------------------------------------------------------------- */
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  z-index: 2;
  background: transparent;
  border: 0.5px solid rgba(245, 239, 227, 0.25);
  color: rgba(245, 239, 227, 0.85);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.lightbox-close {
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  border-radius: 50%;
}
.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  font-size: 2.4rem;
  line-height: 1;
}
.lightbox-prev { left:  1.5rem; }
.lightbox-next { right: 1.5rem; }

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(245, 239, 227, 0.12);
  color: var(--sand);
  border-color: rgba(245, 239, 227, 0.55);
}

.lightbox-counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.55);
}


/* --------------------------------------------------------------------------
   Triggers — the gallery thumbs that open the lightbox
   --------------------------------------------------------------------------
   Apply the [data-lightbox] attribute on any element to make it a trigger.
   The styling here gives a subtle hover affordance without overriding any
   page-specific gallery rules.
   -------------------------------------------------------------------------- */
[data-lightbox] {
  cursor: zoom-in;
}


/* --------------------------------------------------------------------------
   Mobile breakpoint
   --------------------------------------------------------------------------
   On phones the prev/next controls become full-height invisible tap strips
   along the left and right edges. Only the chevron glyph is visible; the
   button box itself has no background or border. This means:
     • the photograph stays visually unobstructed (no button "chrome" sitting
       on top of it)
     • the entire vertical edge of the image is tappable — anywhere along
       the left edge advances back, anywhere along the right edge advances
       forward — so thumb taps don't have to land on a tiny target
     • a subtle :active tint is the only visual confirmation of a tap

   The chevron glyph carries a soft text-shadow so the cream colour stays
   legible over any photo (bright sand, dark waves, sunset, etc.) without
   needing a button background.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .lightbox       { padding: 3rem 0.25rem; }
  .lightbox-img   { max-width: 88vw; max-height: 76vh; }

  .lightbox-prev,
  .lightbox-next  {
    /* Vertical tap strip matched to the image's rendered height. The exact
       top + height values are set by js/lightbox.js so the strip never
       extends above the image (where it would overlap the close X) or
       below it (where it would overlap the page-counter). Width stays a
       constant fraction of the viewport so each strip is always a roomy
       thumb target.
       Override desktop's top:50%; transform:translateY(-50%); width:56px;
       height:56px so JS-set inline values can take effect. */
    transform: none;
    width: 25%;                              /* ≈ 94px on a 375px viewport */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--sand);
    font-size: 2.6rem;
    text-shadow: 0 1px 6px rgba(12, 10, 8, 0.55);  /* readable over any photo */
  }
  .lightbox-prev:active,
  .lightbox-next:active {
    background: rgba(28, 43, 74, 0.18);      /* faint tap feedback only */
  }
  .lightbox-prev  { left:  0; }
  .lightbox-next  { right: 0; }

  /* Close button keeps its visible chip — it lives at the top corner where
     it would be invisible without a backdrop. */
  .lightbox-close {
    top: 0.75rem;
    right: 0.75rem;
    width: 44px;
    height: 44px;
    background: rgba(28, 43, 74, 0.55);
    border-color: rgba(245, 239, 227, 0.4);
    color: var(--sand);
  }
}