/* =========================================================
   JSC LAYOUT PRIMITIVES
   File: jsc-layout.css
   Layer: Layout / Primitives
   Version: 1.1
========================================================= */


/* =========================================================
   1) GLOBAL SAFETY
========================================================= */

.jsc-container,
.jsc-container *,
.jsc-stack,
.jsc-stack *,
.jsc-row,
.jsc-row *,
.jsc-grid,
.jsc-grid *{
  box-sizing: border-box;
}


/* =========================================================
   2) CONTAINERS
========================================================= */
.jsc-hero.elementor-element{
  padding-top: calc(var(--jsc-header-current-height) + 50px)
}

.jsc-anchor{
  scroll-margin-top: calc(var(--jsc-header-current-height, 96px) + var(--jsc-space-lg));
}

.jsc-container{
  width: min(100% - (var(--jsc-gutter-desktop) * 2), var(--jsc-container-max));
  margin-inline: auto;
}

.jsc-container--wide{
  width: min(100% - (var(--jsc-gutter-desktop) * 2), var(--jsc-container-wide));
  margin-inline: auto;
}

.jsc-container--full{
  width: 100%;
  margin-inline: 0;
}

.jsc-container--flush{
  width: 100%;
  padding-inline: 0;
  margin-inline: 0;
}


/* =========================================================
   3) SECTION RHYTHM
========================================================= */

.elementor .jsc-page-offset{
  padding-top: var(--jsc-header-offset-desktop);
}

.jsc-section{
  position: relative;
  padding-block: clamp(72px, 10vw, 120px);
}

.jsc-section--sm{
  padding-block: clamp(48px, 7vw, 72px);
}

.jsc-section--lg{
  padding-block: clamp(96px, 12vw, 160px);
}

.jsc-section--flush-top{
  padding-top: 0;
}

.jsc-section--flush-bottom{
  padding-bottom: 0;
}

.jsc-section--divider-top{
  border-top: 1px solid var(--jsc-divider);
}

.jsc-section--divider-bottom{
  border-bottom: 1px solid var(--jsc-divider);
}


/* =========================================================
   4) STACK
========================================================= */

.jsc-stack{
  display: flex;
  flex-direction: column;
}

.jsc-stack > *{
  margin: 0;
}

.jsc-stack--2xs{ gap: var(--jsc-space-2xs); }
.jsc-stack--xs{ gap: var(--jsc-space-xs); }
.jsc-stack--sm{ gap: var(--jsc-space-sm); }
.jsc-stack--md{ gap: var(--jsc-space-md); }
.jsc-stack--lg{ gap: var(--jsc-space-lg); }


/* =========================================================
   5) ROW / CLUSTER
========================================================= */

.jsc-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.jsc-row--nowrap{
  flex-wrap: nowrap;
}

.jsc-row--start{
  justify-content: flex-start;
}

.jsc-row--center{
  justify-content: center;
}

.jsc-row--end{
  justify-content: flex-end;
}

.jsc-row--between{
  justify-content: space-between;
}

.jsc-row--around{
  justify-content: space-around;
}

.jsc-row--top{
  align-items: flex-start;
}

.jsc-row--middle{
  align-items: center;
}

.jsc-row--bottom{
  align-items: flex-end;
}

.jsc-row--xs{ gap: var(--jsc-space-xs); }
.jsc-row--sm{ gap: var(--jsc-space-sm); }
.jsc-row--md{ gap: var(--jsc-space-md); }
.jsc-row--lg{ gap: var(--jsc-space-lg); }


/* =========================================================
   6) GRID
========================================================= */

.jsc-grid{
  display: grid;
  gap: var(--jsc-space-md);
  min-width: 0;
}

.jsc-grid--2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jsc-grid--3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jsc-grid--4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jsc-grid--halves{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.jsc-grid--sidebar-left{
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
}

.jsc-grid--sidebar-right{
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
}

.jsc-grid--golden{
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.jsc-grid--golden-reverse{
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.jsc-grid--xs{ gap: var(--jsc-space-xs); }
.jsc-grid--sm{ gap: var(--jsc-space-sm); }
.jsc-grid--md{ gap: var(--jsc-space-md); }
.jsc-grid--lg{ gap: var(--jsc-space-lg); }


/* =========================================================
   7) COLUMN WIDTH HELPERS
========================================================= */

.jsc-col{
  min-width: 0;
}

.jsc-col--auto{
  width: auto;
  flex: 0 0 auto;
}

.jsc-col--fill{
  width: auto;
  flex: 1 1 0%;
  min-width: 0;
}


/* =========================================================
   8) ALIGNMENT HELPERS
========================================================= */

.jsc-align-start{ justify-self: start; }
.jsc-align-center{ justify-self: center; }
.jsc-align-end{ justify-self: end; }

.jsc-self-start{ align-self: flex-start; }
.jsc-self-center{ align-self: center; }
.jsc-self-end{ align-self: flex-end; }

.jsc-text-left{ text-align: left; }
.jsc-text-center{ text-align: center; }
.jsc-text-right{ text-align: right; }


/* =========================================================
   9) WIDTH / MEASURE HELPERS
========================================================= */

.jsc-measure-20{ max-width: 20ch; }
.jsc-measure-28{ max-width: 28ch; }
.jsc-measure-36{ max-width: 36ch; }
.jsc-measure-48{ max-width: 48ch; }
.jsc-measure-60{ max-width: 60ch; }
.jsc-measure-72{ max-width: 72ch; }

.jsc-w-full{ width: 100%; }
.jsc-w-auto{ width: auto; }
.jsc-max-content{ max-width: max-content; }


/* =========================================================
   10) RESPONSIVE
========================================================= */

@media (max-width: 1024px){
  .jsc-container,
  .jsc-container--wide{
    width: min(100% - (var(--jsc-gutter-tablet) * 2), 100%);
  }

  .jsc-grid--4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jsc-grid--3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jsc-grid--sidebar-left,
  .jsc-grid--sidebar-right,
  .jsc-grid--golden,
  .jsc-grid--golden-reverse{
    grid-template-columns: 1fr;
  }

  .elementor .jsc-page-offset{
    padding-top: var(--jsc-header-offset-tablet);
  }
}

@media (max-width: 767px){
  .jsc-container,
  .jsc-container--wide{
    width: min(100% - (var(--jsc-gutter-mobile) * 2), 100%);
  }

  .jsc-grid--2,
  .jsc-grid--3,
  .jsc-grid--4,
  .jsc-grid--halves{
    grid-template-columns: 1fr;
  }

  .jsc-row{
    gap: var(--jsc-space-sm);
  }

  .elementor .jsc-page-offset{
    padding-top: var(--jsc-header-offset-mobile);
  }
}