/* Home testimonials (patterns/home-testimonials.php). Loaded only on pages with a block of class "hm-testimonials".
   Each client is one Group (initials, service, name, role, quote); bold words of a quote get the highlight band.
   Without the script (and in the editor) the clients show as cards; assets/js/sections/hm-testimonials.js adds
   .is-ready to the rail and rebuilds it as the depth rail: the client speaking sits large, the next ones recede to the
   right, the previous one waits small on the left; a progress ring fills over --hm-testimonials-dwell, then it steps on. */
.hm-testimonials{
  --hm-testimonials-big: calc(var(--s-9) * 2.3);
  --hm-testimonials-cx: 42%; /* ds-ok: speaker centre across the rail, read by the script */
  --hm-testimonials-cy: 44%; /* ds-ok: rail line height inside the box */
  --hm-testimonials-dwell: 7s; /* ds-ok: time each client speaks */
  --hm-testimonials-look: 3.2; /* ds-ok: how far the drawn pupils travel, in drawing units (read by the script) */
  --hm-testimonials-px: 0px; /* ds-ok: pupil offset, set by the script */
  --hm-testimonials-py: 0px; /* ds-ok: pupil offset, set by the script */
  --hm-testimonials-blink: 5.2s; /* ds-ok: one blink per cycle */
  --hm-testimonials-play: running;
  /* the avatar sphere keeps a white highlight and a black shade in every mode (the "light" preset turns dark in dark/moon) */
  --hm-testimonials-hi: white; /* ds-ok: fixed sphere highlight, as in the design */
  --hm-testimonials-lo: black; /* ds-ok: fixed sphere shade, as in the design */
  --hm-testimonials-line: 1px; /* ds-ok: hairline of the rail */
  --hm-testimonials-band-pad: .06em; /* ds-ok: highlight band overhang, as in the design */
  --hm-testimonials-track: -0.02em; /* ds-ok: initials tracking, base.css has no tracking tokens */
  /* stacking inside the rail: faces · speaker face · prev/next · name and quote */
  --hm-testimonials-z-face: 1; /* ds-ok: local layer */
  --hm-testimonials-z-speaker: 2; /* ds-ok: local layer */
  --hm-testimonials-z-nav: 3; /* ds-ok: local layer */
  --hm-testimonials-z-text: 4; /* ds-ok: local layer */
  border-top:1px solid var(--rule);
}
/* layout by margin/gap below: drop WordPress flow margins (three classes to out-rank the flow :first-child rule) */
.hm-testimonials > .wp-block-group{margin-block:0}
.hm-testimonials .hm-testimonials__head > *,.hm-testimonials .hm-testimonials__rail > *,.hm-testimonials .hm-testimonials__item > *,
.hm-testimonials .hm-testimonials__navs > *,.hm-testimonials .hm-testimonials__who > *{margin:0}
.hm-testimonials > .page > .hm-testimonials__head{display:grid;gap:var(--gap-text);margin:0 0 var(--gap-head)}
.hm-testimonials__title{font-size:var(--t-2xl)}
.hm-testimonials__title strong{font-weight:inherit;color:var(--accent)}
.hm-testimonials > .page > .nx{margin-top:var(--gap-head)}

/* avatar colour of each client: class is-av-1 … is-av-4 on the client's Group */
.hm-testimonials .is-av-1{--hm-testimonials-av:var(--p1)}
.hm-testimonials .is-av-2{--hm-testimonials-av:var(--p2)}
.hm-testimonials .is-av-3{--hm-testimonials-av:var(--p3)}
.hm-testimonials .is-av-4{--hm-testimonials-av:var(--p4)}

/* shared pieces */
.hm-testimonials .hm-testimonials__svc{font-size:var(--t-2xs);color:var(--accent)}
.hm-testimonials__name{font:600 var(--t-xl)/1.2 var(--font-display)}
.hm-testimonials__role{font-size:var(--t-s);color:var(--ink-2)}
.hm-testimonials__quote{font:500 var(--t-l)/1.55 var(--font-body);color:var(--ink)}
.hm-testimonials__quote strong{font-weight:inherit;background:linear-gradient(transparent 60%, var(--band) 60%);background-repeat:no-repeat;padding-inline:var(--hm-testimonials-band-pad)}

