/* ============================================================
   MEMBERSHIP PAGE (membership.html)

   Hosts the Arbox sign-up/checkout widget in an iframe. The page is
   deliberately thin: everything below the heading belongs to the payment
   provider, so the only real layout job here is giving that frame a tall,
   readable box on both a phone and a desktop.
   ============================================================ */
.membership-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 120px 5% 80px;
}

.membership-back {
  display: inline-block; margin-bottom: 24px; color: var(--yellow);
  font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
}
.membership-back:hover { text-decoration: underline; }

.membership-head { margin-bottom: 32px; }
.membership-intro {
  color: #ccc; line-height: 1.8; max-width: 70ch;
}

/* ─── The widget ───
   The frame is white inside (the provider's own theme), so it sits on a light
   card rather than fighting the dark site background. Height is clamped: tall
   enough that the membership list does not scroll inside a letterbox, capped
   so it never exceeds a laptop screen. */
.membership-frame-wrap {
  position: relative;
  margin-top: 8px;
  border: 1px solid rgba(245,200,0,0.25);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  min-height: 620px;
}

.membership-frame {
  display: block;
  width: 100%;
  height: clamp(620px, 78vh, 1100px);
  border: 0;
}

/* Shown until the frame reports load; the frame paints over it. Sits behind
   the iframe deliberately — a provider outage leaves this message visible. */
.membership-loading {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  color: #555; font-size: 0.95rem; text-align: center; padding: 24px;
}
.membership-frame { position: relative; z-index: 1; background: transparent; }
.membership-frame-wrap.is-loaded .membership-loading { display: none; }

/* ─── Escape hatch ───
   If the embed is ever blocked (a strict browser, a blocked third-party
   frame), this link still completes the purchase on the provider's own site.
   It is always visible, not just on failure — cheaper than detecting failure
   from inside a cross-origin frame, which we cannot do. */
.membership-fallback { margin-top: 18px; }
.membership-external {
  color: var(--yellow); text-decoration: underline;
  font-size: 0.95rem;
}
.membership-external:hover { color: var(--white); }

.membership-note {
  margin-top: 10px; color: var(--grey); font-size: 0.9rem;
  line-height: 1.7; max-width: 70ch;
}

@media (max-width: 760px) {
  .membership-wrap { padding: 100px 6% 60px; }
  /* On a phone the widget is the whole point of the page, so give it the
     screen. min() keeps it from overflowing a short landscape viewport. */
  .membership-frame { height: min(1000px, 82vh); }
  .membership-frame-wrap { min-height: 520px; }
}