/***** E H U   B l o c k   M a r g i n ***************************************************
   Margin utilities driven by the four "Margin top / right / bottom / left" sliders in a
   block's Spacing panel (see block-margin.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; }

.has-ehu-margin-right-xs { margin-right: var(--ehu-spacing-xs, 0.25rem) !important; }
.has-ehu-margin-right-sm { margin-right: var(--ehu-spacing-sm, 0.75rem) !important; }
.has-ehu-margin-right-md { margin-right: var(--ehu-spacing-md, 1.5rem) !important; }
.has-ehu-margin-right-lg { margin-right: var(--ehu-spacing-lg, 3rem) !important; }
.has-ehu-margin-right-xl { margin-right: var(--ehu-spacing-xl, 4rem) !important; }

.has-ehu-margin-bottom-xs { margin-bottom: var(--ehu-spacing-xs, 0.25rem) !important; }
.has-ehu-margin-bottom-sm { margin-bottom: var(--ehu-spacing-sm, 0.75rem) !important; }
.has-ehu-margin-bottom-md { margin-bottom: var(--ehu-spacing-md, 1.5rem) !important; }
.has-ehu-margin-bottom-lg { margin-bottom: var(--ehu-spacing-lg, 3rem) !important; }
.has-ehu-margin-bottom-xl { margin-bottom: var(--ehu-spacing-xl, 4rem) !important; }

.has-ehu-margin-left-xs { margin-left: var(--ehu-spacing-xs, 0.25rem) !important; }
.has-ehu-margin-left-sm { margin-left: var(--ehu-spacing-sm, 0.75rem) !important; }
.has-ehu-margin-left-md { margin-left: var(--ehu-spacing-md, 1.5rem) !important; }
.has-ehu-margin-left-lg { margin-left: var(--ehu-spacing-lg, 3rem) !important; }
.has-ehu-margin-left-xl { margin-left: var(--ehu-spacing-xl, 4rem) !important; }

/* core Image needs extra specificity on every side: the theme zeroes all four with the
   !important shorthand `figure.wp-block-image, .wp-block-image img { margin: 0 !important; }`
   (base/_global.scss), which a single class cannot beat - both declarations are !important,
   so specificity decides and figure.wp-block-image (0,1,1) outranks a lone class (0,1,0).
   These two selectors out-specify it at (0,2,1) - 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; }

figure.wp-block-image.has-ehu-margin-right-xs,
.has-ehu-margin-right-xs figure.wp-block-image { margin-right: var(--ehu-spacing-xs, 0.25rem) !important; }

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

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

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

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

figure.wp-block-image.has-ehu-margin-bottom-xs,
.has-ehu-margin-bottom-xs figure.wp-block-image { margin-bottom: var(--ehu-spacing-xs, 0.25rem) !important; }

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

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

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

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

figure.wp-block-image.has-ehu-margin-left-xs,
.has-ehu-margin-left-xs figure.wp-block-image { margin-left: var(--ehu-spacing-xs, 0.25rem) !important; }

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

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

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

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