/* ============================================================
   SHARED LIGHTBOX — single source of truth for every page's
   image lightbox (practice cards, learn images, steppers,
   tabbed comparisons, atlas cards). Consumes tokens.css.
   Panorama-in-lightbox styles live in panorama.css.
   ============================================================ */
.lightbox { display: flex; visibility: hidden; pointer-events: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: rgba(5, 14, 22, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); align-items: center; justify-content: center; padding: 12px; opacity: 0; transition: opacity 0.2s ease, visibility 0s 0.2s; }
.lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.2s ease, visibility 0s; }
.lb-content { max-width: 1400px; width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; }
.lb-close { position: fixed; top: 12px; right: 16px; background: rgba(0,0,0,0.45); border: none; color: #fff; cursor: pointer; padding: 8px; border-radius: 50%; transition: background 0.2s; z-index: 10000; }
.lb-close:hover { background: rgba(0,0,0,0.7); }
.lb-close svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.lb-info-above { text-align: center; max-width: 900px; margin-bottom: 16px; display: none; }
.lb-img-wrap { width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; position: relative; }
.lb-img { width: 100%; max-height: 85vh; background: linear-gradient(135deg, #0d2a3f 0%, #122e44 50%, #0d2a3f 100%); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; min-height: 200px; }
/* Schematics/SVGs have transparent backgrounds (designed for the near-white
   learning cards). In the lightbox they need a light backing instead of the
   navy photo frame, matching how they appear inline. */
.lb-img.lb-img-light { background: #f4f5f7; padding: 24px; box-sizing: border-box; }
.lb-img img { width: 100%; max-height: 85vh; object-fit: contain; }
.lb-img.lb-img-light img { max-height: calc(85vh - 48px); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(10, 30, 50, 0.55); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(255, 255, 255, 0.85); transition: all 0.2s; z-index: 10; }
.lb-nav:hover { background: rgba(10, 30, 50, 0.75); color: #fff; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-toggle-wrap { display: flex; justify-content: center; padding: var(--space-sm) 0; }
.lb-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--border-medium); background: transparent; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: all 0.2s; }
.lb-toggle:hover { border-color: var(--accent); color: var(--text-primary); }
.lb-toggle.active { border-color: var(--accent); background: rgba(59, 164, 224, 0.12); color: var(--accent); }
.lb-switcher-wrap { display: flex; justify-content: center; gap: 0.5rem; padding: 0.75rem 0 0; margin-bottom: 0.5rem; }
.lb-switcher-btn { padding: 0.35rem 0.85rem; border-radius: 6px; font-size: 0.82rem; border: 1px solid rgba(255,255,255,0.25); background: transparent; color: rgba(255,255,255,0.6); cursor: pointer; transition: all 0.15s; font-family: 'Montserrat', sans-serif; font-weight: 500; }
.lb-switcher-btn:hover { border-color: var(--accent); color: #fff; }
.lb-switcher-btn.active { border-color: var(--accent); background: rgba(59, 164, 224, 0.12); color: var(--accent); }
.lb-info { text-align: center; max-width: 900px; }
.lb-tag { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 10px; }
.lb-tag.question { background: rgba(212, 148, 58, 0.15); color: #e8a84a; }
.lb-tag.answer { background: rgba(52, 168, 83, 0.15); color: #34a853; }
.lb-title { font-family: 'Montserrat', sans-serif; font-size: var(--text-xl); font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.lb-desc { font-size: var(--text-sm); font-weight: 300; line-height: var(--leading-relaxed); color: rgba(255, 255, 255, 0.82); margin: 0 0 var(--space-md); }
.lb-footer-row { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-bottom: 4px; }
.lb-meta { display: flex; gap: 10px; align-items: center; }
.lb-chapter-tag { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); padding: 4px 10px; border-radius: 4px; }
.lb-cat-tag { font-size: var(--text-xs); color: var(--text-muted); }
.lb-link { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); opacity: 0.7; transition: opacity 0.2s; }
.lb-link:hover { opacity: 1; }
.lb-counter { font-family: 'Montserrat', sans-serif; font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; margin-top: var(--space-sm); }

/* Mobile responsive lightbox */
@media (max-width: 768px) {
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-nav { width: 36px; height: 36px; }
}