/*
 * paragraph-embed.css — Embed (iframe) paragraph (Bucket C #3, 2026-05-19).
 *
 * Sizing lives here rather than in an inline style, because a cross-origin
 * iframe cannot be measured or auto-sized from the parent page. Modes:
 *   responsive — viewport-relative height. The default for new embeds, and
 *                the right answer for forms, whose provider-supplied height
 *                is measured at a fixed width our fluid column never matches.
 *   auto       — the editor's explicit pixel height, passed in as --embed-h.
 *   16-9/4-3/1-1 — fixed ratio, for video-shaped content.
 *
 * Blocked-host fallback renders a styled alert in place of the iframe.
 */

.para--embed {
  margin: 0 0 1.5rem;
  width: 100%;
}

.para-embed__box {
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f6f6f7;
}

.para-embed__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Aspect-ratio modes: the box takes the ratio, the iframe fills it. */
.para--embed--16-9 { aspect-ratio: 16 / 9; }
.para--embed--4-3  { aspect-ratio: 4 / 3; }
.para--embed--1-1  { aspect-ratio: 1 / 1; }

/* Editor-specified pixel height. */
.para--embed--auto { height: var(--embed-h, 600px); }

/*
 * Viewport-relative height. The bounds are guard rails, not the value: with
 * no floor a landscape phone yields a ~270px peephole, and with no ceiling a
 * large monitor yields a frame tall enough to swallow the page scroll.
 * dvh tracks the usable viewport as mobile browser chrome shows and hides;
 * the vh rule is the fallback for engines without it.
 */
.para--embed--responsive { height: clamp(420px, 70vh, 900px); }

@supports (height: 1dvh) {
  .para--embed--responsive { height: clamp(420px, 70dvh, 900px); }
}

/*
 * Always-present escape hatch out of the frame. A long form scrolls inside
 * its box, and nested scroll regions are hostile to keyboard and screen
 * reader users; this is also the only content on the page when a frame is
 * refused outright.
 */
.para-embed__fallback {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
}

/* Blocked-host fallback */
.para-embed__blocked {
  padding: 1rem 1.25rem;
  background: #fef2f2;
  border-left: 4px solid #b54708;
  color: #7a2a07;
  border-radius: 0 0.5rem 0.5rem 0;
}

.para-embed__blocked p { margin: 0.2rem 0; }
.para-embed__blocked code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.05rem 0.35rem;
  border-radius: 0.2rem;
  font-size: 0.95em;
}

/* High-contrast mode */
@media (forced-colors: active) {
  .para-embed__box {
    background: Canvas;
    border: 1px solid CanvasText;
  }
  .para-embed__blocked {
    border-left: 4px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}

/*
 * Print: third-party embeds don't paginate, so drop the frame — but keep the
 * fallback link and spell out its address, so the destination survives onto
 * paper. The previous rule hid the whole paragraph and left nothing behind.
 */
@media print {
  .para-embed__box { display: none; }
  .para-embed__fallback a::after {
    content: " (" attr(href) ")";
    font-weight: 400;
    word-break: break-all;
  }
}