/* home/recog.css: the professional recognition carousel of index.html. Owned by recog.
   Builds on home/base.css (curves, .h-btn, glass). The only carousel on the page.

   THE IDEA
     One fact in focus, its neighbours waiting beside it a little smaller, fainter and out of
     focus, so the visitor can see there is more without anything moving by itself. recog.js
     writes two numbers per slide every frame of a drag or a glide and this file turns them
     into the look:
       --h-recog-a   0 in focus .. 1 one place away   (fade, size, focus)
       --h-recog-d   -1 .. 1, signed                   (the support line and the source trail
                                                         the claim by a little, so a slide comes
                                                         in claim first, the way it is read)
     The two glass paddles float over the slides on wide screens, where the words slide under
     them; on a phone they sit in the row under the slides as white sheets (glass over flat
     grey shows nothing). */

@property --h-recog-fade { syntax: '<number>'; inherits: true; initial-value: 0.7; }

.hp-testimonials.h-recog {
  position: relative;
  background: var(--bg-2);
  padding: var(--section-pad);
  padding-inline: 0;
  overflow: clip;
}

/* The stage is the size container every width below is measured against, so the paddles,
   the track padding and the slide width always agree. */
.h-recog-stage {
  --h-recog-w: min(46rem, 100cqw - 15rem);
  --h-recog-gap: 4.5rem;
  --h-recog-edge: 9%;
  --h-recog-row: 2.25rem;
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  row-gap: var(--h-recog-row);
}

.h-recog-viewport {
  grid-column: 1 / -1;
  overflow: clip;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--h-recog-edge), #000 calc(100% - var(--h-recog-edge)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--h-recog-edge), #000 calc(100% - var(--h-recog-edge)), transparent);
}

.h-recog-track {
  display: flex;
  align-items: stretch;
  gap: var(--h-recog-gap);
  padding-inline: calc((100cqw - var(--h-recog-w)) / 2);
  will-change: transform;
}

.h-recog-slide {
  flex: 0 0 var(--h-recog-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: calc(1 - var(--h-recog-fade) * var(--h-recog-a, 0));
  scale: calc(1 - 0.06 * var(--h-recog-a, 0));
  transition: --h-recog-fade var(--h-t) var(--h-ease-out);
}
.h-recog-slide[aria-hidden="true"] { --h-recog-a: 1; --h-recog-d: 1; }
/* The neighbour a paddle points at wakes a little while the pointer rests on that paddle. */
.h-recog-slide.h-recog-wake { --h-recog-fade: 0.5; }
/* Out of focus only once it is clearly away (recog.js adds .h-recog-soft past 5 percent of a
   slide): the slide in focus never carries a filter, at rest or leaning, so its text stays crisp. */
.h-recog-soft { filter: blur(calc(2.4px * var(--h-recog-a, 0))); }

.h-recog-line { margin: 0; max-width: 100%; }
.h-recog-lead {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.45rem);
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.h-recog-more {
  display: block;
  max-width: 34rem;
  margin: 1rem auto 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  line-height: 1.65;
  color: var(--text-2);
  text-wrap: pretty;
  translate: calc(var(--h-recog-d, 0) * 1.25rem) 0;
}
.h-recog-source {
  margin: 1.6rem 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--ink);
  translate: calc(var(--h-recog-d, 0) * 2.5rem) 0;
}

