/* =========================================================================
   product-logos.css — "works with" logo marquee for product pages.
   Two rows scrolling in opposite directions; grayscale at rest, each brand's
   colour revealed on hover. Rendered by partials/product_logos.php; speed set
   per-row by product-logos.js. Lives under <main class="<ns>"> so it inherits
   the page accent custom props (--pt-accent) emitted by the hero partial.
   ========================================================================= */

.plg {
  --plg-idle: rgba(226, 232, 240, 0.52);   /* dark theme default */
  --plg-gap: clamp(1.6rem, 3.4vw, 3rem);
  --plg-logo-h: clamp(22px, 2vw, 28px);
  position: relative;
  width: 100%;
  padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(2.4rem, 5vw, 3.8rem);
  overflow: hidden;
  border-block: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(148, 163, 184, 0.05), transparent 70%);
}

body.light-theme .plg {
  --plg-idle: rgba(51, 65, 85, 0.5);
  border-block-color: rgba(15, 23, 42, 0.08);
}

/* ── heading ─────────────────────────────────────────────────────────── */
.plg-head {
  text-align: center;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  padding-inline: 1.25rem;
}
.plg-eyebrow {
  display: inline-block;
  font-size: clamp(0.72rem, 1.1vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pt-accent, #f59e0b);
  opacity: 0.92;
}

/* ── rows ────────────────────────────────────────────────────────────── */
.plg-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  direction: ltr;                       /* the track is an inline max-content box;
                                           under the site's RTL it would right-align
                                           off-screen — pin it LTR so it fills + scrolls
                                           from the left. Heading stays RTL (it's outside). */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.plg-row + .plg-row { margin-top: clamp(0.9rem, 2vw, 1.5rem); }

.plg-track {
  display: inline-flex;
  align-items: center;
  gap: var(--plg-gap);
  width: max-content;
  direction: ltr;                       /* keep motion consistent under RTL */
  will-change: transform;
  animation: plg-marquee var(--plg-dur, 48s) linear infinite;
}
.plg-row-2 .plg-track { animation-direction: reverse; }

/* --plg-loop (one set's width incl. gap) is measured + set by product-logos.js */
@keyframes plg-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--plg-loop, 50%))); }
}

/* pause the hovered row so a logo can be targeted */
.plg-row:hover .plg-track { animation-play-state: paused; }

/* ── items ───────────────────────────────────────────────────────────── */
.plg-item {
  display: inline-flex;
  align-items: center;
  gap: 0.62em;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  flex: 0 0 auto;
}

.plg-logo {
  flex: 0 0 auto;
  width: var(--plg-logo-h);
  height: var(--plg-logo-h);
  background-color: var(--plg-idle);
  -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
  -webkit-mask-position: center;           mask-position: center;
  -webkit-mask-size: contain;              mask-size: contain;
  transition: background-color 0.3s ease;
}

.plg-name {
  font-size: clamp(0.9rem, 1.3vw, 1.04rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--plg-idle);
  transition: color 0.3s ease;
}
/* wordmark chips (no icon) get a touch more weight so they hold their own */
.plg-word .plg-name { font-weight: 700; letter-spacing: 0.005em; }

/* hover reveal — brand colour from inline --c */
.plg-item:hover .plg-logo { background-color: var(--c); }
.plg-item:hover .plg-name { color: var(--c); }

/* near-black brands would vanish on the dark theme → use a light neutral */
body.dark-theme .plg-item[data-dark]:hover .plg-logo { background-color: #e8eaed; }
body.dark-theme .plg-item[data-dark]:hover .plg-name { color: #e8eaed; }

/* ── reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .plg-track { animation: none; transform: none; }
  .plg-row { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
  .plg-row::-webkit-scrollbar { display: none; }
}