/* Logo partnera logistycznego — arkusz `template-parts/partner-logo.php`.
 *
 * Jasna płytka pod ciemnym znakiem: ten sam wzorzec co znaki płatności
 * w stopce (`footer.css`, „Znaki płatności na jasnych płytkach"). Cudzego
 * logotypu się nie przerabia, więc to płytka dopasowuje się do tła, nie znak.
 *
 * Wysokość znaku przychodzi zmienną `--szewko-partner-h` z partu (stopka 42 px,
 * rachunek 36 px). Płytka ma wyściółkę 8 px w pionie, więc cel dotykowy
 * wychodzi ≥ 52 px — powyżej 44 px, których projekt pilnuje wszędzie. */

.szewko-partner-logo {
  --szewko-partner-h: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  background: var(--color-parchment);
  color: var(--color-smoked-tent);
  transition: background-color 200ms var(--ease-desert);

  & svg {
    display: block;
    width: auto;
    height: max(36px, var(--szewko-partner-h));
    aspect-ratio: 74 / 50;
  }

  &:hover {
    background: var(--color-bleached-linen);
  }

  &:focus-visible {
    outline: 2px solid var(--color-brass-lantern);
    outline-offset: 3px;
  }
}