/* ============================================================
   Home page — "Trusted by Leading Organizations" strip
   (fragment/clients.php)
   Centered heading + description, then a full-width client-logo
   strip that auto-slides continuously via a pure CSS animation
   (no JS, never pauses) — the track's content is rendered twice in
   the PHP so the marquee can loop seamlessly at the 50% mark.
   Recolored into the site's pine/brass/cream palette.
   Relies on the shared theme variables (--bg, --ink, --pine, etc.)
   declared in index.php's own <style> block, with hardcoded
   fallbacks so this still renders correctly on its own.
   ============================================================ */

.cl-section {
  padding: 56px 0;
  background: var(--pine-soft, #e8efe9);
}

.cl-heading { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.cl-heading h2 {
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  color: var(--pine, #17402e);
  margin-bottom: 12px;
}
.cl-heading p {
  color: var(--muted, #8a8577);
  font-size: .9rem;
  line-height: 1.7;
  margin: 0;
}

/* Full-bleed slider viewport: overflow hidden + a gradient mask so
   cards fade out at both edges instead of cutting off sharply. */
.client-slider {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* The track holds the client list TWICE back to back (see PHP).
   Animating it exactly -50% and looping creates a seamless,
   never-ending scroll with no visible reset/jump.
   IMPORTANT: spacing between cards is done with margin-right on
   .cl-card (below), NOT a flex `gap` here. A flex `gap` only adds
   space BETWEEN items, so with two back-to-back copies there'd be
   one "bridging" gap of the same size sitting between copy 1's last
   card and copy 2's first — making one copy's width (cards + n-1
   gaps) slightly LESS than half of the total track width (2 copies
   + 2n-1 gaps). translateX(-50%) would then overshoot by half a
   gap every loop, showing up as a little stutter/gap right at the
   seam. Using margin-right on every card instead (including each
   copy's last card) makes both copies EXACTLY equal width, so -50%
   always lands precisely on a card boundary with no seam.
   Duration is scaled up from a 32s baseline because each half now
   repeats the client list 4x (see $REPEATS_PER_HALF in the PHP) to
   guarantee it's wider than any real screen — a longer duration
   keeps the per-card scroll speed the same instead of the whole
   (now much longer) strip flying by 4x faster. If you change
   $REPEATS_PER_HALF, scale this duration by the same factor. */
.client-slider-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation: cl-scroll 128s linear infinite;
}

@keyframes cl-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cl-card {
  flex: 0 0 auto;
  width: 150px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--panel, #fff);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(23, 64, 46, .08);
  padding: 22px 14px;
}

.cl-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--brass-soft, #f6edd9);
  color: var(--pine, #17402e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
}

/* Real logo PNG (see 'logo' in the PHP) — capped to a consistent
   slot so logos of different sizes/ratios still line up neatly. */
.cl-logo-img {
  max-width: 110px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cl-name {
  text-align: center;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted, #8a8577);
  line-height: 1.35;
}

@media (max-width: 575.98px) {
  .cl-section { padding: 40px 0; }
  .cl-card { width: 120px; padding: 16px 10px; }
  .cl-logo { width: 44px; height: 44px; font-size: .85rem; }
  .cl-logo-img { max-width: 90px; max-height: 40px; }
}