/* --------------------------------------------------------------------------
   Custom HTML / Embed widgets (src/components/ui/Embed.tsx). Loaded only on a
   page that has one. The widget's content keeps the site's own type; its box
   takes the widget's settings; nothing in it can be wider than its column.
   -------------------------------------------------------------------------- */
.cmsembed {
  box-sizing: border-box; width: var(--embed-w, 100%); max-width: min(100%, var(--embed-maxw, 100%));
  padding: var(--embed-pad, 0); border-radius: var(--embed-radius, 0); overflow-wrap: anywhere;
}
/* The widget's box follows the element's alignment. */
.cmsfx__embed--center .cmsembed { margin-inline: auto; }
.cmsfx__embed--right .cmsembed { margin-left: auto; }
.cmsembed--bg { background: var(--embed-bg); }
.cmsembed--border { border: var(--embed-border); }
.cmsembed--round { overflow: hidden; }
/* Pictures keep the size their code gives (a badge's height="150"), in proportion, never wider than the column. */
.cmsembed img { max-width: 100%; vertical-align: middle; object-fit: contain; }
.cmsembed img[width], .cmsembed img:not([height]) { height: auto; }
.cmsembed img[height]:not([width]) { width: auto; }
.cmsembed a img { display: inline-block; }
.cmsembed :is(p, ul, ol, blockquote, figure, table) { margin: 0 0 .8em; }
.cmsembed > :last-child { margin-bottom: 0; }
.cmsembed table { border-collapse: collapse; max-width: 100%; }
.cmsembed :is(td, th) { padding: 4px 8px; }
/* Iframes: as wide as the box, in their own proportions (or 16:9) — or filling a shape the editor chose. */
.cmsembed__frame { position: relative; width: 100%; aspect-ratio: var(--embed-ratio, 16 / 9); }
.cmsembed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cmsembed--ratio { aspect-ratio: var(--embed-ratio); }
.cmsembed--height { height: var(--embed-h); }
.cmsembed--ratio, .cmsembed--height { position: relative; overflow: hidden; }
.cmsembed--ratio .cmsembed__frame--fill, .cmsembed--height .cmsembed__frame--fill { position: absolute; inset: var(--embed-pad, 0); width: auto; aspect-ratio: auto; }
@media (max-width: 640px) {
  .cmsembed--height[style*="--embed-hm"] { height: var(--embed-hm); }
}