/* =====================================================================
   BP 01 SPACING
   Best Placed Kit v4.1

   Fluent Snippet:  BP 01 Spacing     Type: CSS, front end      Priority: 2

   The same section-* and gap-* classes the agency has used since TMS,
   rewritten so they hand the numbers to Elementor rather than fight it.

   HOW IT WORKS NOW
   Each class sets Elementor's own variables (--padding-top, --row-gap)
   on the container. Elementor's stylesheet then applies them.

     * Leave the padding and gap fields EMPTY in the panel and the class
       decides. That is the normal case, and it is what keeps every site
       on one scale.
     * Type a value into the panel and the panel wins, on that element
       only. No !important, no hunting through CSS.

   So do NOT zero the padding on a container that carries a section-*
   class. A typed 0 is a value and it will beat the class.

   SCALE (400px wide to 1280px wide)
     section-xxs 24     section-xs 32-40   section-s 44-60   section-m 56-80
     section-l 64-100   section-xl 80-120  section-xxl 100-160
     (the first figure is a phone, the second a desktop)
     section-bar 8, for header and footer bars
     side padding 20-80, on every section-* class

     gap-xxs 4-8   gap-xs 8-12   gap-s 12-16   gap-m 20
     gap-l 20-40   gap-xl 20-60  gap-xxl 20-120
===================================================================== */

:root {
    --side:        clamp(1.25rem, -0.4545rem + 6.8182vw, 5rem);
    --section-xxs: 1.5rem;
    --section-xs:  clamp(2rem, 1.7727rem + 0.9091vw, 2.5rem);
    --section-s:   clamp(2.75rem, 2.2955rem + 1.8182vw, 3.75rem);
    --section-m:   clamp(3.5rem, 2.8182rem + 2.7273vw, 5rem);
    --section-l:   clamp(4rem, 2.9773rem + 4.0909vw, 6.25rem);
    --section-xl:  clamp(5rem, 3.8636rem + 4.5455vw, 7.5rem);
    --section-xxl: clamp(6.25rem, 4.5455rem + 6.8182vw, 10rem);
    --gap-xxs:     clamp(0.25rem, 0.1364rem + 0.4545vw, 0.5rem);
    --gap-xs:      clamp(0.5rem, 0.3864rem + 0.4545vw, 0.75rem);
    --gap-s:       clamp(0.75rem, 0.6364rem + 0.4545vw, 1rem);
    --gap-m:       1.25rem;
    --gap-l:       clamp(1.25rem, 0.6818rem + 2.2727vw, 2.5rem);
    --gap-xl:      clamp(1.25rem, 0.1136rem + 4.5455vw, 3.75rem);
    --gap-xxl:     clamp(1.25rem, -1.5909rem + 11.3636vw, 7.5rem);
    --section-narrow:    62.5rem;
    --section-narrow-xs: 45rem;
}

/* containers start at zero padding unless Site Settings > Layout says otherwise */
body { --container-default-padding-top: 0px; --container-default-padding-right: 0px;
       --container-default-padding-bottom: 0px; --container-default-padding-left: 0px; }

.e-con.section-xxs { --padding-top: var(--section-xxs); --padding-bottom: var(--section-xxs); --padding-left: var(--side); --padding-right: var(--side); }
.e-con.section-xs  { --padding-top: var(--section-xs); --padding-bottom: var(--section-xs); --padding-left: var(--side); --padding-right: var(--side); }
.e-con.section-s   { --padding-top: var(--section-s); --padding-bottom: var(--section-s); --padding-left: var(--side); --padding-right: var(--side); }
.e-con.section-m   { --padding-top: var(--section-m); --padding-bottom: var(--section-m); --padding-left: var(--side); --padding-right: var(--side); }
.e-con.section-l   { --padding-top: var(--section-l); --padding-bottom: var(--section-l); --padding-left: var(--side); --padding-right: var(--side); }
.e-con.section-xl  { --padding-top: var(--section-xl); --padding-bottom: var(--section-xl); --padding-left: var(--side); --padding-right: var(--side); }
.e-con.section-xxl { --padding-top: var(--section-xxl); --padding-bottom: var(--section-xxl); --padding-left: var(--side); --padding-right: var(--side); }

/* header and footer bars: side padding to match the sections, very little height */
.e-con.section-bar   { --padding-top: .5rem; --padding-bottom: .5rem; --padding-left: var(--side); --padding-right: var(--side); }

/* modifiers */
.e-con.section-flush     { --padding-left: 0px; --padding-right: 0px; }      /* edge to edge */
.e-con.section-narrow    { --content-width: min(100%, var(--section-narrow)); }
.e-con.section-narrow-xs { --content-width: min(100%, var(--section-narrow-xs)); }

.e-con.gap-xxs { --gap: var(--gap-xxs) var(--gap-xxs); --row-gap: var(--gap-xxs); --column-gap: var(--gap-xxs); }
.e-con.gap-xs  { --gap: var(--gap-xs) var(--gap-xs); --row-gap: var(--gap-xs); --column-gap: var(--gap-xs); }
.e-con.gap-s   { --gap: var(--gap-s) var(--gap-s); --row-gap: var(--gap-s); --column-gap: var(--gap-s); }
.e-con.gap-m   { --gap: var(--gap-m) var(--gap-m); --row-gap: var(--gap-m); --column-gap: var(--gap-m); }
.e-con.gap-l   { --gap: var(--gap-l) var(--gap-l); --row-gap: var(--gap-l); --column-gap: var(--gap-l); }
.e-con.gap-xl  { --gap: var(--gap-xl) var(--gap-xl); --row-gap: var(--gap-xl); --column-gap: var(--gap-xl); }
.e-con.gap-xxl { --gap: var(--gap-xxl) var(--gap-xxl); --row-gap: var(--gap-xxl); --column-gap: var(--gap-xxl); }