/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 28px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--syn-green-500); color: #fff; }
.btn--primary:hover { background: var(--syn-green-600); color: #fff; }
/* Section CTA (Figma 1139:4826), same component as the hero primary: the
   icon disc swells to fill the button on hover (1413:4107). */
.btn--raised {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid var(--syn-green-500);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(45, 106, 45, 0.3);
  transition: color 0.35s ease;
}
.btn--raised::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  inset-inline-end: 28px;
  width: 24px; height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.45s ease;
}
.btn--primary.btn--raised:hover,
.btn--primary.btn--raised:focus-visible { background: var(--syn-green-500); color: var(--syn-green-500); }
.btn--raised:hover::before,
.btn--raised:focus-visible::before { transform: scale(32); }
@media (prefers-reduced-motion: reduce) {
  .btn--raised::before { transition: none; }
}

.btn--accent { background: var(--syn-orange); color: #fff; }
.btn--accent:hover { background: var(--syn-orange-600); color: #fff; }

/* On dark or photo backgrounds, filled buttons take a white outline on hover
   (Figma button sets 138:2956, 171:1366, 288:1820). The darker fill above
   stays for buttons on white, where a white outline would be invisible. */
.card-grid--numbered .btn--accent { border-radius: var(--r-pill); background: var(--syn-amber); }
.card-grid--numbered .btn--accent:hover,
.card-grid--numbered .btn--accent:focus-visible { border-color: #fff; background: var(--syn-amber); }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.85); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

.btn--pill { border-radius: var(--r-pill); }
.btn--sm { gap: 8px; padding: 10px 24px; font-size: 0.84rem; border-radius: 8px; }