/* ============================================================
   Inline WhatsApp-demo embed for resource articles.
   Markup contract: <div class="rsvp-demo-embed"> containing an
   optional .rsvp-demo-embed-caption and .rsvp-demo-embed-cta —
   demo-embed.js injects the iframe card between them at runtime.

   Two placements per article:
   - Inline card (mobile/tablet): .rsvp-demo-embed d-lg-none
   - Split-screen phone rail (desktop): .rsvp-demo-embed--phone
     inside <aside class="article-rail d-none d-lg-block">, with
     body.article-split on the page. See the ≥992px section below.
   ============================================================ */
.rsvp-demo-embed {
    margin: 2.25rem auto;
    max-width: 430px;
}

.rsvp-demo-embed-caption {
    text-align: center;
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0 0 0.75rem;
}

.rsvp-demo-embed-frame {
    position: relative;
    width: 100%;
    height: 430px;
    border: 1px solid rgba(22, 36, 63, 0.12);
    border-radius: 18px;
    overflow: hidden;
    background: #E4DDD6;
    box-shadow: 0 14px 34px -14px rgba(22, 36, 63, 0.25);
    transition: height 0.35s ease;
}

.rsvp-demo-embed.is-engaged .rsvp-demo-embed-frame {
    height: min(74vh, 640px);
}

.rsvp-demo-embed-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* "Tap to try it" pill — landing-page .hero-demo-badge, verbatim. Overlays
   the frame bottom-center (the frame is position:relative) and does NOT
   scale with the iframe, so it stays readable at every phone size. */
.rsvp-demo-embed-badge {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    font-family: var(--font-display, Georgia, serif);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink, #16243f);
    background: rgba(255, 252, 247, 0.92);
    border: 1px solid rgba(184, 152, 90, 0.35);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px -8px rgba(22, 36, 63, 0.25);
    cursor: pointer;
    text-decoration: none;
    opacity: 0.92;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 2;
}

.rsvp-demo-embed-badge:hover {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
    color: var(--ink, #16243f);
}

.rsvp-demo-embed-badge .dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--gold, #b8985a);
    box-shadow: 0 0 0 4px rgba(184, 152, 90, 0.18);
    animation: rsvpDemoBadgePulse 2.4s ease-in-out infinite;
}

@keyframes rsvpDemoBadgePulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(184, 152, 90, 0.18); }
    50% { box-shadow: 0 0 0 8px rgba(184, 152, 90, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
    .rsvp-demo-embed-badge .dot {
        animation: none;
    }
}

.rsvp-demo-embed-cta {
    display: block;
    text-align: center;
    margin-top: 0.9rem;
    padding: 0.7rem 1rem;
    background: var(--navy, #16243f);
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
}

.rsvp-demo-embed-cta:hover,
.rsvp-demo-embed-cta:focus {
    background: var(--gold, #b8985a);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .rsvp-demo-embed-frame {
        transition: none;
    }
}

/* ============================================================
   Split-screen phone rail (≥992px).
   The page splits: all page content (navbar, header, article,
   footer) lives in the left pane — body.article-split reserves
   the right strip via padding, so every full-bleed band stops at
   the panel edge — and the demo phone owns a fixed right panel.
   The phone keeps true phone proportions (9:17): width derives
   from viewport height, clamped to sane phone sizes; if the
   clamp makes it not quite fit, the panel scrolls (by design).
   ============================================================ */
@media (min-width: 992px) {
    :root {
        /* Phone width from viewport height: frame H = inner·1.8875 + 24 must
           fit under a 112px budget (panel padding + gap + CTA row). 0.5298 and
           1.8875 are the demo's 320×604 design ratio and its inverse. */
        --rail-phone-w: clamp(230px, calc((100vh - 112px) * 0.5298 + 24px), 390px);
        --rail-pane-w: calc(var(--rail-phone-w) + 48px);
    }

    body.article-split {
        padding-right: var(--rail-pane-w);
    }

    .rsvp-demo-embed--phone {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1040; /* above the site-wide sticky .navbar (1030) */
        width: var(--rail-pane-w);
        height: 100vh;
        margin: 0;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        padding: 12px 24px;
        overflow-y: auto; /* a small scroll here is fine when clamped */
        background: #fff;
        border-left: 1px solid rgba(22, 36, 63, 0.08);
    }

    .rsvp-demo-embed--phone .rsvp-demo-embed-caption {
        display: none; /* the phone speaks for itself */
    }

    .rsvp-demo-embed--phone .rsvp-demo-embed-frame {
        flex: 0 0 auto; /* ratio-locked — never stretched or squashed */
        width: var(--rail-phone-w);
        /* Inner box keeps the demo's exact 320:604 ratio, so the 12px bezel is
           even on all four sides at ANY size (scaled or natural) — same look
           as the landing-page .hero-demo frame. Flattened form of
           (--rail-phone-w − 24px) × 1.8875 + 24px: nesting the var inside
           arithmetic broke 100vh re-resolution on viewport resize in Chromium. */
        height: calc(clamp(388.8px, 100vh - 112px, 690.8px) + 24px);
        aspect-ratio: auto;
        margin-top: auto; /* auto margins = overflow-safe vertical centering */
        padding: 12px;
        background: #1a1a1a;
        border: 0;
        border-radius: 36px;
        /* Landing-page bezel shadow, verbatim (incl. the inset highlight ring) */
        box-shadow:
            0 30px 60px -20px rgba(22, 36, 63, 0.22),
            0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    }

    .rsvp-demo-embed--phone .rsvp-demo-embed-frame iframe {
        border-radius: 20px;
        background: #E4DDD6; /* chat backdrop while loading, as on the landing page */
    }

    .rsvp-demo-embed--phone.is-engaged .rsvp-demo-embed-frame {
        /* IDENTICAL to the unengaged height — this rule exists only to beat
           the base .is-engaged grow rule (min(74vh,640px)), which would
           otherwise reshape the phone the moment the reader taps. `auto`
           here (the old aspect-ratio-era value) collapsed the frame. */
        height: calc(clamp(388.8px, 100vh - 112px, 690.8px) + 24px);
    }

    .rsvp-demo-embed--phone .rsvp-demo-embed-cta {
        flex: 0 0 auto;
        width: var(--rail-phone-w);
        margin-top: 0;
        margin-bottom: auto; /* pairs with the frame's margin-top: auto */
        font-size: 0.88rem;
        white-space: nowrap; /* never wrap the arrow onto its own line */
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* RTL articles (he/ar): the rail lives on the LEFT — mirror the split.
       dir can sit on <html> or on <body> depending on the page. */
    [dir="rtl"] body.article-split,
    body[dir="rtl"].article-split {
        padding-right: 0;
        padding-left: var(--rail-pane-w);
    }

    [dir="rtl"] .rsvp-demo-embed--phone,
    body[dir="rtl"] .rsvp-demo-embed--phone {
        right: auto;
        left: 0;
        border-left: 0;
        border-right: 1px solid rgba(22, 36, 63, 0.08);
    }
}