---
/* One partner logo, two states. At rest: an ink silhouette (the image's alpha is the mask), so a
   logo drawn for a dark ground reads as print on paper. On hover of the surrounding
   `[data-partner]`: the original colours on night, the ground they were drawn for. */
interface Props { name: string; src: ImageMetadata; url: string; h: string }
const { name, src, url, h } = Astro.props;
---
<span class="logo" style={`--logo: url(${url}); --logo-h: ${h}; --ratio: ${src.width / src.height};`}>
  <span class="logo__ink" aria-hidden="true"></span>
  <img class="logo__original" src={url} alt={name} width={src.width} height={src.height} loading="lazy" decoding="async" />
</span>

<style>
  .logo { display: grid; justify-items: start; width: 100%; }
  /* The set height, or smaller where the column is too narrow for it. */
  .logo > * { grid-area: 1 / 1; width: min(100%, var(--logo-h) * var(--ratio)); height: auto; aspect-ratio: var(--ratio); }
  .logo__ink {
    display: block;
    background: var(--ink);
    mask: var(--logo) left center / contain no-repeat;
    transition: opacity var(--dur-fast) var(--ease);
  }
  /* Kept in the layout for its alt text; shown only on hover. */
  .logo__original {
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
  }
  @media (hover: hover) {
    :global([data-partner]:hover) .logo__ink { opacity: 0; }
    :global([data-partner]:hover) .logo__original { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .logo__ink, .logo__original { transition: none; }
  }
</style>