/* =========================================================
   JING REN TANG
   PAGE — SOULAGER LA DOULEUR

   Global CSS compatible
   Page-specific rules only
========================================================= */


/* =========================================================
   01 — PAGE ROOT
========================================================= */

#main-content .jrt-pain {
  width: 100%;
  overflow: hidden;
}


/* =========================================================
   02 — HERO
========================================================= */

#main-content .jrt-pain-hero {
  min-height: 650px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(247, 243, 235, 0.98) 0%,
      rgba(247, 243, 235, 0.94) 43%,
      rgba(247, 243, 235, 0.72) 66%,
      rgba(247, 243, 235, 0.28) 100%
    ),
    url("/wp-content/uploads/douleur-hero.jpg")
    center / cover no-repeat;
}

#main-content .jrt-pain-hero__content {
  max-width: 820px;

  padding:
    clamp(96px, 11vw, 150px)
    0;
}

#main-content .jrt-pain-hero__lead {
  max-width: 720px;

  margin-bottom: 36px;

  color: var(--jrt-text);

  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.72;
}

#main-content .jrt-pain-hero__actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;
}


/* =========================================================
   03 — INTRODUCTION
========================================================= */

#main-content .jrt-pain-intro {
  background: var(--jrt-white);
}


/* =========================================================
   04 — SHARED SECTION HEAD
========================================================= */

#main-content .jrt-pain-section-head {
  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(280px, 0.75fr);

  align-items: end;

  gap: clamp(36px, 6vw, 72px);
}

#main-content
.jrt-pain-section-head
.jrt-section-head__intro {
  max-width: 430px;

  margin-bottom: 4px;
}


/* =========================================================
   05 — CONDITION DIRECTORY
========================================================= */

#main-content .jrt-pain-directory {
  background: var(--jrt-cream);
}

#main-content .jrt-pain-condition-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 22px;
}

#main-content .jrt-pain-condition-card {
  min-height: 350px;

  display: flex;
  flex-direction: column;
}

#main-content
.jrt-pain-condition-card
.jrt-link-arrow {
  margin-top: auto;
}


/* =========================================================
   06 — PAIN MECHANISMS
========================================================= */

#main-content .jrt-pain-mechanisms {
  background: var(--jrt-white);
}

#main-content .jrt-pain-mechanism-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 28px;
}

#main-content .jrt-pain-mechanism {
  padding-top: 28px;

  border-top:
    1px solid
    rgba(31, 61, 58, 0.15);
}

#main-content
.jrt-pain-mechanism
.jrt-card-number {
  display: block;

  margin-bottom: 42px;
}


/* =========================================================
   07 — BODY PROCESS
========================================================= */

#main-content .jrt-pain-process {
  padding:
    clamp(84px, 9vw, 132px)
    0;

  background: var(--jrt-green-dark);
}

#main-content .jrt-pain-process h2 {
  max-width: 850px;

  color: var(--jrt-white);
}

#main-content .jrt-pain-process__flow {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  align-items: center;

  margin-top: 54px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.18);
}

#main-content .jrt-pain-process__item {
  min-height: 176px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 28px 18px;
}

#main-content .jrt-pain-process__item span {
  color: var(--jrt-gold);

  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

#main-content .jrt-pain-process__item strong {
  color: var(--jrt-white);

  font-size: clamp(1.12rem, 1.6vw, 1.48rem);
  font-weight: 500;
  line-height: 1.25;
}

#main-content .jrt-pain-process__arrow {
  color: rgba(255, 255, 255, 0.42);

  font-size: 1.1rem;
}

#main-content .jrt-pain-process__note {
  max-width: 680px;

  margin:
    40px
    0
    0;

  color: rgba(255, 255, 255, 0.74);
}


/* =========================================================
   08 — APPROACH
========================================================= */

#main-content .jrt-pain-approach {
  background: var(--jrt-cream-light);
}

#main-content .jrt-pain-split {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  align-items: center;

  gap: clamp(48px, 7vw, 96px);
}

#main-content .jrt-pain-approach__image {
  min-height: 580px;

  margin: 0;

  overflow: hidden;

  border-radius: var(--jrt-radius-large);
}

#main-content .jrt-pain-approach__image img {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 580px;

  object-fit: cover;
}

#main-content .jrt-pain-observation-list {
  margin-top: 40px;

  border-top:
    1px solid
    rgba(31, 61, 58, 0.15);
}

#main-content
.jrt-pain-observation-list
> div {
  display: grid;

  grid-template-columns:
    44px
    minmax(0, 1fr);

  gap: 16px;

  padding: 18px 0;

  border-bottom:
    1px solid
    rgba(31, 61, 58, 0.15);
}

#main-content
.jrt-pain-observation-list
span {
  color: var(--jrt-gold);

  font-size: 0.76rem;
  font-weight: 700;
}

