/* ==========================================================================
   COMPONENT — Our Clients
   Markup:  components/clients.html   (section.clients)
   Anchor:  #insights  (the nav "Insights" link points here)
   --------------------------------------------------------------------------
   LOGOS SHARE ONE HEIGHT, NOT ONE BOX
   -----------------------------------
   Every logo is drawn at the SAME HEIGHT (--logo-h) with its own natural width,
   and the row centres them on a common middle line. Widths therefore vary from
   the narrow portrait mark (UNDP, 0.49:1) to the banner lockup (CEDAR, 5.5:1),
   but every logo's top and bottom align, which is what makes the strip read as
   tidy and evenly weighted.

   The earlier approach — an identical fixed box per logo with
   object-fit:contain — did NOT work well here. Inside one box the widest logo is
   limited by the box's WIDTH and the tallest by its HEIGHT, so the rendered
   heights came out 23px to 64px (a 2.8x spread) and the strip looked ragged even
   though every logo was technically centred.

   Why plain `height` works now: with an explicit height on the <img>, the width
   follows from the file's own aspect ratio and is definite, so the layout never
   falls back to intrinsic sizing and can't overflow. (Percentage heights in an
   auto-sized row CAN'T resolve — they made the images spill out of their tiles.)

   NO BOXES
   The logos have no border, background or radius — they sit directly on the
   page. Several source logos have a white background rather than transparency,
   which is invisible here but would show on a tinted section.

   .client-track carries the logo set TWICE (see the markup note) and slides by
   exactly one set width (-50%), which is what makes the loop seamless. The gap
   and the trailing padding-right must stay equal for that to hold.
   ========================================================================== */

.clients{
  padding:100px 0;
  border-top:1px solid var(--line);
}
.clients-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:45px;
}
.clients-head .section-title{margin-top:15px}

/* Viewport for the marquee: the row is clipped here and softly faded at both
   edges so logos slide out of view instead of being cut off hard. */
.client-logos{
  overflow:hidden;
  --fade:70px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
}

.client-track{
  display:flex;
  width:max-content;
  animation:client-marquee 60s linear infinite;
  will-change:transform;
}

/* align-items:center is what puts every logo on one shared middle line. */
.client-set{
  display:flex;
  align-items:center;
  gap:72px;
  padding-right:72px;   /* must equal gap: this is the seam between the two sets */
}

@keyframes client-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Let a visitor stop and read a logo by hovering or tabbing into the strip */
.client-logos:hover .client-track,
.client-logos:focus-within .client-track{
  animation-play-state:paused;
}

/* A bare centring wrapper — no box, no chrome. */
.client-logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}

/* One height for every logo; width follows each file's own aspect ratio.
   max-width is only a safety net — it is set wide enough that the 5.5:1 banner
   lockup still reaches --logo-h, so no logo ends up shorter than the others. */
.client-logo img{
  --logo-h:40px;
  display:block;
  height:var(--logo-h);
  width:auto;
  max-width:260px;
  object-fit:contain;
}

/* ---------- Responsive ---------- */

@media(max-width:1050px){
  .client-set{gap:56px;padding-right:56px}
  .client-logo img{--logo-h:36px;max-width:220px}
  .client-logos{--fade:54px}
}

@media(max-width:800px){
  .clients-head{display:block}
  .clients-head .section-copy{margin-top:20px}
  .client-track{animation-duration:46s}
  .client-set{gap:40px;padding-right:40px}
  .client-logo img{--logo-h:31px;max-width:190px}
  .client-logos{--fade:32px}
}

@media(max-width:560px){
  .client-set{gap:30px;padding-right:30px}
  .client-logo img{--logo-h:26px;max-width:160px}
  .client-logos{--fade:22px}
}

/* ---------- Reduce motion ----------
   Anyone who asks for less motion gets a plain horizontally scrollable row
   instead of an animation, so all 12 logos stay reachable either way. */

@media(prefers-reduced-motion:reduce){
  .client-logos{
    overflow-x:auto;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .client-track{animation:none}
  .client-set[aria-hidden="true"]{display:none}
}