/*
 * Hand-maintained. Pairs with tools/fragments/bid-quotes.mjs — the five real
 * customer testimonials in /bid's #social-proof grid.
 *
 * THREE RULES, and the fragment's header says why there are any rather than none.
 * The capture's card on this page is quote / avatar / byline with no logo slot,
 * and src/styles/product.css is frozen Tailwind output that emits no
 * .card--has-logo, .max-h-[40px], .h-auto, .max-w-full or .object-left — so
 * /automate's logo strip cannot be lifted here as it stands. Everything around
 * the mark uses classes that sheet does emit (mb-v1 flex w-full items-start);
 * this sizes the mark itself.
 *
 * 44px is LOGO_BOX in the fragment, which is the emitted viewBox's height — so
 * one svg unit is one pixel and each mark's ink stands exactly
 * `44 * logoScale` tall. `width: auto` lets the viewBox's own aspect set the
 * width, which is what keeps a wordmark and a badge on the same baseline
 * without a second number here. Move the height and the fit follows; there is
 * nothing to re-measure.
 *
 * No colour is declared. Both marks are drawn in `currentColor` by the same
 * black -> currentColor pass the logo garden runs, so they take the card's own
 * text colour and need no dark variant.
 */
.bq-logo {
  display: block;
  height: 44px;
  width: auto;
  flex-shrink: 0;
}

/*
 * The monogram two of the five cards carry in place of a photograph, no
 * picture of Arley Garza or James Ramos existing on this machine. The
 * `avatar-border-container` around it is the capture's and already clips to a
 * circle and draws the hairline, so this only has to FILL that box — no
 * radius, no border, and no size of its own beyond 100%. Delete a card's
 * `mono` for a `photo` when one arrives and nothing here has to move.
 *
 * The two colours are theme tokens the captured sheet already declares in both
 * themes, so this needs no dark block: `card-03` is the step of card fill this
 * page's own mockup frames sit on, and `text-sec` is the byline's own ink one
 * line below — which is the point, a monogram being a stand-in rather than a
 * face and having no business being the loudest thing in the row.
 *
 * 0.8125rem is 13px, which is what two capitals need to sit inside a 40px
 * circle with the hairline clear of them. `line-height: 1` because the flex
 * centring does the work and a leading half-line would push them low.
 */
.bq-mono {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: var(--color-theme-card-03-hex);
  color: var(--color-theme-text-sec);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}

/*
 * Talbert Companies' mark, which is the one PNG among the six and is painted
 * through a CSS mask rather than an svg one. The fragment's header carries the
 * reason: the temporary card gallery harvests these cards onto every page and
 * captured-cards.mjs rewrites every `id="…"` without rewriting the
 * `mask="url(#…)"` that points at it, so an svg <mask id> would render as a
 * solid block everywhere but /bid. A CSS mask has no id. This is the same
 * treatment integrations.css gives B2W and Procore.
 *
 * The file is committed under public/brand/ — never public/assets, which
 * 01-assets.mjs wipes on every run — and it is a white-on-transparent alpha
 * mask, so `mask-mode: match-source` resolves to its alpha and the span's own
 * `currentColor` background shows through exactly where the logo had ink. It
 * therefore follows the theme and needs no dark variant, like every other mark
 * on these cards.
 *
 * Height is LOGO_BOX, as .bq-logo's is. WIDTH IS NOT HERE: the fragment emits
 * it inline, derived from the mark's own measured ink aspect, so a re-measure
 * moves it without touching this file. `contain` then fits the picture inside
 * that box, which at the derived width is exactly edge to edge.
 */
.bq-logo--talbert {
  display: block;
  height: 44px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url(/brand/customers/talbert-companies-mask.png) no-repeat center / contain;
  mask: url(/brand/customers/talbert-companies-mask.png) no-repeat center / contain;
}