#main-content
.jrt-pain-observation-list
p {
  margin: 0;

  color: var(--jrt-text);
}


/* =========================================================
   09 — METHODS
========================================================= */

#main-content .jrt-pain-methods {
  background: var(--jrt-cream);
}

#main-content .jrt-pain-method-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 22px;
}

#main-content .jrt-pain-method-card {
  min-height: 390px;

  display: flex;
  flex-direction: column;
}

#main-content
.jrt-pain-method-card
.jrt-card-number {
  margin-bottom: 58px;
}

#main-content
.jrt-pain-method-card
.jrt-link-arrow {
  margin-top: auto;
}

#main-content
.jrt-pain-method-card--featured {
  background: var(--jrt-green-dark);
}

#main-content
.jrt-pain-method-card--featured
h3,

#main-content
.jrt-pain-method-card--featured
p {
  color: var(--jrt-white);
}

#main-content
.jrt-pain-method-card--featured
.jrt-link-arrow {
  color: var(--jrt-paper) !important;
}

#main-content
.jrt-pain-method-card--featured
.jrt-link-arrow:hover {
  color: var(--jrt-gold-light, var(--jrt-gold)) !important;
}


/* =========================================================
   10 — CLINICAL OBSERVATIONS
========================================================= */

#main-content .jrt-pain-observations {
  background: var(--jrt-white);
}

#main-content .jrt-pain-observation-quotes {
  margin-top: 48px;

  border-top:
    1px solid
    rgba(31, 61, 58, 0.15);
}

#main-content
.jrt-pain-observation-quotes
blockquote {
  margin: 0;

  padding: 28px 0;

  border: 0;

  border-bottom:
    1px solid
    rgba(31, 61, 58, 0.15);
}

#main-content
.jrt-pain-observation-quotes
blockquote
p {
  margin: 0;

  color: var(--jrt-green-dark);

  font-size: clamp(1.2rem, 2vw, 1.58rem);
  line-height: 1.52;
}

#main-content
.jrt-pain-observations__closing {
  max-width: 720px;

  margin:
    36px
    0
    0;
}


/* =========================================================
   11 — FAQ
========================================================= */

#main-content .jrt-pain-faq {
  background: var(--jrt-cream-light);
}

#main-content .jrt-pain-faq__heading {
  max-width: 780px;

  margin-bottom: 48px;
}

#main-content .jrt-pain-accordion {
  max-width: 960px;
}

#main-content .jrt-pain-accordion details {
  border-top:
    1px solid
    rgba(31, 61, 58, 0.15);
}

#main-content
.jrt-pain-accordion
details:last-child {
  border-bottom:
    1px solid
    rgba(31, 61, 58, 0.15);
}

#main-content .jrt-pain-accordion summary {
  position: relative;

  padding:
    24px
    56px
    24px
    0;

  color: var(--jrt-green-dark);

  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;

  cursor: pointer;

  list-style: none;
}

#main-content
.jrt-pain-accordion
summary::-webkit-details-marker {
  display: none;
}

#main-content .jrt-pain-accordion summary::after {
  position: absolute;

  top: 50%;
  right: 4px;

  content: "+";

  color: var(--jrt-gold);

  font-size: 1.5rem;
  font-weight: 400;

  transform: translateY(-50%);
}

#main-content
.jrt-pain-accordion
details[open]
summary::after {
  content: "−";
}

#main-content .jrt-pain-accordion__content {
  max-width: 760px;

  padding:
    0
    0
    26px;
}

#main-content
.jrt-pain-accordion__content
p {
  margin-bottom: 0;
}


/* =========================================================
   12 — FINAL CTA
========================================================= */

#main-content .jrt-pain-cta {
  padding:
    clamp(82px, 9vw, 124px)
    0;

  background: var(--jrt-green);
}

#main-content .jrt-pain-cta__inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    auto;

  align-items: center;

  gap: 64px;
}

#main-content .jrt-pain-cta h2 {
  max-width: 800px;

  color: var(--jrt-white);
}

#main-content .jrt-pain-cta p {
  max-width: 720px;

  margin-bottom: 0;

  color: rgba(255, 255, 255, 0.78);
}


/* =========================================================
   13 — TABLET
========================================================= */

@media (max-width: 1100px) {

  #main-content .jrt-pain-condition-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  #main-content .jrt-pain-mechanism-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  #main-content .jrt-pain-process__flow {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));
  }

  #main-content .jrt-pain-process__arrow {
    display: none;
  }
}


/* =========================================================
   14 — MOBILE
========================================================= */

