/* =====================================================
   Button Styles – Qubic3D
   Only two visual variants: primary (filled) & ghost (outline)
   ===================================================== */

/* ------------------------------------------------------------------
   Fluid button sizing via CSS clamp().
   Buttons shrink slightly on small screens but never below
   comfortable touch-target sizing (≈40px height).
-------------------------------------------------------------------*/

.btn {
  --btn-fs:  clamp(.9rem,   0.45vw + .8rem, 1rem);      /* fluid font */
  --pad-y:   clamp(.65rem,  0.6vw,           .75rem);   /* vertical   */
  --pad-x:   clamp(1rem,    1.6vw,           1.5rem);   /* horizontal */

  display: inline-block;
  font-size: var(--btn-fs);
  padding-block: var(--pad-y);
  padding-inline: var(--pad-x);
  font-weight: 600;
  font-family: inherit;
  border: none;
  appearance: none;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--motion-fade) var(--ease-out),
              box-shadow  var(--motion-fade) var(--ease-out),
              background  var(--motion-fade) var(--ease-out),
              color       var(--motion-fade) var(--ease-out);
  /* Touch target minimum */
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  /* reuse lift-hover behaviour */
}

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

/* Touch feedback for mobile */
.btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* Disable hover effects on touch devices */
@media (hover: none) {
  .btn:hover {
    transform: none;
  }
  
  .btn:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

/* Full-width buttons in certain contexts on mobile */
@media (max-width: 767px) {
  .hero__actions .btn {
    width: 100%;
  }
  
  .form-actions .btn {
    width: 80%;
  }
}

/* remove global link underline animation inside buttons */
.btn::after {
  content: none !important;
}

/* Filled gradient button */
.btn--primary {
  color: #fff;
  background: linear-gradient(90deg, #005AED, #8D29FF, #E300FF);
  box-shadow: 0 4px 12px rgba(0,90,237,.25);
}
.btn--primary:hover { box-shadow: 0 4px 16px rgba(0,90,237,.4); }

/* Outline / ghost button */
.btn--ghost {
  background: transparent;
  color: var(--c-text-hi);
  border: 1px solid var(--c-text-low);
  box-shadow: none; /* default (no glow) */
}
.btn--ghost:hover {
  border-color: var(--c-grad-a);
  color: var(--c-grad-a);
  box-shadow: 0 4px 16px rgba(35,107,255,.35); /* soft glow */
}

/* ------------------------------------------------------------------
   XL size utility – bumps fluid range up one notch
-------------------------------------------------------------------*/

.btn--xl {
  --btn-fs:  clamp(1rem, 0.55vw + .9rem, 1.25rem);
  --pad-y:   clamp(.8rem, 0.8vw, 1rem);
  --pad-x:   clamp(1.5rem, 2.4vw, 2rem);
  font-size: var(--btn-fs);
  padding-block: var(--pad-y);
  padding-inline: var(--pad-x);
}

/* ---------- APP STORE / PLAY STORE BUTTONS ---------- */
/* store buttons wrapper */
.store-buttons{display:flex;gap:1rem;margin-top:.5rem}

/* remove link underline animation */
.store-btn::after{content:none !important}

.store-buttons .btn{display:flex;align-items:center;gap:1rem;padding:1rem 1.75rem}
.store-buttons img{width:28px;height:28px}

.store-text{display:flex;flex-direction:column;line-height:1;text-align:left}
.store-text .tag{font-size:.75rem;letter-spacing:.05em;color:var(--c-text-low);text-transform:uppercase}
.store-text .name{font-size:1.15rem;font-weight:600;color:var(--c-text-hi)}

@media(max-width:899px){
  .store-buttons{justify-content:center}
}