/* Badge degli store (templates/partials/_store_badges.html).

   Regole di Google Play per il badge «Get it on Google Play»
   (partnermarketinghub.withgoogle.com, pagina «Lockups, icons & badges»):
   - altezza minima 28 px in digitale: qui sempre >= 40 px;
   - spazio di rispetto = 1/4 dell'altezza su ogni lato: a 44 px sono 11 px,
     il gap fra badge e il margine verso il resto sono >= 0.75rem (12 px);
   - colori e proporzioni invariati (solo `height`, `width: auto`);
   - se affiancato ad altri badge di store, almeno della stessa dimensione:
     stessa altezza per entrambi;
   - solo su sfondi pieni o fotografie semplici con contrasto sufficiente:
     la hero ha lo scrim scuro, il badge ha il suo contorno grigio. */

.store-badges {
  --store-h: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 1.5rem 0 0;
}

.store-badge {
  display: inline-flex;
  line-height: 0;
  border-radius: 8px;
  transition: transform 0.18s ease;
}

.store-badge:hover { transform: translateY(-2px); }

.store-badge:focus-visible {
  outline: 2px solid var(--accent, #0284fe);
  outline-offset: 4px;
}

.store-badge img {
  display: block;
  height: var(--store-h);
  width: auto;
  max-width: 100%;
}

/* Nota quando lo store non c'è ancora: stessa altezza del badge, così la
   riga non salta quando arriva il link vero. */
.store-badges__note {
  font-family: var(--lp-machine, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--fg-3, #5b6675);
}

.store-badges--center { justify-content: center; }

@media (max-width: 480px) {
  /* 390 px: due badge da 40 stanno su una riga, la nota va a capo. */
  .store-badges { --store-h: 40px; }
}

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

/* Attribuzione del marchio nel footer. */
.store-legal {
  margin: 0.9rem 0 0;
  font-size: 0.72rem;
  color: var(--fg-4, #7b8794);
}