/* =========================================================
   Shared components — usable across all pages/sections
   ========================================================= */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 52px;
  padding: 0 var(--space-5);
  border-radius: 10px;
  font-family: var(--font-family-base);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
  white-space: nowrap;
  box-shadow: 0 4px 7px rgba(130, 130, 130, .12);
}
.btn:active { transform: translateY(1px); }
.btn:hover  { filter: brightness(1.05); }

.btn--primary {
  min-width: 159px;
  background: var(--gradient-blue);
  color: var(--color-white);
  border-color: rgba(51, 51, 51, .2);
}

.btn--accent {
  min-width: 159px;
  background: var(--gradient-orange);
  color: var(--color-white);
  border-color: rgba(51, 51, 51, .2);
}

/* Outlined button with gradient TEXT */
.btn--gradient-text {
  min-width: 159px;
  background-color: var(--color-white);
  background-image: var(--gradient-blue);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  border-color: var(--color-secondary);
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .btn--gradient-text {
    color: var(--color-secondary);
    -webkit-text-fill-color: currentColor;
    background: var(--color-white);
  }
}