/* ==========================================================================
   PREVIOUSLY · MINI-POPUP — universal quick-view component · v20261003b
   --------------------------------------------------------------------------
   SITE-WIDE PATTERN (James, 2026-10-03 — PERMANENT):
   Every clickable entity gets a MINI quick-view popup BEFORE the full page:
   click -> mini card pops up (photo, key info, play/listen) -> tap through
   to the full page. Same look, same behavior, everywhere. Never reinvented
   per section.

   ADOPTION (any section — music, browse, sports, podcasts):
     1. Load this CSS + /js/mini-popup.js on the page.
     2. Build your content HTML (any markup, your section's classes).
     3. MiniPopup.open(html, { ariaLabel: "..." })  -> shows it.
        MiniPopup.setContent(html)                 -> swap body (loading -> data).
        MiniPopup.close()                           -> dismiss.
     4. Close is automatic: X button, backdrop click, Escape.
   The shell is content-agnostic. Section-specific styles live in the
   section's own CSS (e.g. .apop-* for music artists).
   ========================================================================== */
.mpop-overlay{position:fixed;inset:0;z-index:2000;background:rgba(20,16,12,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.22,.8,.28,1)}
.mpop-overlay.open{opacity:1;pointer-events:auto}
.mpop-card{position:relative;background:#FFFDF8;border:1px solid #DCD1BA;
  border-radius:16px;max-width:520px;width:100%;max-height:88vh;overflow-y:auto;
  box-shadow:0 40px 90px -30px rgba(20,16,12,.6);color:#191512;
  font-family:Inter,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55;
  transform:translateY(16px) scale(.98);transition:transform .3s cubic-bezier(.22,.8,.28,1)}
.mpop-overlay.open .mpop-card{transform:none}
.mpop-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  border:1px solid #DCD1BA;background:#F5EFE2;color:#191512;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:2;
  transition:background .25s,transform .25s,color .25s}
.mpop-close:hover{background:#C0341D;color:#fff;transform:rotate(90deg)}
.mpop-close svg{width:16px;height:16px}
.mpop-body{padding:32px}
.mpop-body *{box-sizing:border-box}
/* WCAG AA (2026-10-03): section --muted values tuned for darker hub
   backgrounds can fall below 4.5:1 on this light card (music's #8C7F68
   was 3.86:1). Darken muted text inside popups only — hubs keep theirs. */
.mpop-body{--muted:#6E6250}
@media(max-width:560px){
  .mpop-overlay{padding:16px}
  .mpop-body{padding:24px 20px}
  .mpop-card{border-radius:14px}
}
@media(prefers-reduced-motion:reduce){
  .mpop-overlay,.mpop-card,.mpop-close{transition:none}
}

/* ---- Person quick-view (James 2026-10-03: cast is always clickable) ----
   Rendered by /browse/js/tmdb-person-popup.js inside MiniPopup. */
.pv-pperson__top{display:flex;gap:18px;align-items:flex-start;margin-bottom:14px}
.pv-pperson__ph{width:96px;height:144px;object-fit:cover;border-radius:10px;background:#EDE6D4;flex:none;
  box-shadow:0 10px 24px -12px rgba(20,16,12,.45)}
.pv-pperson__ph--init{display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:700;color:#8C7F68}
.pv-pperson__ph.is-sk{animation:pvPsk 1.2s ease-in-out infinite}
.pv-pperson__head{min-width:0}
.pv-pperson__kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6E6250;margin:0 0 6px}
.pv-pperson__name{font-family:Georgia,serif;font-size:26px;line-height:1.15;margin:0 0 6px;color:#191512}
.pv-pperson__char{font-size:14px;color:#6E6250;margin:0}
.pv-pperson__char em{color:#191512}
.pv-pperson__known{font-size:14px;color:#6E6250;margin:0 0 10px}
.pv-pperson__known strong{color:#191512}
.pv-pperson__bio{font-size:15px;line-height:1.65;color:#3A332A;margin:0 0 6px}
.pv-pperson__bio.is-empty{color:#8C7F68;font-style:italic}
.pv-pperson__loading{font-size:13px;color:#8C7F68;margin:12px 0 0}
.pv-pperson__skline{height:12px;border-radius:6px;background:#EDE6D4;margin:8px 0;animation:pvPsk 1.2s ease-in-out infinite}
.pv-pperson__actions{margin-top:16px}
.pv-pperson__cta{display:inline-block;font-weight:700;color:#FFFDF8;background:#C0341D;
  border-radius:8px;padding:11px 22px;text-decoration:none;font-size:15px}
.pv-pperson__cta:hover{background:#a02b17}
.pv-pperson__retry{font-size:13px;color:#8C7F68;margin:12px 0 0}
.pv-pperson__retry button{font:inherit;color:#C0341D;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
@keyframes pvPsk{0%,100%{opacity:.55}50%{opacity:1}}