/* HIR company logos: neutral white tile, thin soft border, square corners (HIR radius 2px).
   Three sizes. Each <img> carries the width/height from logos.json for that size, so wide
   wordmarks and square marks read at a similar visual weight. No eyebrows, no accent bars. */
.hir-logo {
  display: flex; align-items: center; justify-content: center;
  flex: none; margin: 0; box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid var(--line-soft, #D0D0D0);
  border-radius: 2px;
}
.hir-logo img { display: block; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Review hero: same height as the 6.5rem score stamp, sits to the right of the name block */
.hir-logo--hero { width: 13.5rem; height: 6.5rem; padding: 1rem 1.25rem; }
.hir-logo--hero img { max-height: 56px; }

/* Compare header and homepage featured card */
.hir-logo--card { width: 10rem; height: 4.75rem; padding: 0.75rem 1rem; }
.hir-logo--card img { max-height: 40px; }

/* Directory rows and category cards: same height as the 2.75rem directory stamp */
.hir-logo--row { width: 7rem; height: 2.75rem; padding: 0.3rem 0.5rem; }
.hir-logo--row img { max-height: 28px; }
/* No official logo: keep the column so names stay aligned, but show nothing (never a placeholder tile) */
.hir-logo--none { border-color: transparent; background: transparent; }

/* Review hero layout: name block left, logo tile right */
.review-hero__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1.5rem; align-items: start; }
.review-hero__head .hir-logo--hero { margin-top: 0.1rem; }

/* Directory rows: logo | name and type | score */
.dir-row--logo { grid-template-columns: 7rem minmax(0, 1fr) auto; }
a.dir-row--logo:hover .hir-logo { border-color: var(--line, #0A0A0A); }

/* Compare page header: two logos side by side under the H1 */
.cmp-logos { display: flex; align-items: center; gap: 0.85rem; margin: 0.25rem 0 1.25rem; }
.cmp-logos__vs { font-family: var(--display); font-size: 1.1rem; color: var(--mute, #5C5C5C); }

@media (max-width: 640px) {
  .dir-row--logo { grid-template-columns: 5rem minmax(0, 1fr) auto; gap: 0.6rem 0.75rem; }
  .dir-row--logo .hir-logo--row { width: 5rem; height: 2.25rem; padding: 0.3rem 0.4rem; }
  .dir-row--logo .hir-logo--row img { max-height: 22px; }
  .hir-logo--card { width: 8.5rem; height: 4rem; padding: 0.6rem 0.75rem; }
  .hir-logo--card img { max-height: 34px; }
}

/* Phones: the review hero stacks, so the logo tile pairs with the score stamp on one row */
@media (max-width: 640px) {
  .review-hero__grid { position: relative; }
  .review-hero__head { grid-template-columns: 1fr; }
  .review-hero__head .hir-logo--hero {
    position: absolute; top: 0; left: calc(6.5rem + 0.85rem);
    width: min(13.5rem, calc(100% - 6.5rem - 0.85rem)); height: 6.5rem;
    order: 0; margin: 0; padding: 0.85rem 1rem;
  }
  .review-hero__head .hir-logo--hero img { max-height: 48px; }
}

/* Logos drawn for dark backgrounds (e.g. a yellow or white wordmark): ink tile, colours untouched */
.hir-logo--ink { background: var(--ink, #0A0A0A); border-color: var(--ink, #0A0A0A); }

/* HIR Bot rollout additions (Nov 2 2026): homepage Featured review and review cards */
.featured > div.featured__marks, .featured.featured--in-split > div.featured__marks { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.6rem; width: auto; flex: none; }
@media (max-width: 640px) { .featured__marks .hir-logo--card { width: 5.75rem; height: 3.25rem; padding: 0.4rem 0.45rem; } .featured__marks .hir-logo--card img { max-height: 26px; } }
.featured__marks .stamp { margin: 0; }
.dossier > .hir-logo--row { grid-column: 1; justify-self: start; margin-bottom: 0.2rem; }
.dossier--logo > .dossier__score { grid-row: 1 / span 4; }
.dossier__body > .hir-logo--row { margin: 0 0 0.5rem; }