/* ===========================================================================
   05b · CLIENTS — THE LOGO STRIP        prefix .cl-  /  .cl__

   Filename: it sorts between 05-expertise and 06-pricing, which is where the
   section belongs — you see who OSUS has worked with, and then the price. The
   `b` is not a typo; assemble.py orders sections by filename and "05-" sorts
   before "05b-" because '-' is below 'b'.

   THE ANIMATION IS NOT DEFINED HERE. @keyframes marquee and marquee-rtl are
   already in styles.css, written for the deema ribbon, and they are exactly
   right: two identical halves, translateX(-50%) landing the second where the
   first began, sign flipped under RTL. Reusing them means one definition of
   "a strip that loops", not two that will drift apart.

   Logical properties only, like every other section file here.
   =========================================================================== */

.cl-section {
  padding-block: 72px;          /* same rhythm as 05 · expertise above it */
  background: #fff;
}

/* -- section header ------------------------------------------------------ */

.cl__head {
  max-width: 752px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.cl__title {
  margin: 0;
  font-size: 48px;
  line-height: 56.16px;
  font-weight: 500;
  letter-spacing: -0.06em;      /* -2.88px at 48px */
  color: var(--ink);
}

.cl__lede {
  max-width: 560px;
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--body-soft);
}

/* -- the moving strip ---------------------------------------------------- */

/* Full-bleed, and the mask does the work the container would otherwise do:
   a hard edge on a moving strip reads as a clipped box, a fade reads as
   something passing through. 64px is enough to swallow a whole tile corner. */
.cl {
  margin-block-start: 48px;
  overflow: hidden;
  width: 100%;
  padding-block: 8px;           /* room for the tile shadow, which would
                                   otherwise be sliced off by overflow:hidden */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px,
                      #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 64px,
                      #000 calc(100% - 64px), transparent 100%);
}

.cl__track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.cl__half  { display: flex; gap: 24px; padding-inline-end: 24px; }
.cl__set   { display: flex; gap: 24px; }

/* A logo sliding past is a logo you cannot look at. Hovering stops it, which
   costs nothing and is the difference between decoration and something a
   visitor can actually read. */
.cl:hover .cl__track,
.cl:focus-within .cl__track { animation-play-state: paused; }

/* -- one tile ------------------------------------------------------------ */

/* THE TILE IS WHY THIS LOOKS LIKE ONE THING AND NOT THREE.
   The four marks share nothing: a 1.5:1 illustration with Arabic type under
   it, a 1:1 icon, a 1.8:1 Latin wordmark in pale lavender, and a 4.6:1 black
   lockup. Dropped on the
   page at "the same height" they read as three different sizes, and the pale
   one nearly disappears against the dotted paper. An identical white card with
   a hairline gives every mark the same frame and the same ground, and then the
   only variable left is optical weight — which is what --logo-h is for. */
.cl__item {
  flex: none;
  inline-size: 220px;
  block-size: 144px;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #fff;
  border: 1px solid rgba(19, 19, 19, 0.12);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(19, 19, 19, 0.05);
}

.cl__item img {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: var(--logo-h, 92px);
  object-fit: contain;
}

/* Optical size, not measured size. A square icon at 84px tall carries far more
   ink than a wordmark at 84px, so it is set smaller to LOOK the same. These
   three numbers were set by eye against a contact sheet of the three marks and
   are the only per-logo values in the file. */
.cl__item--almasa    { --logo-h: 92px; }   /* an illustration WITH a name set under it:
                                                 the most content of the four, so it gets
                                                 the most room or the name turns to mush */
.cl__item--cleancart { --logo-h: 74px; }    /* a square icon: heaviest per pixel */
.cl__item--zero      { --logo-h: 84px; }    /* a wide wordmark, and pale */

/* 2114 x 455 — 4.6:1, more than twice as wide as anything else here. Height is
   not the constraint on this one, WIDTH is: it hits max-inline-size long before
   --logo-h, and inside the standard 20px padding it lands about 39px tall,
   which reads as a smaller logo than the others rather than a wider one. The
   padding is trimmed for this tile alone so the mark can use the full card. */
.cl__item--perfektmattch { padding-inline: 10px; }

/* -- the names, for screen readers only ---------------------------------- */

/* Same form as .req-hp in 10-request.css, and for the same reason: an
   off-screen `inset-inline-start` resolves to the RIGHT edge under RTL and
   pushed an element off the document. clip-path takes no space in either
   direction and cannot. */
.cl__names {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
  list-style: none;
}

/* -- phone --------------------------------------------------------------- */

@media (max-width: 809px) {
  .cl-section { padding-block: 56px; }

  .cl__title { font-size: 32px; line-height: 38px; letter-spacing: -0.04em; }
  .cl__lede  { font-size: 16px; line-height: 26px; }

  .cl {
    margin-block-start: 32px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px,
                        #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 32px,
                        #000 calc(100% - 32px), transparent 100%);
  }

  /* Shorter track, same distance per second: a phone shows a third of the
     tiles a desktop does, so the same 44s would crawl. */
  .cl__track { animation-duration: 30s; }
  .cl__half  { gap: 16px; padding-inline-end: 16px; }
  .cl__set   { gap: 16px; }

  .cl__item { inline-size: 168px; block-size: 116px; padding: 14px; border-radius: 14px; }
  .cl__item--perfektmattch { padding-inline: 8px; }
  .cl__item--almasa    { --logo-h: 74px; }
  .cl__item--cleancart { --logo-h: 56px; }
  .cl__item--zero      { --logo-h: 64px; }
}

/* -- RTL ----------------------------------------------------------------- */

/* The Arabic page reads right to left, so the strip must travel the other way
   or it fights the eye. Same keyframes, opposite sign — the pair already
   exists in styles.css. */
[dir="rtl"] .cl__track { animation-name: marquee-rtl; }

/* -- reduced motion ------------------------------------------------------ */

/* Not `animation: none` on its own: that freezes a max-content track wider
   than the screen and leaves the last two thirds of it unreachable. Stopping
   the motion means showing ONE set, centred, which is the whole content of
   this section anyway. */
@media (prefers-reduced-motion: reduce) {
  .cl { -webkit-mask-image: none; mask-image: none; }
  .cl__track { animation: none; width: 100%; justify-content: center; }
  .cl__half { padding-inline-end: 0; }
  .cl__half:nth-child(2),
  .cl__set:nth-child(n + 2) { display: none; }
  .cl__set { flex-wrap: wrap; justify-content: center; }
}