/* ============================================================
   Partner logo wall  (set-width bounding-box model)
   - Every logo fits inside a box: W wide x H tall, object-fit: contain.
   - W (--logo-box-w) is the "set width" lever — the dimension that
     normalizes the wall. The client control sets it inline via
     --logo-box-w-desktop; the media queries override --logo-box-w
     directly at narrower widths so responsiveness still wins.
   - H (--logo-box-h) is a height ceiling derived from W, so tall/square
     emblems can't tower over the wordmarks.
   - --logo-scale is the per-logo multiplier; it scales that one logo's
     box up/down for outliers.
   Widths come out consistent; heights vary within the box (a wide wordmark
   fills the width and is short, a square emblem fills the height) — but no
   single logo can blow out wider than the set width.
   ============================================================ */

.company-logos {
  --logo-box-w: var(--logo-box-w-desktop, 150px);
  --logo-box-h: calc(var(--logo-box-w) * 0.5); /* height ceiling ~ 2:1 box (was 0.4) */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  max-width: 1490px;
  margin: 0 auto !important;
}

.company-logos .logo-cell {
  flex: 0 1 auto;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  box-sizing: border-box;
}

.company-logos img {
  max-width: calc(var(--logo-box-w) * var(--logo-scale, 1));
  max-height: calc(var(--logo-box-h) * var(--logo-scale, 1));
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Narrower box as the viewport shrinks. */
@media (max-width: 1200px) {
  .company-logos { --logo-box-w: 120px; }
}

@media (max-width: 900px) {
  .company-logos { --logo-box-w: 108px; }
}

@media (max-width: 600px) {
  .company-logos {
    --logo-box-w: 96px;
    gap: 4px 8px;
  }

  .company-logos .logo-cell { padding: 10px 6px; }
}