/* =========================================================
   Testimonials ("In their words")
   Homepage rotator: one quote at a time, a gold line fills under the
   active column, then the next quote appears. Pause button stops it.
   Built from Testimonials-Design-Spec.md, mapped to the site's tokens.
   ========================================================= */

.jh-t {
  /* Site tokens where they exist; spec values for the rest */
  --jh-navy:       var(--ink);
  --jh-cream:      var(--cream);
  --jh-gold:       var(--accent-light);
  --jh-gold-hover: #F6D4A0;
  --jh-clay:       #C8743A;
  --jh-muted:      #B8C4CE;
  --jh-dim:        #8FA3B4;
  --jh-line:       #3A5A74;
  --jh-dot:        #4A6A84;

  /* How long each quote stays up */
  --jh-t-duration: 8s;

  background: var(--jh-navy);
  color: var(--jh-cream);
  font-family: var(--sans);
  padding-block: 112px 104px;   /* side padding + page measure come from .section */
}

.jh-t__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Discipline pages (<body data-lane="...">) use their own accent instead of
   gold: --lane-light (lane-motion.css) is the hue lifted for navy grounds,
   --lane (style.css) the same hue for rules. The homepage stays gold. */
body[data-lane] .jh-t {
  --jh-gold:       var(--lane-light, var(--accent-light));
  --jh-gold-hover: color-mix(in oklch, var(--lane-light, var(--accent-light)) 55%, white);
  --jh-clay:       var(--lane, #C8743A);
}

/* Header row: eyebrow + pause button */
.jh-t__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.jh-t__eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jh-gold);
}

.jh-t__pause {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--jh-dot);
  border-radius: 2px;
  background: transparent;
  color: #C9D3DB;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.jh-t__pause:hover { border-color: var(--jh-muted); color: var(--jh-cream); }
.jh-t .jh-t__pause:focus-visible,
.jh-t .jh-t__tab:focus-visible,
.jh-t .jh-t__more a:focus-visible { outline: 2px solid var(--jh-gold); outline-offset: 4px; }

/* The quote */
.jh-t__stage {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.jh-t__slide {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.jh-t__slide[hidden] { display: none; }

.jh-t__quote {
  margin: 0;
  max-width: 1040px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.18;
  color: var(--jh-cream);
}
.jh-t__quote em {
  font-style: italic;
  color: var(--jh-gold);
}

.jh-t__cite {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C9D3DB;
}
.jh-t__cite::before {
  content: "";
  display: block;
  flex: none;
  width: 40px;
  height: 1px;
  background: var(--jh-clay);
}

/* Track under the quote: one column per quote */
.jh-t__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  border-top: 1px solid var(--jh-line);
}

.jh-t__tab {
  position: relative;
  min-height: 44px;
  padding: 26px 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: inherit;
}
.jh-t__tab-dot {
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--jh-dot);
  transition: background 0.3s ease;
}
.jh-t__tab-bar {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--jh-gold);
}
.jh-t__tab-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--jh-dim);
}
.jh-t__tab-label {
  font-size: 17px;
  font-weight: 500;
  color: var(--jh-muted);
  transition: color 0.3s ease;
}
.jh-t__tab-sub {
  font-size: 14px;
  color: var(--jh-dim);
}

.jh-t__tab[aria-pressed="true"] .jh-t__tab-dot   { background: var(--jh-gold); }
.jh-t__tab[aria-pressed="true"] .jh-t__tab-label { color: var(--jh-cream); }
.jh-t__tab:hover .jh-t__tab-label                { color: var(--jh-cream); }

/* Gold progress line: runs only while on screen and not paused */
.jh-t__tab[aria-pressed="true"] .jh-t__tab-bar {
  animation: jh-t-fill var(--jh-t-duration) linear forwards;
  animation-play-state: paused;
}
.jh-t.is-running:not(.is-paused) .jh-t__tab[aria-pressed="true"] .jh-t__tab-bar {
  animation-play-state: running;
}

/* LinkedIn link */
.jh-t__more { margin: 0; }
.jh-t__more a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--jh-gold);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.jh-t__more a:hover { color: var(--jh-gold-hover); }

/* Two-quote version (Operations page) */
.jh-t__track--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jh-t--compact { padding-block: 104px 96px; }
.jh-t--compact .jh-t__stage { min-height: 260px; }

/* Animations */
.jh-t__slide.is-entering { animation: jh-t-in 0.9s cubic-bezier(.2,.7,.2,1) both; }

[data-jh-reveal] { opacity: 0; transform: translateY(18px); filter: blur(6px); }
[data-jh-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1), filter 0.9s ease;
}

@keyframes jh-t-in {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes jh-t-fill {
  from { width: 0; }
  to   { width: 100%; }
}

/* Phones: numbers only in the track; taller stage so the page doesn't jump */
@media (max-width: 640px) {
  .jh-t { padding-block: 80px; }
  .jh-t__inner { gap: 44px; }
  .jh-t__stage,
  .jh-t--compact .jh-t__stage { min-height: 360px; }
  .jh-t--compact { padding-block: 80px; }
  .jh-t__tab-label,
  .jh-t__tab-sub { display: none; }
}

/* Reduced motion: no blur, no movement; rotator starts paused (in JS) */
@media (prefers-reduced-motion: reduce) {
  .jh-t__slide.is-entering { animation: none; }
  [data-jh-reveal] { opacity: 1; transform: none; filter: none; }
  .jh-t__tab[aria-pressed="true"] .jh-t__tab-bar { animation: none; width: 100%; }
}