/* ============================================
   PHOTO GALLERY — SHARED BASE
   Loaded once per page (when ANY photo-gallery
   mode module is present) BEFORE the per-mode
   CSS. Contains the box model, grid base, item
   base, lazy-load reveal, FLIP animation, and the
   full lightbox (mode-agnostic). Runtime values
   come from CSS custom properties set inline by
   the shared renderer.
   ============================================ */

.photo-gallery {
    --gallery-thumb-width: 240px;
    --gallery-gap: 16px;
    --gallery-radius: 8px;
    box-sizing: border-box;
    width: 100%;
    padding: 1rem;
    border-radius: var(--gallery-radius);
}

.photo-gallery *,
.photo-gallery *::before,
.photo-gallery *::after {
    box-sizing: border-box;
}

/* ============================================
   GRID BASE (shared by all modes)
   ============================================ */

.photo-gallery__grid {
    display: grid;
    gap: var(--gallery-gap);
}

.photo-gallery__item {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--gallery-radius);
    background: rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.photo-gallery__item.is-hidden {
    display: none;
}

.photo-gallery__item-media {
    display: block;
    width: 100%;
    height: 100%;
}

.photo-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.08));

    opacity: 0;
    transition: opacity 0.4s ease;
}

.photo-gallery__img.is-loaded {
    opacity: 1;
}

/* ============================================
   FLIP ANIMATION (filter/sort reorder)
   ============================================ */

.photo-gallery__item.is-flipping {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}

/* ============================================
   LIGHTBOX
   ============================================ */

.pg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, var(--lb-backdrop-opacity, 0.92));
    opacity: 0;
    transition: opacity var(--lb-duration, 300ms) ease;
}

.pg-lightbox.is-open {
    opacity: 1;
}

.pg-lightbox__backdrop {
    position: absolute;
    inset: 0;
}

