/*
  Site look for the GLightbox photo viewer (album pages, story media).

  GLightbox's own stylesheet, assets/css/glightbox.min.css (v3.3.1, matching
  assets/js/glightbox.min.js), is loaded first and must stay. It decides
  which slide is visible and holds the open/close/slide animations the
  script waits for. Without it, clicking a photo showed the next one,
  "previous" did nothing, and the close button never closed.

  Only colours and borders are changed here. Positions and visibility are
  left to GLightbox.
*/

.glightbox-clean .gslide-description {
    background: #111;
}

.glightbox-clean .gslide-title {
    color: var(--color-primary-red, #d2232a);
    font-family: var(--font-heading, sans-serif);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.glightbox-clean .gslide-desc {
    color: #ccc;
    font-size: 0.86em;
    margin-bottom: 0;
}

.glightbox-clean .gprev,
.glightbox-clean .gnext,
.glightbox-clean .gclose {
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    transition: background-color 0.2s, border-color 0.2s;
}

.glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gclose:hover,
.glightbox-clean .gprev:focus-visible,
.glightbox-clean .gnext:focus-visible,
.glightbox-clean .gclose:focus-visible {
    background-color: var(--color-primary-red, #d2232a);
    border-color: #fff;
}

.glightbox-clean .gprev path,
.glightbox-clean .gnext path,
.glightbox-clean .gclose path {
    fill: #fff;
}

/* Phones: GLightbox's stock skin moves ←/→ off screen and relies on
   swiping. Keep the buttons visible (swiping still works). */
@media (max-width: 768px) {
    .glightbox-clean .gprev,
    .glightbox-clean .gnext {
        top: 50%;
        transform: translateY(-50%);
    }
}