/* Значки сторов на лэндингах проектов: «Download on the App Store» и «Get it on
   Google Play». Один файл на все лэндинги, разметку ставит _tools/store_badge.py.

   Файлы значков официальные и не тронуты: SVG Apple с developer.apple.com,
   PNG Google с play.google.com. Свои кнопки с яблоком здесь стояли раньше, но
   гайдлайны Apple логотип в самодельной кнопке не разрешают — только значок.

   Высоту задаёт страница через --badge-size, под высоту своих кнопок в том же
   ряду; на телефоне значок не выше 48 px. Ширину значок берёт из пропорций
   сам. У PNG Google вокруг значка прозрачное поле 41 px со всех сторон при
   видимой высоте 168 из 250 —
   отрицательным полем его убираем, чтобы видимые высоты двух значков совпали:
   гайдлайны Google просят значок не меньше соседнего. */

.store-badge {
  --badge-h: var(--badge-size, 52px);
  display: inline-flex; flex: none;
  border-radius: calc(var(--badge-h) * 0.22);
  line-height: 0; text-decoration: none;
  transition: transform 0.15s ease;
}
.store-badge img { display: block; width: auto; height: var(--badge-h); }

.store-badge--play { overflow: hidden; }
.store-badge--play img {
  height: calc(var(--badge-h) * 250 / 168);
  margin: calc(var(--badge-h) * -41 / 168);
}

.store-badge:hover { transform: translateY(-1px); }
.store-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (max-width: 600px) {
  .store-badge { --badge-h: min(var(--badge-size, 52px), 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .store-badge { transition: none; }
  .store-badge:hover { transform: none; }
}