/***** E H U   B l o c k   M a r g i n   T o p ******************************************
   Top-margin utility driven by the "Margin top" slider in a block's Spacing panel
   (see block-margin-top.js). Added to: core Image, core Columns, core Embed (incl.
   YouTube), and the EHU Cover / Stacking Cards / Pillar Accordion LazyBlocks.

   Values map to the EHU spacing scale (--ehu-spacing-*, defined in
   ehu-wordpress/assets/css/ehu-wordpress-colors.scss). Literal fallbacks keep the
   spacing visible in the editor iframe, where those custom properties may not load.
****************************************************************************************/

/* Generic - covers Columns, Embeds, the LazyBlock wrappers, and the editor preview
   wrapper. !important beats the theme's non-important margin resets (e.g. figure{margin:0}
   and the div.wp-block-column > figure.wp-block-embed-youtube margin-top:0 rule). */
.has-ehu-margin-top-xs { margin-top: var(--ehu-spacing-xs, 0.25rem) !important; }
.has-ehu-margin-top-sm { margin-top: var(--ehu-spacing-sm, 0.75rem) !important; }
.has-ehu-margin-top-md { margin-top: var(--ehu-spacing-md, 1.5rem) !important; }
.has-ehu-margin-top-lg { margin-top: var(--ehu-spacing-lg, 3rem) !important; }
.has-ehu-margin-top-xl { margin-top: var(--ehu-spacing-xl, 4rem) !important; }

/* core Image needs extra specificity: the theme zeroes it with an !important rule
   `figure.wp-block-image { margin: 0 !important; }` (base/_global.scss), which the single
   class above cannot beat. These two selectors out-specify it - front end (class on the
   <figure>) and editor (class on the wrapper, <figure> as a descendant). */
figure.wp-block-image.has-ehu-margin-top-xs,
.has-ehu-margin-top-xs figure.wp-block-image { margin-top: var(--ehu-spacing-xs, 0.25rem) !important; }

figure.wp-block-image.has-ehu-margin-top-sm,
.has-ehu-margin-top-sm figure.wp-block-image { margin-top: var(--ehu-spacing-sm, 0.75rem) !important; }

figure.wp-block-image.has-ehu-margin-top-md,
.has-ehu-margin-top-md figure.wp-block-image { margin-top: var(--ehu-spacing-md, 1.5rem) !important; }

figure.wp-block-image.has-ehu-margin-top-lg,
.has-ehu-margin-top-lg figure.wp-block-image { margin-top: var(--ehu-spacing-lg, 3rem) !important; }

figure.wp-block-image.has-ehu-margin-top-xl,
.has-ehu-margin-top-xl figure.wp-block-image { margin-top: var(--ehu-spacing-xl, 4rem) !important; }