/* ============================================
   Fluid Container Framework (visibility + spacing)
   - Uses your defaults at pivots, fluid in-between
   - Does NOT change container widths
   - Frontend + Backend; load as stylesheet; priority 9999
   ============================================ */

/* 0) Your DEFAULTS (at pivots) — rem values map to Elementor's T R B L
   narrow  pivot: 1280px  → padding: 2.5rem 1.5rem 2.5rem 1.5rem;  margin-bottom: 3rem
   normal  pivot: 1920px  → padding: 4rem   2rem   4rem   2rem;    margin-bottom: 4rem
   wide    pivot: 2560px  → padding: 5rem   2.5rem 5rem   2.5rem;  margin-bottom: 4.5rem
*/
:root{
  /* per-side defaults via X (left/right) and Y (top/bottom) */
  --padNarrowY: 2.5rem;  --padNarrowX: 1.5rem;  --mbNarrow: 3rem;
  --padNormalY: 4rem;    --padNormalX: 2rem;    --mbNormal: 4rem;
  --padWideY:   5rem;    --padWideX:   2.5rem;  --mbWide:   4.5rem;

  /* gentle slopes (unitless “px per px of viewport”) */
  --kNarrowY: 0.012; --kNarrowX: 0.008;
  --kNormalY: 0.015; --kNormalX: 0.010;
  --kWideY:   0.010; --kWideX:   0.007;
}

/* ===== Visibility (one variant at a time, only if it exists) ===== */
@media (max-width:1599px){
  .swap-wrapper:has(.narrow) .normal,
  .swap-wrapper:has(.narrow) .wide   { display:none !important; }
  .swap-wrapper:has(.narrow) .narrow { display:flex !important; }
}
@media (min-width:1600px) and (max-width:2099px){
  .swap-wrapper:has(.normal) .narrow,
  .swap-wrapper:has(.normal) .wide    { display:none !important; }
  .swap-wrapper:has(.normal) .normal  { display:flex !important; }
}
@media (min-width:2100px){
  .swap-wrapper:has(.wide) .narrow,
  .swap-wrapper:has(.wide) .normal { display:none !important; }
  .swap-wrapper:has(.wide) .wide   { display:flex !important; }
}

/* Fallback if :has() unsupported (older Safari). JS zoom-assist will correct
   if a requested variant is missing; this just gives a sane baseline. */
@supports not selector(:has(*)) {
  @media (max-width:1599px){
    .swap-wrapper .narrow { display:flex !important; }
    .swap-wrapper .normal, .swap-wrapper .wide { display:none !important; }
  }
  @media (min-width:1600px) and (max-width:2099px){
    .swap-wrapper .normal { display:flex !important; }
    .swap-wrapper .narrow, .swap-wrapper .wide { display:none !important; }
  }
  @media (min-width:2100px){
    .swap-wrapper .wide { display:flex !important; }
    .swap-wrapper .narrow, .swap-wrapper .normal { display:none !important; }
  }
}

/* ===== Fluid spacing INSIDE each band (anchored to pivots) =====
   Mapping: 
   - padding-block   → top & bottom
   - padding-inline  → left & right
   - margin-block-end → bottom margin (section spacing)
*/

/* Narrow band: <1600px — pivot 1280px (defaults hit exactly at 1280px) */
@media (max-width:1599px){
  .swap-wrapper .narrow{
    padding-block: clamp(
      calc(var(--padNarrowY) * 0.85),
      calc(var(--padNarrowY) + (100vw - 1280px) * var(--kNarrowY)),
      calc(var(--padNarrowY) * 1.20)
    );
    padding-inline: clamp(
      calc(var(--padNarrowX) * 0.85),
      calc(var(--padNarrowX) + (100vw - 1280px) * var(--kNarrowX)),
      calc(var(--padNarrowX) * 1.20)
    );
    margin-block-end: clamp(
      calc(var(--mbNarrow) * 0.85),
      calc(var(--mbNarrow) + (100vw - 1280px) * var(--kNarrowY)),
      calc(var(--mbNarrow) * 1.20)
    );
  }
}

/* Normal band: 1600–2099px — pivot 1920px */
@media (min-width:1600px) and (max-width:2099px){
  .swap-wrapper .normal{
    padding-block: clamp(
      calc(var(--padNormalY) * 0.90),
      calc(var(--padNormalY) + (100vw - 1920px) * var(--kNormalY)),
      calc(var(--padNormalY) * 1.25)
    );
    padding-inline: clamp(
      calc(var(--padNormalX) * 0.90),
      calc(var(--padNormalX) + (100vw - 1920px) * var(--kNormalX)),
      calc(var(--padNormalX) * 1.25)
    );
    margin-block-end: clamp(
      calc(var(--mbNormal) * 0.90),
      calc(var(--mbNormal) + (100vw - 1920px) * var(--kNormalY)),
      calc(var(--mbNormal) * 1.25)
    );
  }
}

/* Wide band: ≥2100px — pivot 2560px */
@media (min-width:2100px){
  .swap-wrapper .wide{
    padding-block: clamp(
      calc(var(--padWideY) * 0.92),
      calc(var(--padWideY) + (100vw - 2560px) * var(--kWideY)),
      calc(var(--padWideY) * 1.30)
    );
    padding-inline: clamp(
      calc(var(--padWideX) * 0.92),
      calc(var(--padWideX) + (100vw - 2560px) * var(--kWideX)),
      calc(var(--padWideX) * 1.30)
    );
    margin-block-end: clamp(
      calc(var(--mbWide) * 0.92),
      calc(var(--mbWide) + (100vw - 2560px) * var(--kWideY)),
      calc(var(--mbWide) * 1.30)
    );
  }
}