/* =============================================================
   Widget spacing - the "Spacing" choice every page widget shares
   (Top / Bottom / Left / Right in the widget editor;
   UnitTrac.My.Data.Widgets.ConfigJson.WidgetSpacingConfigJson).

   Plain css on purpose, linked once from _GlobalStyles_Header so
   EVERY theme (and all 14 Default palettes, and the page editor's
   iframe) gets the same rules with no theme recompile.

   A widget with a spacing choice is wrapped by the server in
       <div class="ut-wsp ut-wsp--t-md ut-wsp--l-sm"> <section class="ut-widget ..."> ...
   (SpacingWrappedViewResult). No choice = no wrapper = today's look.

   Top / Bottom REPLACE the widget section's own vertical padding and
   drop its vertical margin - every theme puts a widget's vertical room
   on that root section (Cornerstone / Airspace: padding; the Default
   theme partly on margins like mb-5). !important because the themes
   use Bootstrap utilities (p-0, mb-5) that are !important themselves.
   The big sizes shrink on narrow screens.

   Left / Right ADD an inset inside the widget's content container, so
   a widget's background still runs edge to edge. A transparent border
   rather than padding so it stacks on top of each theme's own gutter
   (which differs per theme and per breakpoint) without knowing it;
   every theme sets box-sizing: border-box (Bootstrap reboot). A widget
   with no content container (the Image Slider) ignores Left / Right.
   ============================================================= */

/* ---------- Top ---------- */
.ut-wsp--t-none > .ut-widget { padding-top: 0 !important; margin-top: 0 !important; }
.ut-wsp--t-xs > .ut-widget { padding-top: 1rem !important; margin-top: 0 !important; }
.ut-wsp--t-sm > .ut-widget { padding-top: 2rem !important; margin-top: 0 !important; }
.ut-wsp--t-md > .ut-widget { padding-top: 3rem !important; margin-top: 0 !important; }
.ut-wsp--t-lg > .ut-widget { padding-top: clamp(3rem, 7vw, 4.5rem) !important; margin-top: 0 !important; }
.ut-wsp--t-xl > .ut-widget { padding-top: clamp(3.5rem, 9vw, 6.5rem) !important; margin-top: 0 !important; }
.ut-wsp--t-xxl > .ut-widget { padding-top: clamp(4rem, 12vw, 9rem) !important; margin-top: 0 !important; }

/* ---------- Bottom ---------- */
.ut-wsp--b-none > .ut-widget { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.ut-wsp--b-xs > .ut-widget { padding-bottom: 1rem !important; margin-bottom: 0 !important; }
.ut-wsp--b-sm > .ut-widget { padding-bottom: 2rem !important; margin-bottom: 0 !important; }
.ut-wsp--b-md > .ut-widget { padding-bottom: 3rem !important; margin-bottom: 0 !important; }
.ut-wsp--b-lg > .ut-widget { padding-bottom: clamp(3rem, 7vw, 4.5rem) !important; margin-bottom: 0 !important; }
.ut-wsp--b-xl > .ut-widget { padding-bottom: clamp(3.5rem, 9vw, 6.5rem) !important; margin-bottom: 0 !important; }
.ut-wsp--b-xxl > .ut-widget { padding-bottom: clamp(4rem, 12vw, 9rem) !important; margin-bottom: 0 !important; }

/* ---------- Left / Right ----------
   The content containers of every theme: Bootstrap's (Default, Alpha),
   Cornerstone's cs-container, Airspace's au-container, and the Airspace
   Call to Action's own content block. */
.ut-wsp--l-xs > .ut-widget :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid, .cs-container, .au-container, .ut-widget-cta__content) { border-left: 1rem solid transparent; }
.ut-wsp--l-sm > .ut-widget :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid, .cs-container, .au-container, .ut-widget-cta__content) { border-left: min(2rem, 4vw) solid transparent; }
.ut-wsp--l-md > .ut-widget :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid, .cs-container, .au-container, .ut-widget-cta__content) { border-left: min(4rem, 6vw) solid transparent; }
.ut-wsp--l-lg > .ut-widget :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid, .cs-container, .au-container, .ut-widget-cta__content) { border-left: min(6rem, 8vw) solid transparent; }
.ut-wsp--l-xl > .ut-widget :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid, .cs-container, .au-container, .ut-widget-cta__content) { border-left: min(9rem, 11vw) solid transparent; }
.ut-wsp--l-xxl > .ut-widget :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid, .cs-container, .au-container, .ut-widget-cta__content) { border-left: min(12rem, 14vw) solid transparent; }

.ut-wsp--r-xs > .ut-widget :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid, .cs-container, .au-container, .ut-widget-cta__content) { border-right: 1rem solid transparent; }
.ut-wsp--r-sm > .ut-widget :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid, .cs-container, .au-container, .ut-widget-cta__content) { border-right: min(2rem, 4vw) solid transparent; }
.ut-wsp--r-md > .ut-widget :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid, .cs-container, .au-container, .ut-widget-cta__content) { border-right: min(4rem, 6vw) solid transparent; }
.ut-wsp--r-lg > .ut-widget :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid, .cs-container, .au-container, .ut-widget-cta__content) { border-right: min(6rem, 8vw) solid transparent; }
.ut-wsp--r-xl > .ut-widget :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid, .cs-container, .au-container, .ut-widget-cta__content) { border-right: min(9rem, 11vw) solid transparent; }
.ut-wsp--r-xxl > .ut-widget :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-fluid, .cs-container, .au-container, .ut-widget-cta__content) { border-right: min(12rem, 14vw) solid transparent; }