/* =========================================================
   JING REN TANG — GLOBAL BASE
   File: 01-base.css
   ========================================================= */


/* ---------------------------------------------------------
   01. GLOBAL RESET
--------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--jrt-paper);
  color: var(--jrt-ink);
  font-family: var(--jrt-font-serif);
}

body,
button,
input,
select,
textarea {
  font-family: var(--jrt-font-serif);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ---------------------------------------------------------
   02. DIVI FIXED HEADER OFFSET
--------------------------------------------------------- */

@media (max-width: 767px) {
  body.et_fixed_nav #main-content {
    padding-top: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body.et_fixed_nav #main-content {
    padding-top: 100px !important;
  }
}

@media (min-width: 1025px) {
  body.et_fixed_nav #main-content {
    padding-top: 120px !important;
  }
}

.et_fixed_nav #main-header.et-fixed-header {
  top: 0 !important;
  transform: none !important;
  opacity: 1 !important;
}

#main-header {
  transform: none !important;
}


/* ---------------------------------------------------------
   03. DIVI / ICON FONT PROTECTION
--------------------------------------------------------- */

.et-pb-icon,
.et_pb_social_media_follow li a::before,
.et_pb_button::after,
.et_pb_font_icon,
.fa,
.fas,
.far,
.fab {
  font-family: "ETmodules" !important;
}

/* ---------------------------------------------------------
   04. GLOBAL PAGE WRAPPER
--------------------------------------------------------- */

.jrt-page,
.jrt-condition {
  position: relative;
  width: 100%;
  overflow-x: clip;
  color: var(--jrt-text);
}

@supports not (overflow: clip) {
  .jrt-page,
  .jrt-condition {
    overflow-x: hidden;
  }
}

.jrt-page *,
.jrt-page *::before,
.jrt-page *::after,
.jrt-condition *,
.jrt-condition *::before,
.jrt-condition *::after {
  box-sizing: border-box;
}


/* ---------------------------------------------------------
   05. FULL-WIDTH LAYOUT
   One global full-bleed system only
--------------------------------------------------------- */

.jrt-full-bleed {
  position: relative;

  width: 100vw;
  max-width: 100vw;

  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}


/* ---------------------------------------------------------
   06. CONTAINERS
--------------------------------------------------------- */

.jrt-container {
  width:
    min(
      var(--jrt-container, 1240px),
      calc(100% - 48px)
    );

  margin-right: auto;
  margin-left: auto;
}

.jrt-container--narrow {
  width:
    min(
      var(--jrt-container-narrow, 860px),
      calc(100% - 48px)
    );

  margin-right: auto;
  margin-left: auto;
}


/* ---------------------------------------------------------
   07. SECTION SPACING
--------------------------------------------------------- */

.jrt-section {
  padding:
    var(
      --jrt-space-section,
      clamp(80px, 8vw, 128px)
    )
    0;
}

.jrt-section--small {
  padding:
    var(
      --jrt-space-section-small,
      clamp(56px, 6vw, 88px)
    )
    0;
}

.jrt-section--large {
  padding:
    var(
      --jrt-space-section-large,
      clamp(100px, 10vw, 156px)
    )
    0;
}


/* ---------------------------------------------------------
   08. GLOBAL GRID SYSTEM
--------------------------------------------------------- */

.jrt-grid {
  display: grid;
  gap:
    var(
      --jrt-gap-medium,
      24px
    );
}

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

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

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


/* ---------------------------------------------------------
   09. TABLET
--------------------------------------------------------- */

@media (max-width: 980px) {

  .jrt-container,
  .jrt-container--narrow {
    width:
      min(
        100% - 36px,
        var(--jrt-container, 1240px)
      );
  }

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


/* ---------------------------------------------------------
   10. MOBILE
--------------------------------------------------------- */

@media (max-width: 767px) {

  .jrt-container,
  .jrt-container--narrow {
    width: calc(100% - 30px);
  }

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


/* ---------------------------------------------------------
   11. SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 420px) {

  .jrt-container,
  .jrt-container--narrow {
    width: calc(100% - 24px);
  }
}