/**
 * Video overlay — the in-page player, and the only place it is styled.
 *
 * These rules live with the script rather than in the theme, unlike the rest of
 * the design. The prototype has no overlay at all — it is markup the script
 * invents at runtime — and a half-styled lightbox is not a degraded lightbox,
 * it is a video appended to the bottom of the page. Keeping the rules next to
 * the script that writes the markup means the two cannot arrive separately.
 *
 * Brand tokens are read with fallbacks so the overlay is still correct under a
 * theme that does not define them.
 */

.ifn-lb { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ifn-lb[hidden] { display: none; }
.ifn-lb__backdrop { position: absolute; inset: 0; background: rgba(15, 16, 16, .82); backdrop-filter: blur(3px); animation: ifn-lb-in .18s ease both; }
.ifn-lb__panel {
  position: relative; z-index: 1;
  width: min(1100px, 100%);
  display: flex; flex-direction: column; gap: 14px;
  animation: ifn-lb-up .22s cubic-bezier(.2, .7, .3, 1) both;
}
.ifn-lb__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  /* 84vh less the caption and the padding, so a wide screen never pushes the
     title off the bottom of the window. */
  max-height: calc(84vh - 60px);
  background: #000; border-radius: 14px; overflow: hidden;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
}
.ifn-lb__frame iframe,
.ifn-lb__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ifn-lb__title {
  margin: 0; text-align: center; color: #fff;
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 16px; line-height: 1.4;
}
.ifn-lb__title[hidden] { display: none; }
/* z-index is load-bearing on small screens. The close button comes before the
   frame in the DOM and both are positioned, so with the button moved inside the
   player at the phone breakpoint the frame painted straight over it — measured
   as a button reporting visible, opacity 1, and drawing nothing. */
.ifn-lb__close {
  position: absolute; top: -46px; right: 0; z-index: 2;
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.ifn-lb__close:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .5); }
.ifn-lb__close:focus-visible { outline: 2px solid var(--blue, #0c89c6); outline-offset: 2px; }
.ifn-lb__close svg { width: 19px; height: 19px; }
/* Freezes the page behind the overlay rather than letting a scroll gesture
   slide the article about under a player the reader is watching. The pinned
   body is what keeps the view where it was: overflow alone snapped the document
   back to the top, and closing then dropped the reader at the top of the page
   instead of at the card they clicked. The script supplies the negative top. */
html.ifn-lb-open { overflow: hidden; }
html.ifn-lb-open body { position: fixed; left: 0; right: 0; width: 100%; }

@keyframes ifn-lb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ifn-lb-up { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ifn-lb__backdrop, .ifn-lb__panel { animation: none; }
}

/* On a phone the close button has no room above the frame, so it moves inside
   the top-right corner of the player. */
@media (max-width: 600px) {
  .ifn-lb { padding: 16px; }
  .ifn-lb__close { top: 8px; right: 8px; background: rgba(15, 16, 16, .6); }
  .ifn-lb__frame { max-height: calc(80vh - 50px); }
  .ifn-lb__title { font-size: 14px; }
}

/* The tutorial card is a button in all but name once the overlay exists. */
.vid-card__media[data-ifn-video] { cursor: pointer; }