/* =========================================================================
   Buttons — pill-shaped
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1;
  min-height: 3rem;            /* M3 comfortable touch target (>=48px) */
  padding: 0.85em 1.8em;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px) scale(0.99); }

/* Primary — red field, cream text */
.btn--primary {
  background: var(--red);
  color: var(--on-red);
  border-color: var(--red);
  box-shadow: var(--shadow-red);
}
.btn--primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: var(--on-red);
  transform: translateY(-2px);
}
.btn--primary:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

/* Ghost — navy outline */
.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--ghost:hover {
  background: var(--navy);
  color: var(--cream);
  transform: translateY(-2px);
}
.btn--ghost:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* Email — solid navy with a generic envelope icon (provider-neutral; the link
   is a plain mailto: so it opens whatever mail app the visitor uses). */
.btn--email {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
  box-shadow: 0 6px 18px rgba(42, 59, 110, 0.3);
}
.btn--email:hover {
  background: #22305c;
  border-color: #22305c;
  color: var(--cream);
  transform: translateY(-2px);
}
.btn--email:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}
.btn--email .btn__icon { width: 1.2em; height: 1.2em; }

/* Instagram — the brand's warm multicolor gradient (orange → magenta, no the
   cool indigo end so it doesn't read as a stray dark-blue patch). */
.btn--instagram {
  background: linear-gradient(45deg, #f9a13b 0%, #e66c3a 28%, #dc2743 55%, #cc2366 78%, #bc1888 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(204, 35, 102, 0.32);
}
.btn--instagram:hover {
  filter: brightness(1.06) saturate(1.05);
  color: #fff;
  transform: translateY(-2px);
}
.btn--instagram:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.btn--sm { font-size: var(--fs-sm); min-height: 2.75rem; padding: 0.65em 1.3em; }
.btn--block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn:hover,
  .btn:active { transform: none; }
}