/* portal-lightbox.css — parte din creator-portal.css (liniile 1090-1271).
   Lightbox media — un singur overlay pentru galeriile public / creator / admin.
   MUTARE PURĂ: conținutul de mai jos e identic cu sursa. Ordinea de încărcare
   a bucăților contează (cascada) — vezi src/components/styles/. */
/* ===========================================================================
   MEDIA LIGHTBOX  (public/scripts/media-lightbox.js)  — APPENDED BLOCK
   ---------------------------------------------------------------------------
   One overlay reused by all three portfolio galleries (public /c, creator
   /app/profil, admin review drawer). Uses theme tokens (--paper / --ink /
   --line-2 / --ff-mono) so it auto-adapts to whichever theme is active — do
   NOT hardcode a palette here. Motion stays on opacity/transform only and is
   disabled under prefers-reduced-motion. Tiles get .cp-lightbox-tile (clickable
   affordance) + a ▶ play badge on video tiles, both added by the JS.
   =========================================================================== */

/* ---- clickable tile affordance (added to every .cp-gallery-item by JS) ---- */
.cp-lightbox-tile {
  cursor: pointer;
  transition: transform var(--duration-fast, 150ms) var(--ease, ease),
              box-shadow var(--duration-fast, 150ms) var(--ease, ease);
}
.cp-lightbox-tile:hover {
  transform: translateY(-2px) scale(1.012);
  box-shadow: 0 14px 34px -18px oklch(0 0 0 / .65);
}
.cp-lightbox-tile:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ▶ play badge on video tiles — centered glass disc, brightens on tile hover. */
.cp-lightbox-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; line-height: 1; color: #fff;
  padding-left: 3px; /* optically center the ▶ glyph */
  background: oklch(0.15 0.01 70 / .55);
  border: 1.5px solid oklch(1 0 0 / .65);
  backdrop-filter: blur(3px);
  pointer-events: none;
  transition: background var(--duration-fast, 150ms) var(--ease, ease),
              transform var(--duration-fast, 150ms) var(--ease, ease);
}
.cp-lightbox-tile:hover .cp-lightbox-play {
  background: oklch(0.15 0.01 70 / .78);
  transform: translate(-50%, -50%) scale(1.06);
}

/* ---- overlay (scrim + stage) ---- */
.cp-lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: clamp(16px, 4vmin, 48px);
  background: oklch(0.12 0.01 70 / .86);
  opacity: 0;
  transition: opacity var(--duration-normal, 240ms) var(--ease, ease);
}
.cp-lightbox.open { opacity: 1; }
.cp-lightbox[hidden] { display: none; }

/* Shrink-wraps the PAINTED media so the nav arrows (absolute children) anchor
   to the clip's real edges — parked on the viewport edges they sat a screen
   away from the video on wide monitors (owner feedback, 2026-08-04). */
.cp-lightbox-stagewrap {
  position: relative;
  display: grid; place-items: center;
  max-width: min(1100px, 94vw); max-height: 92vh;
}

