/* Zdieľané štýly pre blok "stiahni appku" (React: StoreCta.jsx, statické stránky: blog/store-cta.mjs).
   Poradie odznakov a webové tlačidlo riadi atribút na <html> (data-os, data-phone), ktorý nastaví
   malý inline skript v <head> ešte pred prvým vykreslením, takže nič neskáče. */
.store-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.store-cta--left { align-items: flex-start; }
.store-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.store-cta--left .store-badges { justify-content: flex-start; }

.store-badge { display: block; flex: none; border-radius: 8px; transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1); -webkit-tap-highlight-color: transparent; }
.store-badge img { display: block; max-width: none; }
/* --badge-h = viditeľná výška čierneho odznaku (oba odznaky rovnako vysoké, SK aj EN rovnaké pravidlo). */
.store-cta { --badge-h: 56px; }
@media (max-width: 430px) { .store-cta { --badge-h: 52px; } }
.store-badge--apple { width: calc(var(--badge-h) * 3); height: var(--badge-h); }
.store-badge--apple img { width: 100%; height: 100%; }
/* Google PNG (646x250) má priehľadný okraj 41 px; čierny odznak je 564x168. Okraj orežeme len ako
   priehľadnú plochu, aby focus ring obkolesoval čierny odznak. */
.store-badge--google { width: calc(var(--badge-h) * 564 / 168); height: var(--badge-h); overflow: hidden; border-radius: 7px; }
.store-badge--google img { width: calc(var(--badge-h) * 646 / 168); height: calc(var(--badge-h) * 250 / 168); margin: calc(var(--badge-h) * -41 / 168) 0 0 calc(var(--badge-h) * -41 / 168); }
html[data-os="android"] .store-badge--google { order: -1; }

.store-web {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 20px; border-radius: 14px;
  border: 1.5px solid rgba(23, 48, 65, 0.22); background: rgba(255, 255, 255, 0.7); color: #173041;
  font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: -0.01em;
  transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.store-web:hover { background: #fff; border-color: rgba(23, 48, 65, 0.4); }
.store-web svg { width: 16px; height: 16px; flex: none; }
/* Na telefóne webová verzia nemá zmysel: web app tam aj tak presmeruje do obchodov. */
html[data-phone] .store-web { display: none; }

.store-cta--dark .store-web { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.08); color: #fff; }
.store-cta--dark .store-web:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }

/* Okamžitá spätná väzba pri stlačení. */
.store-badge:active, .store-web:active { transform: scale(0.97); }

/* Viditeľný focus ring len pri ovládaní klávesnicou. */
.store-badge:focus-visible, .store-web:focus-visible { outline: 3px solid #1f7a30; outline-offset: 3px; }
.store-cta--dark .store-badge:focus-visible, .store-cta--dark .store-web:focus-visible { outline-color: #fff; }

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