/**
 * Photo Lightbox – Stylesheet
 *
 * @package  PhotoLightbox
 * @author   Paul Stavrides
 * @version  1.0.0
 *
 * ---------------------------------------------------------------------------
 * Table of contents
 * ---------------------------------------------------------------------------
 *  1. Thumbnail grid       (.plb-gallery, .plb-thumb-btn)
 *  2. Lightbox overlay     (#plb-overlay, #plb-overlay.plb-visible)
 *  3. Inner container      (#plb-container)
 *  4. Image wrapper        (#plb-img-wrap, img, img.plb-fade-out)
 *  5. Navigation arrows    (.plb-arrow, #plb-prev, #plb-next)
 *  6. Close button         (#plb-close)
 *  7. Caption              (#plb-caption, #plb-caption.plb-fade-out)
 *  8. Counter              (#plb-counter)
 *  9. Loading spinner      (#plb-spinner, @keyframes plb-spin)
 * 10. Body scroll lock     (body.plb-open)
 * 11. Responsive grid      (@media breakpoints)
 *
 * ---------------------------------------------------------------------------
 * CSS custom properties (set dynamically by photo-lightbox.js)
 * ---------------------------------------------------------------------------
 *   --plb-columns   Number of grid columns for the thumbnail gallery.
 *                   Set inline on each .plb-gallery element by PHP.
 *
 *   --plb-speed     Navigation crossfade duration (e.g. 300ms).
 *                   Applied to the <img> and caption opacity transitions.
 *                   Set on #plb-overlay inline by JS when the lightbox opens.
 *
 *   --plb-fade      Overlay fade-in/out duration (e.g. 400ms).
 *                   Applied to the #plb-overlay opacity transition.
 *                   Set on #plb-overlay inline by JS when the lightbox opens.
 * ---------------------------------------------------------------------------
 */

/* ============================================================
   1. Thumbnail grid
   ============================================================
   The grid uses CSS Grid with a column count driven by the
   --plb-columns custom property written by PHP.  Each thumbnail
   button maintains a 1:1 aspect ratio so the grid looks uniform
   regardless of the original image proportions.
   ============================================================ */

.plb-gallery {
    display: grid;
    grid-template-columns: repeat(var(--plb-columns, 3), 1fr);
    gap: 8px;
    width: 100%;
}

/**
 * The thumbnail wrapper is a <button> so it is natively keyboard-
 * focusable and can be activated with Enter/Space without extra JS.
 * overflow: hidden clips the zoom transform to the button boundary.
 */
.plb-thumb-btn {
    display: block;
    padding: 0;
    border: none;
    background: #000;           /* Visible behind transparent/portrait images. */
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 1 / 1;       /* Square cells regardless of image shape. */
    outline-offset: 3px;
}

/**
 * Thumbnail image fills the button cell via object-fit: cover,
 * cropping the image to fit rather than distorting it.
 * A subtle opacity reduction at rest makes hover/focus visible.
 */
.plb-thumb-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.92;
}

/** Zoom and brighten on hover/focus to indicate interactivity. */
.plb-thumb-btn:hover img,
.plb-thumb-btn:focus img {
    transform: scale(1.06);
    opacity: 1;
}

/* ============================================================
   2. Lightbox overlay
   ============================================================
   The overlay covers the entire viewport with a semi-opaque
   black background.  It starts invisible (opacity: 0) and with
   pointer-events: none so it does not intercept mouse events
   while hidden.  Adding .plb-visible reverses both properties.
   ============================================================ */

#plb-overlay {
    position: fixed;
    inset: 0;                       /* Shorthand for top/right/bottom/left: 0. */
    z-index: 99999;                 /* Above all normal page content. */
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;           /* Invisible to mouse/touch when closed. */
    transition: opacity var(--plb-fade, 400ms) ease;
}

/** Activated by JS; makes the overlay visible and interactive. */
#plb-overlay.plb-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
   3. Inner container
   ============================================================
   Centres the image, caption, and counter as a vertical stack.
   ============================================================ */

#plb-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 92vw;
    max-height: 92vh;
}

/* ============================================================
   4. Image wrapper
   ============================================================
   #plb-img-wrap positions the spinner absolutely over the image.
   The <img> is constrained to the viewport so it never overflows.
   The opacity transition is used for the crossfade between images
   (class .plb-fade-out drives opacity → 0; removing it restores → 1).
   ============================================================ */

#plb-img-wrap {
    position: relative;             /* Anchor for #plb-spinner. */
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 88vw;
    max-height: 80vh;               /* Reserve room below for caption and counter. */
}

#plb-img-wrap img {
    display: block;
    max-width: 88vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
    transition: opacity var(--plb-speed, 300ms) ease;
    object-fit: contain;            /* Never crop the full-size image. */
}

