/* =========================================================
   MENOUX LIGHTBOX — styles
   Standalone stylesheet. Load AFTER Bootstrap and main.css:
     <link rel="stylesheet" href="system/css/lightbox.css">
   Contains everything the lightbox needs; main.css stays
   completely unchanged.
   ========================================================= */

/* =========================================================
   MENOUX LIGHTBOX
   Fullscreen black carousel overlay.

   - Opens via the Fullscreen API, so (where supported) the
     browser chrome and OS chrome disappear, exactly like a
     video going fullscreen. Where the Fullscreen API is not
     available (notably iPhone Safari on arbitrary elements),
     the overlay is position:fixed inset:0 and still covers the
     whole page as a fallback.
   - Solid, fully opaque black background (#000).
   - Layout is a horizontal flex row: [‹ prev] [stage] [next ›]
     so the arrows sit in their own gutters and NEVER cover the
     media. The close X floats in the top-right corner.
   - Media is sized with object-fit:contain + max 100%, so an
     image / video is always shown as large as possible while
     remaining completely visible.
   - Slides can be image, video, or text. No dots / counters.
   Custom selectors are prefixed with "menoux-".
   ========================================================= */

/* ---------- Affordances on the in-page media ---------- */
.menoux-media-fullwidth,
.menoux-media-paddedwidth {
    position: relative;            /* anchor for the expand button */
}

.menoux-media-fullwidth img,
.menoux-media-paddedwidth img {
    cursor: zoom-in;               /* images open the lightbox on click */
}

/* Small "view fullscreen" button shown on video figures
   (videos keep their own inline controls, so they need an
   explicit way to open the carousel). */
.menoux-lightbox-expand {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: 0;
    border-radius: 4px;
    cursor: zoom-in;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.menoux-lightbox-expand:hover { background: rgba(0, 0, 0, 0.75); }

@media (hover: hover) and (pointer: fine) {
    .menoux-media-fullwidth:hover  .menoux-lightbox-expand,
    .menoux-media-paddedwidth:hover .menoux-lightbox-expand,
    .menoux-lightbox-expand:focus-visible { opacity: 1; }
}
@media (hover: none) {
    .menoux-lightbox-expand { opacity: 1; }   /* always visible on touch */
}

/* ---------- The overlay ---------- */
.menoux-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;                 /* -> block when .menoux-is-open */
    background: #000;              /* fully opaque black */
}
.menoux-lightbox.menoux-is-open { display: block; }

/* Keep the fullscreen surface and its backdrop pure black */
.menoux-lightbox:fullscreen { width: 100vw; height: 100vh; background: #000; }
.menoux-lightbox::backdrop   { background: #000; }

/* ---------- Stage (center column) ----------
   min-width:0 lets it shrink between the arrow gutters.
   Top padding keeps media clear of the close button. */
.menoux-lightbox-stage {
    position: absolute;
    inset: 0;                      /* fill the whole screen */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

/* Media always fully visible AND scaled up to fill the stage.
   The box fills the whole stage (width/height 100%), and
   object-fit:contain scales the image/video up or down to fit
   inside that box while preserving aspect ratio — so small
   images are enlarged instead of sitting tiny in the middle.
   (Enlarging a low-resolution image will soften it; that is
   inherent to upscaling.) */
.menoux-lightbox-stage img,
.menoux-lightbox-stage video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Text slide */
.menoux-lightbox-stage .menoux-lightbox-text {
    color: #fff;
    max-width: 40rem;
    max-height: 100%;
    overflow-y: auto;
    padding: 1rem;
    line-height: 1.6;
    text-align: left;
}

/* ---------- Prev / Next arrows ---------- */
.menoux-lightbox-nav {
    position: absolute;
    top: 25%;
    bottom: 25%;
    z-index: 3;                    /* float above the image */
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    /* stay legible over bright parts of an image */
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    -webkit-user-select: none;
    user-select: none;
    transition: opacity 0.15s ease;
}
.menoux-lightbox-prev { left: 0; }
.menoux-lightbox-next { right: 0; }
.menoux-lightbox-nav:hover,
.menoux-lightbox-nav:focus-visible { opacity: 1; outline: none; }

/* Single-slide galleries: hide the arrows entirely */
.menoux-lightbox.menoux-lightbox--single .menoux-lightbox-nav { display: none; }

/* ---------- Close (X) ---------- */
.menoux-lightbox-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    z-index: 4;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}
.menoux-lightbox-close:hover,
.menoux-lightbox-close:focus-visible { opacity: 1; outline: none; }
.menoux-lightbox-close svg {
    width: 1.75rem;
    height: 1.75rem;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.7));
}

/* ---------- Narrow screens ---------- */
@media (max-width: 767.98px) {
    .menoux-lightbox-nav { width: 3rem; font-size: 2rem; }
}