/*
 * Fixes carried on top of the mirrored WordPress theme.
 * Hand-written - not produced by the crawl. Injected into every page by
 * scripts/clean.mjs, so it survives a re-crawl.
 */

/*
 * Video embeds are pasted into posts with hardcoded width="560" height="315",
 * which pushes the page to 580px wide inside a 375px viewport and makes the
 * whole document scroll sideways. (Pre-existing on the WordPress site.)
 *
 * max-width without width keeps the attribute width on desktop - so wide
 * screens render exactly as before - while allowing the iframe to shrink on
 * narrow ones. aspect-ratio then keeps the height proportional instead of
 * leaving it pinned at the attribute value and letterboxing the video.
 */
iframe[src*="youtube.com"],
iframe[src*="youtu.be"],
iframe[src*="facebook.com/plugins/video"] {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/*
 * /results/ reuses the blog card component (.blog-bar), whose image slot is
 * built for landscape cover photos: `object-fit: cover` at a fixed 216px.
 * Client logos have wildly different aspect ratios and transparent margins,
 * so cover-cropping them looks broken. Contain them instead, on a white panel
 * with breathing room. Scoped to the results archive so /blog/ is untouched.
 */
.post-type-archive-results .blog-bar .inner .image {
  height: 216px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  box-sizing: border-box;
  background: #FFF;
  border-bottom: 1px solid #F3BAB0;
}
/*
 * Never upscale. The supplied logos range from 376x74 down to TOA Global at
 * 100x53 - stretching that one to card width made it blurry and clipped. Using
 * max-* with auto sizing means a large logo scales DOWN to fit and a small one
 * simply renders at its native size, crisp, centred in the panel.
 */
.post-type-archive-results .blog-bar .inner .image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Hover on a contained logo should not zoom-crop it. */
.post-type-archive-results .blog-bar .inner:hover .image img {
  transform: none;
}

/* Technoledge has no logo asset anywhere on the site. Rather than an empty
   slot, its card shows the client name set in the site's display serif. */
.post-type-archive-results .blog-bar .inner .image--wordmark {
  height: 216px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  border-bottom: 1px solid #F3BAB0;
}
.post-type-archive-results .blog-bar .inner .image--wordmark span {
  font-family: 'Gelasio', Georgia, serif;
  font-size: 34px;
  line-height: 1.1;
  color: #1E1F2B;
  text-align: center;
  padding: 0 24px;
}