/* =========================================================================
   Element · Button / CTA — Figma 7034:1238 (page Global: Elements)
   Style=Filled → .e-button-cta--filled   Style=Outline → .e-button-cta--outline
   Hover/Focus and Disabled are drawn beside the set (UI Set 1 Light,
   213:6899): hover = ink (Black), disabled = Black 20.
   Motion: the old prototype's — the colour change is .12s linear.
   ========================================================================= */
.e-button-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: var(--spacing-stack-m);          /* spacing/stack-m on all four sides */
  max-height: 64px;                         /* Figma: max-h 64, raw — at 1920 (stack-m 32) it clips the padding, the label stays centred */
  border: 0;
  border-radius: var(--radius-box);
  background: var(--color-blue);
  color: var(--color-white);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--ds-ink-duration) var(--ds-ink-ease),
              color            var(--ds-ink-duration) var(--ds-ink-ease),
              box-shadow       var(--ds-ink-duration) var(--ds-ink-ease);
}
.e-button-cta__label { display: block; }
/* Figma rounds the label's trimmed box (the cap height) to a whole pixel;
   so does this, so the button is exactly Figma's height */
@supports (text-box: trim-both cap alphabetic) {
  .e-button-cta__label { height: round(nearest, 1cap, 1px); }
}

/* Outline: a 1.5px stroke inside the box (Figma: raw 1.5, not in layout) */
.e-button-cta--outline {
  background: transparent;
  color: var(--color-blue);
  box-shadow: inset 0 0 0 1.5px var(--color-blue-40);
}

@media (any-hover: hover) {
  .e-button-cta--filled:is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) {
    background: var(--color-black);
  }
  .e-button-cta--outline:is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) {
    color: var(--color-black);
    box-shadow: inset 0 0 0 1.5px var(--color-black);
  }
}

.e-button-cta:is(:disabled, [aria-disabled="true"]) { cursor: default; pointer-events: none; }
.e-button-cta--filled:is(:disabled, [aria-disabled="true"]) { background: var(--color-black-20); }
.e-button-cta--outline:is(:disabled, [aria-disabled="true"]) {
  color: var(--color-black-30);
  box-shadow: inset 0 0 0 1.5px var(--color-black-20);
}

@media (prefers-reduced-motion: reduce) {
  .e-button-cta { transition: none; }
}