/* Harness for the block-preview iframe (block-frame.php). Renders one block at a
   fixed desktop width so its own media queries evaluate as desktop; the parent
   page then scales the whole iframe down like a photo. Preview-only. */
html, body { margin: 0; padding: 0; }
body { background: var(--white, #fff); }
.block-frame { width: 1280px; height: 720px; overflow: hidden; }
.block-frame > * { height: 100%; }

/* Centre each block's content vertically within the frame so short sections sit
   in the middle instead of hugging the top. `safe center` falls back to top
   alignment when a block is taller than the frame, so its heading is never
   cropped. Hero keeps its own bottom-anchored layout. */
.block-frame > :not(.blk-hero) {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}
/* Force the block's wrapper to fill the width: as a flex item it would otherwise
   shrink to content width when it carries `margin-inline: auto` (which most block
   inners do), collapsing empty/aspect-ratio children. */
.block-frame > :not(.blk-hero) > * { width: 100%; }