/* ==========================================================================
   01 · LOGO STRIP
   A static, evenly distributed row of customer marks.

   Each mark sits in its own equal 1fr slot, so the row stays evenly
   distributed however many marks are visible — a later JS pass can hide an
   <li> and the remaining slots redistribute with no other change. The thin
   rules are drawn on the slot boundaries, not between the marks, so they stay
   evenly spaced regardless of how wide each individual wordmark happens to be.
   ========================================================================== */

/* One muted tone for the whole set — every mark inherits it via currentColor.
   NORMALISED: reference painted each mark as ink at 83% (rgb 58 70 69);
   that is the same value as the system's secondary foreground. */
.rb-logostrip {
  color: var(--rb-sys-fg-secondary);
}

/* --- The row --------------------------------------------------------------
   Fixed height, as in the reference. `--rb-logostrip-cap` is the optical cap
   height every mark is measured against; each mark then applies its own
   optical correction (see below). Changing the cap rescales the whole set. */
.rb-logostrip__strip {
  display: flex;
  align-items: center;
  /* NORMALISED: reference row was 70.64px — snapped to the 4px grid. */
  height: 72px;
  --rb-logostrip-cap: var(--rb-ref-space-3);   /* 12px below tablet */
}

.rb-logostrip__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: 100%;
}

.rb-logostrip__item {
  position: relative;
  display: flex;
  align-items: center;      /* every mark centred on the row's shared centre line */
  justify-content: center;
  padding-inline: var(--rb-ref-space-2);
}

/* --- Slot rules -----------------------------------------------------------
   A hairline on the leading edge of every slot except the first *visible*
   one, so hiding a mark never leaves a stray rule at the start of the row. */
.rb-logostrip__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: var(--rb-ref-border-hairline);
  /* NORMALISED: reference rule was 29.91px tall — snapped to the 4px grid. */
  height: var(--rb-ref-space-7);
  margin-top: calc(var(--rb-ref-space-7) / -2);
  background: var(--rb-sys-border-strong);
}
.rb-logostrip__item:first-child::before { content: none; }
.rb-logostrip__item:nth-child(1 of :not([hidden]))::before { content: none; }

/* --- Marks ----------------------------------------------------------------
   Optically sized, not box-sized: each mark is a ratio of the shared cap.
   The ratios are the reference's measured painted heights against a 20px cap —
   Adobe 11.94 · Carhartt 11.63 · Iron Mountain 18.53 · Pepsi 20.55 ·
   Home Depot 17.52 — so the marks carry equal visual weight rather than equal
   bounding boxes. `max-width` (global) keeps a wide wordmark inside its slot. */
.rb-logostrip__mark {
  height: calc(var(--rb-logostrip-cap) * var(--rb-logostrip-optical, 1));
  width: auto;
}

.rb-logostrip__item[data-logo="adobe"]         { --rb-logostrip-optical: 0.6; }
.rb-logostrip__item[data-logo="carhartt"]      { --rb-logostrip-optical: 0.6; }
.rb-logostrip__item[data-logo="iron-mountain"] { --rb-logostrip-optical: 0.925; }
.rb-logostrip__item[data-logo="pepsi"]         { --rb-logostrip-optical: 1; }
.rb-logostrip__item[data-logo="home-depot"]    { --rb-logostrip-optical: 0.875; }

/* Text-based wordmarks (see markup note): pure-caps lockups set in the same
   optical system. `--rb-logostrip-track` is each mark's letterfit — SIEMENS
   and FUJITSU run wide, 3M sets tight with its glyphs nearly touching. */
.rb-logostrip__item[data-logo="siemens"] { --rb-logostrip-optical: 0.6;  --rb-logostrip-track: 0.12em; }
.rb-logostrip__item[data-logo="fujitsu"] { --rb-logostrip-optical: 0.6;  --rb-logostrip-track: 0.10em; }
.rb-logostrip__item[data-logo="3m"]      { --rb-logostrip-optical: 0.7;  --rb-logostrip-track: -0.05em; }
.rb-logostrip__item[data-logo="philips"] { --rb-logostrip-optical: 0.6;  --rb-logostrip-track: 0.08em; }

/* The word marks measure against the cap through their font-size: cap height
   in the functional stack is ~0.72em, so caps land exactly at
   cap × optical — the same painted height the SVG ratios produce. The
   negative end margin swallows the letter-spacing after the last glyph so
   the mark centres on its letters, not on a trailing space. */
.rb-logostrip__mark--word {
  height: auto;
  font-family: var(--rb-sys-font-functional);
  font-weight: var(--rb-ref-weight-bold);
  font-size: calc(var(--rb-logostrip-cap) * var(--rb-logostrip-optical, 1) / 0.72);
  line-height: 1;
  letter-spacing: var(--rb-logostrip-track, 0.08em);
  margin-inline-end: calc(var(--rb-logostrip-track, 0.08em) * -1);
  white-space: nowrap;
}

/* The Iron Mountain peaks overlap; the source mark paints each at three
   quarters of the wordmark's tone so the overlaps read darker. */
.rb-logostrip__peaks { fill-opacity: 0.75; }

/* --------------------------------------------------------------------------
   TABLET AND UP — marks reach full size, rules sit 24px clear of them
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .rb-logostrip__strip { --rb-logostrip-cap: var(--rb-ref-space-5); }  /* 20px */
  .rb-logostrip__item  { padding-inline: var(--rb-ref-space-6); }      /* 24px */
}

/* --------------------------------------------------------------------------
   DESKTOP — the row tightens
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .rb-logostrip__strip { height: var(--rb-ref-space-10); }             /* 56px */
}