/**
 * CLIENT LOGOS STRIP — the row of client/partner company logos, shown
 * in the div with id="clients" (which the nav's "Clients" link scrolls
 * to). index.html only. Requires base.css to be linked first.
 *
 * NOTE ON NAMING: the CSS class names below all use "p"/"partners" —
 * `.partners` (the whole strip), `.p-row` (the row of logos), `.p-lbl`
 * (the "Trusted by clients..." label above the row), and `.pl` (one
 * individual logo, short for "partner logo"; `.pl img` is the `<img>`
 * inside it, `.pl-hover` an optional hover-swap image inside it). This
 * naming has NOTHING to do with the separate "partner lead" business
 * feature (the partner.html form / admin approval system) — that's an
 * unrelated, unfortunate name collision. This file was renamed to
 * clients.css specifically to avoid that confusion, but the CSS class
 * names inside it were left unchanged (renaming them would also require
 * editing index.html, which is out of scope for a pure file move).
 *
 * EDIT THIS FILE WHEN YOU WANT TO:
 *   - add/remove/resize the client logos — .pl img (see the mobile
 *     override at the bottom for the smaller phone-screen size). The
 *     logo list is duplicated in index.html to make the loop below
 *     seamless — add/remove a logo in BOTH copies there;
 *   - change the strip's background color — .partners;
 *   - change the gap between logos — .p-row;
 *   - change how fast the strip scrolls — the `animation` duration on
 *     .p-row below (bigger number = slower scroll).
 */

/* Kept dark-ish in both themes on purpose — several client logos are
   light-colored and would disappear on a fully light strip. Light mode
   gets a lighter charcoal (not black, not white) so grayscaled logos
   still read clearly and it doesn't slam against the page's light bg. */
.partners { padding: 44px 0; background: #0e0c0a; border-top: 1px solid rgba(255,255,255,0.09); border-bottom: 1px solid rgba(255,255,255,0.09); }
[data-theme="light"] .partners { background: #38352e; }
.p-lbl { text-align: center; font-size: .76rem; color: var(--text-3); letter-spacing: .13em; text-transform: uppercase; font-weight: 600; margin-bottom: 26px; }

/* .p-viewport clips the strip so only part of it is visible at once;
   the fade-to-transparent mask at each edge hides the hard clip line so
   logos appear/disappear softly instead of popping in and out. */
.p-viewport {
  overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
/* The actual scrolling strip. `width: max-content` lets it be exactly as
   wide as its content (two copies of the logo list back to back — see
   index.html) instead of being squeezed to the viewport's width, which
   is what makes the endless sideways scroll possible. The animation
   slides it left by exactly 50% of its own width (i.e. exactly one
   copy's width) and repeats, so the moment it resets, the two copies
   line up pixel-for-pixel and the loop looks seamless. */
.p-row {
  display: flex; align-items: center; gap: 44px; width: max-content;
  animation: p-scroll 32s linear infinite;
}
/* Pause the scroll while a visitor is looking closely / about to hover
   a logo, so it doesn't keep sliding out from under their cursor. */
.p-viewport:hover .p-row { animation-play-state: paused; }
@keyframes p-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .p-row { animation: none; }
}

/* Each logo: transparent-background PNGs, shown grayscale/dim by
   default, full color on hover (see the filter values below — this is
   what creates that grayscale-to-color effect). `height: 100px` sets
   how tall each logo appears; the mobile version at the bottom of this
   file uses a smaller height for phone screens. */
.pl {
  display: flex; align-items: center; position: relative;
  padding: 4px 10px; border-radius: 10px;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.pl img {
  height: 100px; width: auto; max-width: 240px; object-fit: contain; display: block;
  filter: grayscale(1) brightness(1.5) opacity(0.5);
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
/* Slightly less brightening + a bit more opacity so logos stay
   legible against the lighter (but still dark) light-mode strip. */
[data-theme="light"] .pl img { filter: grayscale(1) brightness(1.2) opacity(0.62); }
[data-theme="light"] .pl:hover img { filter: grayscale(0) brightness(1) opacity(1); }
.pl:hover img { filter: grayscale(0) brightness(1) opacity(1); }
/* Hover-swap variant: shown on hover, hidden by default */
.pl-hover {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  opacity: 0; filter: none !important;
}
.pl:hover .pl-hover { opacity: 1; }
.pl:has(.pl-hover):hover img:not(.pl-hover) { opacity: 0; }

/* Mobile/small-screen overrides for this strip — shrinks the logos and
   tightens the gap between them so more fit per row on a phone screen. */
@media (max-width: 640px) {
  .pl img { height: 60px; max-width: 180px; }
  .pl-hover { height: 60px; max-width: 180px; }
  .p-row { gap: 16px; }
}