/* Sneak peek lightbox + the ghost/primary button pair, for pages that do NOT
   load the root style.css (the membership page carries all of its CSS inline).
   Pages on style.css already have these rules there, under "Ghost button",
   "Primary + ghost pair" and "Sneak peek lightbox"; keep the two in step when
   one changes. Loaded with /_shared/sneak-peek.js, which injects the markup.
   Colour and radius tokens fall back to the platform values, because a page
   with its own :root does not always declare the same names as style.css. */

/* ── Ghost button: the secondary door next to a primary ── */
.btn-ghost {
  background: transparent;
  color: var(--text-primary, #f1f5f9);
  border: 1px solid rgba(226, 232, 240, 0.22);
  font-family: inherit;
}
.btn-ghost:hover {
  border-color: rgba(226, 232, 240, 0.5);
  background: rgba(226, 232, 240, 0.05);
}
.btn-ghost svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-ghost .btn-len { color: var(--text-secondary, #b8b4c0); font-weight: 500; margin-left: 0.15rem; }
.btn-ghost:focus-visible { outline: 2px solid var(--color-ai, #38bdf8); outline-offset: 2px; }

/* ── Primary + ghost pair. Wraps on narrow screens, primary first. ── */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
@media (max-width: 640px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { justify-content: center; }
  .cta-row .btn-ghost { font-size: 0.95rem; padding-left: 1rem; padding-right: 1rem; }
}

/* ── Sneak peek lightbox ── */
.sp-lb {
  position: fixed;
  inset: 0;
  z-index: 50;   /* above the sticky public chrome (z-index 20) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 10, 11, 0.92);
}
/* Author display:flex would beat the UA rule for [hidden]; restate it. */
.sp-lb[hidden] { display: none; }
.sp-lb-box {
  /* Up to 1100px, never wider than the viewport, and never so wide that the
     16:9 player plus the row below it overflows a short viewport. */
  width: min(1100px, 100%, calc((100vh - 140px) * 16 / 9));
  display: grid;
  gap: 12px;
}
.sp-lb-player {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius, 12px);
  border: 1px solid var(--border, rgba(226, 232, 240, 0.08));
  overflow: hidden;
}
.sp-lb-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.sp-lb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sp-lb-note { color: var(--text-secondary, #b8b4c0); font-size: 14px; }
/* The button under the player is the shared silver primary from style.css.
   Scoped to the row so a page's own .btn rules stay untouched everywhere else. */
.sp-lb-row .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  border-radius: var(--radius-sm, 8px);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  background: var(--accent, #e2e8f0);
  color: #0a0a0b;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.sp-lb-row .btn-primary:hover {
  background: var(--accent-hover, #f8fafc);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(226, 232, 240, 0.2);
}
.sp-lb-x {
  position: fixed;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  color: rgba(226, 232, 240, 0.75);
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  padding: 6px 10px;
  border-radius: var(--radius-sm, 8px);
}
.sp-lb-x:hover { color: #fff; }
.sp-lb-x:focus-visible { outline: 2px solid var(--color-ai, #38bdf8); outline-offset: 2px; }

@media (max-width: 640px) {
  .sp-lb { padding: 0; }
  .sp-lb-box { gap: 14px; }
  .sp-lb-player { border-radius: 0; border: none; }
  .sp-lb-row { padding: 0 16px; flex-direction: column; align-items: stretch; text-align: center; }
  .sp-lb-row .btn { justify-content: center; }
}
/* A phone turned to landscape: the lightbox becomes the video. The box above
   is width-limited and the viewport is short, so the player stayed small and
   people reached for Bunny's own fullscreen button, which on Android leaves a
   sticky "iframe.mediadelivery.net" bubble. Here the player takes the full
   viewport height, its width follows 16:9 (capped at the viewport width), the
   row below it is dropped and the X sits over the video on a dark backdrop so
   it reads on any frame. The height bound keeps a landscape desktop window on
   the rules above. 100vh is the fallback for browsers without dvh. */
@media (max-height: 500px) and (orientation: landscape) {
  .sp-lb { padding: 0; }
  .sp-lb-box {
    width: min(100vw, calc(100vh * 16 / 9));
    width: min(100vw, calc(100dvh * 16 / 9));
    gap: 0;
  }
  .sp-lb-player {
    aspect-ratio: auto;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .sp-lb-player iframe { width: 100%; height: 100%; }
  .sp-lb-row { display: none; }
  .sp-lb-x { background: rgba(10, 10, 11, 0.55); }
}