/* ============================================================================
   SADER — s-partners
   A quiet, premium partner/institution logo MARQUEE that sits directly above
   the footer. Monochrome treatment: logos ride in grayscale at low opacity and
   resolve to full presence on hover; the track auto-scrolls and pauses on hover.
   Light (white) world; semantic tokens only; logical properties — RTL flips.
   ============================================================================ */

.s-partners {
  background-color: var(--bg);
  overflow: hidden;                 /* contain the full-bleed track + mask     */
}

/* The moving band sits full width, masked to fade at both inline edges. */
.s-partners__marquee {
  margin-block-start: clamp(var(--space-7), 4vw, var(--space-9));
  -webkit-mask-image: linear-gradient(to right, transparent 0,
            #000 clamp(2rem, 8vw, 9rem), #000 calc(100% - clamp(2rem, 8vw, 9rem)),
            transparent 100%);
          mask-image: linear-gradient(to right, transparent 0,
            #000 clamp(2rem, 8vw, 9rem), #000 calc(100% - clamp(2rem, 8vw, 9rem)),
            transparent 100%);
}

.s-partners__track {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-1), 0.4vw, var(--space-2));
  inline-size: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  animation: s-partners-scroll 30s linear infinite;
}
/* pause when the visitor hovers the band */
.s-partners__marquee:hover .s-partners__track { animation-play-state: paused; }

/* UNIFORM CELL — every logo gets an identical footprint. The logo is then
   fitted INSIDE the cell with object-fit: contain, so wildly different aspect
   ratios (0.65:1 … 5:1) all read at a consistent optical size, never stretched. */
.s-partners__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(150px, 13vw, 190px);    /* uniform cell width  */
  block-size: 150px;                         /* uniform cell height */
}

.s-partners__logo {
  /* fit within the cell, capped on BOTH axes; auto dims preserve aspect ratio */
  max-block-size: 90px;
  max-inline-size: 150px;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  /* The source logos are WHITE (built for a dark band); invert them to ink so
     they read as monochrome marks on the white ground. Grey at rest, solid
     black on hover. */
  filter: grayscale(1) invert(1);
  opacity: 0.5;
  transition: opacity var(--dur-base) var(--ease);
}
.s-partners__item:hover .s-partners__logo { opacity: 1; }

@keyframes s-partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }     /* one full set width (track = 2 sets) */
}
/* RTL: scroll the other direction so it reads naturally right-to-left. */
[dir="rtl"] .s-partners__track { animation-name: s-partners-scroll-rtl; }
@keyframes s-partners-scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

/* Reduced motion: stop the conveyor, let logos wrap and sit still. */
@media (prefers-reduced-motion: reduce) {
  .s-partners__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(var(--space-6), 4vw, var(--space-9));
    inline-size: auto;
    padding-inline: var(--gutter);
  }
  .s-partners__logo { opacity: 0.7; }
}