/**
 * Added by navigate() before swapping the image src; removed once the
 * new image has loaded, triggering the fade-back-in transition.
 */
#plb-img-wrap img.plb-fade-out {
    opacity: 0;
}

/* ============================================================
   5. Navigation arrows
   ============================================================
   Both arrows share .plb-arrow for layout and appearance.
   #plb-prev and #plb-next position them on the left and right
   sides of the viewport respectively.

   The left value for #plb-prev uses CSS max() to ensure the
   arrow stays 16 px from the viewport edge on narrow screens
   but is positioned outside the image area on wider screens.
   ============================================================ */

.plb-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);    /* Vertically centre relative to the viewport. */
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 1.6rem;
    width: 52px;
    height: 52px;
    border-radius: 50%;             /* Circular button. */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;                /* Above the overlay (99999) and close button. */
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    line-height: 1;
    padding: 0;
}

/** Brighten the arrow on hover/focus for clear affordance. */
.plb-arrow:hover,
.plb-arrow:focus {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-50%) scale(1.1);
    outline: none;
}

/** Slight press effect on click. */
.plb-arrow:active {
    transform: translateY(-50%) scale(0.96);
}

/**
 * On wide screens the arrows sit just outside the maximum image area
 * (min(44vw, 660px) mirrors the 88vw / 1320px max image width).
 * On narrow screens the arrows overlay the image edges (see @media below).
 */
#plb-prev {
    left: max(16px, calc(50% - min(44vw, 660px) - 64px));
}

#plb-next {
    right: max(16px, calc(50% - min(44vw, 660px) - 64px));
}

/** On narrow screens, arrows overlay the left/right image edges. */
@media (max-width: 700px) {
    #plb-prev { left: 8px; }
    #plb-next { right: 8px; }
    .plb-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

/* ============================================================
   6. Close button
   ============================================================
   Fixed in the top-right corner of the viewport.  Shares
   the same translucent white style as the navigation arrows.
   ============================================================ */

#plb-close {
    position: fixed;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 1.4rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    padding: 0;
    line-height: 1;
}

#plb-close:hover,
#plb-close:focus {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.1);
    outline: none;
}

/* ============================================================
   7. Caption
   ============================================================
   Displayed below the image.  The opacity transition matches the
   image crossfade so caption and image fade together during navigation.
   ============================================================ */

#plb-caption {
    color: #e0e0e0;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 12px;
    max-width: 88vw;
    min-height: 1.4em;             /* Prevents layout shift when caption is empty. */
    line-height: 1.4;
    font-family: inherit;
    letter-spacing: 0.02em;
    transition: opacity var(--plb-speed, 300ms) ease;
}

/** Fades out in sync with the image during navigation; added/removed by JS. */
#plb-caption.plb-fade-out {
    opacity: 0;
}

/* ============================================================
   8. Counter  (e.g. "3 / 12")
   ============================================================
   Subtle indicator below the caption showing the current position
   within the gallery.
   ============================================================ */

#plb-counter {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    margin-top: 6px;
    font-family: inherit;
}

/* ============================================================
   9. Loading spinner
   ============================================================
   Absolutely positioned over #plb-img-wrap.  Visible while the
   full-resolution image is being fetched over the network.
   The ::after pseudo-element is the actual spinning ring.
   ============================================================ */

#plb-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;           /* Never intercepts clicks. */
}

#plb-spinner::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.2);  /* Dim track. */
    border-top-color: #fff;                        /* Bright leading edge. */
    border-radius: 50%;
    animation: plb-spin 0.7s linear infinite;
}

@keyframes plb-spin {
    to { transform: rotate(360deg); }
}

/** Added by JS once the image finishes loading. */
#plb-spinner.plb-hidden {
    display: none;
}

/* ============================================================
  10. Body scroll lock
   ============================================================
   Prevents the page from scrolling behind the open lightbox.
   Added to <body> by openLightbox() and removed by closeLightbox().
   ============================================================ */

body.plb-open {
    overflow: hidden;
}

/* ============================================================
  11. Responsive grid breakpoints
   ============================================================
   Reduces the maximum column count at narrower viewports so
   thumbnails remain a usable size on small screens.

   The shortcode-specified column count is honoured up to the
   cap imposed by each breakpoint:
     >  900px  – up to whatever the author specified (max 6).
     ≤  900px  – capped at 3 columns.
     ≤  600px  – capped at 2 columns.
     ≤  380px  – forced to 1 column.
   ============================================================ */

@media (max-width: 900px) {
    .plb-gallery {
        grid-template-columns: repeat(min(var(--plb-columns, 3), 3), 1fr);
    }
}

@media (max-width: 600px) {
    .plb-gallery {
        grid-template-columns: repeat(min(var(--plb-columns, 3), 2), 1fr);
    }
}

@media (max-width: 380px) {
    .plb-gallery {
        grid-template-columns: 1fr;
    }
}