/* =====================================================================
   FLUID SECTIONS – GLOBALT RAMVERK FÖR PADDING & GAP
   Användning i Elementor (Advanced → CSS Classes):
     - Välj en av storleksklasserna: section-xxl | section-xl | section-l | section-m | section-s | section-xs | section-xxs | section-header | section-hero
     - Valfria utilitys: gap-none | gap-tight | gap-m | gap-l | no-sides
   ===================================================================== */


/* =====================================================================
   1) VARIABLER – ÄNDRA HÄR
   ===================================================================== */
:root {
  /* -------------------------------------------------
     Sidopadding (vänster/höger) alla sektioner
     ------------------------------------------------- */
  --fluid-side-padding-min: 1.25rem; /*  20px */
  --fluid-side-padding-max: 5rem;    /*  80px */

  /* -------------------------------------------------
     Topp/botten-padding per sektionstyp (DEFAULTS)
     (Rokad gjord: tightare skala + XXS = 10px)
     ------------------------------------------------- */
  /* .section-xxl */
  --section-xxl-padding-min: 6.875rem; /* 110px */
  --section-xxl-padding-max: 7.5rem;   /* 120px */

  /* .section-xl */
  --section-xl-padding-min: 5.625rem;  /*  90px */
  --section-xl-padding-max: 6.25rem;   /* 100px */

  /* .section-l */
  --section-l-padding-min: 5rem;       /*  80px */
  --section-l-padding-max: 5rem;       /*  80px */

  /* .section-m */
  --section-m-padding-min: 3.75rem;    /*  60px */
  --section-m-padding-max: 3.75rem;    /*  60px */

  /* .section-s */
  --section-s-padding-min: 2.5rem;     /*  40px */
  --section-s-padding-max: 2.5rem;     /*  40px */

  /* .section-xs */
  --section-xs-padding-min: 1.5rem;    /*  24px */
  --section-xs-padding-max: 1.5rem;    /*  24px */

  /* .section-xxs */
  --section-xxs-padding-min: 0.625rem; /*  10px */
  --section-xxs-padding-max: 0.625rem; /*  10px */

  /* .section-header (fixed små topp/botten-defaults) */
  --section-header-padding-min: 0.625rem; /* 10px */
  --section-header-padding-max: 0.625rem; /* 10px */

  /* -------------------------------------------------
     Hero-höjd
     ------------------------------------------------- */
  --section-hero-height: 100vh;

  /* -------------------------------------------------
     Offset för overlay-header (om du har en negativ header-marginal)
     ------------------------------------------------- */
  --section-offset-header: 80px;

  /* -------------------------------------------------
     Maxbredd för smalare sektioner
     ------------------------------------------------- */
  --section-narrow:    62.5rem; /* 1000px */
  --section-narrow-xs: 45rem;   /*  720px */

  /* -------------------------------------------------
     GAP – GLOBALA DEFAULTS (Desktop: 40–60 px)
     ------------------------------------------------- */
  /* Desktop */
  --col-gap-desktop-min: 2.5rem;   /* 40px */
  --col-gap-desktop-max: 3.75rem;  /* 60px */
  --row-gap-desktop-min: 2.5rem;   /* 40px */
  --row-gap-desktop-max: 3.75rem;  /* 60px */

  /* Tablet (lite tajtare) */
  --col-gap-tablet-min: 1.875rem;  /* 30px */
  --col-gap-tablet-max: 3rem;      /* 48px */
  --row-gap-tablet-min: 1.875rem;  /* 30px */
  --row-gap-tablet-max: 3rem;      /* 48px */

  /* Mobile (ännu tajtare) */
  --col-gap-mobile-min: 1.25rem;   /* 20px */
  --col-gap-mobile-max: 2rem;      /* 32px */
  --row-gap-mobile-min: 1.25rem;   /* 20px */
  --row-gap-mobile-max: 2rem;      /* 32px */

  /* Aktiva desktop-värden (byts i media queries nedan) */
  --col-gap: clamp(var(--col-gap-desktop-min), 0.9vw + 0.5rem, var(--col-gap-desktop-max));
  --row-gap: clamp(var(--row-gap-desktop-min), 0.6vw + 0.5rem, var(--row-gap-desktop-max));
}


/* =====================================================================
   2) MEDIA QUERIES – RESPONSIVA GAP-DEFAULTS
   (Justera breakpoints efter dina Elementor-inställningar)
   ===================================================================== */
@media (max-width: 1024px) { /* Tablet */
  :root {
    --col-gap: clamp(var(--col-gap-tablet-min), 1.5vw + 0.25rem, var(--col-gap-tablet-max));
    --row-gap: clamp(var(--row-gap-tablet-min), 1.2vw + 0.25rem, var(--row-gap-tablet-max));
  }
}
@media (max-width: 767px) { /* Mobile */
  :root {
    --col-gap: clamp(var(--col-gap-mobile-min), 2.5vw, var(--col-gap-mobile-max));
    --row-gap: clamp(var(--row-gap-mobile-min), 2.2vw, var(--row-gap-mobile-max));
  }
}


