/* citrus-lightbox.css — pairs with citrus-lightbox.js.
   Replaces .gallery-lightbox, .featured-lightbox, .gallery-spinner and
   body.lightbox-open. Keep your .hover-gallery grid rules (tweaked below). */

/* ---------- grid ---------- */
.hover-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px;
}
.hover-gallery img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 6px;
  cursor: zoom-in;
  display: block;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* 1.15 made tiles overlap their neighbours and stole clicks. */
.hover-gallery img:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.wp-block-image img:not(.no-lightbox) {
  cursor: zoom-in;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-block-image img:not(.no-lightbox):hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.no-lightbox { cursor: default; }

/* Legacy markup from the old converter tool is still sitting in older posts.
   Its own CSS is gone, so it renders as stray text ("x < > Download Full Res
   Image") above the gallery. Nothing is wired to it any more — hide it.
   Safe to delete this block once those posts have been cleaned up. */
#galleryLightbox,
#featuredLightbox,
.gallery-lightbox,
.featured-lightbox,
.gallery-lightbox-close,
.gallery-lightbox-arrow,
.gallery-lightbox-download,
.gallery-spinner {
  display: none !important;
}

/* ---------- lightbox shell ---------- */
.citrus-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 2vw, 20px);
  padding: clamp(8px, 2vw, 24px);
  background: rgba(0, 0, 0, .9);
  opacity: 0;
  transition: opacity .2s ease;
  cursor: zoom-out;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
}
.citrus-lb.is-active { opacity: 1; }
.citrus-lb[hidden]   { display: none; }

/* The figure shrink-wraps the photo, so every pixel of dark space really is
   background and really does close the lightbox. This was the dead zone. */
.citrus-lb__figure {
  margin: 0;
  display: flex;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
}
.citrus-lb__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 88dvh;          /* dvh dodges the mobile URL-bar overflow */
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  cursor: default;
}
.citrus-lb__figure.is-fading .citrus-lb__img { animation: citrus-lb-in .18s ease; }
@keyframes citrus-lb-in {
  from { opacity: .35; transform: scale(.985); }
  to   { opacity: 1;   transform: scale(1); }
}

/* ---------- controls ---------- */
.citrus-lb__btn {
  appearance: none;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  opacity: .75;
  transition: opacity .15s;
  padding: 0;
}
.citrus-lb__btn:hover,
.citrus-lb__btn:focus-visible { opacity: 1; }
.citrus-lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.citrus-lb__close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 16px;
  font-size: 34px;
  width: 48px;                /* real tap targets, not 36px of glyph */
  height: 48px;
  z-index: 2;
}
.citrus-lb__nav {
  flex: 0 0 auto;
  font-size: clamp(34px, 6vw, 64px);
  width: 56px;
  height: 72px;
}
.citrus-lb__download {
  position: absolute;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 22px;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 6px;
  backdrop-filter: blur(6px);
  transition: background .15s, border-color .15s;
}
.citrus-lb__download:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .6);
}
.citrus-lb__spinner {
  position: absolute;
  bottom: 76px;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border: 2px solid rgba(255, 255, 255, .2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: citrus-spin .7s linear infinite;
}
.citrus-lb__spinner[hidden] { display: none; }
@keyframes citrus-spin { to { transform: rotate(360deg); } }

body.citrus-lb-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* On phones the side arrows eat the photo — put them over the bottom corners. */
@media (max-width: 700px) {
  .citrus-lb { padding: 0; }
  .citrus-lb__nav {
    position: absolute;
    bottom: max(16px, env(safe-area-inset-bottom));
    height: 56px;
    opacity: .55;
  }
  .citrus-lb__prev { left: 4px; }
  .citrus-lb__next { right: 4px; }
  .citrus-lb__img  { max-height: 82dvh; }
  .citrus-lb__spinner { bottom: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .citrus-lb, .citrus-lb__img, .hover-gallery img, .wp-block-image img {
    transition: none !important;
    animation: none !important;
  }
}