/* ==========================================================================
   Section: client-logos
   Figma band y 767..1000 in a 1440 frame, 233px tall.

   Measured anchors, all reproduced exactly at 1440. Positions verified against
   .figma/client-logos.png by pixel projection, not read off the JSON alone:

     band                 y 767 .. 1000            -> padding-block 52 / 41
     intro line box       x 146, y 819, 17 / 19    -> ink measured x 146..708,
                                                     baseline at y 834
     intro colour         #1b1d36 (--color-heading-alt)
     trailing arrow       Poppins 900, gradient    -> renders flat #9546ff,
                                                     see the note on the span
     logo row "Frame 1"   x 123, y 875, 1193 x 84  -> ink measured y 888..944
     logo boxes           112 x 84, 68px apart     -> 68 is figma spacing/xl
     logo box centres     179, 359, 539, 719, 899, 1079, 1259

   Two things in the source are reproduced rather than corrected:

   1. Two different left edges. The copy starts at x=146 (the hero's inset),
      the logo row at x=123. Reproduced as a section inset of 123 plus a start
      offset of 23 on the copy.
   2. The caritas box is 113px wide where the other six are 112, which pushes
      the last three boxes right by 1px (Figma centres measured at 719.5, 900,
      1080, 1260 against a uniform row's 719, 899, 1079, 1259). That reads as a
      nudge artefact rather than intent, and the ink inside the seven source
      PNGs is already off-centre by up to 1.5px, so the row is built from seven
      uniform 112px boxes. Reported, not encoded.
   ========================================================================== */


  .client-logos {
    /* No background on purpose.

       This is the page's own white, so painting it here changes nothing
       visually — but it DOES occlude the previous section's decorative
       overhang. Each of these sections is isolated, so it paints atomically
       over whatever came before it, and a 3D shape that is drawn bleeding
       across the boundary gets a hard horizontal cut instead.

       Confirmed against the Figma render: the hero's disc overhangs 40px onto
       the white below it, and the process ring overhangs 103px. Both were
       being sliced off. See CONVENTIONS section 3. */
    /* Band 767..1000. Copy line box opens at 819, logo row closes at 959. */
    padding-block: 52px 41px;
    /* 123/1440 = 8.542vw. Resolves to exactly 123px at 1440. */
    padding-inline:
      calc(var(--stage-x) + clamp(1.25rem, 8.542vw, 123px))
      calc(var(--stage-x) + clamp(1.25rem, 8.542vw, 123px));
  }

  .client-logos__intro {
    /* The one line of copy doubles as the section heading, so the element-level
       h2 (56/56) is dropped back to the drawn "<p>medium", 17/19 regular.
       No max-inline-size: the Figma text box is 568px but the line inside it
       measures 562px, so the box never wraps. Capping it would buy nothing at
       1440 and would risk a wrap if the fallback arrow glyph is wider than
       Poppins'. */
    margin: 0;
    /* Figma puts the copy 23px inside the logo row's left edge, 146 against
       123. Kept proportional so the indent shrinks with the section inset
       instead of eating the measure on a phone. 23/1440 = 1.597vw. */
    margin-inline-start: clamp(0px, 1.597vw, 23px);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color: var(--color-heading-alt);
  }

  .client-logos__arrow {
    font-weight: var(--weight-black);
    /* Figma paints ONE gradient across the whole 568px text node, so this glyph
       sits in its last 3% and renders flat purple (sampled #9546ff in the
       reference, i.e. --color-brand-to). .u-gradient-text scopes the paint to
       the span's own box, which across a 17px glyph would run cyan to purple
       and read visibly wrong. Stretching the paint box back to the text measure
       and anchoring it right reproduces what Figma drew, while keeping the
       shared utility as the single source of the gradient itself.
       .u-gradient-text lives in @layer utilities and therefore still wins on
       background-image, background-clip and color: only the paint box is
       overridden here. */
    background-size: 568px 100%;
    background-position: 100% 50%;
    background-repeat: no-repeat;
  }

  .client-logos__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Figma "Frame 1": seven boxes, 68px apart.

       Sizing this from vw is a trap. `vw` resolves against the viewport
       INCLUDING the scrollbar, but the row only gets the content width. On a
       1440 window with a classic 15px scrollbar the boxes and gaps compute to
       1192 inside a 1179 track, the seventh logo wraps, the section grows from
       233 to 349, and every section below it shifts down 116px.

       So: fixed boxes, and let `space-between` derive the gap from whatever
       width actually exists. At the drawn 1440 that yields 68.3px, matching
       spacing/xl; narrower, the gaps close before anything wraps. */
    justify-content: space-between;
    column-gap: 1.5rem;
    row-gap: 2rem;
    /* Copy line box ends at 838, row opens at 875. */
    margin-block-start: 37px;
  }

  /* Once the row genuinely cannot hold all seven, wrapping takes over and
     space-between would strand the last line's items across the full width.
     Left-align them so they park under column one. */
  @media (width < 60rem) {
    .client-logos__row {
      justify-content: flex-start;
      column-gap: clamp(1.5rem, 4.722vw, var(--space-xl));
    }
  }

  /* Below the desktop range the wordmarks may shrink, but not past 96px:
     three of them carry ~5px microtype ("MAX HOLZBAU", "FORMTEILE",
     "VISION GUIDED ROBOTICS") that stops reading below that. */
  @media (width < 60rem) {
    .client-logos__logo {
      inline-size: 96px;
    }
  }

  .client-logos__item {
    /* Never shrink: a squashed wordmark is worse than a wrapped row. */
    flex: 0 0 auto;
  }

  .client-logos__logo {
    /* 112 x 84 in Figma. The sources are 400 x 300, the same 4:3, so nothing is
       cropped and contain and cover are identical here.

       Fixed rather than vw: see the scrollbar note on .client-logos__row. The
       shrink-and-floor behaviour moves to the media query above, so the drawn
       desktop size can never depend on whether a scrollbar is present. */
    inline-size: 112px;
    block-size: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
  }

  /* ------------------------------------------------------------------
     Below 1440 there is no comp. Decisions made here, for the log:

     1. The row WRAPS, it does not scroll horizontally. Client logos are a
        trust signal, so all seven have to be countable without an
        interaction; a scroller hides the tail behind a gesture that is
        invisible on a trackpad and needs a tabindex plus a visible
        affordance to stay keyboard-operable. Wrapping also keeps
        CONVENTIONS section 5's "no horizontal scroll at 320" true without
        an inner scroll container that has to be defended.
     2. Above 60rem the boxes are a fixed 112px and `space-between` derives
        the gap from the real content width, so all seven hold one line
        regardless of scrollbar width. Below 60rem the boxes shrink toward
        their 96px floor and the row wraps: 6+1, 5+2, 4+3, 3+3+1, and
        finally 2+2+2+1 at 320px, with no overflow.
     3. Wrapped rows stay LEFT aligned, as drawn. Centring them was tried
        and rejected: it strands the seventh logo in the middle of an
        otherwise empty line, where left alignment parks it under the first
        column and the whole thing reads as an ordinary grid. That also
        means this section needs no layout breakpoint at all.
     ------------------------------------------------------------------ */