/* Jireh Home Care – Testimonials wall
   Scoped under .jht-section so it won't collide with theme styles. */

.jht-section{
  --jht-bg:#f1ecfb;
  --jht-card-1:#ffffff;
  --jht-card-2:#f7f5fc;
  --jht-ink:#221d31;
  --jht-eyebrow:#2c2740;
  --jht-quote:#57536a;
  --jht-body:#6f6c7e;
  --jht-name:#2a2639;
  --jht-role:#8b8898;
  --jht-border:rgba(40,30,70,.07);
  --jht-shadow:0 12px 34px -20px rgba(45,25,85,.40);
  --jht-radius:20px;
  --jht-gap:22px;
  --jht-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --jht-sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  background:var(--jht-bg);
  color:var(--jht-ink);
  font-family:var(--jht-sans);
  padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px);
  -webkit-font-smoothing:antialiased;
}
.jht-section *,
.jht-section *::before,
.jht-section *::after{box-sizing:border-box;}

.jht-inner{max-width:1200px;margin:0 auto;}

/* ---------- Header ---------- */
.jht-head{text-align:center;max-width:720px;margin:0 auto clamp(28px,4vw,52px);}
.jht-eyebrow{
  margin:0 0 14px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--jht-eyebrow);
}
.jht-title{
  margin:0 0 16px;
  font-family:var(--jht-serif);font-weight:600;
  font-size:clamp(30px,5.2vw,52px);line-height:1.08;letter-spacing:-.01em;
  color:var(--jht-ink);
}
.jht-sub{
  margin:0 auto;max-width:620px;
  font-size:clamp(15px,1.8vw,18px);line-height:1.6;color:var(--jht-body);
}

/* ---------- Wall (JS builds the columns) ---------- */
.jht-wall{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--jht-gap);
  height:clamp(560px,80vh,860px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
}

.jht-col{position:relative;overflow:hidden;}
.jht-track{display:flex;flex-direction:column;will-change:transform;}
.jht-track.is-up{animation:jht-up linear infinite;}
.jht-track.is-down{animation:jht-down linear infinite;}
.jht-col:hover .jht-track{animation-play-state:paused;}

/* Cards inside a moving track carry their own spacing so the loop is seamless */
.jht-track .jht-card{margin-bottom:var(--jht-gap);}

@keyframes jht-up{from{transform:translateY(0);}to{transform:translateY(-50%);}}
@keyframes jht-down{from{transform:translateY(-50%);}to{transform:translateY(0);}}

/* ---------- Card ---------- */
.jht-card{
  background:linear-gradient(180deg,var(--jht-card-1),var(--jht-card-2));
  border:1px solid var(--jht-border);
  border-radius:var(--jht-radius);
  padding:clamp(20px,2.4vw,30px);
  box-shadow:var(--jht-shadow);
}
.jht-card-title{
  margin:0 0 14px;
  font-family:var(--jht-serif);font-style:italic;font-weight:500;
  font-size:clamp(19px,2.1vw,23px);line-height:1.25;color:var(--jht-quote);
}
.jht-card-body{
  margin:0 0 22px;
  font-size:clamp(15px,1.65vw,16.5px);line-height:1.62;color:var(--jht-body);
}
.jht-person{display:flex;align-items:center;gap:13px;}
.jht-avatar{
  flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  color:#fff;font-weight:600;font-size:15px;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--a1,#b7a6e6),var(--a2,#8b74c9));
  box-shadow:0 0 0 3px rgba(255,255,255,.75),0 5px 12px -5px rgba(45,25,85,.5);
}
.jht-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.jht-meta{display:flex;flex-direction:column;min-width:0;}
.jht-name{font-weight:600;font-size:16px;line-height:1.2;color:var(--jht-name);}
.jht-role{margin-top:2px;font-size:14px;color:var(--jht-role);}

/* ---------- No-JS / reduced-motion fallback: static responsive grid ---------- */
.jht-no-js .jht-wall{
  grid-template-columns:1fr;
  height:auto;overflow:visible;
  -webkit-mask-image:none;mask-image:none;
}
.jht-no-js .jht-card{margin-bottom:0;}
@media(min-width:640px){.jht-no-js .jht-wall{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.jht-no-js .jht-wall{grid-template-columns:repeat(3,1fr);}}

@media(prefers-reduced-motion:reduce){
  .jht-track{animation:none !important;}
}
