/* ============================================================================
   Gridscape lightbox skin: GLightbox themed to the site's ink / glass palette.
   Loaded after vendor/glightbox/glightbox.min.css so these overrides win.
   Tokens come from :root in site.css.
   ========================================================================= */

/* Backdrop: deep ink with a faint amber dawn, echoing the page atmosphere. */
.goverlay {
  background:
    radial-gradient(125% 85% at 50% -10%, rgba(230, 162, 60, 0.1), transparent 60%),
    rgba(6, 4, 10, 0.95);
}

/* Media frame: match the site's screenshot framing (rounded, glowing edge). */
.glightbox-clean .gslide-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-glow);
}
.glightbox-clean .gslide-image img { border-radius: inherit; }

/* Caption panel: dark glass instead of the default white card. */
.glightbox-clean .gslide-description {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(125%);
          backdrop-filter: blur(var(--glass-blur)) saturate(125%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
}
.glightbox-clean .gslide-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 0.4rem;
}
.glightbox-clean .gslide-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--paper-dim);
}
.glightbox-clean .gslide-desc a { color: var(--accent-bright); }

/* Controls: glass buttons that warm to amber on hover and focus. */
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background-color: var(--glass-strong);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-sm);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
  background-color: rgba(230, 162, 60, 0.18);
  border-color: var(--accent-bright);
}
.glightbox-clean .gclose svg path,
.glightbox-clean .gnext svg path,
.glightbox-clean .gprev svg path { fill: var(--paper); }
.gclose .garrow, .gnext .garrow, .gprev .garrow { stroke: var(--paper); }
.gbtn.focused { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* Spinner in the app accent. */
.gloader { border-color: var(--accent-bright); border-right-color: transparent; }

/* Video slides sit on ink rather than flat black, matching the media frame. */
.glightbox-clean .gslide-video { background: var(--ink-1); }