/*
 * Shared logo layout. Load after the page and component stylesheets.
 * Colours come from brand-tiles.css before JavaScript, then TIPS_BRANDS.
 * Native logo sources are never resized, cropped or replaced.
 */

/* Contain is also safe for intentionally small inline brand icons. */
img[data-brand] {
  object-fit: contain !important;
  object-position: center;
  box-sizing: border-box;
}

/* A failed native asset keeps its original alt text, not substitute artwork. */
.brand-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--logo-width, 96px);
  height: var(--logo-height, 56px);
  padding: var(--logo-padding, 6px);
  border: 1px solid var(--color-border, currentColor);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--color-text, inherit);
  background: var(--color-surface, transparent);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  flex: 0 0 auto;
}

img[data-brand-logo-missing="1"] {
  display: none !important;
}

.bonus-logo-plate > .brand-logo-fallback {
  width: 100%;
  height: 100%;
}

/*
 * Explicit component targets prevent a small navigation, result or CTA icon
 * from inheriting a card-sized plate. The approved bonus-page sizes are owned
 * by bonus-comparison.css and are deliberately absent from these selectors.
 */
:is(
  .tcz-row__logo > img,
  .bcz-brand-panel > img,
  .bk-cell > img.bk-logo-sm,
  .bbt-brand > img,
  .bbt-logo > img,
  img.bbt-logo,
  .bc-logo-wrap > img,
  .bb-card-header > img.site-brand-logo,
  .promo-brand > img,
  .all-book-table td img[data-brand],
  .check-logo-wrap > img.check-logo,
  .top5-brand > img,
  .promo-hero-header > img.brand-logo,
  .bonus-hero-top > img.brand-logo,
  .review-sidebar .sidebar-card > img.brand-logo,
  .ac-logo-wrap > img
) {
  display: block;
  flex: 0 0 auto;
  width: var(--logo-width, 96px) !important;
  height: var(--logo-height, 56px) !important;
  min-width: var(--logo-width, 96px) !important;
  max-width: var(--logo-width, 96px) !important;
  min-height: var(--logo-height, 56px) !important;
  max-height: var(--logo-height, 56px) !important;
  padding: var(--logo-padding, 6px) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  object-fit: contain !important;
  object-position: center;
  box-sizing: border-box !important;
}

/* Size only existing, dedicated image plates, never their rows or cards. */
:is(
  .tcz-row__logo,
  .bcz-brand-panel,
  .bbt-logo:not(img),
  .bc-logo-wrap,
  .check-logo-wrap,
  .top5-brand,
  .ac-logo-wrap
) {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: var(--logo-width, 96px) !important;
  min-width: var(--logo-width, 96px) !important;
  max-width: var(--logo-width, 96px) !important;
  height: var(--logo-height, 56px) !important;
  min-height: var(--logo-height, 56px) !important;
  max-height: var(--logo-height, 56px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-sizing: border-box;
  overflow: hidden;
}

:is(.tcz-row__logo, .bcz-brand-panel, .ac-logo-wrap) {
  --logo-width: 104px;
  --logo-height: 64px;
  --logo-padding: 8px;
}

.tcz-row__logo {
  margin: 16px 16px 0;
}

.promo-hero-header > img.brand-logo,
.bonus-hero-top > img.brand-logo,
.review-sidebar .sidebar-card > img.brand-logo,
.promo-hero-header > .brand-logo-fallback,
.bonus-hero-top > .brand-logo-fallback,
.review-sidebar .sidebar-card > .brand-logo-fallback {
  --logo-width: 144px;
  --logo-height: 88px;
  --logo-padding: 12px;
}

.review-sidebar .sidebar-card > img.brand-logo,
.review-sidebar .sidebar-card > .brand-logo-fallback {
  margin: 0 auto 12px !important;
}

:is(.promo-hero-header, .bonus-hero-top, .review-sidebar .sidebar-card) > .brand-logo-fallback {
  display: flex;
}

/*
 * The helper sets this token only on images and verified image-only wrappers.
 * With JavaScript disabled the declaration is not added, so the existing
 * generated brand plates and authored fallback plates remain intact.
 */
[data-brand-applied="1"][style*="--brand-plate"] {
  background-color: var(--brand-plate) !important;
}

@media (max-width: 720px) {
  .top5-brand {
    --logo-width: 80px;
    --logo-height: 48px;
    --logo-padding: 4px;
  }
}

@media (max-width: 600px) {
  :is(
    .promo-hero-header > img.brand-logo,
    .bonus-hero-top > img.brand-logo,
    .promo-hero-header > .brand-logo-fallback,
    .bonus-hero-top > .brand-logo-fallback
  ) {
    --logo-width: 128px;
    --logo-height: 80px;
    --logo-padding: 10px;
  }
}