/* ==========================================================================
   SCOPIONE — Ekko Lightbox overrides (shared)
   --------------------------------------------------------------------------
   Restyles Bootstrap-modal-based Ekko Lightbox with brand polish:
     - Removes the default white modal-content frame (transparent chrome)
     - Adds a soft rounded dark backdrop around the image itself
     - Restyles prev/next nav buttons as floating dark squares with white glyphs
     - Restyles close (X) button as light glyph with hover affordance
     - Darkens the modal backdrop + adds blur on desktop

   Enqueued alongside Ekko on every page that triggers the lightbox
   (functions.php:2425). Single source of truth — previously these rules lived
   only on homepage.css under a `body.home` prefix (1428-1572) and were ported
   to /testimonials/'s own stylesheet too. REVIEW-LIGHTBOX-1-fix-polish
   (May 2026) extracted them here so /about/ + /shop/ inherit the same polish
   without duplicating the rules into per-surface CSS files.

   Selectors deliberately omit any body-class prefix — they only match when
   `.ekko-lightbox` is in the DOM, which only happens during a lightbox open.
   No risk of leak to other UI.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Backdrop — darker overlay + desktop blur
   -------------------------------------------------------------------------- */

.modal-open .modal-backdrop.show {
    background: #000 !important;
    opacity: .92 !important;
}

@supports (backdrop-filter: blur(2px)) {
    @media (min-width: 768px) {
        .modal-open .modal-backdrop.show {
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
        }
    }
}


/* --------------------------------------------------------------------------
   Nav overlay (prev/next anchors)
   -------------------------------------------------------------------------- */

.ekko-lightbox .ekko-lightbox-nav-overlay a {
    opacity: 1 !important;
    background: transparent !important;
    cursor: pointer !important;
    padding: 0 14px !important;
    color: #fff !important;
    font-size: 30px !important;
    text-decoration: none !important;
}

.ekko-lightbox .ekko-lightbox-nav-overlay a > * {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
}

.ekko-lightbox .ekko-lightbox-nav-overlay a:first-child {
    justify-content: flex-start !important;
}

.ekko-lightbox .ekko-lightbox-nav-overlay a:last-child {
    justify-content: flex-end !important;
}


/* --------------------------------------------------------------------------
   Nav button styling — dark rounded square with subtle border + shadow
   -------------------------------------------------------------------------- */

.ekko-lightbox .ekko-lightbox-nav-overlay a span,
.ekko-lightbox .ekko-lightbox-nav-overlay a i,
.ekko-lightbox .ekko-lightbox-nav-overlay a svg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 8px !important;
    background: rgba(0,0,0,.55) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
    opacity: .55 !important;
    transform: scale(.98) !important;
    transition: opacity .15s ease, transform .15s ease !important;
}

.ekko-lightbox .ekko-lightbox-nav-overlay a:hover span,
.ekko-lightbox .ekko-lightbox-nav-overlay a:hover i,
.ekko-lightbox .ekko-lightbox-nav-overlay a:hover svg {
    opacity: 1 !important;
    transform: scale(1) !important;
}


/* --------------------------------------------------------------------------
   Square-arrow shine sweep on prev/next nav buttons (large-screen hover).
   Mirrors PDP design system's `.sc-gallery-prev/.sc-gallery-next` pattern
   (per `project_pdp_design_system.md` §"Square-arrow geometry") — diagonal
   white stripe sweeps across the 54×54 button on hover. The button glyph
   element (span/i/svg) gets `position: relative; overflow: hidden` so the
   shine clips to the rounded square bounds.
   REVIEW-POLISH-1 May 2026.
   -------------------------------------------------------------------------- */

.ekko-lightbox .ekko-lightbox-nav-overlay a span,
.ekko-lightbox .ekko-lightbox-nav-overlay a i,
.ekko-lightbox .ekko-lightbox-nav-overlay a svg {
    position: relative;
    overflow: hidden;
}

.ekko-lightbox .ekko-lightbox-nav-overlay a span::before,
.ekko-lightbox .ekko-lightbox-nav-overlay a i::before,
.ekko-lightbox .ekko-lightbox-nav-overlay a svg::before {
    content: "";
    position: absolute;
    top: -20%;
    left: 0;
    width: 40%;
    height: 140%;
    background: linear-gradient(115deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.55) 50%,
        rgba(255,255,255,0) 100%);
    transform: translateX(-150%) rotate(22deg);
    transition: transform 0.55s ease;
    pointer-events: none;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
    .ekko-lightbox .ekko-lightbox-nav-overlay a:hover span::before,
    .ekko-lightbox .ekko-lightbox-nav-overlay a:hover i::before,
    .ekko-lightbox .ekko-lightbox-nav-overlay a:hover svg::before {
        transform: translateX(300%) rotate(22deg);
    }
}


/* --------------------------------------------------------------------------
   Focus ring for nav (keyboard a11y)
   -------------------------------------------------------------------------- */

.ekko-lightbox .ekko-lightbox-nav-overlay a:focus-visible {
    outline: 2px solid rgba(255,190,61,.85);
    outline-offset: -2px;
}

.ekko-lightbox .ekko-lightbox-nav-overlay a:focus-visible span,
.ekko-lightbox .ekko-lightbox-nav-overlay a:focus-visible i,
.ekko-lightbox .ekko-lightbox-nav-overlay a:focus-visible svg {
    opacity: 1 !important;
    transform: scale(1) !important;
}


/* --------------------------------------------------------------------------
   Modal chrome — kill the white frame, add a rounded dark image container
   -------------------------------------------------------------------------- */

.ekko-lightbox .modal-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.ekko-lightbox .modal-body {
    padding: 0 !important;
}

.ekko-lightbox .ekko-lightbox-container {
    background: rgba(0,0,0,.35) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.55) !important;
}


/* --------------------------------------------------------------------------
   Close button — floating X top-right
   -------------------------------------------------------------------------- */

.ekko-lightbox .modal-header {
    border: 0 !important;
    padding: .5rem !important;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

.ekko-lightbox .modal-header .close {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.5) !important;
    opacity: .7 !important;
    font-size: 1.5rem;
    transition: opacity .15s ease;
}

.ekko-lightbox .modal-header .close:hover {
    opacity: 1 !important;
}

.ekko-lightbox .modal-header .close:focus-visible {
    outline: 2px solid rgba(255,190,61,.85);
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Reduced motion — disable transitions + backdrop blur
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ekko-lightbox .ekko-lightbox-nav-overlay a span,
    .ekko-lightbox .ekko-lightbox-nav-overlay a i,
    .ekko-lightbox .ekko-lightbox-nav-overlay a svg,
    .ekko-lightbox .modal-header .close {
        transition: none !important;
    }

    .modal-open .modal-backdrop.show {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}