/*
 * Site — lightbox component styles.
 *
 * Loaded on pages where lightbox.js may be triggered:
 *   – front-page (hero carousel poster click)
 *   – single-project (gallery + trailer + posters)
 *   – single (news article gallery + cover)
 *
 * Enqueued conditionally as `site-lightbox` in theme/inc/60-enqueue.php,
 * dependent on `site-global` so tokens (--bg, --ink, --accent) cascade
 * correctly.
 */


/* ════════════════════════════════════════════════════════════════════
   1. ─── Base stage / frame
   ════════════════════════════════════════════════════════════════════ */
.mv-lb {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 14, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none;
  transition: opacity .28s cubic-bezier(.2,.7,.2,1);
}
.mv-lb.is-open { opacity: 1; pointer-events: auto; }
.mv-lb-stage {
  position: relative;
  width: min(86vw, 1400px);
  aspect-ratio: 16/9;
  transform: scale(0.96);
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
.mv-lb.is-open .mv-lb-stage { transform: scale(1); }
.mv-lb-frame {
  position: absolute; inset: 0; overflow: hidden; border-radius: 10px;
  background: linear-gradient(135deg, var(--lb-g1, oklch(0.30 0.08 305)) 0%, var(--lb-g2, oklch(0.15 0.04 280)) 100%);
  box-shadow: 0 30px 80px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
}
.mv-lb-frame::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(60% 50% at 35% 35%, rgba(255,255,255,0.08), transparent 70%);
}
.mv-lb-frame > img,
.mv-lb-frame > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; background: #000;
}
.mv-lb-frame .mv-lb-ph {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,0.35); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
}
.mv-lb-meta {
  position: absolute; left: 0; right: 0; bottom: -36px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: rgba(255,255,255,0.55); letter-spacing: 0.02em;
  pointer-events: none;
}
.mv-lb-meta .credit { color: rgba(255,255,255,0.65); }
.mv-lb-meta .counter { font-family: var(--mono, monospace); letter-spacing: 0.08em; }
.mv-lb-close {
  position: absolute; top: 24px; right: 28px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  transition: background .18s, transform .18s;
}
.mv-lb-close:hover { background: rgba(255,255,255,0.16); transform: rotate(90deg); }
.mv-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.9); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  transition: background .18s, transform .18s;
}
.mv-lb-nav:hover { background: rgba(255,255,255,0.16); }
.mv-lb-nav.prev { left: 24px; }
.mv-lb-nav.next { right: 24px; }
.mv-lb-nav:disabled { opacity: 0.25; cursor: default; }
.mv-lb-nav:disabled:hover { background: rgba(255,255,255,0.06); }


/* ════════════════════════════════════════════════════════════════════
   2. ─── Adaptive sizing
        When the lightbox carries a real <img> or <video>, the stage
        drops its fixed 16:9 frame so portrait / square media display
        at their natural aspect ratio with no black side bars.
        Placeholder mode (no src) keeps the original 16:9 gradient frame.
   ════════════════════════════════════════════════════════════════════ */
.mv-lb-stage.has-media {
    aspect-ratio: auto;
    width: auto;
    height: auto;
    max-width: 86vw;
    max-height: 86vh;
}

.mv-lb-stage.has-media .mv-lb-frame {
    position: static;
    background: none;
    overflow: visible;
}

.mv-lb-stage.has-media .mv-lb-frame::before {
    display: none;
}

.mv-lb-stage.has-media .mv-lb-frame > img,
.mv-lb-stage.has-media .mv-lb-frame > video {
    position: static;
    width: auto;
    height: auto;
    max-width: 86vw;
    max-height: 86vh;
    object-fit: contain;
    background: transparent;
    display: block;
}

/* Meta row was absolutely positioned to the stage's outer bottom (-36px).
   When the stage shrinks to natural size, anchor it inline beneath the
   frame so credit + counter stay visible without overflowing viewport. */
.mv-lb-stage.has-media .mv-lb-meta {
    position: relative;
    bottom: auto;
    margin-top: 10px;
}


/* ════════════════════════════════════════════════════════════════════
   3. ─── Custom video player (Iter 11)
        Lightbox video se renderuje s vlastním UI místo `controls` atributu
        prohlížeče. Velký play overlay + bottom bar (play/pause, čas,
        scrub, mute, fullscreen) v akcentní barvě theme. JS staví DOM přes
        createElement (žádné innerHTML) — viz assets/js/lightbox.js.
   ════════════════════════════════════════════════════════════════════ */
.mv-lb-video {
  position: relative;
  width: 100%; height: 100%;
}
.mv-lb-video video {
  width: 100%; height: 100%;
  display: block;
  background: #000;
}
/* Hide UA media controls — paranoia pro Safari iOS, kde i bez `controls`
   atributu mohou prosvítat overlay tlačítka. */
.mv-lb-video video::-webkit-media-controls,
.mv-lb-video video::-webkit-media-controls-enclosure { display: none !important; }

/* Velký play overlay — viditelný v paused stavu */
.mv-lb-video .mv-lb-play-big {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
  transition: opacity .25s, transform .25s, background .18s, border-color .18s;
  appearance: none; padding: 0;
  z-index: 3;
}
.mv-lb-video .mv-lb-play-big:hover {
  background: var(--accent); border-color: var(--accent); color: var(--bg);
  transform: translate(-50%, -50%) scale(1.05);
}
.mv-lb-video.is-playing .mv-lb-play-big {
  opacity: 0; pointer-events: none;
}

/* Bottom controls bar */
.mv-lb-video .mv-lb-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%);
  color: rgba(255,255,255,0.85);
  transition: opacity .25s;
  z-index: 2;
}
.mv-lb-video.is-idle .mv-lb-bar { opacity: 0; pointer-events: none; }
.mv-lb-video.is-idle { cursor: none; }

.mv-lb-video .mv-lb-bar button {
  appearance: none; background: transparent; border: 0; padding: 6px;
  color: inherit; cursor: pointer; display: flex; align-items: center;
  transition: color .15s;
}
.mv-lb-video .mv-lb-bar button:hover { color: var(--accent); }

.mv-lb-video .mv-lb-time {
  font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  white-space: nowrap;
  color: rgba(255,255,255,0.7);
}

/* Scrub bar — flex: 1 mezi časy */
.mv-lb-video .mv-lb-scrub {
  flex: 1; position: relative; height: 4px; cursor: pointer;
  background: rgba(255,255,255,0.18); border-radius: 2px;
}
.mv-lb-video .mv-lb-scrub-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent); border-radius: 2px;
  width: 0;
  transition: width .1s linear;
}
.mv-lb-video .mv-lb-scrub-handle {
  position: absolute; top: 50%; left: 0;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  opacity: 0; transition: opacity .2s;
}
.mv-lb-video:hover .mv-lb-scrub-handle,
.mv-lb-video .mv-lb-scrub:hover .mv-lb-scrub-handle { opacity: 1; }