/* ---------- cards: before the script runs, and in the editor ---------- */
.hm-testimonials__rail:not(.is-ready){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-grid);max-width:var(--page);margin-inline:auto}
.hm-testimonials__rail:not(.is-ready) .hm-testimonials__item{display:grid;grid-template-columns:var(--s-8) minmax(0,1fr);align-content:start;gap:var(--s-2) var(--s-4);padding:var(--gap-card-s);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card)}
.hm-testimonials__rail:not(.is-ready) .hm-testimonials__item > *{grid-column:2}
.hm-testimonials__rail:not(.is-ready) .hm-testimonials__av{grid-column:1;grid-row:span 3;display:grid;place-items:center;width:var(--s-8);height:var(--s-8);border-radius:50%;background:var(--hm-testimonials-av);color:var(--inv-fg);font:700 var(--t-l)/1 var(--font-display)}
.hm-testimonials__rail:not(.is-ready) .hm-testimonials__quote{grid-column:1 / -1;font-size:var(--t-m)}
/* prev / next only work once the script runs: hidden on the page without it, kept editable in the editor */
.hm-testimonials__rail:not(.is-ready) .hm-testimonials__navs{display:none}
.editor-styles-wrapper .hm-testimonials__rail:not(.is-ready) .hm-testimonials__navs{grid-column:1 / -1;display:flex;justify-content:space-between;color:var(--ink-2)}

/* ---------- depth rail (built by the script) ---------- */
/* overflow-x clip: faces that slide off the rail (and their rings) never widen the page, at any width */
.hm-testimonials__rail.is-ready{position:relative;height:calc(var(--s-9) * 5.8);overflow-x:clip}
.hm-testimonials__people{position:absolute;inset:0;list-style:none;margin:0;padding:0}
.hm-testimonials__people::before{content:"";position:absolute;left:var(--s-9);right:var(--s-9);top:var(--hm-testimonials-cy);height:var(--hm-testimonials-line);background:var(--rule)}
.hm-testimonials__people li{position:absolute;left:0;top:var(--hm-testimonials-cy);z-index:var(--hm-testimonials-z-face);width:var(--hm-testimonials-big);height:var(--hm-testimonials-big);margin:0;opacity:var(--hm-testimonials-o);transition:transform calc(var(--dur-morph) * 1.5) var(--ease-out),opacity var(--dur-m) var(--ease-out)}
.hm-testimonials__people li[data-speaker]{z-index:var(--hm-testimonials-z-speaker)}
.hm-testimonials__people li.is-jump{transition:none}
.hm-testimonials__p{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.hm-testimonials__face{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 32% 28%, color-mix(in oklch, var(--hm-testimonials-av) 55%, var(--hm-testimonials-hi)), var(--hm-testimonials-av) 58%, color-mix(in oklch, var(--hm-testimonials-av) 70%, var(--hm-testimonials-lo)));color:var(--inv-fg);font:700 calc(var(--hm-testimonials-big) * .26)/1 var(--font-display);letter-spacing:var(--hm-testimonials-track);transition:transform var(--dur-m) var(--ease-out)}
.hm-testimonials__p:hover .hm-testimonials__face{transform:scale(1.06)}
/* progress ring around the speaker; one variable decides running / paused, so no selector can out-rank the pause */
.hm-testimonials__ring{position:absolute;inset:calc(var(--s-3) * -1);width:calc(100% + var(--s-5));height:calc(100% + var(--s-5));transform:rotate(-90deg);pointer-events:none}
.hm-testimonials__ring circle{fill:none;stroke:var(--accent-fill);stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.hm-testimonials__people li[data-speaker] .hm-testimonials__ring circle{opacity:1;animation:hm-testimonials-ring var(--hm-testimonials-dwell) linear forwards;animation-play-state:var(--hm-testimonials-play)}
.hm-testimonials:not(.is-live) .hm-testimonials__rail,.hm-testimonials__rail.is-hold{--hm-testimonials-play:paused}
@keyframes hm-testimonials-ring{to{stroke-dashoffset:0}}

.hm-testimonials__whos{position:absolute;left:calc(var(--hm-testimonials-cx) - var(--hm-testimonials-big) / 2);bottom:calc(100% - var(--hm-testimonials-cy) + var(--hm-testimonials-big) / 2 + var(--s-4));z-index:var(--hm-testimonials-z-text);display:grid;align-items:end;width:calc(var(--s-9) * 3.6)}
.hm-testimonials__who{grid-area:1 / 1;display:grid;justify-items:start;gap:var(--s-2);visibility:hidden}
.hm-testimonials__who.is-on{visibility:visible}
.hm-testimonials__bar{display:block;width:var(--s-7);height:calc(var(--s-1) / 2);background:var(--ink-3)}
.hm-testimonials__who.is-on > *{animation:hm-testimonials-in var(--dur-m) var(--ease-out) both}
.hm-testimonials__who.is-on > :nth-child(2){animation-delay:calc(var(--dur) / 2)}
.hm-testimonials__who.is-on > :nth-child(n+3){animation-delay:var(--dur)}

.hm-testimonials__says{position:absolute;left:calc(var(--hm-testimonials-cx) + var(--hm-testimonials-big) * .385);top:calc(var(--hm-testimonials-cy) + var(--hm-testimonials-big) / 2 - var(--s-3));z-index:var(--hm-testimonials-z-text);display:grid;width:min(calc(var(--s-9) * 3.6), calc(100% - var(--hm-testimonials-cx) - var(--hm-testimonials-big) * .385 - var(--s-5)))}
.hm-testimonials__say{grid-area:1 / 1;margin:0;padding:0;border:0;visibility:hidden}
.hm-testimonials__say::before{content:"\201D";display:block;height:var(--s-7);font:800 calc(var(--s-8) * 1.2)/1 var(--font-display);color:var(--accent-fill)}
.hm-testimonials__say.is-on{visibility:visible}
.hm-testimonials__say .hm-testimonials__quote{margin:0}
.hm-testimonials__say strong{background-size:0 100%;transition:background-size var(--dur-morph) var(--ease-out)}
.hm-testimonials__say.is-on strong{background-size:100% 100%;transition-delay:var(--dur-morph)}
/* split text: the words of the new quote fade in one after another */
.hm-testimonials__say.is-on .hm-testimonials__w{animation:hm-testimonials-in var(--dur-m) var(--ease-out) both;animation-delay:calc(var(--hm-testimonials-i) * var(--dur) / 12)}
@keyframes hm-testimonials-in{from{opacity:0}}

.hm-testimonials__rail.is-ready .hm-testimonials__navs{position:absolute;inset:0;z-index:var(--hm-testimonials-z-nav);pointer-events:none}
.hm-testimonials__nav{position:absolute;top:var(--hm-testimonials-cy);display:inline-flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-1);border:0;background:none;color:var(--ink);font:500 var(--t-m)/1 var(--font-body);cursor:pointer;pointer-events:auto;transform:translateY(-50%)}
.hm-testimonials__nav i{width:var(--s-2);height:var(--s-2);border-radius:50%;background:var(--accent-fill);transition:transform var(--dur) var(--ease-out)}
.hm-testimonials__nav:hover{color:var(--accent)}
.hm-testimonials__nav:hover i{transform:scale(1.6)}
.hm-testimonials__nav.is-prev{left:0}
.hm-testimonials__nav.is-next{right:0}

