/*==============================
  Madhuraam Lightbox
  Self-contained image viewer with zoom / pan / gallery navigation.
  Loaded on every page via include/header.php.
==============================*/

/* The open state is deliberately opaque with no entrance animation.
   Fading in required either a requestAnimationFrame class flip or a keyframe
   starting at opacity 0; both are frame-driven, and whenever frames were
   throttled (occluded iframe, background tab, reduced-motion engines) the
   overlay stayed stuck at opacity 0 — open, interactive and invisible. Being
   visible the instant .is-open lands matters more than a 250ms fade.
   Closing may safely animate: if the animation never runs the node is removed
   250ms later regardless, so the worst case is that it vanishes instantly. */
.mlb {
    position: fixed;
    inset: 0;
    /* Above the slide-out side menu, which the theme also puts at 99999 — the
       viewer can be opened from the Recent Posts thumbnails inside it. */
    z-index: 100001;
    display: none;
    opacity: 1;
    -webkit-user-select: none;
    user-select: none;
}

/* Plain background on .mlb: the scroll lock now pads the body by the scrollbar
   width instead of reserving a gutter, so the viewport the overlay is fixed to
   really is the full window width and there is no strip left to cover. */
.mlb {
    background-color: rgba(1, 15, 28, 0.97);
}

.mlb.is-open {
    display: block;
}

.mlb.is-closing {
    animation: mlb-fade-out .25s ease forwards;
}

@keyframes mlb-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* The pane that holds the image. Overflow is hidden so a zoomed image is
   clipped to the viewport instead of growing the page. */
.mlb-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
    cursor: zoom-in;
    touch-action: none;
}

.mlb-stage.is-zoomed {
    cursor: grab;
}

.mlb-stage.is-grabbing {
    cursor: grabbing;
}

.mlb-img {
    max-width: 92vw;
    max-height: 82vh;
    display: block;
    border-radius: 6px;
    box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .8);
    transform-origin: center center;
    /* Panning must feel immediate, so the transition is only used for
       button/dblclick/keyboard zoom steps and removed while dragging. */
    transition: transform .22s ease;
    will-change: transform;
    -webkit-user-drag: none;
}

.mlb-stage.is-grabbing .mlb-img,
.mlb-stage.is-pinching .mlb-img {
    transition: none;
}

.mlb-img.is-loading {
    opacity: 0;
}

/*======= Spinner =======*/
.mlb-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 3px solid rgba(255, 255, 255, .22);
    border-top-color: #fff;
    border-radius: 50%;
    display: none;
    animation: mlb-spin .8s linear infinite;
}

.mlb.is-loading .mlb-spinner {
    display: block;
}

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

/*======= Toolbar =======*/
.mlb-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 14px 16px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

.mlb-counter {
    margin-right: auto;
    font-family: var(--body-font, inherit);
    font-size: 14px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .8);
}

.mlb-btn {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

.mlb-btn:hover,
.mlb-btn:focus-visible {
    color: #fff;
    border-color: transparent;
    background-color: var(--theme-color, #4d148c);
    outline: none;
}

.mlb-btn[disabled] {
    opacity: .35;
    cursor: default;
}

.mlb-btn[disabled]:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .18);
    background-color: rgba(255, 255, 255, .08);
}

.mlb-zoom-level {
    min-width: 52px;
    font-size: 13px;
    text-align: center;
    color: rgba(255, 255, 255, .8);
    font-variant-numeric: tabular-nums;
}

/*======= Prev / next =======*/
.mlb-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    display: grid;
    place-items: center;
    font-size: 17px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.mlb-nav:hover,
.mlb-nav:focus-visible {
    border-color: transparent;
    background-color: var(--theme-color, #4d148c);
    outline: none;
}

.mlb-prev {
    left: 18px;
}

.mlb-next {
    right: 18px;
}

.mlb.is-single .mlb-nav {
    display: none;
}

/*======= Caption =======*/
.mlb-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 34px 20px 20px;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    color: rgba(255, 255, 255, .88);
    background-image: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.mlb-caption:empty {
    display: none;
}

/*======= Hint =======*/
.mlb-hint {
    position: absolute;
    left: 50%;
    bottom: 74px;
    z-index: 3;
    transform: translateX(-50%);
    padding: 6px 14px;
    font-size: 12px;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .7);
    border-radius: 20px;
    background-color: rgba(0, 0, 0, .45);
    pointer-events: none;
    opacity: 1;
    transition: opacity .4s ease;
}

.mlb-hint.is-hidden {
    opacity: 0;
}

/*======= Thumbnail affordance on the page =======*/
/* Any image the lightbox has claimed gets a pointer + a subtle zoom cue. */
.mlb-zoomable {
    cursor: zoom-in;
}

@media (max-width: 767px) {
    .mlb-img {
        max-width: 96vw;
        max-height: 76vh;
    }

    .mlb-toolbar {
        padding: 10px;
        gap: 4px;
    }

    .mlb-btn {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .mlb-counter {
        font-size: 13px;
    }

    /* The zoom buttons stay on touch screens — pinching works, but the buttons
       are the discoverable control. Only the percentage readout and the reset
       button are dropped, to keep the bar from wrapping on narrow screens
       (double tap already resets the zoom). */
    .mlb-zoom-level,
    .mlb-btn.mlb-reset {
        display: none;
    }

    .mlb-nav {
        width: 42px;
        height: 42px;
        margin-top: -21px;
        font-size: 15px;
    }

    .mlb-prev {
        left: 8px;
    }

    .mlb-next {
        right: 8px;
    }

    .mlb-caption {
        font-size: 14px;
        padding: 30px 14px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .mlb.is-closing {
        animation-duration: .01ms;
    }

    .mlb-img {
        transition: none;
    }
}