/* Shared photo lightbox (gallery + motorcycle detail pages).
   Markup: layout/lightbox.html, behaviour: js/lightbox.js */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    overflow: hidden;
    /* Pinch and drag are handled in JS, not by the browser */
    touch-action: none;
}
.lightbox.is-open {
    display: flex;
}

.lightbox__img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100vw - 160px);
    max-height: 100vh;
    padding: 3rem 0;
}

.lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 6rem);
    object-fit: contain;
    border-radius: var(--radius);
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}
/* Zoom: the photo itself is scaled/panned via the `scale` and `translate`
   properties (set in lightbox.js), leaving `transform` free for GSAP. */
.lightbox__img {
    cursor: zoom-in;
    transition: scale 0.28s ease, translate 0.28s ease;
}
.lightbox.is-zoomed .lightbox__img { cursor: grab; }
.lightbox.is-zoomed.is-dragging .lightbox__img { cursor: grabbing; }
/* Follow the pointer/fingers directly while dragging, pinching or scrolling */
.lightbox.is-dragging .lightbox__img { transition: none; }

/* Bare chevrons, matching the close X */
.lightbox__arrow {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    background: none;
    border: none;
    color: #fff;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition);
}
.lightbox__arrow svg { width: 2.5rem; height: 2.5rem; }
.lightbox__arrow:hover,
.lightbox__arrow:focus-visible { color: var(--accent-primary); }

/* Bare X, no ring: just the glyph, turning accent on hover */
.lightbox__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 2;
    background: none;
    border: none;
    padding: 0;
    color: #fff;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition);
}
.lightbox__close svg { width: 1.6rem; height: 1.6rem; }
.lightbox__close:hover,
.lightbox__close:focus-visible { color: var(--accent-primary); }

.lightbox__counter {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

/* One-off hint shown briefly the first time the lightbox opens */
.lightbox__hint {
    position: absolute;
    top: 1.6rem;
    left: 50%;
    transform: translate(-50%, -6px);
    padding: 0.35rem 0.85rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius);
    background: rgba(0,0,0,0.55);
    color: rgba(255,255,255,0.8);
    font-family: 'Barlow Condensed', var(--font-heading);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.lightbox__hint.is-visible { opacity: 1; transform: translate(-50%, 0); }
.lightbox__hint--touch { display: none; }
@media (hover: none) {
    .lightbox__hint--mouse { display: none; }
    .lightbox__hint--touch { display: inline; }
}

@media (max-width: 600px) {
    .lightbox__img-wrap { max-width: calc(100vw - 80px); }
    .lightbox__arrow { padding: 0.25rem; }
    .lightbox__arrow svg { width: 1.75rem; height: 1.75rem; }
    .lightbox__hint { top: auto; bottom: 3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox__img { transition: none; }
}