/* ══════════════════════════════════════════════════════
   
   Elementor Fluid Spacing — CSS Framework
   By Umair Khan — https://umairyousafzai.com/
   
   A fluid spacing system for Elementor using CSS clamp()
   Viewports: 320px → 1140px | No JS | No dependencies
   
   GitHub: https://github.com/umairyousafzai/elementor-fluid-spacing
   
   ══════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════
   VARIABLES
   Edit values here — classes below adapt automatically.
   ══════════════════════════════════════════════════════ */

:root {

  /* ─── PADDING (all sides) ─────────────────────────
     Chained scale: each min = previous max
     Use for: cards, content blocks, buttons, containers
     
     pad-xs  →  8px → 16px
     pad-s   → 16px → 24px
     pad-m   → 24px → 32px
     pad-l   → 32px → 48px
     pad-xl  → 48px → 72px
  ──────────────────────────────────────────────────── */
  --pad-xs: clamp(0.5rem, 0.1098rem + 0.9756vw, 1rem);
  --pad-s: clamp(1rem, 0.6098rem + 0.9756vw, 1.5rem);
  --pad-m: clamp(1.5rem, 1.1098rem + 0.9756vw, 2rem);
  --pad-l: clamp(2rem, 1.2195rem + 1.9512vw, 3rem);
  --pad-xl: clamp(3rem, 1.8293rem + 2.9268vw, 4.5rem);


  /* ─── GAPS (between child elements) ───────────────
     Use for: flex/grid gap between items inside a container
     
     gap-s  →  8px → 12px
     gap-m  → 12px → 20px
     gap-l  → 20px → 32px
  ──────────────────────────────────────────────────── */
  /* // --gap-s: clamp(0.5rem, 0.3049rem + 0.4878vw, 0.75rem);
  // --gap-m: clamp(0.75rem, 0.3598rem + 0.9756vw, 1.25rem);
  // --gap-l: clamp(1.25rem, 0.6598rem + 1.4634vw, 2rem); */


  /* ─── SECTIONS ────────────────────────────────────
     Inline (left/right) = same for ALL sections
     Block (top/bottom)   = varies per size class
     Uses logical properties (RTL-ready)
     
     sec-inline    →  20px →  80px  (left/right for all)
     
     sec-block-xs  →  24px →  40px
     sec-block-s   →  36px →  60px
     sec-block-m   →  48px →  80px
     sec-block-l   →  56px → 100px
     sec-block-xl  →  64px → 120px
  ──────────────────────────────────────────────────── */
  --sec-inline: clamp(1.25rem, -0.2012rem + 6.0976vw, 5rem);
  --sec-block-xs: clamp(1.5rem, 1.1098rem + 1.9512vw, 2.5rem);
  --sec-block-s: clamp(2.25rem, 1.6646rem + 2.9268vw, 3.75rem);
  --sec-block-m: clamp(3rem, 2.2195rem + 3.9024vw, 5rem);
  --sec-block-l: clamp(3.5rem, 2.4268rem + 4.878vw, 6.25rem);
  --sec-block-xl: clamp(4rem, 2.6341rem + 6.8293vw, 7.5rem);
}


/* ══════════════════════════════════════════════════════
   UTILITY CLASSES
   Add these class names to Elementor containers via
   the "CSS Classes" field. Do not edit below.
   
   By Umair Khan — https://umairyousafzai.com/
   ══════════════════════════════════════════════════════ */


/* ─── PADDING CLASSES ──────────────────────────────
   Apply to any container for uniform padding on all sides.
   Example: Add "pad-m" to a card container in Elementor.
──────────────────────────────────────────────────── */
.pad-xs { padding: var(--pad-xs); }
.pad-s  { padding: var(--pad-s); }
.pad-m  { padding: var(--pad-m); }
.pad-l  { padding: var(--pad-l); }
.pad-xl { padding: var(--pad-xl); }


/* ─── GAP CLASSES ──────────────────────────────────
   Controls space between items inside a flex/grid container.
   Example: Add "gap-m" to a container with multiple widgets.
──────────────────────────────────────────────────── */
/* // .gap-s { gap: var(--gap-s); }
// .gap-m { gap: var(--gap-m); }
// .gap-l { gap: var(--gap-l); } */


/* ─── SECTION CLASSES ──────────────────────────────
   Full section spacing: fluid top/bottom + consistent left/right.
   Example: Add "sec-m" to a page section in Elementor.
   
   - Left/right stays the same across all sizes (20→80px)
   - Only top/bottom changes per class
──────────────────────────────────────────────────── */
.sec-xs { padding-block: var(--sec-block-xs); padding-inline: var(--sec-inline); }
.sec-s  { padding-block: var(--sec-block-s);  padding-inline: var(--sec-inline); }
.sec-m  { padding-block: var(--sec-block-m);  padding-inline: var(--sec-inline); }
.sec-l  { padding-block: var(--sec-block-l);  padding-inline: var(--sec-inline); }
.sec-xl { padding-block: var(--sec-block-xl); padding-inline: var(--sec-inline); }


/* ─── HERO & NARROW ────────────────────────────────
   sec-hero      → Full viewport height section
   sec-narrow    → Caps content width at 1000px
   sec-narrow-xs → Caps content width at 720px
──────────────────────────────────────────────────── */
.sec-hero { min-height: 100vh; }
.sec-narrow { max-width: 62.5rem; }
.sec-narrow-xs { max-width: 45rem; }


/* ══════════════════════════════════════════════════════
   
   Built with precision. Designed to scale.
   Need help or custom work? Let's connect.
   
   Umair Khan — https://umairyousafzai.com/
   
   ══════════════════════════════════════════════════════ */