/* ==========================================================================
   Component: button (.cm-btn)
   Pill buttons. Primary = red fill; ghost = outline (for use on dark).
   Hover lifts -2px. Self-contained — no dependency on other components.
   ========================================================================== */

.cm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: var(--cm-radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--cm-dur) var(--cm-ease), border-color
    var(--cm-dur) var(--cm-ease), color var(--cm-dur) var(--cm-ease), transform
    var(--cm-dur) var(--cm-ease);
}

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

/* Larger hero-scale variant. */
.cm-btn--lg {
  font-size: 17px;
  font-weight: 700;
  padding: 15px 34px;
}

/* Primary — red fill, white text. The one signal colour. */
.cm-btn--primary {
  background: var(--cm-red);
  color: #fff;
}

.cm-btn--primary:hover {
  background: transparent;
  border: 1px solid #cb1313;
}

.cm-cta .cm-btn--primary:hover {
  color: white !important;
    border: 1px solid white;

}


.cm-btn--primary:active {
  background: transparent;
  border: 1px solid #cb1313;
  color: #cb1313 !important;
}

/* Ghost — transparent with a hairline border. Light-surface default. */
.cm-btn--ghost {
  background: transparent;
  border-color: var(--cm-hairline);
  color: var(--cm-ink);
}

.cm-btn--ghost:hover {
  border-color: var(--cm-ink);
}

/* Ghost on a dark/brand surface — white text + translucent border. */
.cm-btn--ghost-on-dark {
  background: transparent;
  border-color: rgba(241, 244, 247, 0.5);
  color: #fff;
}

.cm-btn--ghost-on-dark:hover {
  border-color: var(--cm-on-dark);
}