/* ============================================================================
   JF Portfolio 2026 — Lightbox Popup Block (Frontend)
   Triggered by:  <a href="#your-lightbox-id">
   ============================================================================ */

/* ── Body lock ───────────────────────────────────────────────────────────── */
body.modal-open { overflow: hidden; }

/* ── Backdrop ────────────────────────────────────────────────────────────── */
.jf-lbx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.jf-lbx-backdrop.active {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}

/* ── Lightbox shell ──────────────────────────────────────────────────────── */
.jf-lightbox {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 210;

  width: calc(100% - 48px);
  max-width: var(--lbx-max-width, 1240px);
  max-height: 75vh;

  background: #07111b;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 20px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .68);
  overflow: hidden;

  /* Hidden — rises from slightly below, scales up, fades in */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 28px)) scale(.96);

  /* Exit: fade + sink faster than entrance; visibility hides after transition */
  transition:
    opacity   .22s ease,
    transform .22s ease,
    visibility 0s linear .22s;
}

/* Entrance — spring-like overshoot easing gives a natural settle */
.jf-lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);

  transition:
    opacity   .4s ease,
    transform .5s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 0s;
}

/* ── Close button ────────────────────────────────────────────────────────── */
.jf-lbx-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 22px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .2s ease;
}
.jf-lbx-close:hover { background: rgba(255, 255, 255, .16); }

/* ── Scrollable inner content ────────────────────────────────────────────── */
.jf-lbx-inner {
  overflow: auto;
  max-height: 75vh;
  padding: 0;   /* No default padding — set it via Gutenberg blocks/style attrs */
  color: #fff;
}

/* ── Custom scrollbar ────────────────────────────────────────────────────── */
.jf-lbx-inner::-webkit-scrollbar        { width: 5px; }
.jf-lbx-inner::-webkit-scrollbar-track  { background: rgba(255, 255, 255, .04); border-radius: 999px; }
.jf-lbx-inner::-webkit-scrollbar-thumb  { background: rgba(255, 122, 26, .50); border-radius: 999px; }
.jf-lbx-inner::-webkit-scrollbar-thumb:hover { background: rgba(255, 122, 26, .80); }
/* Firefox */
.jf-lbx-inner { scrollbar-width: thin; scrollbar-color: rgba(255, 122, 26, .50) rgba(255, 255, 255, .04); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 740px) {
  .jf-lightbox {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    transform: translate(0, 100%);
  }
  .jf-lightbox.active {
    transform: translate(0, 0);
    transition:
      opacity   .35s ease,
      transform .45s cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear 0s;
  }
  .jf-lbx-inner {
    max-height: 88vh;
    padding: 40px 24px 32px;
  }
}

/* ============================================================================
   Editor Preview Styles
   ============================================================================ */
.jf-lightbox-editor-wrap {
  border: 2px dashed rgba(255, 122, 26, .5) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  background: rgba(255, 122, 26, .03) !important;
}
.jf-lightbox-editor-label {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #ff7a1a;
  border-bottom: 1px dashed rgba(255, 122, 26, .3);
  background: rgba(255, 122, 26, .07);
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.jf-lightbox-editor-label code {
  background: rgba(255, 122, 26, .18);
  color: #ff7a1a;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-family: monospace;
}