/* NEXT Logo Strip widget (home section 6, top) — a slowly scrolling row of client logos.
 * Band color is a widget option (default: NEXT Cyan). Colors + fonts from the brand kit.
 */
.nx-logos {
  --nx-gutter: clamp(16px, 4vw, 56px);
  --nx-speed: 36s;
  /* band colors, set per style below */
  --nx-bg: var(--next-cyan);
  --nx-line: var(--next-cyan);
  --nx-label: var(--next-black);
  --nx-logo: rgba(0, 0, 0, .5);           /* logo names until files are added */
  --nx-logo-hover: var(--next-black);
  --nx-img: grayscale(1) brightness(0);   /* real logo files: flat dark… */
  --nx-img-o: .5;                         /* …at this strength, full color on hover */

  position: relative; overflow: hidden; isolation: isolate;
  box-sizing: border-box;
  padding: 34px var(--nx-gutter);
  background: var(--nx-bg);
  border-block: 1px solid var(--nx-line);
  font-family: var(--next-font-head);
}
.nx-logos *, .nx-logos *::before, .nx-logos *::after { box-sizing: border-box; }

/* ── Styles ── */
.nx-logos--white { --nx-bg: var(--next-white); --nx-line: var(--next-border); --nx-logo: #9A9AA0; --nx-img: grayscale(1); --nx-img-o: .55; }
.nx-logos--tint  { --nx-bg: var(--next-tint); --nx-line: var(--next-border); --nx-logo: #8E8E94; --nx-img: grayscale(1); --nx-img-o: .55; }
.nx-logos--grey  { --nx-bg: var(--next-grey); --nx-line: #B4B4B8; --nx-logo: #5E5E63; --nx-img: grayscale(1) brightness(.4); --nx-img-o: .7; }
.nx-logos--black,
.nx-logos--black-accent { --nx-bg: var(--next-panel); --nx-line: var(--next-panel); --nx-label: var(--next-white); --nx-logo: #8C8C92; --nx-logo-hover: var(--next-white); --nx-img: grayscale(1) brightness(0) invert(1); --nx-img-o: .55; }
.nx-logos--red   { --nx-bg: var(--next-red); --nx-line: var(--next-red); --nx-logo: rgba(0, 0, 0, .55); }
.nx-logos--cyan  { /* default values above */ }

/* Black + red tab: label on a red slanted tab, faint LED dot field on the right */
.nx-logos--black-accent { --nx-label: var(--next-black); }
.nx-logos--black-accent::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(200,200,200,.35) 1.2px, transparent 1.8px); background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
  opacity: .35;
}
.nx-logos--black-accent .nx-logos-label { position: relative; isolation: isolate; padding: 10px 26px 10px 14px; max-width: none; white-space: nowrap; }
.nx-logos--black-accent .nx-logos-label::before {
  content: ""; position: absolute; z-index: -1; inset: 0; background: var(--next-red);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12.4px) 100%, 0 100%);   /* 36px-tall tab × tan(19.03°) = the hero button's slant */
}

/* ── Layout ── */
.nx-logos-in {
  max-width: 1480px; margin: 0 auto; padding-inline: clamp(28px, 3vw, 56px);   /* lines up with the sections above */
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center;
}
.nx-logos-label {
  margin: 0; max-width: 15ch;
  font: 700 11px/1.4 var(--next-font-sub); letter-spacing: .2em; text-transform: uppercase; color: var(--nx-label);
}
.nx-logos-rail {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.nx-logos-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: nxLogos var(--nx-speed) linear infinite; }
.nx-logos-rail:hover .nx-logos-track, .nx-logos-rail:focus-within .nx-logos-track { animation-play-state: paused; }
@keyframes nxLogos { to { transform: translateX(-50%); } }   /* the list is rendered twice, so -50% loops seamlessly */

.nx-logo { flex: none; width: 170px; height: 56px; padding: 0 22px; display: grid; place-items: center; list-style: none; }
.nx-logo a { display: grid; place-items: center; width: 100%; height: 100%; }
.nx-logo a:focus-visible { outline: 3px solid var(--nx-label); outline-offset: 2px; }
/* real logo files: flattened to the band's logo tone until hovered */
.nx-logo img {
  max-width: 100%; max-height: 44px; object-fit: contain;
  filter: var(--nx-img); opacity: var(--nx-img-o); transition: filter .25s, opacity .25s;
}
.nx-logo:hover img, .nx-logo a:focus-visible img { filter: none; opacity: 1; }
/* no file yet: the client name set in type */
.nx-logo-name {
  font: 700 clamp(15px, 1.4vw, 20px)/1 var(--next-font-call); letter-spacing: .06em; text-transform: uppercase;
  color: var(--nx-logo); text-align: center; transition: color .25s;
}
.nx-logo:hover .nx-logo-name { color: var(--nx-logo-hover); }

@media (max-width: 1100px) {
  .nx-logos-in { padding-inline: 28px; }
}
@media (max-width: 760px) {
  .nx-logos-in { grid-template-columns: 1fr; gap: 16px; }
  .nx-logos-label { max-width: none; justify-self: start; }
  .nx-logo { width: 140px; }
}
@media (max-width: 560px) {
  .nx-logos-in { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-logos-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .nx-logos-track [aria-hidden="true"] { display: none; }
  .nx-logos-rail { -webkit-mask-image: none; mask-image: none; }
}