@media (max-width: 767px) {

  #main-content .jrt-pain-hero {
    min-height: auto;

    background:
      linear-gradient(
        90deg,
        rgba(247, 243, 235, 0.98) 0%,
        rgba(247, 243, 235, 0.93) 72%,
        rgba(247, 243, 235, 0.78) 100%
      ),
      url("/wp-content/uploads/douleur-hero.jpg")
      63% center / cover no-repeat;
  }

  #main-content .jrt-pain-hero__content {
    padding:
      84px
      0;
  }

  #main-content .jrt-pain-hero h1 br {
    display: none;
  }

  #main-content .jrt-pain-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  #main-content
  .jrt-pain-hero__actions
  .jrt-btn {
    width: 100%;
  }

  #main-content .jrt-pain-section-head {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  #main-content .jrt-pain-condition-grid,
  #main-content .jrt-pain-mechanism-grid,
  #main-content .jrt-pain-method-grid {
    grid-template-columns: 1fr;
  }

  #main-content .jrt-pain-condition-card {
    min-height: 310px;
  }

  #main-content .jrt-pain-process__flow {
    grid-template-columns: 1fr;

    margin-top: 40px;
  }

  #main-content .jrt-pain-process__item {
    min-height: 0;

    display: grid;

    grid-template-columns:
      46px
      minmax(0, 1fr);

    align-items: center;

    padding: 21px 0;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.14);
  }

  #main-content
  .jrt-pain-process__item:last-child {
    border-bottom: 0;
  }

  #main-content .jrt-pain-split {
    grid-template-columns: 1fr;

    gap: 44px;
  }

  #main-content .jrt-pain-approach__image,
  #main-content .jrt-pain-approach__image img {
    min-height: 420px;
  }

  #main-content .jrt-pain-method-card {
    min-height: 340px;
  }

  #main-content .jrt-pain-cta__inner {
    grid-template-columns: 1fr;

    gap: 34px;
  }

  #main-content .jrt-pain-cta__action,
  #main-content
  .jrt-pain-cta__action
  .jrt-btn {
    width: 100%;
  }
}


/* =========================================================
   15 — SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  #main-content .jrt-pain-approach__image,
  #main-content .jrt-pain-approach__image img {
    min-height: 350px;
  }
}

/* =========================================================
   SOULAGER LA DOULEUR
   DARK AREA + LINK COLOR FIX

   Add at the END of page-douleur.css
========================================================= */


/* =========================================================
   01 — HERO BUTTONS
========================================================= */

/* Primary button */

