/* ============================================================
   Family & Lifestyle Medicine — Button component and its variants
   Part 03 of 11. The cascade depends on load order:
   these files must stay linked in numeric sequence (see any page <head>).
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--crimson);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.65rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  line-height: 1.2;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              background-color .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease);
}
.btn svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

/* Gradients cannot be interpolated, so the swap on hover is instant while the
   lift and shadow still ease — which reads as intended rather than as a glitch
   because the two ends of each ramp are close together. */
.btn--primary {
  background: var(--grad-crimson);
  box-shadow: var(--shadow-crimson);
}
.btn--primary:hover { background: var(--grad-crimson-deep); }

.btn--outline {
  background: transparent; color: var(--crimson); border-color: rgba(155, 27, 47, .35);
}
.btn--outline:hover { background: var(--crimson); color: #fff; border-color: var(--crimson); }

.btn--ghost {
  background: transparent; color: var(--slate); border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--slate); background: rgba(62, 92, 107, .07); }

.btn--light { background: var(--grad-surface); color: var(--crimson); box-shadow: var(--shadow-md); }
.btn--light:hover { background: var(--grad-surface-hover); }

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

.btn--sm { padding: .6rem 1.15rem; font-size: .86rem; }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .93rem; color: var(--crimson);
}
.link-arrow svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s var(--ease);
}
.link-arrow:hover svg { transform: translateX(5px); }