@media (max-width: 1199px){ .hm-testimonials{--hm-testimonials-big:calc(var(--s-9) * 1.9)} }
/* narrow screens: name, rail, quote and the two buttons stack; the previous client steps off the rail */
@media (max-width: 991px){
  .hm-testimonials{--hm-testimonials-big:calc(var(--s-9) * 1.2);--hm-testimonials-cx:30%;--hm-testimonials-cy:50%}
  .hm-testimonials__rail.is-ready{display:flex;flex-direction:column;gap:var(--s-5);height:auto}
  .hm-testimonials__whos,.hm-testimonials__says{position:static;width:auto}
  .hm-testimonials__says{max-width:var(--measure)}
  .hm-testimonials__people{position:relative;inset:auto;height:calc(var(--hm-testimonials-big) + var(--s-7))}
  .hm-testimonials__people::before{left:0;right:0}
  .hm-testimonials__rail.is-ready .hm-testimonials__navs{position:static;display:flex;justify-content:space-between}
  .hm-testimonials__nav{position:static;transform:none}
}
@media (min-width: 768px) and (max-width: 991px){ .hm-testimonials{--hm-testimonials-big:calc(var(--s-9) * 1.6)} }
@media (max-width: 767px){ .hm-testimonials__rail:not(.is-ready){grid-template-columns:minmax(0,1fr)} }
@media (max-width: 414px){ .hm-testimonials{--hm-testimonials-big:calc(var(--s-9) * 1.05)} }
@media (prefers-reduced-motion: reduce){
  .hm-testimonials__say.is-on .hm-testimonials__w,.hm-testimonials__who.is-on > *{animation:none}
  .hm-testimonials__people li,.hm-testimonials__say strong{transition:none}
}

/* drawn characters (inc/characters.php, chars/*.svg): cropped by the sphere, pupils follow the mouse, a blink now and then */
.hm-testimonials__face.has-char,.hm-testimonials__av:has(> svg){overflow:hidden}
.hm-testimonials__face svg,.hm-testimonials__av > svg{display:block;width:100%;height:100%}
.hm-testimonials .ch-pupils{transform:translate(var(--hm-testimonials-px),var(--hm-testimonials-py));transition:transform var(--dur) var(--ease-out)}
.hm-testimonials .ch-eyes{transform-box:fill-box;transform-origin:center;animation:hm-testimonials-blink var(--hm-testimonials-blink) infinite}
.hm-testimonials__people li:nth-child(2n) .ch-eyes{animation-delay:calc(var(--hm-testimonials-blink) / -3)}
.hm-testimonials__people li:nth-child(3n) .ch-eyes{animation-delay:calc(var(--hm-testimonials-blink) / -1.6)}
@keyframes hm-testimonials-blink{0%,95%,100%{transform:none}97.5%{transform:scaleY(.1)}}
@media (prefers-reduced-motion: reduce){.hm-testimonials .ch-eyes{animation:none}.hm-testimonials .ch-pupils{transition:none}}