/* «Нам доверяют» (#clients, КК·03): три бегущие строки логотипов во всю ширину экрана (ряды в разные стороны,
   с разной скоростью), под ними — счётчик, красная плашка «Здесь может быть ваш логотип» и ссылка на брендинг.
   Логотипы — один спрайт (tools/gen_clients.py пишет координаты и <style> с адресом спрайта в clients-strip.html).
   С мышью логотипы серые, цвет — при наведении на плашку; на сенсорных экранах сразу в цвете.
   Лента останавливается при наведении, при фокусе внутри, по кнопке «Остановить ленту» и вне экрана;
   при prefers-reduced-motion — неподвижная сетка с переносом. */

.clients__marquee {
  --k: 1;                 /* масштаб плашек и логотипов (на телефоне меньше) */
  --tile-h: 96px;
  --fade: clamp(24px, 7vw, 120px);
  margin-top: clamp(32px, 4.5vw, 56px);
  display: grid;
  gap: 1px;
  background: var(--s-line);
  border-block: 1px solid var(--s-line);
}
@media (max-width: 639px) { .clients__marquee { --k: .84; --tile-h: 80px; } }

.cl-row {
  overflow: hidden;
  background: var(--paper);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.cl-row__track { display: flex; width: max-content; }
.cl-row__list { list-style: none; margin: 0; padding: 0; display: flex; flex: none; }

.cl {
  flex: none;
  width: calc(var(--tw) * var(--k));
  height: var(--tile-h);
  border-right: 1px solid var(--s-line);
  display: flex;
}
.cl__in {
  position: relative;
  flex: 1;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 0 calc(16px * var(--k));
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
}

.cl__logo {
  display: block;
  width: calc(var(--w) * var(--k));
  height: calc(var(--h) * var(--k));
  background-repeat: no-repeat;
  background-position: calc(var(--bx) * var(--k)) calc(var(--by) * var(--k));
}
.cl__word {
  display: block;
  max-width: 100%;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: calc(15px * var(--k));
  line-height: 1.15;
  letter-spacing: -.01em;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
}

/* плашки-кейсы: пометка «Кейс» в углу, красная при наведении и фокусе */
.cl__case {
  position: absolute;
  top: 7px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .5625rem;
  color: var(--muted);
}
.cl__case svg,
.clients__cta-go svg,
.clients__more-arrow {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cl__in--case:hover .cl__case,
.cl__in--case:focus-visible .cl__case { color: var(--red); }
.cl__in--case:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }

/* мышь: спокойная серая лента, цвет при наведении на плашку */
@media (hover: hover) and (pointer: fine) {
  .cl__logo { filter: grayscale(1) contrast(1.15); opacity: .62; }
  .cl__word { opacity: .62; }
  .cl__in:hover .cl__logo,
  .cl__in:focus-visible .cl__logo,
  .cl__in:hover .cl__word,
  .cl__in:focus-visible .cl__word { filter: none; opacity: 1; }
  .cl__in--case:hover .cl__word { color: var(--red); }
}

/* движение */
@keyframes cl-scroll { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .cl-row__track { animation: cl-scroll var(--dur, 180s) linear infinite; will-change: transform; }
  .cl-row--2 .cl-row__track { animation-direction: reverse; }
  .clients__marquee:hover .cl-row__track,
  .clients__marquee:focus-within .cl-row__track,
  .clients__marquee.is-paused .cl-row__track,
  .clients__marquee.is-off .cl-row__track { animation-play-state: paused; }
  .cl__logo, .cl__word { transition: filter .35s var(--ease-out), opacity .35s var(--ease-out), color .2s; }
}

/* без движения: одна неподвижная сетка с переносом, без копий рядов и без затухания краёв */
@media (prefers-reduced-motion: reduce) {
  .clients__marquee { --tile-h: 72px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; background: transparent;
    border: 0; padding-inline: var(--gutter); }
  .cl-row { display: contents; }
  .cl-row__track, .cl-row__list { display: contents; }
  .cl-row__list--dup { display: none; }
  .cl { border: 1px solid var(--s-line); margin: 0 -1px -1px 0; }
}

/* под лентой: счётчик · красная плашка · ссылки */
.clients__foot {
  display: grid;
  gap: 20px 32px;
  padding-top: clamp(28px, 3.5vw, 44px);
  align-items: stretch;
}
@media (min-width: 900px) { .clients__foot { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); } }

.clients__count { margin: 0; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.clients__num {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4.25rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--red);
}
.clients__count-t { max-width: 34ch; color: var(--s-muted); font-size: var(--fs-small); line-height: 1.4; }

.clients__cta {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-height: 112px;
  padding: 16px 18px;
  background: var(--red);
  color: var(--paper);
  text-decoration: none;
}
@media (min-width: 900px) { .clients__cta { grid-row: span 2; } }
.clients__cta-k { font-size: .625rem; opacity: .85; }
.clients__cta-t { font-family: var(--f-display); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.15; max-width: 18ch; }
.clients__cta-go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-small); border-bottom: 2px solid currentColor; padding-bottom: 1px; }
.clients__cta:hover { background: var(--red-press); }
.clients__cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.clients__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; align-self: end; padding-top: 8px; }
.clients__links .link-arrow { color: var(--s-fg); }
.clients__pause {
  appearance: none;
  border: 1px solid var(--s-line);
  background: transparent;
  color: var(--s-muted);
  padding: 8px 12px;
  font-size: .625rem;
  cursor: pointer;
}
.clients__pause:hover { color: var(--s-fg); border-color: currentColor; }
.clients__pause[aria-pressed="true"] { color: var(--s-fg); }
.clients__pause[hidden] { display: none; }