/**
 * ODX Media Lightbox — stile della gallery "shadowbox" (variante filmstrip).
 * Usa i design token --odex-* del tema: l'accent segue il brand (parent/child).
 * Vedi assets/js/media-lightbox.js e includes/composer/ui/ui_media_grid.php.
 */

/* ---- Griglia: affordance quando la gallery è attiva sul device ---- */
html.odx-lb-lock { overflow: hidden; }
.odx-lb-active [data-odx-lb-item] { cursor: zoom-in; }
.odx-lb-active [data-odx-lb-item]:focus-visible { outline: 3px solid var(--odex-accent); outline-offset: 3px; }
/* Sul video in griglia, in modalità gallery il player è solo un'anteprima:
   il clic apre il lightbox, quindi nascondo il bottone audio per evitare ambiguità. */
.odx-lb-active .odx-video-wrap[data-odx-lb-item] .odx-video-mute-btn { display: none; }

/* ---- Overlay ---- */
.odx-lb {
    position: fixed; inset: 0; z-index: 99999;
    display: none; opacity: 0; transition: opacity .28s ease;
    --odx-lb-ink: #fff;
    --odx-lb-muted: rgba(255,255,255,.62);
    --odx-lb-line: rgba(255,255,255,.16);
}
.odx-lb.is-open { display: block; opacity: 1; }
.odx-lb__backdrop { position: absolute; inset: 0; background: #0b0b0d; }
.odx-lb__frame {
    position: absolute; inset: 0;
    display: grid; grid-template-rows: auto 1fr auto;
    padding: 16px clamp(12px, 4vw, 56px);
}

/* Bar */
/* display:flex e justify-content:space-between arrivano dalle utility Tailwind
   `flex justify-between` sul markup (vedi buildOverlay in media-lightbox.js). */
.odx-lb__bar { grid-row: 1; align-items: center; gap: 16px; height: 50px; z-index: 3; }
.odx-lb__counter { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
    color: var(--odx-lb-muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.odx-lb__counter b { color: var(--odx-lb-ink); font-weight: 600; }
.odx-lb__title { flex: 1; text-align: center; font-size: 14px; font-weight: 600; letter-spacing: -.01em;
    color: var(--odx-lb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odx-lb__close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--odx-lb-line);
    background: rgba(255,255,255,.05); color: var(--odx-lb-ink); cursor: pointer; display: grid; place-items: center;
    transition: background .2s, border-color .2s, transform .2s, color .2s; }
.odx-lb__close:hover { background: var(--odex-accent); border-color: var(--odex-accent); color: var(--odex-accent-contrast); transform: rotate(90deg); }
.odx-lb__close svg { width: 19px; height: 19px; }

/* Stage / figure */
.odx-lb__stage { grid-row: 2; position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 0; touch-action: pan-y; user-select: none; }
.odx-lb__figure { margin: 0; position: relative; display: flex; align-items: center; justify-content: center;
    will-change: transform, opacity; transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .24s ease; }
.odx-lb__img { display: block; width: auto; height: auto; max-width: 92vw; max-height: 66vh;
    object-fit: contain; border-radius: 6px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
    -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.odx-lb__figure.is-swap { opacity: 0; }
.odx-lb__figure.slide-l { transform: translateX(30px); }
.odx-lb__figure.slide-r { transform: translateX(-30px); }

/* Video: poster + play → embed */
.odx-lb__play { position: absolute; inset: 0; margin: auto; width: 82px; height: 82px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
    color: var(--odx-lb-ink); cursor: pointer; display: grid; place-items: center;
    transition: transform .2s, background .2s, color .2s; }
.odx-lb__play:hover { background: var(--odex-accent); color: var(--odex-accent-contrast); transform: scale(1.06); }
.odx-lb__play[hidden] { display: none; }
.odx-lb__play svg { width: 32px; height: 32px; margin-left: 4px; }
.odx-lb__embed { position: relative; width: min(92vw, calc(66vh * 16 / 9)); max-height: 66vh; aspect-ratio: 16 / 9;
    background: #000; border-radius: 6px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); }
.odx-lb__embed[hidden] { display: none; }
.odx-lb__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Nav */
.odx-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 54px; height: 54px;
    border-radius: 50%; border: 1px solid var(--odx-lb-line); background: rgba(0,0,0,.42); backdrop-filter: blur(8px);
    color: var(--odx-lb-ink); cursor: pointer; display: grid; place-items: center;
    transition: background .2s, border-color .2s, color .2s, transform .18s; }
.odx-lb__nav:hover { background: var(--odex-accent); border-color: var(--odex-accent); color: var(--odex-accent-contrast); }
.odx-lb__nav:active { transform: translateY(-50%) scale(.92); }
.odx-lb__nav svg { width: 24px; height: 24px; }
.odx-lb__prev { left: clamp(6px, 3vw, 24px); }
.odx-lb__next { right: clamp(6px, 3vw, 24px); }

/* Filmstrip */
.odx-lb__footer { grid-row: 3; min-height: 88px; display: flex; align-items: center; justify-content: center; z-index: 3; }
.odx-lb__strip { display: flex; gap: 10px; align-items: center; max-width: 100%; overflow-x: auto;
    padding: 8px 4px 12px; scrollbar-width: thin; scroll-behavior: smooth; }
.odx-lb__strip::-webkit-scrollbar { height: 6px; }
.odx-lb__strip::-webkit-scrollbar-thumb { background: var(--odx-lb-line); border-radius: 3px; }
.odx-lb__thumb { position: relative; flex: 0 0 auto; height: 64px; border-radius: 7px; overflow: hidden; border: 0;
    padding: 0; cursor: pointer; opacity: .5; filter: saturate(.85); background: #0c0c0e;
    transition: opacity .2s, box-shadow .2s, transform .2s; }
.odx-lb__thumb img { height: 100%; width: auto; display: block; }
.odx-lb__thumbph { display: block; width: 96px; height: 100%; background: #17171a; }
.odx-lb__thumbplay { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,.55); display: grid; place-items: center; }
.odx-lb__thumbplay svg { width: 10px; height: 10px; margin-left: 1px; color: #fff; }
.odx-lb__thumb:hover { opacity: .85; }
.odx-lb__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--odex-accent); transform: translateY(-3px); }

/* Filmstrip nascosta (campo "Rimuovi anteprima miniature su"): il footer sparisce
   e il media guadagna altezza. La navigazione resta con frecce/swipe/tastiera. */
.odx-lb--nostrip .odx-lb__footer { display: none; }
.odx-lb--nostrip .odx-lb__img { max-height: 82vh; }
.odx-lb--nostrip .odx-lb__embed { max-height: 82vh; width: min(92vw, calc(82vh * 16 / 9)); }

@media (max-width: 767px) {
    .odx-lb__img { max-height: 58vh; }
    .odx-lb__embed { max-height: 58vh; width: min(92vw, calc(58vh * 16 / 9)); }
    .odx-lb__nav { width: 46px; height: 46px; }
    .odx-lb__footer { min-height: 76px; }
    .odx-lb__thumb { height: 54px; }
    .odx-lb--nostrip .odx-lb__img { max-height: 74vh; }
    .odx-lb--nostrip .odx-lb__embed { max-height: 74vh; width: min(92vw, calc(74vh * 16 / 9)); }
}

@media (prefers-reduced-motion: reduce) {
    .odx-lb, .odx-lb__figure, .odx-lb__nav, .odx-lb__close, .odx-lb__thumb, .odx-lb__play { transition: none; }
    .odx-lb__strip { scroll-behavior: auto; }
}