.pg-lightbox__stage {
    position: relative;
    max-width: 92vw;
    max-height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loading spinner shown while a full-size image is being fetched + decoded.
   Layered above the image so it stays visible even while the outgoing image
   is still on stage during a transition. Visible only while the lightbox
   carries the `is-loading` class. Driven by a class, never inline styles. */
.pg-lightbox__spinner {
    position: absolute;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: pg-lb-spin 0.7s linear infinite;
    opacity: 0;
    pointer-events: none;
}

.pg-lightbox.is-loading .pg-lightbox__spinner {
    opacity: 1;
}

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

@media (prefers-reduced-motion: reduce) {
    .pg-lightbox__spinner {
        animation: none;
        border-color: rgba(255, 255, 255, 0.5);
        border-top-color: rgba(255, 255, 255, 0.9);
    }
}

.pg-lightbox__img {
    max-width: 92vw;
    max-height: 86vh;
    object-fit: contain;
    border-radius: var(--lb-img-radius, 4px);
    transform: translateX(0) scale(1);
    transition: transform var(--lb-duration, 300ms) cubic-bezier(0.2, 0.8, 0.2, 1), opacity var(--lb-duration, 300ms) ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.pg-lightbox.is-panning .pg-lightbox__img {
    transition: none;
}

/* Image drop-shadow variants (data-lb-image-shadow on the gallery root). */
.photo-gallery[data-lb-image-shadow="none"] .pg-lightbox__img {
    box-shadow: none;
}

.photo-gallery[data-lb-image-shadow="strong"] .pg-lightbox__img {
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8);
}

.pg-lightbox__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 1rem 4rem;
    color: #fff;
    text-align: center;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.pg-lightbox.has-caption .pg-lightbox__caption {
    opacity: 1;
}

.pg-lightbox__counter {
    position: absolute;
    top: 1.25rem;
    left: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.pg-lightbox__close,
.pg-lightbox__prev,
.pg-lightbox__next {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pg-lightbox__icon {
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
}

.pg-lightbox__close:hover,
.pg-lightbox__prev:hover,
.pg-lightbox__next:hover {
    background: rgba(255, 255, 255, 0.25);
}

.pg-lightbox__close {
    top: 1.25rem;
    right: 1.5rem;
}

.pg-lightbox__close:hover {
    transform: rotate(90deg);
}

.pg-lightbox__prev {
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
}

.pg-lightbox__next {
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
}

.pg-lightbox__prev:hover {
    transform: translateY(-50%) scale(1.08);
}

.pg-lightbox__next:hover {
    transform: translateY(-50%) scale(1.08);
}

/* ============================================
   CONTROL STYLE VARIANTS (data-lb-control-style)
   ============================================ */

.photo-gallery[data-lb-control-style="minimal"] .pg-lightbox__prev {
    left: 0.25rem;
}

.photo-gallery[data-lb-control-style="minimal"] .pg-lightbox__next {
    right: 0.25rem;
}

.photo-gallery[data-lb-control-style="pill"] .pg-lightbox__close,
.photo-gallery[data-lb-control-style="pill"] .pg-lightbox__prev,
.photo-gallery[data-lb-control-style="pill"] .pg-lightbox__next {
    border-radius: 0.5rem;
}

/* ============================================
   CONTROL THEME (data-lb-control-theme)
   ============================================ */

.photo-gallery[data-lb-control-theme="light"] .pg-lightbox__close,
.photo-gallery[data-lb-control-theme="light"] .pg-lightbox__prev,
.photo-gallery[data-lb-control-theme="light"] .pg-lightbox__next {
    background: rgba(255, 255, 255, 0.85);
    color: #1a1a1a;
}

.photo-gallery[data-lb-control-theme="light"] .pg-lightbox__close:hover,
.photo-gallery[data-lb-control-theme="light"] .pg-lightbox__prev:hover,
.photo-gallery[data-lb-control-theme="light"] .pg-lightbox__next:hover {
    background: #fff;
}

.photo-gallery[data-lb-control-theme="auto"] .pg-lightbox__close,
.photo-gallery[data-lb-control-theme="auto"] .pg-lightbox__prev,
.photo-gallery[data-lb-control-theme="auto"] .pg-lightbox__next {
    background: rgba(255, 255, 255, 0.85);
    color: #1a1a1a;
}

.photo-gallery[data-lb-control-theme="auto"] .pg-lightbox__close:hover,
.photo-gallery[data-lb-control-theme="auto"] .pg-lightbox__prev:hover,
.photo-gallery[data-lb-control-theme="auto"] .pg-lightbox__next:hover {
    background: #fff;
}

html[data-bs-theme="dark"] .photo-gallery[data-lb-control-theme="auto"] .pg-lightbox__close,
html[data-bs-theme="dark"] .photo-gallery[data-lb-control-theme="auto"] .pg-lightbox__prev,
html[data-bs-theme="dark"] .photo-gallery[data-lb-control-theme="auto"] .pg-lightbox__next {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

html[data-bs-theme="dark"] .photo-gallery[data-lb-control-theme="auto"] .pg-lightbox__close:hover,
html[data-bs-theme="dark"] .photo-gallery[data-lb-control-theme="auto"] .pg-lightbox__prev:hover,
html[data-bs-theme="dark"] .photo-gallery[data-lb-control-theme="auto"] .pg-lightbox__next:hover {
    background: rgba(255, 255, 255, 0.36);
}

/* MINIMAL strips all button chrome regardless of theme. */
html .photo-gallery[data-lb-control-style="minimal"] .pg-lightbox__close,
html .photo-gallery[data-lb-control-style="minimal"] .pg-lightbox__prev,
html .photo-gallery[data-lb-control-style="minimal"] .pg-lightbox__next {
    width: 2.5rem;
    height: 2.5rem;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: rgba(255, 255, 255, 0.85);
}

html .photo-gallery[data-lb-control-style="minimal"] .pg-lightbox__close:hover,
html .photo-gallery[data-lb-control-style="minimal"] .pg-lightbox__prev:hover,
html .photo-gallery[data-lb-control-style="minimal"] .pg-lightbox__next:hover {
    background: transparent;
    color: #fff;
}

html[data-bs-theme="dark"] .photo-gallery[data-lb-control-style="minimal"] .pg-lightbox__close,
html[data-bs-theme="dark"] .photo-gallery[data-lb-control-style="minimal"] .pg-lightbox__prev,
html[data-bs-theme="dark"] .photo-gallery[data-lb-control-style="minimal"] .pg-lightbox__next {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: rgba(255, 255, 255, 0.85);
}

html[data-bs-theme="dark"] .photo-gallery[data-lb-control-style="minimal"] .pg-lightbox__close:hover,
html[data-bs-theme="dark"] .photo-gallery[data-lb-control-style="minimal"] .pg-lightbox__prev:hover,
html[data-bs-theme="dark"] .photo-gallery[data-lb-control-style="minimal"] .pg-lightbox__next:hover {
    background: transparent;
    color: #fff;
}

/* ============================================
   CAPTION POSITION VARIANTS (data-lb-caption-position)
   ============================================ */

.photo-gallery[data-lb-caption-position="bottom-bar"] .pg-lightbox__caption {
    background: rgba(0, 0, 0, 0.75);
    padding: 0.75rem 1.5rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.photo-gallery[data-lb-caption-position="top-overlay"] .pg-lightbox__caption {
    top: 0;
    bottom: auto;
    background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
}

.photo-gallery[data-lb-caption-position="top-bar"] .pg-lightbox__caption {
    top: 0;
    bottom: auto;
    background: rgba(0, 0, 0, 0.75);
    padding: 0.75rem 1.5rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ============================================
   RESPONSIVE (Bootstrap mobile breakpoint)
   ============================================ */

@media (max-width: 768px) {
    .pg-lightbox__caption {
        padding: 1rem 1.5rem;
    }

    .pg-lightbox__prev {
        left: 0.5rem;
    }

    .pg-lightbox__next {
        right: 0.5rem;
    }
}