/* ==========================================================================
   Atlas of Wales — gallery lightbox (shared component)

   Extracted verbatim from the canonical place-guide implementation
   (pages/locations/anglesey/place-guide/llanddwyn-island.html) so a page can
   reuse it by loading this file plus assets/gallery-lightbox.js, instead of
   inlining a fourth or fifth copy. Behaviour, class names and visual treatment
   are unchanged from the canonical version.

   The place-guide pages still carry their own inline copies; they are
   untouched. This file is the reuse path for new/piloted pages.

   Supported gallery structures (see the .js for details):
     - canonical place-guide:  .gallery-item > img + figcaption
     - mountain-trail:         .shot        > .shot__img + .shot__cap
   ========================================================================== */

/* --- Trigger overlay: makes each gallery cell clickable and focusable ----- */
.gallery-item__trigger {
    position: absolute;
    inset: 0;
    z-index: 2;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    cursor: zoom-in;
    padding: 0;
}

.gallery-item__trigger:focus-visible {
    outline: 2px solid rgba(228, 196, 122, 0.8);
    outline-offset: -2px;
}

/* Mountain-trail `.shot` tiles stack their own layers: image at z-index -1,
   glyph at 0, caption at 1, all inside `isolation: isolate`. The trigger sits
   at z-index 2, so lift the caption above it to keep it legible.

   `pointer-events: none` is the load-bearing half of this rule. The canonical
   place-guide also puts its figcaption above the trigger, but there the caption
   is a thin overlay strip; a mountain `.shot` is a flex column ending in the
   caption, which occupies ~40–52% of the tile. Leaving it hit-testable made the
   whole lower half of every tile dead to clicks — the image looked clickable at
   the top and did nothing at the bottom. The caption carries no interactive
   content on any mountain page (verified across all nine), so letting clicks
   fall through to the trigger costs nothing and makes the entire tile openable.
   If a caption ever needs a link, give that element `pointer-events: auto`. */
.shot:has(.gallery-item__trigger) .shot__cap {
    z-index: 3;
    pointer-events: none;
}

/* Belt and braces: a decorative glyph must never eat a click either. */
.shot:has(.gallery-item__trigger) .shot__glyph { pointer-events: none; }

/* Hover / focus affordance on mountain-trail tiles. The canonical place-guide
   scales its own `.gallery-item img`; `.shot__img` is an absolutely-positioned
   background layer, so scale that instead for the same effect. */
.shot__img { transition: transform 0.5s ease; }
.shot:hover .shot__img,
.shot:focus-within .shot__img { transform: scale(1.03); }

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(8, 18, 14, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.lightbox__close {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(30, 50, 40, 0.7);
    border: 1px solid rgba(228, 196, 122, 0.36);
    border-radius: 50%;
    color: rgba(250, 241, 218, 0.9);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.lightbox__close:hover {
    border-color: rgba(228, 196, 122, 0.8);
    background: rgba(30, 50, 40, 0.95);
}

.lightbox__close:focus-visible {
    border-color: rgba(228, 196, 122, 0.8);
    background: rgba(30, 50, 40, 0.95);
    outline: none;
    box-shadow: 0 0 0 3px rgba(228, 196, 122, 0.4);
}

.lightbox__figure {
    position: relative;
    max-width: min(90vw, 1200px);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border: 1px solid rgba(228, 196, 122, 0.18);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.lightbox__caption {
    margin: 14px 0 0;
    padding: 0 8px;
    color: rgba(250, 241, 218, 0.82);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
    font-style: italic;
    text-align: center;
    line-height: 1.4;
}

/* A structured caption (mountain-trail subject + description) keeps the
   subject prominent and the description quiet, on one centred stack. */
.lightbox__caption b {
    display: block;
    font-style: normal;
    font-weight: 600;
    color: rgba(250, 241, 218, 0.94);
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(30, 50, 40, 0.7);
    border: 1px solid rgba(228, 196, 122, 0.36);
    border-radius: 50%;
    color: rgba(250, 241, 218, 0.9);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.lightbox__nav:hover,
.lightbox__nav:focus-visible {
    border-color: rgba(228, 196, 122, 0.8);
    background: rgba(30, 50, 40, 0.95);
    outline: none;
}

.lightbox__nav:focus-visible {
    box-shadow: 0 0 0 3px rgba(228, 196, 122, 0.4);
}

.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 760px) {
    .lightbox { padding: 16px; }
    .lightbox__close { top: 12px; right: 12px; }
    .lightbox__img { max-height: 66vh; }
    .lightbox__caption { font-size: 0.86rem; }
    /* Keep the arrows clear of the image edge on a narrow screen and inside
       any safe-area inset, so both stay reachable at 390px and 320px. */
    .lightbox__prev { left: max(6px, env(safe-area-inset-left, 0px)); }
    .lightbox__next { right: max(6px, env(safe-area-inset-right, 0px)); }
}

@media (max-width: 380px) {
    .lightbox { padding: 10px; }
    .lightbox__img { max-height: 58vh; }
    .lightbox__close,
    .lightbox__nav { width: 40px; height: 40px; }
    /* The figure already sits inside the dialog's own padding, so 90vw just
       wastes width here — use all of it, which matters most for a panorama. */
    .lightbox__figure { max-width: 100%; }
    /* An ultra-wide image is only ~70px tall at this width (a 4:1 panorama
       cannot be larger without cropping or distorting it), so keep the caption
       compact enough that it does not dominate the view. All caption text is
       preserved — this tightens type, it never truncates. */
    .lightbox__caption {
        margin-top: 10px;
        font-size: 0.8rem;
        line-height: 1.32;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox,
    .lightbox__close,
    .lightbox__nav { transition: none; }
    .shot__img { transition: none; }
    .shot:hover .shot__img,
    .shot:focus-within .shot__img { transform: none; }
}