/* The pager: three marks and one thumb that is exactly where the slides are. */
.h-recog-pager {
  --h-recog-seg: 28px;
  grid-row: 2;
  grid-column: 2;
  position: relative;
  display: flex;
}
.h-recog-dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--h-r-ctl);
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Focus hugs the mark it belongs to (a ring around the segment), not the whole 44px target. */
.h-recog-dot:focus-visible { outline: none; }
.h-recog-dot:focus-visible::before { box-shadow: 0 0 0 4px var(--bg-2), 0 0 0 6px var(--h-focus); }
.h-recog-dot::before {
  content: "";
  width: var(--h-recog-seg);
  height: 4px;
  border-radius: 4px;
  background: rgba(11, 15, 46, 0.2);
  transition: background-color var(--h-t) var(--h-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .h-recog-dot:hover::before { background: rgba(11, 15, 46, 0.4); }
}
.h-recog-thumb {
  position: absolute;
  top: 50%;
  left: calc((44px - var(--h-recog-seg)) / 2);
  width: var(--h-recog-seg);
  height: 6px;
  margin-top: -3px;
  border-radius: 6px;
  background: var(--teal-2);
  pointer-events: none;
}

/* The paddles. */
.h-recog-paddle--prev { grid-row: 2; grid-column: 1; justify-self: end; margin-right: 0.5rem; }
.h-recog-paddle--next { grid-row: 2; grid-column: 3; justify-self: start; margin-left: 0.5rem; }
.h-recog-paddle svg { transition: translate var(--h-spring-dur) var(--h-spring), opacity var(--h-t) var(--h-ease-out); }
/* At an end the paddle stays focusable (aria-disabled) and keeps a full strength focus ring:
   only its chevron and its lift fade, instead of base's whole element 42 percent. */
.h-recog-paddle[aria-disabled="true"] { opacity: 1; }
.h-recog-paddle[aria-disabled="true"] svg { opacity: 0.3; }
@media (hover: hover) and (pointer: fine) {
  .h-recog-paddle--prev:hover svg { translate: -2px 0; }
  .h-recog-paddle--next:hover svg { translate: 2px 0; }
}

/* Wide screens: the paddles float in the gaps either side of the slide in focus, over the
   words that slide past (the row below holds only the pager). */
@media (min-width: 900px) {
  .h-recog-paddle {
    position: absolute;
    grid-area: auto;                      /* measured against the whole stage, not a grid cell */
    top: calc((100% - 44px - var(--h-recog-row)) / 2);
    translate: -50% -50%;
    margin: 0;
  }
  .h-recog-paddle--prev { left: calc(50% - var(--h-recog-w) / 2 - var(--h-recog-gap) / 2); }
  .h-recog-paddle--next { left: calc(50% + var(--h-recog-w) / 2 + var(--h-recog-gap) / 2); }
}

/* Narrow screens: the slide takes the width, the neighbours keep a sliver at the edges, and
   the paddles sit in the row as white sheets. */
@media (max-width: 899px) {
  /* The gap equals the side margin, so a neighbour rests just past the edge (a sliver of
     blurred letters at a phone's edge reads as a smudge) and slides in with the finger. */
  .h-recog-stage {
    --h-recog-w: calc(100cqw - 4.5rem);
    --h-recog-gap: 2.5rem;
    --h-recog-row: 1.75rem;
    --h-recog-edge: 1.25rem;
  }
  .h-recog-paddle--prev { margin-right: 0.75rem; }
  .h-recog-paddle--next { margin-left: 0.75rem; }
  .h-recog .h-recog-paddle {
    --hg-tint: #fff;
    --hg-tint-hover: #fff;
    --hg-lq-tint: #fff;
    --hg-lq-tint-hover: #fff;
    --hg-rim: var(--h-highlight);
    --hg-shadow: var(--h-hairline-2), var(--h-shadow-1);
    width: 48px;
    height: 48px;
    min-height: 48px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Fine pointer: the slides can be grabbed, and a neighbour wakes a little when pointed at. */
@media (hover: hover) and (pointer: fine) {
  .h-recog-viewport { cursor: grab; }
  .h-recog-track { -webkit-user-select: none; user-select: none; }
  .h-recog-slide[aria-hidden="true"] { cursor: pointer; }
  .h-recog-slide[aria-hidden="true"]:hover { --h-recog-fade: 0.52; }
  .h-recog-dragging .h-recog-viewport,
  .h-recog-dragging .h-recog-slide { cursor: grabbing; }
}

/* Read aloud when the visitor changes slide; never seen. */
.h-recog-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .h-recog-slide { scale: none; transition: none; }
  .h-recog-soft { filter: none; }
  .h-recog-more,
  .h-recog-source { translate: none; }
  .h-recog-paddle svg { transition: none; }
}

/* No script: the slides scroll sideways natively with snap points, and controls that would
   do nothing are not shown. */
@media (scripting: none) {
  .h-recog-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .h-recog-slide { scroll-snap-align: center; --h-recog-a: 0; --h-recog-d: 0; }
  .h-recog-paddle,
  .h-recog-pager { display: none; }
}

@media (forced-colors: active) {
  .h-recog-dot::before { background: ButtonText; }
  .h-recog-thumb { background: Highlight; }
}