/* ═════════════════════════════════════════════════════════════════════════
   PHOTO VIEWER (GLightbox) — 2026-08-20

   GLightbox ships a light "clean" skin that looks nothing like this site, so
   this file is the ONE place the viewer is styled. It used to live inside
   theme.css, which was the wrong home: theme.css is loaded on every page and
   the viewer only exists on the ~23 pages that load GLightbox, and splitting
   viewer rules across two files is exactly how a later fix ends up silently
   outranked by a forgotten !important.

   The viewer is DARK IN BOTH THEMES, which is what a photo viewer should be:
   the photo is the subject and the room around it gets out of the way. Only
   the accent follows the theme (teal in light, blue in dark), matching the
   rest of the site.

   Loaded only inside the eco_page_needs('glightbox') block in the 3 headers.
   ═════════════════════════════════════════════════════════════════════════ */

.glightbox-container{
  --lb-ink:    #070d13;
  --lb-glass:  rgba(255,255,255,.07);
  --lb-edge:   rgba(255,255,255,.15);
  --lb-text:   #eef4fb;
  --lb-mute:   #9db0c2;
  --lb-accent: #13c2a8;                 /* light theme */
  --lb-accent-soft: rgba(19,194,168,.5);
}
html[data-theme="dark"] .glightbox-container{
  --lb-accent: #56a8ff;                 /* dark theme is blue, never teal */
  --lb-accent-soft: rgba(86,168,255,.5);
}

/* ── The room ─────────────────────────────────────────────────────────── */
.goverlay{
  background:radial-gradient(135% 125% at 50% 0%, rgba(22,38,56,.94), rgba(6,11,17,.985))!important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.gslide-image img,
.glightbox-clean .gslide-image img{
  border-radius:14px!important;
  box-shadow:0 34px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07)!important;
}

/* ── Caption: a narrow panel, not a full-width slab ───────────────────────
   Long captions used to run the entire width of a 1920px screen, which reads
   as a banner rather than a caption. A 62ch measure keeps it readable and
   keeps the eye on the photo. */
.glightbox-clean .gslide-description{
  background:rgba(10,18,26,.82)!important;
  border:1px solid var(--lb-edge)!important;
  border-radius:13px!important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  margin:14px auto 0!important;
  max-width:62ch!important;
  box-shadow:0 18px 44px rgba(0,0,0,.45)!important;
  text-align:center;
}
.glightbox-clean .gdesc-inner{ padding:13px 20px!important; }
.glightbox-clean .gslide-title{
  font-family:'Inter','Open Sans',system-ui,sans-serif!important;
  font-weight:600!important; font-size:1rem!important; color:var(--lb-text)!important;
  letter-spacing:.005em; margin:0!important; line-height:1.4;
}
.glightbox-clean .gslide-desc{
  font-family:'Open Sans',system-ui,sans-serif!important;
  font-size:.88rem!important; color:var(--lb-mute)!important; line-height:1.6;
}
.glightbox-clean .gslide-desc a{ color:var(--lb-accent)!important; }
/* mobile skin keeps its own gradient scrim; only the text needs theming */
.glightbox-mobile .glightbox-container .gslide-title{
  font-family:'Inter','Open Sans',system-ui,sans-serif!important;font-weight:600!important;color:#eef4fb!important}
.glightbox-mobile .glightbox-container .gslide-desc{ color:#b7c6d5!important; }

/* ── Controls ─────────────────────────────────────────────────────────── */
.glightbox-clean .gprev,
.glightbox-clean .gnext,
.glightbox-clean .gclose{
  background:var(--lb-glass)!important;
  border:1px solid var(--lb-edge)!important;
  border-radius:50%!important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.4)!important;
  transition:background .2s ease, transform .2s ease, border-color .2s ease, opacity .2s ease;
  opacity:.86;
}
.glightbox-clean .gclose{ width:44px!important; height:44px!important; top:16px!important; right:18px!important; }
.glightbox-clean .gprev,
.glightbox-clean .gnext{ width:50px!important; height:50px!important; }
.glightbox-clean .gprev svg,.glightbox-clean .gnext svg,.glightbox-clean .gclose svg{ width:19px!important; }
.glightbox-clean .gprev path,.glightbox-clean .gnext path,.glightbox-clean .gclose path{ fill:var(--lb-text)!important; }
.glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gclose:hover{
  opacity:1;
  transform:translateY(-2px)!important;
  background:rgba(255,255,255,.14)!important;
  border-color:var(--lb-accent-soft)!important;
}
/* Keyboard users get the same affordance mouse users get on hover. */
.glightbox-clean .gbtn:focus-visible{
  outline:2px solid var(--lb-accent)!important; outline-offset:3px; opacity:1;
}

/* ═════════════════════════════════════════════════════════════════════════
   THE METER — "where am I, in what"

   The one deliberate flourish. It answers two questions the old viewer never
   did: how many photos are in the set I am looking at, and how far through it
   am I. The set is whatever the visitor filtered to, so on /gallery/ with
   "Junior Camp › Welcome Party" chosen it counts THOSE photos, not all 268.

   A rail rather than a row of dots, on purpose: the gallery can hold hundreds
   of photos and a dot per photo would be an unreadable strip (the same reason
   the sliders use dynamic bullets).
   ═════════════════════════════════════════════════════════════════════════ */
.eco-lb-meter{
  position:absolute; top:16px; left:18px; z-index:1200;
  display:flex; flex-direction:column; gap:.34rem;
  min-width:132px; max-width:46vw;
  padding:.55rem .78rem .6rem;
  background:var(--lb-glass);
  border:1px solid var(--lb-edge);
  border-radius:13px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.38);
  pointer-events:none;                 /* never steals a click from the photo */
}

/* What the visitor filtered to. Only rendered when the page can name the set;
   an unlabelled counter is better than a wrong or meaningless label. */
.eco-lb-scope{
  font-family:'Open Sans',system-ui,sans-serif;
  font-size:.63rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lb-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.eco-lb-count{
  font-family:'Inter','Open Sans',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;   /* digits keep their column while arrowing */
  font-size:1.02rem; line-height:1; color:var(--lb-mute); display:flex; align-items:baseline;
}
.eco-lb-cur{ font-weight:600; color:var(--lb-accent); font-size:1.16rem; }
.eco-lb-count i{ font-style:normal; opacity:.45; margin:0 .34em; }
.eco-lb-rail{
  display:block; height:2px; border-radius:2px;
  background:rgba(255,255,255,.16); overflow:hidden;
}
.eco-lb-fill{
  display:block; height:100%; width:0; border-radius:2px;
  background:var(--lb-accent);
  transition:width .28s cubic-bezier(.4,0,.2,1);
}

@media (max-width:600px){
  .eco-lb-meter{ top:10px; left:10px; min-width:0; max-width:58vw; padding:.45rem .62rem .5rem; }
  .eco-lb-scope{ font-size:.58rem; }
  .eco-lb-count{ font-size:.92rem; }
  .eco-lb-cur{ font-size:1.04rem; }
  .glightbox-clean .gclose{ top:10px!important; right:10px!important; }
}

@media (prefers-reduced-motion:reduce){
  .eco-lb-fill{ transition:none; }
  .glightbox-clean .gprev,
  .glightbox-clean .gnext,
  .glightbox-clean .gclose{ transition:none; }
  .glightbox-clean .gprev:hover,
  .glightbox-clean .gnext:hover,
  .glightbox-clean .gclose:hover{ transform:none!important; }
}