/*
 * paragraph-embed.css — Embed (iframe) paragraph (Bucket C #3, 2026-05-19).
 *
 * Aspect-ratio modes use the modern `aspect-ratio` property; the iframe
 * fills its container. Auto mode (specified height) just sets height: Xpx
 * inline on the iframe and width: 100% via this stylesheet.
 *
 * Blocked-host fallback renders a styled alert in place of the iframe.
 */

.para--embed {
  margin: 0 0 1.5rem;
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f6f6f7;
}

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

/* Aspect-ratio modes: container takes the ratio, 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; }

.para--embed--16-9 .para-embed__frame,
.para--embed--4-3  .para-embed__frame,
.para--embed--1-1  .para-embed__frame {
  height: 100%;
}

/* 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 {
    background: Canvas;
    border: 1px solid CanvasText;
  }
  .para-embed__blocked {
    border-left: 4px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}

/* Print: most third-party embeds don't paginate well; suppress and leave a
 * note so the URL is still discoverable. */
@media print {
  .para--embed { display: none; }
}