.cp-lightbox-stage {
  display: grid; place-items: center;
  max-width: min(1100px, 94vw); max-height: 92vh;
  transform: scale(0.97);
  transition: transform var(--duration-normal, 240ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.cp-lightbox.open .cp-lightbox-stage { transform: scale(1); }

/* Large media: never cropped. Video + image share the frame treatment. */
.cp-lightbox-media {
  display: block;
  max-width: min(1100px, 94vw);
  max-height: 92vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 50px 130px -45px oklch(0 0 0 / .85);
}
/* No forced width on video: with width:auto the element shrink-wraps the
   painted frame after loadedmetadata (a portrait clip is ~52vh wide at 92vh
   tall). The old `width:min(1100px,94vw)` stretched the ELEMENT full-width
   with letterbox bars, which is exactly why edge-parked arrows looked like
   they belonged to the page, not the clip. */

.cp-lightbox-close {
  position: fixed; top: clamp(14px, 2.5vmin, 26px); right: clamp(14px, 2.5vmin, 28px);
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: 18px; line-height: 1;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-2); cursor: pointer;
  box-shadow: 0 10px 28px -12px oklch(0 0 0 / .6);
  transition: transform var(--duration-fast, 150ms) var(--ease, ease),
              opacity var(--duration-fast, 150ms) var(--ease, ease);
}
.cp-lightbox-close:hover { transform: scale(1.06); }
.cp-lightbox-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- prev/next playlist navigation ----
   Rendered by the JS ONLY when the gallery yields more than one resolvable
   tile; a single-clip gallery keeps [hidden] and looks exactly as before.
   ANCHORED TO THE MEDIA (absolute in .cp-lightbox-stagewrap), overlaid on the
   clip's own edges — dark glass like .cp-lightbox-play/.cp-lightbox-counter,
   semi-transparent so it never fights the frame. Desktop (real hover) keeps
   them dimmed until the stage is hovered; touch keeps them always visible. */
.cp-lightbox-nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: 24px; line-height: 1;
  color: oklch(1 0 0 / .92);
  background: oklch(0.15 0.01 70 / .58);
  border: 1px solid oklch(1 0 0 / .25);
  backdrop-filter: blur(3px);
  cursor: pointer;
  box-shadow: 0 10px 28px -12px oklch(0 0 0 / .6);
  transition: transform var(--duration-fast, 150ms) var(--ease, ease),
              opacity var(--duration-fast, 150ms) var(--ease, ease),
              background var(--duration-fast, 150ms) var(--ease, ease);
}
/* display:grid above beats the UA [hidden] rule — restate it explicitly. */
.cp-lightbox-nav[hidden] { display: none; }
.cp-lightbox-prev { left: 10px; padding-right: 3px; }
.cp-lightbox-next { right: 10px; padding-left: 3px; }
.cp-lightbox-nav:hover { transform: translateY(-50%) scale(1.06); background: oklch(0.15 0.01 70 / .8); }
.cp-lightbox-nav:focus-visible { outline: 2px solid oklch(1 0 0 / .9); outline-offset: 2px; }
/* Hover-capable devices: dimmed at rest, full on stage hover / focus. Touch
   devices never match, so the arrows stay fully visible there. */
@media (hover: hover) and (pointer: fine) {
  .cp-lightbox-nav { opacity: .55; }
  .cp-lightbox-stagewrap:hover .cp-lightbox-nav:not(.is-disabled),
  .cp-lightbox-nav:focus-visible { opacity: 1; }
}
/* End of the playlist: still focusable (aria-disabled, NOT the native
   attribute — see media-lightbox.js) but visibly inert and hover-flat. */
.cp-lightbox-nav.is-disabled { opacity: .28; cursor: default; }
.cp-lightbox-nav.is-disabled:hover { transform: translateY(-50%); background: oklch(0.15 0.01 70 / .58); }

/* Discreet "2 / 5" position readout. Top-LEFT, mirroring the close button:
   a bottom-centered badge would sit on top of the native video control bar
   once a portrait clip fills the 92vh stage. */
.cp-lightbox-counter {
  position: fixed;
  top: clamp(14px, 2.5vmin, 26px); left: clamp(14px, 2.5vmin, 28px);
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .06em;
  color: oklch(1 0 0 / .72);
  padding: 5px 12px; border-radius: 999px;
  background: oklch(0.15 0.01 70 / .55);
  border: 1px solid oklch(1 0 0 / .18);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.cp-lightbox-counter[hidden] { display: none; }

@media (max-width: 560px) {
  .cp-lightbox-nav { width: 40px; height: 40px; font-size: 21px; }
}

/* Lock background scroll while the overlay is open. */
body.cp-lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cp-lightbox,
  .cp-lightbox-stage,
  .cp-lightbox-tile,
  .cp-lightbox-play,
  .cp-lightbox-nav,
  .cp-lightbox-close { transition: none; }
  .cp-lightbox-tile:hover { transform: none; }
  .cp-lightbox-nav:hover { transform: translateY(-50%); }
  .cp-lightbox.open .cp-lightbox-stage { transform: none; }
}