/* ── Image Inner Blocks ─────────────────────────────────────────────────────
 *
 * The only structural CSS this extension provides: the image figure must be
 * a positioning context so its absolutely-positioned badge children anchor
 * to it. Badges carry their own computed position; their inner blocks carry
 * all visual treatment. Loaded in BOTH the editor and the front end so the
 * canvas matches the published page (Foundation Philosophy 2.9).
 */

/* Front end: badges are injected inside <figure class="wp-block-image …"> */
figure.wp-block-image.has-theme-badges {
	position: relative;
}

/* Editor: BlockEdit is wrapped in a host that holds core/image's figure in
 * normal flow, so the host's box === the image box (same box the front-end
 * figure provides).
 *
 * Badges must anchor to that image box. The catch: Gutenberg's own
 * inner-block containers are positioned, so one of THEM — not the host —
 * becomes a badge's offset parent. Left alone that container is a
 * zero-height box sitting after the figure, which pinned every anchor to a
 * single edge. So the badge layer is overlaid on the host and every
 * Gutenberg container down to the block list is forced to fill it. The
 * badge's nearest positioned ancestor then exactly equals the figure box,
 * making the editor canvas match the front end. */
.le-image-badges-host {
	position: relative;
}

/* ONE positioned overlay, sized to the host (= the image box, because the
 * figure is the host's only in-flow child). This is the badges' offset
 * parent. */
.le-image-badges {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Gutenberg's own inner-block containers are positioned by the editor
 * stylesheet; left alone, one of them (a zero-height box) becomes the
 * badge's offset parent and the anchors break. Neutralise them so the only
 * positioned ancestor is .le-image-badges above. */
.le-image-badges .block-editor-inner-blocks,
.le-image-badges .block-editor-block-list__layout,
.le-image-badges .block-editor-block-list__layout > .wp-block {
	position: static;
}

/* Clicks fall through the empty overlay to the image; badges stay clickable. */
.le-image-badges .wp-block-littleextra-badge {
	pointer-events: auto;
}