/**
 * Brand row + logo layout — pairs with js/brand-logos.js (modelLogoOverrides → brandLogos).
 * Consumers: index.html, collection.html, coolwall.html, garage.html, car.html
 *
 * Logo is readable next to the brand label but stays secondary to the model name below.
 */

.brand-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 0;
}

.brand-line .brand {
  flex: 1;
  min-width: 0;
}

.brand-logo-slot {
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-content: flex-end;
  flex-shrink: 0;
  line-height: 0;
}

/* Cards: visible mark, still smaller than the model title */
.brand-logo-img {
  display: block;
  height: 20px;
  width: auto;
  max-width: 76px;
  object-fit: contain;
  object-position: right center;
  opacity: 0.86;
  filter: grayscale(0.08) brightness(1.04);
  flex-shrink: 0;
}

/* Car detail: one step larger under the hero, same alignment */
.detail-body .brand-line {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.detail-body .brand-line .brand {
  text-align: left;
}

.detail-body .brand-logo-img {
  height: 24px;
  max-width: 88px;
  opacity: 0.9;
  filter: grayscale(0.06) brightness(1.05);
}