#main-content
.jrt-pain
.jrt-pain-hero
a.jrt-btn--primary {
  color: var(--jrt-white, #ffffff) !important;
  -webkit-text-fill-color:
    var(--jrt-white, #ffffff) !important;

  background:
    var(--jrt-green, #1f4b43) !important;

  border-color:
    var(--jrt-green, #1f4b43) !important;

  text-decoration: none !important;
}

#main-content
.jrt-pain
.jrt-pain-hero
a.jrt-btn--primary:hover,
#main-content
.jrt-pain
.jrt-pain-hero
a.jrt-btn--primary:focus-visible {
  color: var(--jrt-white, #ffffff) !important;
  -webkit-text-fill-color:
    var(--jrt-white, #ffffff) !important;

  background:
    var(--jrt-green-dark, #173d37) !important;

  border-color:
    var(--jrt-green-dark, #173d37) !important;
}


/* Outline button */

#main-content
.jrt-pain
.jrt-pain-hero
a.jrt-btn--outline {
  color: var(--jrt-green, #1f4b43) !important;
  -webkit-text-fill-color:
    var(--jrt-green, #1f4b43) !important;

  background: transparent !important;

  border-color:
    var(--jrt-green, #1f4b43) !important;

  text-decoration: none !important;
}

#main-content
.jrt-pain
.jrt-pain-hero
a.jrt-btn--outline:hover,
#main-content
.jrt-pain
.jrt-pain-hero
a.jrt-btn--outline:focus-visible {
  color: var(--jrt-white, #ffffff) !important;
  -webkit-text-fill-color:
    var(--jrt-white, #ffffff) !important;

  background:
    var(--jrt-green, #1f4b43) !important;

  border-color:
    var(--jrt-green, #1f4b43) !important;
}


/* =========================================================
   02 — DARK PROCESS SECTION
========================================================= */

#main-content
.jrt-pain
.jrt-pain-process {
  color: var(--jrt-white, #ffffff);
}

#main-content
.jrt-pain
.jrt-pain-process
.jrt-kicker {
  color: var(--jrt-gold, #b49758) !important;
  -webkit-text-fill-color:
    var(--jrt-gold, #b49758) !important;
}

#main-content
.jrt-pain
.jrt-pain-process
h2 {
  color: var(--jrt-white, #ffffff) !important;
  -webkit-text-fill-color:
    var(--jrt-white, #ffffff) !important;
}

#main-content
.jrt-pain
.jrt-pain-process__item
span {
  color: var(--jrt-gold, #b49758) !important;
  -webkit-text-fill-color:
    var(--jrt-gold, #b49758) !important;
}

#main-content
.jrt-pain
.jrt-pain-process__item
strong {
  color: var(--jrt-white, #ffffff) !important;
  -webkit-text-fill-color:
    var(--jrt-white, #ffffff) !important;
}

#main-content
.jrt-pain
.jrt-pain-process__note {
  color: rgba(255, 255, 255, 0.76) !important;
  -webkit-text-fill-color:
    rgba(255, 255, 255, 0.76) !important;
}


/* =========================================================
   03 — DARK FASCIAPUNCTURE CARD
========================================================= */

#main-content
.jrt-pain
.jrt-pain-method-card--featured {
  background:
    var(--jrt-green-dark, #173d37) !important;
}

#main-content
.jrt-pain
.jrt-pain-method-card--featured
.jrt-card-number {
  color: var(--jrt-gold, #b49758) !important;
  -webkit-text-fill-color:
    var(--jrt-gold, #b49758) !important;
}

#main-content
.jrt-pain
.jrt-pain-method-card--featured
h3 {
  color: var(--jrt-white, #ffffff) !important;
  -webkit-text-fill-color:
    var(--jrt-white, #ffffff) !important;
}

#main-content
.jrt-pain
.jrt-pain-method-card--featured
p {
  color: rgba(255, 255, 255, 0.86) !important;
  -webkit-text-fill-color:
    rgba(255, 255, 255, 0.86) !important;
}

#main-content
.jrt-pain
.jrt-pain-method-card--featured
a.jrt-link-arrow {
  color: var(--jrt-white, #ffffff) !important;
  -webkit-text-fill-color:
    var(--jrt-white, #ffffff) !important;

  text-decoration: none !important;
}

#main-content
.jrt-pain
.jrt-pain-method-card--featured
a.jrt-link-arrow:hover,
#main-content
.jrt-pain
.jrt-pain-method-card--featured
a.jrt-link-arrow:focus-visible {
  color: var(--jrt-gold, #b49758) !important;
  -webkit-text-fill-color:
    var(--jrt-gold, #b49758) !important;
}


/* Prevent ordinary content-link rules from recoloring
   the arrow inside the dark card */

#main-content
.jrt-pain
.jrt-pain-method-card--featured
a.jrt-link-arrow
span {
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
}


/* =========================================================
   04 — FINAL DARK CTA
========================================================= */

#main-content
.jrt-pain
.jrt-pain-cta {
  color: var(--jrt-white, #ffffff);
}

#main-content
.jrt-pain
.jrt-pain-cta
.jrt-kicker {
  color: var(--jrt-gold, #b49758) !important;
  -webkit-text-fill-color:
    var(--jrt-gold, #b49758) !important;
}

#main-content
.jrt-pain
.jrt-pain-cta
h2 {
  color: var(--jrt-white, #ffffff) !important;
  -webkit-text-fill-color:
    var(--jrt-white, #ffffff) !important;
}

#main-content
.jrt-pain
.jrt-pain-cta
p {
  color: rgba(255, 255, 255, 0.78) !important;
  -webkit-text-fill-color:
    rgba(255, 255, 255, 0.78) !important;
}


/* CTA light button */

#main-content
.jrt-pain
.jrt-pain-cta
a.jrt-btn--light {
  color: var(--jrt-green-dark, #173d37) !important;
  -webkit-text-fill-color:
    var(--jrt-green-dark, #173d37) !important;

  background: var(--jrt-white, #ffffff) !important;

  border-color:
    var(--jrt-white, #ffffff) !important;

  text-decoration: none !important;
}

#main-content
.jrt-pain
.jrt-pain-cta
a.jrt-btn--light:hover,
#main-content
.jrt-pain
.jrt-pain-cta
a.jrt-btn--light:focus-visible {
  color: var(--jrt-white, #ffffff) !important;
  -webkit-text-fill-color:
    var(--jrt-white, #ffffff) !important;

  background: transparent !important;

  border-color:
    var(--jrt-white, #ffffff) !important;
}


/* =========================================================
   05 — DARK COMPONENT LINK PROTECTION
========================================================= */

#main-content
.jrt-pain
.jrt-card--dark
a,

#main-content
.jrt-pain
.jrt-pain-process
a,

#main-content
.jrt-pain
.jrt-pain-cta
a {
  text-decoration-color: transparent !important;
}

#main-content
.jrt-pain
.jrt-card--dark
a:hover,

#main-content
.jrt-pain
.jrt-pain-process
a:hover,

#main-content
.jrt-pain
.jrt-pain-cta
a:hover {
  text-decoration-color: transparent !important;
}