/* ------------------------------------------------------------------
   Brand logo marquee - .cc-logos
   Source of truth: NONE. There is no Figma node for this section; the
   geometry below is inferred from the page's own spacing scale and from
   the reference pattern at bicyclerichmond.co.uk. Every number is
   therefore a judgement, not a measurement - if a comp appears later,
   this file is the only place that has to change.

   Depends on tokens in global/colors.css and global/spacing.css, and on
   /splide/css/splide.min.css. It draws no nav pill and no type, so
   global/carousel-nav.css, global/typography.css and global/buttons.css
   are NOT dependencies.

   Unlike every other section on this homepage, this one is NOT a panel:
   no --surface-panel, no 20px radius, no inset. It runs full-bleed on
   the page grey and is placed outside .sectionContainer in default.aspx
   so nothing constrains it to 1380. The horizontal boundary is handled
   by the mask below rather than by a container edge.

   Behaviour lives in default.aspx's data-splide-opts, not here: loop +
   autoWidth + autoScroll + drag:"free", the same combination the Our
   Work gallery uses. splide-config.js switches autoScroll off under
   prefers-reduced-motion, which leaves a static draggable strip.
   ------------------------------------------------------------------ */

:root {
  /* Logo cell. FIXED, not derived from the artwork - and that is the
     point. autoWidth measures slides at mount, so a cell sized by its
     image would measure whatever had loaded by then (often nothing) and
     the strip would mount with collapsed slides. A CSS width is known
     before the first byte of any logo arrives. It also gives the strip
     an even rhythm regardless of how differently-proportioned the
     uploaded logos are, which is what a brand bar should look like.

     160 x 56 at desktop: wide enough for a horizontal wordmark, tall
     enough that a square badge is not shrunk to nothing. */
  --cc-logos-cell-w: clamp(110px, 11.6vw, 160px);
  --cc-logos-cell-h: clamp(36px, 3.9vw, 56px);

  /* Edge fade. Generous on purpose: the strip is full-bleed, so a
     narrow fade reads as a hard cut with a soft edge rather than as the
     logos travelling off into the page. 8.3vw is 120/1440. */
  --cc-logos-fade: clamp(48px, 8.3vw, 120px);

  /* Logo ink. Defaults to a no-op.

     The page is #121212, so dark logo artwork is invisible on it. The
     fix is to flatten every logo to white:

         --cc-logos-filter: brightness(0) invert(1);

     brightness(0) drives all three channels to 0 and invert(1) drives
     them to 255, leaving ONLY the alpha channel - so a transparent PNG
     becomes a clean white silhouette, and a white PNG is unchanged
     (the filter is idempotent for white). It is off by default because
     it requires transparency: an OPAQUE upload, e.g. a JPEG of a dark
     logo on a white background, has no alpha to preserve and every
     pixel flattens to white - the logo renders as a solid white brick.

     So: enable this once, after checking the collection is transparent
     PNGs. Do not enable it speculatively. */
  --cc-logos-filter: none;
}

/* Strip ---------------------------------------------------------------- */

/* The hero above supplies the space between the two via its own
   margin-bottom: var(--section-gap), so there is no margin-top to add
   here - only the matching gap down to Best Sellers.

   The vertical padding is the strip's own air. It is not decorative:
   the slides are only as tall as --cc-logos-cell-h, so without it the
   logos would butt straight up against the hero card and the panel
   below with no band of page grey to sit in. */
/* overflow:hidden is a fallback, not the design. Where mask-image is
   supported the mask clips as well as fades - it is transparent at 0% and
   100%, so it already hides anything outside this box - and this changes
   nothing. Where it is NOT supported there is no clipping at all, and the
   track below runs overflow:visible, so the loop's clones would spill
   across the page and give the document a horizontal scrollbar. The hard
   edge it introduces sits exactly where the mask reaches zero opacity, so
   the two never disagree. */
.cc-logos {
  position: relative;
  padding: var(--space-xs) 0;
  margin-bottom: var(--section-gap);
  background: var(--page);
  overflow: hidden;
}

/* Faded edges ---------------------------------------------------------- */

/* mask, not a pair of gradient overlays. A gradient fading to var(--page)
   would have to know the background colour, and would be wrong the moment
   this strip is reused anywhere that is not #121212; a mask fades to
   genuine transparency and lets whatever is behind show through.

   Applied to .cc-logos rather than the track because the track is what
   Splide translates - masking a moving element makes the mask travel
   with it, and the fade has to stay pinned to the viewport edges.

   -webkit- first for Safari, which needed the prefix until 15.4 and
   still accepts it. Both declarations are required; the unprefixed one
   must come second so it wins where it is supported. */
.cc-logos {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--cc-logos-fade),
    #000 calc(100% - var(--cc-logos-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--cc-logos-fade),
    #000 calc(100% - var(--cc-logos-fade)),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Track ---------------------------------------------------------------- */

/* Splide clips the track by default. Here the mask is already doing the
   clipping, and a second hard edge inside the fade would show as a line
   the logos vanish at partway through the gradient. */
.cc-logos__splide .splide__track {
  overflow: visible;
}

.cc-logos__splide .splide__list {
  align-items: center;
}

/* Slides --------------------------------------------------------------- */

/* flex: 0 0 auto so the fixed cell width is honoured - autoWidth sets an
   inline width on each slide, and a growable flex item would stretch to
   fill the line instead, which on a short collection would spread four
   logos across the whole viewport. */
.cc-logos__slide {
  width: var(--cc-logos-cell-w);
  height: var(--cc-logos-cell-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* contain, not cover: a logo must never be cropped. max-width and
   max-height rather than width/height so a logo smaller than the cell is
   left at its natural size rather than being scaled up into blur. */
.cc-logos__logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: var(--cc-logos-filter);
}

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

/* The cell, the fade and the strip's own padding are all clamped above,
   so nothing here needs a breakpoint for size. What does need one is the
   gap between logos, and that lives in default.aspx's data-splide-opts -
   Splide owns the gap and has to be told about it to measure the track
   correctly, so setting it in CSS would silently desynchronise the two.
   The breakpoints for it are in the options block, not here. */

/* Motion --------------------------------------------------------------- */

/* splide-config.js already drops autoScroll for prefers-reduced-motion,
   which is the whole of the movement in this section - there is no CSS
   transition or animation here to switch off, so this file needs no
   reduced-motion block. Noted explicitly so nobody goes looking for the
   one that is missing. */