/* =====================================================================
   3) BAS – GEMENSAM REGEL FÖR ALLA SEKTIONER
   - Sidor (L/R) är globala och låses med !important
   - Topp/botten sätts som DEFAULT via variabler (utan !important)
     → Elementor-panelens padding vinner när du matar in egna värden
   ===================================================================== */
.section-xxl,
.section-xl,
.section-l,
.section-m,
.section-s,
.section-xs,
.section-xxs,
.section-header,
.section-hero,
.section-narrow,
.section-narrow-xs {
  /* Sidopadding (global, fast formel) */
  padding-left:  clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;
  padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max)) !important;

  /* Topp/botten – DEFAULT via variabler (kan skrivas över i Elementor) */
  padding-top:    var(--_section-pad-top, 0);
  padding-bottom: var(--_section-pad-bottom, 0);
}


/* =====================================================================
   4) DEFAULTS PER SEKTIONSTORLEK (bara variabler – inga !important)
   ===================================================================== */
.section-xxl {
  --_section-pad-top:    clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
  --_section-pad-bottom: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
}
.section-xl {
  --_section-pad-top:    clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
  --_section-pad-bottom: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
}
.section-l {
  --_section-pad-top:    clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
  --_section-pad-bottom: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
}
.section-m {
  --_section-pad-top:    clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
  --_section-pad-bottom: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
}
.section-s {
  --_section-pad-top:    clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
  --_section-pad-bottom: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
}
.section-xs {
  --_section-pad-top:    clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
  --_section-pad-bottom: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
}
.section-xxs {
  --_section-pad-top:    clamp(var(--section-xxs-padding-min), 0vw + 0.625rem, var(--section-xxs-padding-max));
  --_section-pad-bottom: clamp(var(--section-xxs-padding-min), 0vw + 0.625rem, var(--section-xxs-padding-max));
}
.section-header {
  --_section-pad-top:    clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
  --_section-pad-bottom: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
}


/* =====================================================================
   5) GAP – APPLICERA PÅ CONTAINERS
   - Default: använder globala --row-gap / --col-gap
   - Per sektion kan du override:a via --_row-gap / --_col-gap
   ===================================================================== */

/* Nya Elementor Containers */
.section-xxl .e-con-inner,
.section-xl  .e-con-inner,
.section-l   .e-con-inner,
.section-m   .e-con-inner,
.section-s   .e-con-inner,
.section-xs  .e-con-inner,
.section-xxs .e-con-inner,
.section-header .e-con-inner,
.section-hero .e-con-inner,
.section-narrow .e-con-inner,
.section-narrow-xs .e-con-inner {
  /* gap: row column */
  gap: var(--_row-gap, var(--row-gap)) var(--_col-gap, var(--col-gap));
}

/* Fallback för klassiska sektioner (om sådana förekommer) */
.elementor-section .elementor-container {
  gap: var(--_row-gap, var(--row-gap)) var(--_col-gap, var(--col-gap));
}


/* =====================================================================
   6) HERO, SMAL BREDD, OFFSET
   ===================================================================== */
.section-hero { min-height: var(--section-hero-height) !important; }
.section-hero .e-con-inner { justify-content: center !important; }

.section-narrow .e-con-inner    { max-width: var(--section-narrow) !important; }
.section-narrow-xs .e-con-inner { max-width: var(--section-narrow-xs) !important; }

/* Kompenserar för overlay-headern: lägg "section-offset" i Elementor */
.section-offset {
  padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
}


/* =====================================================================
   7) GAP-UTILITYS – LOKALA ÄNDRINGAR (läggs som extra klass i Elementor)
   ===================================================================== */

/* Inget gap */
.gap-none { --_col-gap: 0; --_row-gap: 0; }

/* Tight */
.gap-s {
  --_col-gap: clamp(0.5rem, 1.5vw, 1rem);
  --_row-gap: clamp(0.5rem, 1.5vw, 1rem);
}

/* Medium (nära global default) */
.gap-m {
  --_col-gap: clamp(1rem, 1.2vw + 0.5rem, 2rem);
  --_row-gap: clamp(0.875rem, 1vw + 0.5rem, 1.5rem);
}

/* Large */
.gap-l {
  --_col-gap: clamp(1.5rem, 1.8vw + 0.5rem, 3rem);
  --_row-gap: clamp(1.25rem, 1.5vw + 0.5rem, 2.5rem);
}

/* Large */
.gap-xl {
  --_col-gap: clamp(3rem, 2.5vw + 0.5rem, 5rem);
  --_row-gap: clamp(1.75rem, 2.5vw + 0.5rem, 4.5rem);
}


/* =====================================================================
   8) ÖVRIGA UTILITYS
   ===================================================================== */

/* Ta bort sidopadding helt på en sektion vid behov */
.no-sides {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* (Valfritt) Nollställ enbart top/bottom om du vill börja från scratch i Elementor */
.no-top    { padding-top: 0 !important; }
.no-bottom { padding-bottom: 0 !important; }