/* ==========================================================================
   parts/popup.css — parts/popup.php (R4-PLAN §1.5; docs/scout/r4/POPUPS.md §2.2 / §4.2; R4-ADDENDUM C3, C9, C10).
   Template-scoped (WFX_SCOPED_PART_STYLES): printed only where a block asked for it (wfx_use_part_styles('popup')).

   Live geometry (Bricks .brx-popup, measured at 390 / 768 / 1440 and 17 probe widths; the only break is 800px):
     box = min(100vw, 800px) wide, 30px padding, white, no radius / shadow, centred in both axes;
     media = box − 60 wide: video and YouTube 16:9 (object-fit: contain), an image at its own ratio;
     backdrop rgba(0,0,0,.5) fading in over 1s ease-in-out; the box itself appears at once; closing is instant.
   Replica additions:
     - the dialog is a native modal <dialog> (top layer: above the fixed header, never clipped or moved by the
       smoother's transform); it covers the viewport and its padding reserves a --popup-chrome band above and below
       the box for the Close button (symmetric, so a box shorter than the viewport sits exactly where live's does);
     - the frame width is derived from --popup-ratio (the media's width / height, set on the dialog by the part), so an
       image box has its final size before the lazy file arrives (C3), and nothing is ever taller than the viewport: a
       portrait (#2540) shrink-wraps inside it instead of live's inner scroll (OD-R4-4, DI-R4-05), and a short
       landscape viewport shrinks a video box instead of scrolling it. At every reference size (390×844, 768×1024,
       1440×900) the cap is inactive for video, YouTube and the landscape images: the boxes equal live's;
     - Close: 44×44, live's own ion close-circle glyph (live's .wlp-popup__close is display:none: DI-R4-03) on a white
       disc; above the box's top-right corner below 861px (the box is full-bleed or nearly), straddling the corner from
       861px, where the 30px gutter fits it (live's intended −2.6rem corner);
     - no layout shift under the scroll lock (scrollbar-gutter), no scroll chaining (overscroll-behavior, C10);
     - reduced motion / ?nomotion=1: no backdrop fade (html.nomotion's *::before rule does not reach ::backdrop).
   The box reveal on open is GSAP (WFX.revealIn, popup.js), never a CSS transform here (transform ownership).
   ========================================================================== */

.popup {
  --popup-chrome: 5.6rem;                        /* band above / below the box: the 44px Close + 12px */
  --popup-pad: 30px;                             /* live .brx-popup-content padding (measured) */
  position: fixed;
  inset: 0;
  z-index: var(--z-popup);                       /* the top layer already paints above everything */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--popup-chrome) 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
  overscroll-behavior: contain;
}
.popup[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Backdrop. Custom properties reach ::backdrop only in newer engines (it inherited from nothing before Chrome 122),
   hence the literal fallback = --black-trans-50. */
.popup::backdrop {
  background: var(--black-trans-50, rgba(0, 0, 0, .5));
  transition: opacity 1s ease-in-out;            /* live: 1s ease-in-out */
}
@starting-style {
  .popup[open]::backdrop { opacity: 0; }         /* entry only; the close is instant, as live */
}

/* The frame is the box's size; Close is placed against it. Width: live's min(100%, 80rem), capped so the box
   (media + 2 × 30px) fits the height left between the two chrome bands. */
.popup__frame {
  position: relative;
  display: flex;
  width: min(100%, 80rem, calc((100vh - 2 * var(--popup-chrome) - 2 * var(--popup-pad)) * var(--popup-ratio, 16 / 9) + 2 * var(--popup-pad)));
  max-height: 100%;
}
@supports (height: 100dvh) {                     /* a var() declaration never falls back at parse time: gate it */
  .popup__frame {
    width: min(100%, 80rem, calc((100dvh - 2 * var(--popup-chrome) - 2 * var(--popup-pad)) * var(--popup-ratio, 16 / 9) + 2 * var(--popup-pad)));
  }
}
.popup__box {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--popup-pad);
  background: var(--white);
}
html.reveal-pending .popup .popup__box { opacity: 1; }   /* opened before the reveal layer started: never blank */

/* Video / YouTube: live's .brxe-video box (16:9), the player absolutely positioned inside it */
.popup__media {
  position: relative;
  aspect-ratio: var(--popup-ratio, 16 / 9);
  background: var(--black);
}
.popup__media > video,
.popup__media > .video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.popup__media > video {
  display: block;
  object-fit: contain;                           /* the 1280×720 and 1536×864 files letterbox, as live */
}

/* Image: the printed size's own ratio (C3: sized before the file arrives) */
.popup__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--popup-ratio);
}

/* Close (DI-R4-03, C9): 44×44 target (WCAG 2.5.5), 36px glyph (its circle ≈ 29px, live's intended 3rem icon),
   #1263FF on a white disc so it reads over any page behind the 50% backdrop and over the box's corner. */
.popup__close {
  --focus-color: var(--btn-focus-dark);
  position: absolute;
  z-index: 1;                                    /* above the box where it straddles the corner */
  right: 0;
  bottom: calc(100% + .8rem);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--primary);
  font-size: 3.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color .3s ease-in-out;             /* live's button transition */
}
.popup__close::before {
  content: "";
  grid-area: 1 / 1;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--white);
}
.popup__close > svg { grid-area: 1 / 1; }
.popup__close:hover { color: var(--wfx-blue-dark); }
/* The ring sits over the backdrop and, from 861px, partly over the white box: a light ring with an ink inner edge */
.popup__close:focus-visible { box-shadow: 0 0 0 4px var(--primary-dark); }
@media (min-width: 861px) {
  .popup__close { top: -22px; right: -22px; bottom: auto; }   /* centred on the box's top-right corner */
}

/* Tab-cycle sentinel (popup.js sends focus from it back to Close): focusable, never seen */
.popup__sentinel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* No layout shift under the scroll lock (body.no-scroll hides the page's scrollbar): OD-R4-19 */
html:has(.popup[open]) { scrollbar-gutter: stable; }

@media (prefers-reduced-motion: reduce) {
  .popup::backdrop { transition: none; }
  .popup__close { transition: none; }
}
html.nomotion .popup::backdrop { transition: none; }

@media (forced-colors: active) {
  .popup__box { border: 1px solid CanvasText; }
  .popup__close::before { background: Canvas; }
  .popup__close { color: ButtonText; }
}